微信小程序框架分析教案

微信小程序框架分析

微信小程序開發(fā)圖解案例

課程名稱教程項目名稱微信小程序框架分析

任務(wù)名稱微信小程序框架分析課時4

項目性質(zhì)□演示性□驗證性□設(shè)計性√綜合性

授課班級授課日期授課地點

（1）了解微信小程序目錄結(jié)構(gòu)，理解框架全局文件、工具類文件、框架頁面文件的使用。

（2）會配置窗口導(dǎo)航欄以及底部標(biāo)簽導(dǎo)航。

（3）了解微信小程序注冊程序應(yīng)用以及生命周期函數(shù)的意義和使用。

（4）掌握微信小程序注冊頁面的使用，包括頁面初始化數(shù)據(jù)、生命周期函數(shù)的使用、頁面相

教學(xué)目標(biāo)

關(guān)事件處理函數(shù)的使用、頁面路由管理和setData設(shè)置函數(shù)的使用。

（5）學(xué)會微信小程序如何綁定數(shù)據(jù)。

（6）學(xué)會微信小程序條件判斷和列表渲染的使用。

（7）學(xué)會微信小程序模板的定義和引用。

（1）微信小程序目錄結(jié)構(gòu)介紹

（2）微信小程序注冊程序應(yīng)用

（3）微信小程序注冊頁面的使用

（4）微信小程序如何綁定數(shù)據(jù)

教學(xué)內(nèi)容（5）微信小程序條件渲染

（6）微信小程序列表渲染

（7）微信小程序定義模板

（8）微信小程序的引用功能

（9）WXS小程序腳本語言

微信小程序注冊頁面的使用、綁定數(shù)據(jù)、條件渲染和列表渲染的使用、模板的定義和引

教學(xué)重點用、WXS腳本與WXSS樣式渲染

教學(xué)難點微信小程序注冊頁面的使用、綁定數(shù)據(jù)、模板的使用

裝有微信小程序的開發(fā)工具的電腦

教學(xué)準(zhǔn)備教學(xué)課件PPT

教材：《微信小程序開發(fā)圖解案例教程（附精講視頻）（第3版）》

作業(yè)設(shè)計

1

教學(xué)過程

教學(xué)內(nèi)容與過程

教學(xué)環(huán)節(jié)

（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）

做好上課前的各項準(zhǔn)備工作（打開電腦、打開課件、打開軟件、打開授課計劃、教案等），吸引

課前組織

學(xué)生注意力。

【課前說明】

分別從微信小程序目錄結(jié)構(gòu)、注冊程序應(yīng)用、注冊頁面的使用、綁定數(shù)據(jù)、條件渲染、列表渲

染、定義模板、引用功能及WXS小程序腳本語言及微信小程序WXSS樣式渲染等知識點進(jìn)行初步的了

課程說明

解。

【目的】

使學(xué)生從了解本章的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點、考評方式等方面明確學(xué)習(xí)本章知識的要求和目標(biāo)。

2.1微信小程序目錄結(jié)構(gòu)介紹

微信小程序目錄結(jié)構(gòu)可以分為3個部分——框架全局文件、工具類文件和框架頁面文件。

微信小程序框架目錄

課程內(nèi)容

2.1.1框架全局文件

描述

框架全局文件必須放在項目的根目錄中。框架全局文件包括5個文件：app.js文件（小程

序邏輯文件，定義全局?jǐn)?shù)據(jù)及定義函數(shù)文件）、app.json文件（小程序公共設(shè)置文件）、

app.wxss文件（小程序公共樣式表）、project.config.json文件（小程序項目個性化配置文

件），以及用于配置小程序及其頁面是否允許被微信索引的sitemap.json文件?？蚣苋治募?/p>

對所有頁面都有效，如表所示。

框架全局文件

文件是否必填作用

app.js是裝載小程序邏輯

app.json是裝載小程序公共設(shè)置

app.wxss否裝載小程序公共樣式

project.config.json是裝載小程序項目個性化配置

sitemap.json是配置小程序及其頁面是否允許被微信索引

2

1．a(chǎn)pp.js小程序邏輯文件

app.js文件用來定義全局?jǐn)?shù)據(jù)和函數(shù)的使用，它可以指定微信小程序的生命周期函數(shù)。生命周

期函數(shù)可以理解為微信小程序自己定義的函數(shù)，例如onLaunch（監(jiān)聽小程序初始化）、onShow（監(jiān)

聽小程序顯示）、onHide（監(jiān)聽小程序隱藏）等，在不同階段不同場景可以使用不同的生命周期函

數(shù)。此外，app.js中還可以定義一些全局的函數(shù)和數(shù)據(jù)，其他頁面引用app.js文件后就可以直接使

用，如圖所示。

app.js小程序邏輯

2．a(chǎn)pp.json小程序公共設(shè)置文件

