微信小程序開發-框架

小程序開發框架的目標是經過儘量簡單、高效的方式讓開發者能夠在微信中開發具備原生 APP 體驗的服務。框架提供了本身的視圖層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者可以專一於數據與邏輯。

響應的數據綁定
框架的核心是一個響應的數據綁定系統。
整個小程序框架系統分爲兩部分：視圖層（View）和邏輯層（App Service）
框架可讓數據與視圖很是簡單地保持同步。當作數據修改的時候，只須要在邏輯層修改數據，視圖層就會作相應的更新。
頁面管理
框架 管理了整個小程序的頁面路由，能夠作到頁面間的無縫切換，並給以頁面完整的生命週期。開發者須要作的只是將頁面的數據、方法、生命週期函數註冊到 框架 中，其餘的一切複雜的操做都交由框架處理。

文件結構
小程序包含一個描述總體程序的 app 和多個描述各自頁面的 page。
一個小程序主體部分由三個文件組成，必須放在項目的根目錄，以下：
app.js 必須 小程序邏輯
app.json 必須 小程序公共配置
app.wxss 沒必要須 小程序公共樣式表
一個小程序頁面由4個文件組成：
js 必須 頁面邏輯
wxml 必須 頁面結構
json 沒必要須 頁面配置
wxss 沒必要須 頁面樣式表
爲了方便開發者減小配置項，描述頁面的四個文件必須具備相同的路徑與文件名，如：
button.js
button.json
button.wxml
button.wxss
都在button文件夾中

 

全局配置
app.json文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab等
如下是一個包含了部分經常使用配置選項的 app.json ：

{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首頁"
}, {
"pagePath": "pages/logs/logs",
"text": "日誌"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
app.json 配置項列表
屬性 類型 必填 描述
pages String Array 是 頁面路徑列表
window Object 否 全局的默認窗口表現
tabBar Object 否 底部 tab 欄的表現
networkTimeout Object 否 網絡超時時間
debug Boolean 否 是否開啓 debug 模式，默認關閉
functionalPages Boolean 否 是否啓用插件功能頁，默認關閉
subPackages Object Array 否 分包結構配置
workers String 否 Worker 代碼放置的目錄
requiredBackgroundModes Array 否 須要在後臺使用的能力，如「音樂播放」
plugins Object 否 使用到的插件

pages

用於指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑+文件名 信息。文件名不須要寫文件後綴，框架會自動去尋找對於位置的 .json, .js, .wxml, .wxss 四個文件進行處理。

頁面配置

每個小程序頁面也可使用.json文件來對本頁面的窗口表現進行配置。
頁面的配置只能設置 app.json 中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}

頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，因此無需寫 window 這個鍵。

註冊程序

App() 函數用來註冊一個小程序。接受一個 Object 參數，其指定小程序的生命週期回調等。
App() 必須在 app.js 中調用，必須調用且只能調用一次。否則會出現沒法預期的後果。
屬性 類型 描述 觸發時機
onLaunch Function 生命週期回調—監聽小程序初始化 小程序初始化完成時（全局只觸發一次）
onShow Function 生命週期回調—監聽小程序顯示 小程序啓動，或從後臺進入前臺顯示時
onHide Function 生命週期回調—監聽小程序隱藏 小程序從前臺進入後臺時
onError Function 錯誤監聽函數 小程序發生腳本錯誤，或者 api 調用失敗時觸發，會帶上錯誤信息
onPageNotFound Function 頁面不存在監聽函數 小程序要打開的頁面不存在時觸發，會帶上頁面信息回調該函數
其餘 Any 開發者能夠添加任意的函數或數據到 Object 參數中，用 this 能夠訪問
前臺、後臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並無直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。須要注意的是：只有當小程序進入後臺必定時間，或者系統資源佔用太高，纔會被真正的銷燬。

示例代碼：
App({
onLaunch: function(options) {
// Do something initial when launch.
},
onShow: function(options) {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})

 

頁面 Page
Page(Object)
Page(Object) 函數用來註冊一個頁面。接受一個 Object 類型參數，其指定頁面的初始數據、生命週期回調、事件處理函數等。
Object 參數說明：
Object 內容在頁面加載時會進行一次深拷貝，需考慮數據大小對頁面加載的開銷

示例代碼：

//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})

data
data 是頁面第一次渲染使用的初始數據。

頁面加載時，data 將會以JSON字符串的形式由邏輯層傳至渲染層，所以data中的數據必須是能夠轉成JSON的類型：字符串，數字，布爾值，對象，數組。
渲染層能夠經過 WXML 對數據進行綁定。

模塊化
能夠將一些公共的代碼抽離成爲一個單獨的 js 文件，做爲一個模塊。模塊只有經過 module.exports 或者 exports 才能對外暴露接口。
須要注意的是：
exports 是 module.exports 的一個引用，所以在模塊裏邊隨意更改 exports 的指向會形成未知的錯誤。因此更推薦開發者採用 module.exports 來暴露模塊接口，除非你已經清晰知道這二者的關係。
小程序目前不支持直接引入 node_modules , 開發者須要使用到 node_modules 時候建議拷貝出相關的代碼到小程序的目錄中或者使用小程序支持的 npm 功能。
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
​在須要使用這些模塊的文件中，使用 require(path) 將公共代碼引入

var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})

 

