摘要：配置配置全解析項(xiàng)目配置文件文件描述項(xiàng)目配置文件項(xiàng)目代碼配置是否檢查域名安全性和版本是否將項(xiàng)目的代碼轉(zhuǎn)成是否自動(dòng)補(bǔ)全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號(hào)項(xiàng)目名項(xiàng)目配置搜索關(guān)鍵字客服編譯方式小程序配置項(xiàng)目路由設(shè)置第一項(xiàng)為首頁窗

1. 配置

配置全解析

project.config.json ( 項(xiàng)目配置文件 )

{
    // 文件描述
    "description": "項(xiàng)目配置文件",
    // 項(xiàng)目代碼配置
    "setting": {
        // 是否檢查 url 域名安全性和 TLS 版本
        "urlCheck": false,
        // 是否將項(xiàng)目的 es5 代碼轉(zhuǎn)成 es6
        "es6": true,
        // 是否自動(dòng)補(bǔ)全 css 兼容前綴
        "postcss": true,
        // 是否壓縮代碼
        "minified": true,
        // 是否啟用新功能
        "newFeature": true
    },
    // 編譯方式
    "compileType": "miniprogram",
    // 版本號(hào)
    "libVersion": "1.7.2",
    // appid
    "appid": "touristappid",
    // 項(xiàng)目名
    "projectname": "haiyangbg",
    // 項(xiàng)目配置
    "condition": {
        // 搜索關(guān)鍵字
        "search": {
            "current": -1,
            "list": []
        },
        // 客服
        "conversation": {
            "current": -1,
            "list": []
        },
        // 編譯方式
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

app.json ( 小程序配置 )

{
  // 項(xiàng)目路由設(shè)置（第一項(xiàng)為首頁）
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // 窗口設(shè)置
  "window":{
    // 頂部導(dǎo)航欄背景色，必須是十六進(jìn)制顏色值，如"#000000"
    "navigationBarBackgroundColor": "#9ef468",
    // 頂部導(dǎo)航欄顯示文字
    "navigationBarTitleText": "組件展示",
    // 導(dǎo)航欄文字顏色，僅支持 black/white
    "navigationBarTextStyle": "black",
    // 下拉背景的文字樣式，僅支持 dark/light
    "backgroundTextStyle":"light",
    // 下拉背景色，必須是十六進(jìn)制顏色值，如"#000000"
    "backgroundColor": "#333",
    // 是否開啟下拉刷新
    "enablePullDownRefresh": true,
    // 距離最底端觸多少距離時(shí)觸發(fā)觸底事件，單位px
    "onReachBottomDistance": 40
  },
  //網(wǎng)絡(luò)請(qǐng)求過期時(shí)間，單位毫秒
  "networkTimeout": {
    // 普通ajax請(qǐng)求
    "request": 20000,
    // Socket請(qǐng)求
    "connectSocket": 20000,
    // 文件上傳
    "uploadFile": 20000,
    // 文件下載
    "downloadFile": 20000
  },
  // tab導(dǎo)航欄
  "tabBar": {
    // 文字的顏色
    "color": "#999",
    // 選中時(shí)文字的顏色
    "selectedColor": "#000",
    // 背景色
    "backgroundColor": "#fff",
    // 上邊框的顏色，僅支持 black/white
    "borderStyle": "black",
    // tab導(dǎo)航欄顯示在底部還是頂部(頂部不顯示圖片)
    "position": "bottom",
    // 導(dǎo)航欄列表項(xiàng)
    "list": [{
      // 導(dǎo)航到的頁面路徑
      "pagePath": "pages/index/index",
      // tab按鈕上的文字
      "text": "組件",
      // 圖片路徑
      "iconPath": "img/com-l.png",
      // 選中后顯示的圖片
      "selectedIconPath": "img/com-d.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "API",
      "iconPath": "img/api-l.png",
      "selectedIconPath": "img/api-d.png"
    }]
  },
  // 調(diào)試信息
  "debug": true
}

page.json （ 單頁面配置 ）

單頁面的json就是app.json的window字段，當(dāng)加載到這個(gè)頁面時(shí)，此配置將覆蓋app.json

2. 生命周期

小程序 App 生命周期

onLaunch ------ 小程序初始化完成時(shí)，觸發(fā)(只會(huì)調(diào)用一次)

onShow ------ 1. 小程序啟動(dòng) 2. 從后臺(tái)進(jìn)入前臺(tái)顯示，觸發(fā)

onHide ------ 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，觸發(fā)

onError ------ 1. 發(fā)生腳本錯(cuò)誤 2. api 調(diào)用失敗，觸發(fā)并帶上錯(cuò)誤信息

---

單頁面 Page 生命周期

onLoad ------ 頁面加載時(shí)，觸發(fā)(只會(huì)調(diào)用一次)

onShow ------ 頁面顯示時(shí)，觸發(fā)

onReady ------ 初次渲染完成時(shí)，觸發(fā)(只會(huì)調(diào)用一次)

onHide ------ 頁面隱藏時(shí)，觸發(fā)

onUnload ------ 頁面卸載時(shí)，觸發(fā)

---

詳細(xì)的生命周期分類：

1.小程序啟動(dòng)：

App.onLaunch - -> App.onShow - -> 注冊(cè)app.json pages里的頁面(按索引順序) - -> 將app路由設(shè)置為首頁路由 - -> 首頁page參數(shù)深拷貝 - -> 初始化首頁 data - -> Page.onLoad - -> Page.onShow - -> Page.onReady

2.切后臺(tái)（app 和 page 生命周期重合）：

小程序被切到后臺(tái) - -> page.onHide - -> App.onHide - -> 切回小程序 - -> App.onShow - -> page.onShow

3.跳轉(zhuǎn)頁面：

old 表示前一個(gè)頁面， new 表示新頁面

navigateTo跳轉(zhuǎn) - -> 將路由設(shè)置為目標(biāo)頁面路由 - -> old.onHide - -> 初始化頁面 data - -> new.onLoad - -> new.onShow - -> new.onReady

redirectTo重定向 - -> 設(shè)置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady

navigateBack頁面返回 - -> 設(shè)置路由 - -> old.onUnload - -> init data - -> new.onShow

reLaunch重啟動(dòng) - -> 設(shè)置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady

switchTabTab 切換（圖截自官方文檔）

3. 數(shù)據(jù)綁定和渲染

數(shù)據(jù)綁定： { { message } }

渲染

列表渲染：

- wx:for=" { { message } } "  
- wx:for-index="idx" （設(shè)置索引的變量名，默認(rèn) index ） 
- wx:for-item="itemName"（設(shè)置每一項(xiàng)的變量名，默認(rèn)item ）

渲染塊：

條件渲染：

- wx:if="boolean" - wx:elif="boolean" -wx:else="boolean" == (if - else if - if)
- hidden="boolean"

4. 模板（template） 基本用法

( 定義代碼片段，可以在不同的地方調(diào)用，使用 name 屬性，作為模板的名字,調(diào)用時(shí)使用 is 屬性 )

// 源碼（需要和調(diào)用的頁面在同一個(gè)wxml里）


// 調(diào)用