小程式與普通網頁的開發

1. 小程式的邏輯層和檢視層是分開的。
2. 小程式提供了自己的檢視層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在檢視層與邏輯層間提供了資料傳輸和事件系統，讓開發者能夠專注於資料與邏輯。

程式碼構成

JSON 配置

1. app.json

{
  // 頁面路徑列表，每一項都對應一個頁面的 路徑（含檔名） 資訊。檔名不需要寫檔案字尾，框架會自動去尋找對應位置的 .json, .ts, .wxml, .less 四個檔案進行處理。
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  // 全域性的預設視窗表現，用於設定小程式的狀態列、導航條、標題、視窗背景色。
  "window": {
    "navigationBarTitleText": "Demo"
  },
  // 底部 tab 欄的表現，其中 list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日誌"
    }]
  },
  // 網路超時時間，單位均為毫秒。
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  // 是否開啟 debug 模式，預設關閉。除錯資訊以 info 的形式給出，其資訊有 Page 的註冊，頁面路由，資料更新，事件觸發等。
  "debug": true
}
 

2. 頁面配置

每一個小程式頁面也可以使用同名 .json 檔案來對本頁面的視窗表現進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
完整配置項說明請參考小程式頁面配置

3. sitemap 配置

用來配置小程式及其頁面是否允許被微信索引。
完整配置項說明請參考小程式 sitemap 配置
注：sitemap 的索引提示是預設開啟的，如需要關閉 sitemap 的索引提示，可在小程式專案配置檔案 project.config.json 的 setting 中配置欄位 checkSiteMap 為 false。

框架

場景值

1. 介紹

場景值用來描述使用者進入小程式的路徑。一個場景值代表一種進入小程式的路徑。
完整場景值的含義請檢視場景值列表

2. 獲取

對於小程式，可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中獲取上述場景值。

邏輯層

1. 介紹

邏輯層將資料進行處理後傳送給檢視層，同時接受檢視層的事件反饋。
注意：小程式框架的邏輯層並非執行在瀏覽器中，因此 JavaScript 在 web 中一些能力都無法使用，如 window，document 等。

2. 註冊小程式

使用App()註冊小程式例項，App() 必須在 app.js 中呼叫，必須呼叫且只能呼叫一次，不然會出現無法預期的後果。
詳細的引數含義和使用請參考

// app.js
App({
  onLaunch (options) {
    // 生命週期回撥——監聽小程式初始化，全域性只觸發一次
  },
  onShow (options) {
    // 生命週期回撥——監聽小程式啟動或切前臺
  },
  onHide () {
    // 生命週期回撥——監聽小程式切後臺
  },
  onError (msg) {
    // 錯誤監聽函式
    console.log(msg)
  },
  globalData: 'I am global data'
})

整個小程式只有一個 App 例項，是全部頁面共享的。開發者可以通過 getApp 方法獲取到全域性唯一的 App 例項，獲取App上的資料或呼叫開發者註冊在 App 上的函式。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

3. 註冊頁面

每個頁面，都需要在頁面對應的 js 檔案中進行註冊，指定頁面的初始資料、生命週期回撥、事件處理函式等。

• 簡單的頁面可以使用 Page() 進行構造。詳細的引數含義和使用請參考 Page 參考文件

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 頁面建立時執行
  },
  onShow: function() {
    // 頁面出現在前臺時執行
  },
  onReady: function() {
    // 頁面首次渲染完畢時執行
  },
  onHide: function() {
    // 頁面從前臺變為後臺時執行
  },
  onUnload: function() {
    // 頁面銷燬時執行
  },
  onPullDownRefresh: function() {
    // 觸發下拉重新整理時執行
  },
  onReachBottom: function() {
    // 頁面觸底時執行
  },
  onShareAppMessage: function () {
    // 頁面被使用者分享時執行
  },
  onPageScroll: function() {
    // 頁面滾動時執行
  },
  onResize: function() {
    // 頁面尺寸變化時執行
  },
  onTabItemTap(item) {
    // tab 點選時執行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件響應函式
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由資料
  customData: {
    hi: 'MINA'
  }
})

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 頁面建立時執行
    },
    onPullDownRefresh: function() {
      // 下拉重新整理時執行
    },
    // 事件響應函式
    viewTap: function() {
      // ...
    }
  }
})

// my-behavior.js
module.exports = Behavior({
  data: {
    sharedText: 'This is a piece of data shared between pages.'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'This is a piece of data shared between pages.'
    }
  }
})
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
  behaviors: [myBehavior],
  onLoad: function() {
    this.data.sharedText === 'This is a piece of data shared between pages.'
  }
})

4. 生命週期

5. 頁面路由

• 採用棧的思想控制頁面路由

6. 模組化