app.json文件可以對常用的功能進(jìn)行設(shè)置：配置頁面路徑、配置窗口表現(xiàn)、配置標(biāo)簽導(dǎo)

航、配置網(wǎng)絡(luò)超時、啟用新版組件樣式、配置debug模式、配置跳轉(zhuǎn)的小程序列表。具體如圖所

示。

app.json文件的功能

3

（1）配置頁面路徑。

自動創(chuàng)建頁面

（2）配置窗口表現(xiàn)。

窗口表現(xiàn)

（3）配置標(biāo)簽導(dǎo)航。

貓眼電影App標(biāo)簽導(dǎo)航貓眼電影微信小程序標(biāo)簽導(dǎo)航配置

（4）配置網(wǎng)絡(luò)超時。可以配置網(wǎng)絡(luò)請求、文件上傳、文件下載時最大的請求時間，超過這個時

間，則不再請求。

4

（5）配置debug模式。配置debug模式可方便微信小程序開發(fā)者調(diào)試開發(fā)程序。

沒有開啟debug模式

開啟debug模式

3．a(chǎn)pp.wxss小程序公共樣式表

app.wxss文件對CSS樣式進(jìn)行了擴展，和CSS的使用方式一樣，類選擇器和行內(nèi)樣式的寫法兼

容大部分CSS樣式，有一些CSS樣式在這里是不起作用的。app.wxss還形成了自己的風(fēng)格，是對所

有頁面定義的一個全局樣式。只要頁面有全局樣式里的class，就可以渲染全局樣式里的效果；但如

果頁面又重新定義了這個class樣式，則會把全局的覆蓋掉，使用自己的樣式，如圖所示。

小程序公共樣式表

除了app.wxss提供的默認(rèn)全局樣式，用戶自己也可以定義一些全局樣式，這樣方便每個頁面的

5

使用，又不用在每個頁面都寫一次，達(dá)到一次定義，其他頁面直接引用的復(fù)用效果。

4．project.config.json小程序項目個性化配置文件

在使用微信小程序開發(fā)者工具時，開發(fā)者都會針對各自喜好做一些個性化配置，例如界面顏色、

編譯配置等。當(dāng)換了另外一臺計算機重新安裝工具的時候，用戶還要重新配置。因此，小程序開發(fā)者

工具在每個項目的根目錄都會生成一個project.config.json文件，用戶在工具上做的任何配置都

會寫入這個文件。重新安裝工具或者換計算機工作時，用戶只要載入同一個項目的代碼包，開發(fā)

者工具就會自動恢復(fù)到當(dāng)時開發(fā)項目時的個性化配置，其中包括編輯器的顏色、代碼上傳時自

動壓縮等一系列選項。

5.sitemap.json小程序及其頁面是否允許被微信索引

小程序根目錄下的sitemap.json文件用于配置小程序及其頁面是否允許被微信索引，文件內(nèi)容

為一個JSON對象。如果沒有sitemap.json文件，則默認(rèn)為所有頁面都允許被索引。配置示例如下。

{

"rules":[{

"action":"allow",

"page":"path/to/page",

"params":["a","b"],

"matching":"exact"

},{

"action":"disallow",

"page":"path/to/page"

}]

}

（1）path/to/page?a=1&b=2→優(yōu)先索引。

（2）path/to/page→不被索引。

（3）path/to/page?a=1→不被索引。

（4）path/to/page?a=1&b=2&c=3→不被索引。

（5）其他頁面都會被索引。

matching匹配規(guī)則說明如下。

（1）exact：當(dāng)小程序頁面的參數(shù)列表等于params時，規(guī)則命中索引。

（2）inclusive：當(dāng)小程序頁面的參數(shù)列表包含params時，規(guī)則命中索引。

（3）exclusive：當(dāng)小程序頁面的參數(shù)列表與params交集為空時，規(guī)則命中索引。

（4）partial：當(dāng)小程序頁面的參數(shù)列表與params交集不為空時，規(guī)則命中索引。

2.1.2工具類文件

在微信小程序框架目錄里有一個utils文件夾，它用來存放工具欄的js函數(shù)，例如可以放置一

些日期格式化的函數(shù)、時間格式化的函數(shù)等一些常用的函數(shù)。定義完這些函數(shù)后，要通過

module.exports將定義的函數(shù)名稱注冊進(jìn)來，在其他的頁面才可以使用，下圖所示為時間格式化工

具類文件。

6

時間格式化工具類文件

2.1.3框架頁面文件

一個小程序框架頁面文件由5個文件組成，分別是js頁面邏輯、json頁面配置、wxml頁面結(jié)

構(gòu)、wxs小程序腳本語言、wxss頁面樣式表，如表所示。

框架頁面文件

文件類型是否必填作用

js是頁面邏輯

json否頁面配置

wxml是頁面結(jié)構(gòu)