視圖層
框架的視圖層由 WXML 與 WXSS 編寫，由組件來進行展現。
組件(Component)是視圖的基本組成單元
WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。
數據綁定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
條件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'MINA'
}
})
模板
<!--wxml-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
事件
<view bindtap="add"> {{count}} </view>
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應該怎麼顯示。
爲了適應廣大的前端開發者，WXSS 具備 CSS 大部分特性。同時爲了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。
與 CSS 相比，WXSS 擴展的特性有：
尺寸單位
樣式導入

 

WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，能夠構建出頁面的結構。

注意
wxs 不依賴於運行時的基礎庫版本，能夠在全部版本的小程序中運行。
wxs 與 javascript 是不一樣的語言，有本身的語法，並不和 javascript 一致。
wxs 的運行環境和其餘 javascript 代碼是隔離的，wxs 中不能調用其餘 javascript 文件中定義的函數，也不能調用小程序提供的API。
wxs 函數不能做爲組件的事件回調。
因爲運行環境的差別，在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上兩者運行效率無差別。
如下是一些使用 WXS 的簡單示例：

頁面渲染
<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>
頁面輸出：
hello world

數據處理
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
}
})
<!--wxml-->
<!-- 下面的 getMax 函數，接受一個數組，且返回數組中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
var max = undefined;
for (var i = 0; i < array.length; ++i) {
max = max === undefined ?
array[i] :
(max >= array[i] ? max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
</wxs>
<!-- 調用 wxs 裏面的 getMax 函數，參數爲 page.js 裏面的 array -->
<view> {{m1.getMax(array)}} </view>
頁面輸出：
5

自定義組件
從小程序基礎庫版本 1.6.3 開始，小程序支持簡潔的組件化編程。全部自定義組件相關特性都須要基礎庫版本 1.6.3 或更高。
開發者能夠將頁面內的功能模塊抽象成自定義組件，以便在不一樣的頁面中重複使用；也能夠將複雜的頁面拆分紅多個低耦合的模塊，有助於代碼維護。自定義組件在使用時與基礎組件很是類似。
建立自定義組件
相似於頁面，一個自定義組件由 json wxml wxss js 4個文件組成。要編寫一個自定義組件，首先須要在 json 文件中進行自定義組件聲明（將 component 字段設爲 true 可這一組文件設爲自定義組件）：
{
"component": true
}

使用自定義組件
使用已註冊的自定義組件前，首先要在頁面的 json 文件中進行引用聲明。此時須要提供每一個自定義組件的標籤名和對應的自定義組件文件路徑：
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}

插件
插件的開發和使用自小程序基礎庫版本 1.9.6 開始支持。
插件是對一組 js 接口、自定義組件或頁面的封裝，用於嵌入到小程序中使用。插件不能獨立運行，必須嵌入在其餘小程序中才能被用戶使用；而第三方小程序在使用插件時，也沒法看到插件的代碼。所以，插件適合用來封裝本身的功能或服務，提供給第三方小程序進行展現和使用。
插件開發者能夠像開發小程序同樣編寫一個插件並上傳代碼，在插件發佈以後，其餘小程序方可調用。小程序平臺會託管插件代碼，其餘小程序調用時，上傳的插件代碼會隨小程序一塊兒下載運行。
相對於普通 js 文件或自定義組件，插件擁有更強的獨立性，擁有獨立的 API 接口、域名列表等，但同時會受到一些限制，如一些 API 沒法調用或功能受限。對於一些特殊的接口，如 wx.login 和 wx.requestPayment ，雖然插件不能直接調用，但可使用 插件功能頁 來間接實現。

 

服務器域名配置
每一個微信小程序須要事先設置一個通信域名，小程序只能夠跟指定的域名與進行網絡通訊。包括普通 HTTPS 請求（request）、上傳文件（uploadFile）、下載文件（downloadFile) 和 WebSocket 通訊（connectSocket）
域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 協議；
域名不能使用 IP 地址或 localhost；
域名必須通過 ICP 備案；
HTTPS 證書
小程序必須使用 HTTPS 發起網絡請求。請求時系統會對服務器域名使用的 HTTPS 證書進行校驗，若是校驗失敗，則請求不能成功發起。因爲系統限制，不一樣平臺對於證書要求的嚴格程度不一樣。爲了保證小程序的兼容性，建議開發者按照最高標準進行證書配置，並使用相關工具檢查現有證書是否符合要求。
跳過域名校驗
在微信開發者工具中，能夠臨時開啓 開發環境不校驗請求域名、TLS版本及HTTPS證書 選項，跳過服務器域名的校驗。此時，在微信開發者工具中及手機開啓調試模式時，不會進行服務器域名的校驗。

存儲
每一個微信小程序均可以有本身的本地緩存，能夠經過 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync 對本地緩存進行讀寫和清理。
同一個微信用戶，同一個小程序 storage 上限爲 10MB。storage 以用戶維度隔離，同一臺設備上，A 用戶沒法讀取到 B 用戶的數據。

參考自官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html