摘要：配置配置全解析項目配置文件文件描述項目配置文件項目代碼配置是否檢查域名安全性和版本是否將項目的代碼轉成是否自動補全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號項目名項目配置搜索關鍵字客服編譯方式小程序配置項目路由設置第一項為首頁窗

1. 配置

配置全解析

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

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

app.json ( 小程序配置 )

{
  // 項目路由設置（第一項為首頁）
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // 窗口設置
  "window":{
    // 頂部導航欄背景色，必須是十六進制顏色值，如"#000000"
    "navigationBarBackgroundColor": "#9ef468",
    // 頂部導航欄顯示文字
    "navigationBarTitleText": "組件展示",
    // 導航欄文字顏色，僅支持 black/white
    "navigationBarTextStyle": "black",
    // 下拉背景的文字樣式，僅支持 dark/light
    "backgroundTextStyle":"light",
    // 下拉背景色，必須是十六進制顏色值，如"#000000"
    "backgroundColor": "#333",
    // 是否開啟下拉刷新
    "enablePullDownRefresh": true,
    // 距離最底端觸多少距離時觸發觸底事件，單位px
    "onReachBottomDistance": 40
  },
  //網絡請求過期時間，單位毫秒
  "networkTimeout": {
    // 普通ajax請求
    "request": 20000,
    // Socket請求
    "connectSocket": 20000,
    // 文件上傳
    "uploadFile": 20000,
    // 文件下載
    "downloadFile": 20000
  },
  // tab導航欄
  "tabBar": {
    // 文字的顏色
    "color": "#999",
    // 選中時文字的顏色
    "selectedColor": "#000",
    // 背景色
    "backgroundColor": "#fff",
    // 上邊框的顏色，僅支持 black/white
    "borderStyle": "black",
    // tab導航欄顯示在底部還是頂部(頂部不顯示圖片)
    "position": "bottom",
    // 導航欄列表項
    "list": [{
      // 導航到的頁面路徑
      "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"
    }]
  },
  // 調試信息
  "debug": true
}

page.json （ 單頁面配置 ）

單頁面的json就是app.json的window字段，當加載到這個頁面時，此配置將覆蓋app.json

2. 生命周期

小程序 App 生命周期

onLaunch ------ 小程序初始化完成時，觸發(只會調用一次)

onShow ------ 1. 小程序啟動 2. 從后臺進入前臺顯示，觸發

onHide ------ 當小程序從前臺進入后臺，觸發

onError ------ 1. 發生腳本錯誤 2. api 調用失敗，觸發并帶上錯誤信息

單頁面 Page 生命周期

onLoad ------ 頁面加載時，觸發(只會調用一次)

onShow ------ 頁面顯示時，觸發

onReady ------ 初次渲染完成時，觸發(只會調用一次)

onHide ------ 頁面隱藏時，觸發

onUnload ------ 頁面卸載時，觸發

詳細的生命周期分類：

1.小程序啟動：

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

2.切后臺（app 和 page 生命周期重合）：

小程序被切到后臺 - -> page.onHide - -> App.onHide - -> 切回小程序 - -> App.onShow - -> page.onShow

3.跳轉頁面：

old 表示前一個頁面， new 表示新頁面

navigateTo跳轉 - -> 將路由設置為目標頁面路由 - -> old.onHide - -> 初始化頁面 data - -> new.onLoad - -> new.onShow - -> new.onReady

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

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

reLaunch重啟動 - -> 設置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady

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

3. 數據綁定和渲染

數據綁定： { { message } }

渲染

列表渲染：

- wx:for=" { { message } } "  
- wx:for-index="idx" （設置索引的變量名，默認 index ） 
- wx:for-item="itemName"（設置每一項的變量名，默認item ）

渲染塊：

條件渲染：

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

4. 模板（template） 基本用法

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

// 源碼（需要和調用的頁面在同一個wxml里）


// 調用