wxs否小程序腳本語言

wxss否頁面樣式表

微信小程序的框架頁面文件，都放置在pages文件夾下面，如圖所示。

頁面文件

每個頁面都有一個獨立的文件夾，比如日志頁面logs文件夾，它的下面放置5個文件：logs.js

進(jìn)行業(yè)務(wù)路徑處理；logs.json進(jìn)行頁面配置，可以覆蓋全局App.json配置；logs.wxml配置頁面結(jié)

構(gòu)，負(fù)責(zé)渲染頁面；WXS（WeiXinScript）是小程序的一套腳本語言，logs.wxs結(jié)合wxml文件，可

以構(gòu)建出頁面的結(jié)構(gòu)；logs.wxss是針對logs.wxml頁面的樣式文件。

7

2.1.4小試牛刀：制作貓眼電影底部標(biāo)簽導(dǎo)航

貓眼電影底部標(biāo)簽導(dǎo)航有4個標(biāo)簽：電影、影院、發(fā)現(xiàn)、我的。

貓眼電影底部標(biāo)簽導(dǎo)航

（1）新建一個movie項目，后端服務(wù)選擇“不使用云服務(wù)”，如圖所示。

添加項目

（2）將準(zhǔn)備好的底部標(biāo)簽導(dǎo)航圖標(biāo)拷貝到movie項目下面。

（3）打開App.json配置文件，在pages數(shù)組里添加4個頁面路徑——電影

“pages/movie/movie”、影院“pages/cinema/cinema”、發(fā)現(xiàn)“pages/find/find”、我的

“pages/me/me”，保存后會自動生成相應(yīng)的頁面文件夾；刪除

“pages/index/index”“pages/logs/logs”頁面路徑以及對應(yīng)的文件夾。

8

配置頁面路徑

（4）在window數(shù)組里配置窗口導(dǎo)航背景顏色為紅色（#D53E37），導(dǎo)航欄文字為電影，字體顏

色設(shè)置為白色（white）。

窗口及導(dǎo)航欄配置

（5）在tabBar對象里配置底部標(biāo)簽導(dǎo)航背景色為灰色（#f5f5f5），文字默認(rèn)顏色為白色

（white），文字選中時為紅色（#D53E37），在list數(shù)組里配置底部標(biāo)簽導(dǎo)航對應(yīng)的頁面、導(dǎo)航名

稱、默認(rèn)時圖標(biāo)、選中時圖標(biāo)。

底部標(biāo)簽導(dǎo)航配置

9

這樣就完成了貓眼電影底部標(biāo)簽導(dǎo)航的配置，單擊不同的導(dǎo)航標(biāo)簽，可以切換顯示不同的頁面，

同時導(dǎo)航圖標(biāo)和導(dǎo)航文字會呈現(xiàn)為選中狀態(tài)。

電影界面

2.2微信小程序注冊程序應(yīng)用

app.js文件不僅可以定義全局函數(shù)和數(shù)據(jù)，還可以注冊小程序。在App()函數(shù)里可以完成小程序

的注冊，并指定其生命周期函數(shù)。下表所示為生命周期函數(shù)的定義。

生命周期函數(shù)

屬性類型描述觸發(fā)時機

當(dāng)小程序初始化完成時，會觸發(fā)onLaunch（全局只觸發(fā)一

onLaunchFunction監(jiān)聽小程序初始化

次）

onShowFunction監(jiān)聽小程序顯示當(dāng)小程序啟動，或從后臺進(jìn)入前臺顯示，會觸發(fā)onShow

onHideFunction監(jiān)聽小程序隱藏當(dāng)小程序從前臺進(jìn)入后臺，會觸發(fā)onHide

當(dāng)小程序發(fā)生腳本錯誤，或者API調(diào)用失敗時，會觸發(fā)

onErrorFunction錯誤監(jiān)聽函數(shù)

onError并附帶錯誤信息

當(dāng)小程序出現(xiàn)要打開的頁面不存在的情況，會附帶頁面信

onPageNotFoundFunction頁面不存在監(jiān)聽函數(shù)

息回調(diào)該函數(shù)

開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到Object參數(shù)中，用

其他Any

this可以使用

（1）onLaunch生命周期函數(shù)，用來監(jiān)聽小程序初始化，一旦初始化完成，就會觸發(fā)該函數(shù)，這

個生命周期函數(shù)只會觸發(fā)一次。

（2）onShow生命周期函數(shù)，用來監(jiān)聽小程序顯示，微信小程序有前后臺定義，當(dāng)用戶單擊左上

角關(guān)閉、按Home鍵關(guān)閉或者突然來電話，微信小程序都沒有銷毀，而是進(jìn)入后臺，當(dāng)再次進(jìn)入微信

或者小程序的時候就會觸發(fā)onShow這個函數(shù)。只要程序啟動或者從后臺進(jìn)入前臺都會觸發(fā)該函數(shù)。