• 可以將一些公共的程式碼抽離成為一個單獨的 js 檔案，作為一個模組。模組只有通過 module.exports 或者 exports 才能對外暴露介面（推薦使用 module.exports）。
• 小程式目前不支援直接引入 node_modules , 開發者需要使用到 node_modules 時候建議拷貝出相關的程式碼到小程式的目錄中，或者使用小程式支援的 npm 功能。

檢視層

1. 介紹

框架的檢視層由 WXML(WeiXin Markup language) 與 WXSS(WeiXin Style Sheet) 編寫，由元件來進行展示。

2. WXML

• 資料繫結

  標題	內容	示例
  內容	使用雙大括號將變數包起來	<view> {{ message }} </view>
  元件屬性	需要在雙引號之內	<view id="item-{{id}}"> </view>
  控制屬性	需要在雙引號之內	<view wx:if="{{condition}}"> </view>
  關鍵字	需要在雙引號之內	<checkbox checked="{{false}}"> </checkbox>
  三元運算	可以在 {{}} 內進行簡單的運算	<view hidden="{{flag ? true : false}}"> Hidden </view>
  算數運算	可以在 {{}} 內進行簡單的運算	<view> {{a + b}} + {{c}} + d </view>
  邏輯判斷	可以在 {{}} 內進行簡單的運算	<view wx:if="{{length > 5}}"> </view>
  字串運算	可以在 {{}} 內進行簡單的運算	<view>{{"hello" + name}}</view>
  資料路徑運算	可以在 {{}} 內進行簡單的運算	<view>{{object.key}} {{array[0]}}</view>
  陣列	可以在 {{}} 內直接進行組合	<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
  物件	可以在 {{}} 內直接進行組合	<template is="objectCombine" data="{{for: a, bar: b}}"></template>

• 列表渲染

  標題	內容	示例
  wx:for	預設陣列的當前項的下標變數名預設為 index，陣列當前項的變數名預設為 item。	<view wx:for="{{array}}">{{index}}: {{item.message}}</view>
  wx:for	使用 wx:for-item 可以指定陣列當前元素的變數名，使用 wx:for-index 可以指定陣列當前下標的變數名。	<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}</view>
  block wx:for	渲染一個包含多節點的結構塊	<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view></block>
  wx:key	指定列表中專案的唯一的識別符號。如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。	wx:key 的值以兩種形式提供：1. 字串，代表在 for 迴圈的 array 中 item 的某個 property，該 property 的值需要是唯一的。<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch> 2. 保留關鍵字 *this 代表在 for 迴圈中的 item 本身，這種表示需要 item 本身是一個唯一的字串或者數字。<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>

• 條件渲染

  標題	內容	示例
  wx:if	判斷是否需要渲染該程式碼塊，也可以用 wx:elif 和 wx:else 來新增一個 else 塊。	<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>
  block wx:if	一次性判斷多個元件標籤	<block wx:if="{{true}}"><view> view1 </view><view> view2 </view></block>

  【注意】：<block/> 並不是一個元件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

  wx:if vs hidden

  • wx:if：在切換時元件會銷燬和重新渲染。
  • hidden：元件始終會渲染，只是簡單的控制顯示與隱藏。
  • 一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在執行時條件不大可能改變則 wx:if 較好。

• 模板
  定義模板：使用name屬性，作為模板的名字。

  點選檢視程式碼

  <!--
   index: int
   msg: string
   time: string
  -->
  <template name="msgItem">
   <view>
     <text> {{index}}: {{msg}} </text>
     <text> Time: {{time}} </text>
   </view>
  </template>
  

  使用模板：使用 is 屬性，宣告需要的使用的模板，然後將模板所需要的 data 傳入。is 屬性可以使用 Mustache 語法，來動態決定具體需要渲染哪個模板。

  點選檢視程式碼

  <template is="msgItem" data="{{...item}}"/>
  
  <block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
  </block>
  
  

  模板的作用域：模板擁有自己的作用域，只能使用 data 傳入的資料以及模板定義檔案中定義的 <wxs /> 模組。

• 引用

  1. import可以在該檔案中使用目標檔案定義的template。
  2. include 可以將目標檔案除了 <template/> <wxs/> 外的整個程式碼引入，相當於是拷貝到 include 位置。

元件

檢視容器

1. page-container

頁面容器。用於在頁面內進行復雜的介面設計（比如在頁面中彈出半屏的彈窗，在頁面內夾在一個全屏的子頁面等），使用者進行返回操作會直接離開當前頁面，不符合使用者預期，預期應為關閉當前彈出的元件。 為此提供“假頁”容器元件，效果類似於 popup 彈出層，頁面記憶體在該容器時，當用戶進行返回操作，關閉該容器不關閉頁面。返回操作包括三種情形，右滑手勢、安卓物理返回鍵和呼叫 navigateBack 介面。

2. view

檢視容器。