準備寫(xie) 一個(ge) 小係列，幫大家梳理一下微信小程序整體(ti) 的技術架構。 盡量做到用最短的篇幅說明問題，幫助大家快速了解這個(ge) 平台。 這次就先說說小程序的生命周期。
關(guan) 於(yu) 生命周期，這在很多開發生態周都會(hui) 有，比如原生的 ioses 和 androids 開發中都有類似的概念。
這次咱們(men) 就詳細了解一下小程序的生命周期。以及兩(liang) 個(ge) 核心概念 —— App 和 Page。
App 函數是整個(ge) 小程序的入口， 這在我們(men) 上篇文章中已經介紹了， 咱們(men) 再把代碼貼出來回顧一遍：
App({
onLaunch: function () {
//調用API從(cong) 本地緩存中獲取數據
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//調用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
大體(ti) 上就是這樣了， 微信開發工具的默認項目中定義(yi) 了 onLaunch 方法， 它就是一個(ge) 生命周期方法。 除了這個(ge) 方法之外， 還有另外兩(liang) 個(ge) 生命周期方法， 這裏給大家列出：
onLaunch: 小程序初始化完成。
onShow: 小程序顯示，初始化完成後會(hui) 調用， 從(cong) 後台切換進來也會(hui) 調用。
onHide: 小程序隱藏，用戶在微信中點後退按鈕算隱藏， 用戶按 Home 鍵切回桌麵也算隱藏， 這時 onHide 方法都會(hui) 被調用。
這就是 App 目前開放的所有的生命周期方法了。根據你的小程序業(ye) 務邏輯，使用這些生命周期方法即可。
微信還給我們(men) 提供了 getApp 函數， 這是一個(ge) 全局函數， 在任何地方調用這個(ge) 函數都可以得到 App 的實例，供我們(men) 使用。 這樣我們(men) 在需要使用 App 對象相關(guan) 屬性的時候，就可以引用到它了。
Page 是小程序中另外一個(ge) 重要的對象， 它表示小程序的每一個(ge) 單獨的頁麵。 它也包含生命周期。 它的方法如下：
data: 表示頁麵的數據， 用於(yu) 前端 UI 顯示數據。
onLoad: 頁麵加載完成。
onReady: 頁麵渲染完成。
onShow: 頁麵顯示。
onHide: 頁麵隱藏。
onUnload: 頁麵卸載。
Page 的基本結構如下：
Page({
data: {
message: "Hello world."
},
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.
}
})
當前端頁麵需要顯示數據的時候， 可以這樣：
<!--
<view>{{message}}</view>
-->
這裏麵的 message 就是引用的 Page 對象中，我們(men) 定義(yi) 在 data 屬性中的 key 所對應的內(nei) 容了。 這樣 Page 以及它的數據如何與(yu) 前端顯示綁定起來的流程咱們(men) 就明白了。
接下來， 我們(men) 怎麽(me) 處理前端 UI 上麵的用戶操作事件呢? 比如用戶點擊， 我們(men) 可以使用 bindtap 屬性：
<!--
<view bindtap="viewTapped" >{{message}}</view>
-->
bindtap 屬性指定了一個(ge) 方法名，我們(men) 隻需要在 Page 對象裏麵實現這個(ge) 方法就可以處理用戶的點擊操作了：
Page({
viewTapped: function() {
console.log('hello world.')
}
})
當然， Page 還提供了修改它內(nei) 部數據的方法 —— setData， 我們(men) 可以在剛才這個(ge) 點擊事件中使用 setData 修改顯示在前端中的文字：
Page({
viewTapped: function() {
this.setData({
message: '你好， 世界'
});
}
})
微信小程序的 UI 層如何與(yu) 控製層交互， 以及怎麽(me) 樣響應用戶操作事件， 這次咱們(men) 來聊聊。
微信小程序使用 WXML 文件作為(wei) UI 視圖。 WXML 其實就是 WeiXin Markup Language 的縮寫(xie) 。 是一種類似 XML 語法結構的 UI 定義(yi) 方式。
它可以進行數據綁定， 顯示 Page 中相應的屬性：
<!--
<view> {{message}} </view>
-->
兩(liang) 對括號中的 message 對應 Page 中 data 屬性中的 message：
Page({
data: {
message: 'Hello World'
}
})
當然， 我們(men) 還可以進行循環顯示， 這個(ge) 語法可能會(hui) 和大家平時使用過的模板語法不太相同：
<!--
<view wx:for="{{array}}"> {{item}} </view>
-->
wx:for 是微信定義(yi) 的一個(ge) 特殊屬性， 其實相當於(yu) 一個(ge) for 循環， 重複顯示 View 空間， 然後將數組中的每一個(ge) 元素都遍曆一遍， 下麵是 array 在 Page 中的定義(yi) ：
Page({
data: {
array: ["Swift", "Objctive-C", "Javascript"]
}
})
上麵 WXML 例子中的 代表我們(men) data 中的 array 數組， 而 表示的就是數組遍曆中的每一個(ge) 元素， 編譯運行後的界麵顯示如下：
除了 wx:for 這種循環遍曆語法之外， 微信還提供了另外一種， wx:if, 大家從(cong) 名稱中應該就可以想到， 它是一個(ge) 條件判斷， 隻有當條件判斷成立， 才會(hui) 顯示這個(ge) View。 除了 wx:if 之外， 還提供了了 wx:elif, wx:else
<!--
<view wx:if="{{false}}" >Hello Title</view>
<view wx:elif="{{false}}" >Hello World</view>
<view wx:else >Hello Wechat</view>
-->
注意這三個(ge) 屬性的用法， wx:if 和 wx:elif 這兩(liang) 個(ge) 屬性後麵需要跟隨一個(ge) 布爾表達式用於(yu) 判斷， 而 wx:else 後麵不需要跟隨任何表達式。 這三個(ge) 屬性的邏輯和我們(men) 平時開發中的 if else 判斷邏輯完全一樣，也比較好理解。
關(guan) 於(yu) wx:else 微信官方的示例中是給他指定了表達式屬性的。 但我在真實環境上測試了一下， wx:else 無論是否指定後麵的屬性值，最終的輸出結果都是一樣的， 所以這可能是官方示例的一個(ge) 筆誤。 按照 if 表達式正常的邏輯來看，應該不需要給它再設屬性了。 大家可以留意一下。
說完了循環和條件判斷語法， WXML 還支持模板定義(yi) , 比如這樣：
<!--
<template name="hello" >
<view>
Hello, {{name}}
</view>
</template>
<template is="hello" data="{{...swift}}" ></template>
<template is="hello" data="{{...objc}}" ></template>
-->
簡單解釋一下， 第一個(ge) template 標簽是模板定義(yi) ， name 屬性定義(yi) 了它的名字，在兩(liang) 個(ge) 標簽之間是它的內(nei) 部結構。 然後緊接著的後兩(liang) 個(ge) template 標簽是模板的引用， is 屬性代表要引用哪個(ge) 模板。 我們(men) 這裏填入的都是 hello， 也就是我們(men) 最開始定義(yi) 的這個(ge) 模板結構。 然後就是 data 屬性，通過它傳(chuan) 入模板需要的相關(guan) 數據。 先來開一下 swift 和 objc 這兩(liang) 個(ge) 數據的定義(yi) ：
Page({
data: {
swift: { name: "Swift"},
objc: { name: "Objective-C"}
}
})
swift 和 objc 都是兩(liang) 個(ge) JSON 對象， 都包含一個(ge) name 屬性。 大家注意看我們(men) 前麵模板引用 data 屬性的方式：
<!-- <template is="hello" data="{{...swift}}" ></template> -->
這裏我們(men) 在一對大括號中的變量名前麵還寫(xie) 了三個(ge) 點 —— …
… 其實是一個(ge) 操作符， 用於(yu) 將 swift 變量內(nei) 部的值 “展開”， 這麽(me) 說可能不太好理解， 咱們(men) 還回到模板的定義(yi) 中：
<!--
<template name="hello" >
<view>
Hello, {{name}}
</view>
</template>
-->
我們(men) 看到， template 內(nei) 部使用 來引用我們(men) 傳(chuan) 入對象的屬性。 這就需要我們(men) “展開” 傳(chuan) 入的對象， 才能讓模板找到對應 key 的值。 簡單來說， 如果我們(men) 不適用 … 這個(ge) 操作符，而是直接像這樣傳(chuan) 入對象：
<!--
<template is="hello" data="{{swift}}" ></template>
-->
如果這樣運行程序的話， 模板是不能正確讀取到 name 屬性的。
當然， 我們(men) 可以不用把模板的定義(yi) 和引用它的代碼寫(xie) 到一起， 我們(men) 可以把模板的定義(yi) 單獨寫(xie) 在一個(ge) WXML 文件中， 然後在另外一個(ge) 文件中使用 import 來引入它。 這也是一個(ge) 結構良好的項目的通常做法。 比如我們(men) 剛才的模板存放到 hello.wxml 中， 我們(men) 就可以這樣引用它：
<!--
<import src="hello.wxml" />
<template is="hello" data="{{...swift}}" ></template>
<template is="hello" data="{{...objc}}" ></template>
-->
這樣我們(men) 可以比較好的進行模塊劃分。 當然， 除了 import 之外， 微信還給我們(men) 提供了另外一種引用方式， include。 簡而言之， 他們(men) 之間的區別是這樣， import 隻能引入目標文件中的 template 定義(yi) ， 不會(hui) 引入具體(ti) 的 UI 內(nei) 容。 而 include 正好相反， 它隻會(hui) 引入目標文件中的內(nei) 容，不會(hui) 引入 template 定義(yi) , 比如我們(men) 有一個(ge) 文件，叫做 header.wxml：
<!--
<view>Header Title</view>
-->
然後我們(men) 在 index.wxml 中這樣引用：
<!--
<include src="header.wxml" />
<view>Hello world!</view>
-->
這樣就會(hui) 引入 header.wxml 中定義(yi) 的內(nei) 容了， 最後的輸出結果就是他們(men) 兩(liang) 個(ge) 文件中所有 UI 組件的整合了。 這就是 import 和 include 的區別了。
服務項目
網站首頁
TEL：021-61554458
立即谘詢