（3）onHide生命周期函數(shù)，用來監(jiān)聽小程序隱藏，一旦微信小程序從前臺進(jìn)入后臺，就會觸發(fā)

該函數(shù)。

（4）onError生命周期函數(shù)，用來監(jiān)聽小程序腳本或者API是否發(fā)生錯誤，發(fā)生錯誤時返回錯

10

誤信息。

（5）onPageNotFound生命周期函數(shù)，當(dāng)要打開的頁面不存在時，會回調(diào)這個監(jiān)聽函數(shù)。示例代

碼：

App({

onLaunch:function(){

//Dosomethinginitialwhenlaunch.

},

onShow:function(){

//Dosomethingwhenshow.

},

onHide:function(){

//Dosomethingwhenhide.

},

onError:function(msg)

{console.log(msg)

},

globalData:'Iamglobaldata'

})

在頁面里調(diào)用app.js全局?jǐn)?shù)據(jù)：

在頁面js文件里，按如下所示方法，就可以調(diào)用到全局?jǐn)?shù)據(jù)globalData。

varAppInstance=getApp()

console.log(AppInstance.globalData)

不僅可以調(diào)用全局?jǐn)?shù)據(jù)，還可以調(diào)用自定義的全局函數(shù)，但是不要調(diào)用生命周期函數(shù)。

2.3微信小程序注冊頁面的使用

在每個頁面文件夾里，都有一個頁面對應(yīng)的js文件，比如日志logs文件夾，對應(yīng)的就是

logs.js文件，這個文件里的Page()函數(shù)用來注冊頁面。接受一個object參數(shù)，其指定頁面的初

始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等頁面的所有業(yè)務(wù)邏輯處理都放在這個文件里。object參數(shù)

如表所示。

object參數(shù)說明

屬性類型描述

dataObject頁面的初始數(shù)據(jù)

onLoadFunction生命周期函數(shù)—監(jiān)聽頁面加載

onReadyFunction生命周期函數(shù)—監(jiān)聽頁面初次渲染完成

onShowFunction生命周期函數(shù)—監(jiān)聽頁面顯示

onHideFunction生命周期函數(shù)—監(jiān)聽頁面隱藏

onUnloadFunction生命周期函數(shù)—監(jiān)聽頁面卸載

onPullDownRefreshFunction頁面相關(guān)事件處理函數(shù)—監(jiān)聽用戶下拉動作

onReachBottomFunction頁面上拉觸底事件的處理函數(shù)

onShareAppMessageFunction用戶單擊右上角分享

onPageScrollFunction頁面滾動觸發(fā)事件的處理函數(shù)

onTabItemTapFunction當(dāng)前是tab頁時，點擊tab時觸發(fā)

onResizefunction頁面尺寸發(fā)生改變的事件可以使用頁面的onResize來監(jiān)聽

11

其他Any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到object參數(shù)中，在頁

面的函數(shù)中用this可以訪問

Page()函數(shù)使用代碼如下：

Page({

data:{

text:"Thisispagedata."

},

onLoad:function(options){

//當(dāng)頁面加載時做一些事情

},

onReady:function(){

//當(dāng)頁面初次渲染完成時做一些事情

},

onShow:function(){

//當(dāng)頁面顯示時做一些事情

},

onHide:function(){

//當(dāng)頁面隱藏時做一些事情

},

onUnload:function(){

//當(dāng)頁面卸載時做一些事情

},

onPullDownRefresh:function(){

//當(dāng)頁面下拉刷新時做一些事情

},

onReachBottom:function(){

//當(dāng)?shù)竭_(dá)頁面底部時做一些事情

},

onShareAppMessage:function(){

//當(dāng)用戶分享時做一些事情

},

//事情處理

viewTap:function(){

this.setData({

text:'Setsomedataforupdatingview.'

})

},

customData:{

hi:'MINA'

}

})

2.3.1頁面初始化數(shù)據(jù)

data為頁面初始化數(shù)據(jù)，初始化數(shù)據(jù)將作為頁面的第一次渲染。data將會以JSON的形式由邏

輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式：字符串、數(shù)字、布爾值、對象或數(shù)組。

渲染界面可以通過WXML對數(shù)據(jù)進(jìn)行綁定。

示例代碼：

<textclass="user-motto">{{motto}}</text>

Page({

data:{

motto:'HelloWorld',

userInfo:{}

}})

2.3.2生命周期函數(shù)

（1）onLoad頁面加載：一個頁面只會調(diào)用一次，接收頁面參數(shù)可以獲取wx.navigateTo和

wx.redirectTo及<navigator/>中的query。

（2）onShow頁面顯示：每次打開頁面都會調(diào)用一次。

12

（3）onReady頁面初次渲染完成：一個頁面只會調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視

圖層進(jìn)行交互，對界面的設(shè)置如wx.setNavigationBarTitle請在onReady之后設(shè)置。

（4）onHide頁面隱藏：當(dāng)調(diào)用navigateTo或底部tab切換時調(diào)用。

（5）onUnload頁面卸載：當(dāng)調(diào)用redirectTo或navigateBack的時候調(diào)用。

2.3.3頁面相關(guān)事件處理函數(shù)

微信小程序定義了以下常用的事件處理函數(shù)。

（1）onPullDownRefresh（下拉刷新事件）：監(jiān)聽用戶下拉刷新事件。需要在config的window

選項中開啟enablePullDownRefresh。當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng)前

頁面的下拉刷新。

（2）onReachBottom（上拉觸底事件）：可以在app.json文件的window選項中或頁面配置中設(shè)

置觸發(fā)距離onReachBottomDistance。在觸發(fā)距離內(nèi)滑動期間，本事件只會被觸發(fā)一次。

（3）onPageScroll（頁面滾動事件）：監(jiān)聽用戶滑動頁面事件。它有一個參數(shù)scrollTop，用

于表示頁面在垂直方向已滾動的距離（單位為px）。注意應(yīng)只在需要的時候才在page中定義此方

法，不要定義空方法，以減少不必要的事件派發(fā)對渲染層-邏輯層通信的影響，避免在onPageScroll

中過于頻繁地執(zhí)行setData等引起邏輯層-渲染層通信的操作。尤其是每次傳輸大量數(shù)據(jù)，會增加通

信耗時。

（4）onResize（頁面尺寸事件）：頁面尺寸發(fā)生改變的事件?？梢允褂庙撁娴膐nResize來監(jiān)

聽。對于自定義組件，可以使用resize生命周期來監(jiān)聽?；卣{(diào)函數(shù)中將返回顯示區(qū)域的尺寸信息。

此外，還可以使用wx.onWindowResize來監(jiān)聽（但這不是推薦的方式）。

示例代碼如下。

Page({

onResize(res){

res.size.windowWidth//新的顯示區(qū)域?qū)挾?/p>

res.size.windowHeight//新的顯示區(qū)域高度

}

})

（5）onShareAppMessage（用戶分享轉(zhuǎn)發(fā)）：只有定義了此事件處理函數(shù)，右上角菜單才會顯示

“轉(zhuǎn)發(fā)”按鈕。用戶點擊“轉(zhuǎn)發(fā)”按鈕的時候會調(diào)用此函數(shù)。此事件需要返回一個object參數(shù)，用

于自定義分享轉(zhuǎn)發(fā)內(nèi)容。object參數(shù)的說明如表所示。

分享參數(shù)

字段說明默認(rèn)值

title分享標(biāo)題當(dāng)前小程序名稱

imageUrl自定義圖片路徑，可以是本地文件路徑、

代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑。支持使用默認(rèn)截圖

PNG及JPG。顯示圖片長寬比是5:4

path轉(zhuǎn)發(fā)路徑當(dāng)前頁面路徑，必須是以/開頭的完整路徑

示例代碼如下。

Page({

onShareAppMessage:function(res){

return{

title:'自定義分享標(biāo)題',

imageUrl:'自定義圖片路徑',

path:'/page/user?id=123'

}

}

})

（6）onTabItemTap（點擊tab頁事件）：當(dāng)前是tab頁時，用戶點擊tab時觸發(fā)。object參數(shù)

的說明如表所示。

13

點擊tab頁object參數(shù)

字段類型說明

indexstring被點擊的底部標(biāo)簽導(dǎo)航菜單的序號，從0開始

pagePathstring被點擊的底部標(biāo)簽導(dǎo)航菜單的頁面路徑

textstring被點擊的底部標(biāo)簽導(dǎo)航菜單的按鈕文字

示例代碼如下。

Page({

onTabItemTap(item){

console.log(item.index)

console.log(item.pagePath)

console.log(item.text)

}

})

2.3.4頁面路由管理

微信小程序的頁面路由都是由微信小程序框架來管理的，框架以棧的形式維護了所有頁面。棧作

為一種數(shù)據(jù)結(jié)構(gòu)，是一種只能在一端進(jìn)行插入和刪除操作的特殊線性表。它按照后進(jìn)先出的原則存儲

數(shù)據(jù)，先進(jìn)入的數(shù)據(jù)被壓入棧底，最后進(jìn)入的數(shù)據(jù)在棧頂，需要讀數(shù)據(jù)的時候從棧頂開始彈出數(shù)據(jù)

（最后一個數(shù)據(jù)被第一個讀出來）。微信小程序頁面交互也是通過棧來完成的，微信小程序初始化

時，新頁面入棧；打開新頁面時，新頁面入棧；頁面重定向時，當(dāng)前頁面出棧，新頁面入棧；頁面返

回時，頁面不斷出棧，直到新頁面入棧；tab切換時，頁面全部出棧，只留下新的tab頁面；重新加

載時，頁面全部出棧，只留下新的頁面。

對于路由的觸發(fā)方式以及頁面生命周期函數(shù)如表所示。

路由的觸發(fā)方式及頁面生命周期函數(shù)

頁面路由方式觸發(fā)時機路由后頁面路由前頁面

初始化小程序打開的第一個頁面onLoad，onShow

打開新頁面調(diào)用APIwx.navigateTo或onLoad，onShowonHide

使用組件<navigatoropen-

type="navigate"/>

頁面重定向調(diào)用APIwx.redirectTo或使onLoad，onShowonUnload

用組件<navigatoropen-

type="redirect"/>

頁面返回onShowonUnload（多層頁面

調(diào)用APIwx.navigateBack

返回，每個頁面都會

或用戶按左上角返回按鈕

按順序觸發(fā)

onUnload）

調(diào)用APIwx.switchTab或使用組件

tab切換Function

<navigatoropen-

type="switchTab"/>或用戶切換

tab

調(diào)用APIwx.reLaunch

或使用組件

重啟動OnLoad，onShowonUnload

<navigatoropen-

type="reLaunch"/>

2.3.5自定義函數(shù)

除了初始化數(shù)據(jù)和生命周期函數(shù)，Page中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。在渲染

層的組件中可以加入事件綁定，當(dāng)達(dá)到觸發(fā)事件時，就會執(zhí)行Page中定義的事件處理函數(shù)。

14

示例代碼：

<viewbindtap="clickMe">clickme</view>

Page({

clickMe:function()

{console.log('viewtap')

}

})

2.3.6setData設(shè)值函數(shù)

Ptotype.setData()設(shè)值函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時改變對應(yīng)的

this.data的值。

setData()參數(shù)格式：接受一個對象，以key，value的形式表示將this.data中的key對應(yīng)的值改

變成value。其中key非常靈活，以數(shù)據(jù)路徑的形式給出，如array[2].message，a.b.c.d，并且不

需要在this.data中預(yù)先定義。

示例代碼：

<!--index.wxml-->

<view>{{text}}</view>

<buttonbindtap="changeText">Changenormaldata</button>

<view>{{array[0].text}}</view>

<buttonbindtap="changeItemInArray">ChangeArraydata</button>

<view>{{object.text}}</view>

<buttonbindtap="changeItemInObject">ChangeObjectdata</button>

<view>{{newField.text}}</view>

<buttonbindtap="addNewField">Addnewdata</button>

//index.jsPage({

data:{

text:'initdata',

array:[{text:'initdata'}],object:{

text:'initdata'

}

},

changeText:function(){

//this.data.text='changeddata'這種方式賦值不起作用

this.setData({

text:'changeddata'

})

},

changeItemInArray:function(){

//可以用這種方式動態(tài)修改數(shù)據(jù)

this.setData({

'array[0].text':'changeddata'

})

},

changeItemInObject:function(){this.setData({

'object.text':'changeddata'

});

},

addNewField:function()

{this.setData({

'newField.text':'newdata'

})

}

})

2.4微信小程序如何綁定數(shù)據(jù)

WXML頁面里的動態(tài)數(shù)據(jù)，都是來自js文件Page的data，數(shù)據(jù)綁定就是通過雙大括號（{{}}）

15

將變量包起來，在WXML頁面里將數(shù)據(jù)值顯示出來。

示例代碼如下：

index.wxml

<view>{{message}}</view>index.js

Page({

data:{

message:'HelloMINA!'

}

})

2.4.1組件屬性綁定

組件屬性綁定，是將data里的數(shù)據(jù)綁定到微信小程序的組件上，示例代碼如下：

<viewid="item-{{id}}"></view>Page({

data:{id:0

}

})

2.4.2控制屬性綁定

控制屬性綁定用來進(jìn)行if語句條件判斷，如果滿足條件，則執(zhí)行，否則不執(zhí)行，示例代碼如

下：

<viewwx:if="{{condition}}"></view>Page({

data:{

condition:true

}

})

2.4.3關(guān)鍵字綁定

關(guān)鍵字綁定常用于組件的一些關(guān)鍵字，像復(fù)選框組件一樣，checked關(guān)鍵字如果等于true，則代

表復(fù)選框選中；如果等于false，則代表不選中復(fù)選框，示例代碼如下：

<checkboxchecked="{{false}}"></checkbox>

不要直接寫checked="false"，其計算結(jié)果是一個字符串，轉(zhuǎn)成boolean類型后代表真值。

2.4.4運算

可以在{{}}內(nèi)進(jìn)行簡單的運算，小程序支持以下幾種方式進(jìn)行運算：

1．三元運算

<viewhidden="{{flag?true:false}}">Hidden</view>

2．?dāng)?shù)學(xué)運算

<view>{{a+b}}+{{c}}+d</view>

Page({

data:{

a:1,

b:2,

c:3

}

})

view中的內(nèi)容為3+3+d。

3．邏輯判斷

<viewwx:if="{{length>5}}"></view>

4．字符串運算

16

<view>{{"hello"+name}}</view>Page({

data:{

name:'MINA'

}

})

5．?dāng)?shù)據(jù)路徑運算

<view>{{object.key}}{{array[0]}}</view>Page({

data:{

object:{key:'Hello'

},

array:['MINA']

}

})

2.4.5小試牛刀：天氣微信小程序

天氣微信小程序，用來顯示溫度、最低溫度、最高溫度以及其他天氣情況，下面通過數(shù)據(jù)綁定的

方式，來顯示天氣情況，如圖所示。

天氣微信小程序

（1）創(chuàng)建一個weather項目，如圖所示。

weather項目

（2）進(jìn)入index.wxml、index.js、index.wxss文件，清空所有的內(nèi)容，進(jìn)入App.json，修改

導(dǎo)航欄標(biāo)題為“中國天氣網(wǎng)”。

17

（3）進(jìn)入index.wxml，進(jìn)行當(dāng)天天氣情況的界面布局，包括溫度、最低溫度和最高溫度、天氣

情況、城市、星期、風(fēng)向情況，代碼如下：

<viewclass="content">

<viewclass="today">

<viewclass="info">

<viewclass="temp">℃</view>

<viewclass="lowhigh"></view>

<viewclass="type"></view>

<viewclass="city"></view>

<viewclass="week"></view>

<viewclass="weather"></view>

</view>

</view>

</view>

（4）進(jìn)入index.js，在data里提供天氣的數(shù)據(jù)，讓這些數(shù)據(jù)在界面里顯示出來，代碼如下：

Page({

data:{

temp:"4",

low:"-1℃",

high:"10℃",

type:"晴",

city:"北京",

week:"星期二",weather:"無持續(xù)風(fēng)向微風(fēng)級"

}

})

（5）進(jìn)入index.wxml，將data里提供的天氣數(shù)據(jù)綁定到頁面里，代碼如下：

<viewclass="content">

<viewclass="today">

<viewclass="info">

<viewclass="temp">{{temp}}℃</view>

<viewclass="lowhigh">{{low}}/{{high}}</view>

<viewclass="type">{{type}}</view>

<viewclass="city">{{city}}</view>

<viewclass="week">{{week}}</view>

<viewclass="weather">{{weather}}</view>

</view>

</view>

</view>

界面效果如圖所示。

天氣界面

（6）進(jìn)入index.wxss，為index.wxml添加樣式，美化頁面，代碼如下：

.content{

font-family:微軟雅黑,宋體;font-size:

14px;background-size:cover;height:

100%;

18

width:100%;

color:#333333;

}

.today{

padding-top:70rpx;

height:50%;

}

.temp{

font-size:80px;text-align:

center;

}

.city{

font-size:20px;text-align:

center;margin-top:20rpx;

margin-right:10rpx;

}

.lowhigh{

font-size:12px;

text-align:center;margin-

top:30rpx;

}

.type{

font-size:16px;text-align:

center;margin-top:30rpx;

}

.week{

font-size:12px;text-align:

center;margin-top:30rpx;

}

.weather{

font-size:12px;text-align:

center;margin-top:20rpx;

}

添加樣式后界面效果如圖所示。

添加樣式

將js文件里的data進(jìn)行數(shù)據(jù)綁定，就可以在wxml文件里通過雙大括號的方式，將數(shù)據(jù)值顯示

出來，動態(tài)地加載數(shù)據(jù)，以實現(xiàn)數(shù)據(jù)綁定的動態(tài)效果。

2.5微信小程序條件渲染

2.5.1wx:if判斷單個組件

在微信小程序框架里，使用wx:if="{{condition}}"來判斷是否需要渲染該代碼塊，示例代碼

19

如下：

<viewwx:if="{{condition}}">True</view>

使用wx:elif和wx:else來添加一個else塊：

<viewwx:if="{{length>5}}">1</view>

<viewwx:elif="{{length>2}}">2</view>

<viewwx:else>3</view>

2.5.2blockwx:if判斷多個組件

wx:if是一個控制屬性，需要將它添加到一個標(biāo)簽上。但是如果我們想一次性判斷多個組件標(biāo)

簽，就可以使用一個<block/>標(biāo)簽將多個組件包裝起來，并在上面使用wx:if控制屬性，示例代

碼如下：

<blockwx:if="{{true}}">

<view>view1</view>

<view>view2</view>

</block>

<block/>不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬

性。

2.6微信小程序列表渲染

2.6.1wx:for列表渲染單個組件

在組件上使用wx:for控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。數(shù)

組當(dāng)前項的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項的變量名默認(rèn)為item，示例代碼如下：

<viewwx:for="{{array}}">

{{index}}:{{item.message}}

</view>

Page({

data:{

array:[{message:'foo',

},{

message:'bar'

}]

}

})

使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名，使用wx:for-index可以指定數(shù)組當(dāng)前下

標(biāo)的變量名，示例代碼如下：

<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">

{{idx}}:{{itemName.message}}

</view>

2.6.2blockwx:for列表渲染多個組件

wx:for應(yīng)用在某一個組件上，如果想渲染一個包含多節(jié)點的結(jié)構(gòu)塊，這時wx:for需要應(yīng)用在

<block/>標(biāo)簽上，示例代碼如下：

<blockwx:for="{{[1,2,3]}}">

<view>{{index}}:</view>

<view>{{item}}</view>

</block>

2.6.3wx:key指定唯一標(biāo)識符

如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中，并且希望列表中的項目保持自

己的特征和狀態(tài)（如<input/>中的輸入內(nèi)容，<switch/>的選中狀態(tài)），需要使用wx:key來指定

20

列表中項目的唯一標(biāo)識符。

wx:key的值以以下兩種形式提供。

（1）字符串：代表在for循環(huán)的array中item的某個property，該property的值需要是

列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。

（2）保留關(guān)鍵字：*this代表在for循環(huán)中的item本身，這種表示需要item本身是一個

唯一的字符串或者數(shù)字，當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候，會校正帶有key的組件，框架會

確保它們被重新排序，而不是重新創(chuàng)建，以確保組件保持自身的狀態(tài)，并且提高列表渲染時的效率。

示例代碼如下：

<switchwx:for="{{objectArray}}"wx:key="unique"style="display:block;">{{item.id}}</switch>Page({

data:{

objectArray:[

{id:5,unique:'unique_5'},

{id:4,unique:'unique_4'},

{id:3,unique:'unique_3'},

{id:2,unique:'unique_2'},

{id:1,unique:'unique_1'},

{id:0,unique:'unique_0'},

]

}

}

2.7微信小程序定義模板

WXML提供模板（template）功能，可以把一些共用的、復(fù)用的代碼，在模板中定義代碼片段，

然后在不同的地方調(diào)用，以達(dá)到一次編寫，多次直接使用的效果。

2.7.1定義模板

在<template/>內(nèi)定義代碼片段，使用name屬性，作為模板的名字，示例代碼如下：

<templatename="msgItem">

<view>

<text>{{index}}:{{msg}}</text>

<text>Time:{{time}}</text>

</view>

</template>

2.7.2使用模板

在WXML文件里，使用is屬性，聲明需要使用的模板，然后將模板所需要的data傳入，示例

代碼如下：

<templateis="msgItem"data="{{item}}"/>Page({

data:{

item:{

index:0,

msg:'thisisatemplate',time:'2018-

06-13'

}

}

})

is屬性可以使用三元運算語法，來動態(tài)決定具體需要渲染哪個模板：

<templatename="odd">

<view>odd</view>

</template>

<templatename="even">

<view>even</view>

</template>

21

<blockwx:for="{{[1,2,3,4,5]}}">

<templateis="{{item%2==0?'even':'odd'}}"/>

</block>

2.8微信小程序的引用功能

WXML提供兩種文件引用方式：import和include。兩者的區(qū)別在于：import引用模板文件，

include將引用整個除了<template/>文件。

2.8.1import引用

import可以在該文件中使用目標(biāo)文件定義的template。

假如在item.wxml中定義了一個叫item的template，示例代碼如下：

<!--item.wxml-->

<templatename="item">

<text>{{text}}</text>

</template>

在index.wxml中引用了item.wxml，就可以使用item模板，示例代碼如下：

<importsrc="item.wxml"/>

<templateis="item"data="{{text:'forbar'}}"/>

2.8.2include引用

include可以將目標(biāo)文件除了<template/>的整個代碼引入，相當(dāng)于是復(fù)制到include位置，示

例代碼如下：

<!--index.wxml-->

<includesrc="header.wxml"/>

<view>body</view>

<includesrc="footer.wxml"/>

<!--header.wxml-->

<view>header</view>

<!--footer.wxml-->

<view>footer</view>

2.9WXS小程序腳本語言

WXS（WeiXinScript）是小程序的一套腳本語言，結(jié)合WXML頁面文件，可以構(gòu)建出頁面的結(jié)

構(gòu)。它是把原來放在js文件里進(jìn)行處理的邏輯，直接放在WXML頁面文件里進(jìn)行處理。它有兩種使用

方式：一種是將WXS腳本語言嵌入到WXML頁面文件里，在wxml文件中的<wxs>標(biāo)簽內(nèi)來處理相關(guān)

邏輯；另一種是以.wxs后綴結(jié)尾的文件獨立存在，然后再引入到