微信小程序框架分析教案

微信小程序框架分析

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

課程名稱教程項(xiàng)目名稱微信小程序框架分析

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

項(xiàng)目性質(zhì)□演示性□驗(yàn)證性□設(shè)計(jì)性√綜合性

授課班級(jí)授課日期授課地點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

（3）微信小程序注冊(cè)頁(yè)面的使用

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

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

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

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

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

（9）WXS小程序腳本語(yǔ)言

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

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

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

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

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

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

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

1

教學(xué)過(guò)程

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

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

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

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

課前組織

學(xué)生注意力。

【課前說(shuō)明】

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

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

課程說(shuō)明

解。

【目的】

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

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

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

微信小程序框架目錄

課程內(nèi)容

2.1.1框架全局文件

描述

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

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

app.wxss文件（小程序公共樣式表）、project.config.json文件（小程序項(xiàng)目個(gè)性化配置文

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

對(duì)所有頁(yè)面都有效，如表所示。

框架全局文件

文件是否必填作用

app.js是裝載小程序邏輯

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

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

project.config.json是裝載小程序項(xiàng)目個(gè)性化配置

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

2

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

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

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

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

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

用，如圖所示。

app.js小程序邏輯

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

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

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

示。

app.json文件的功能

3

（1）配置頁(yè)面路徑。

自動(dòng)創(chuàng)建頁(yè)面

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

窗口表現(xiàn)

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

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

（4）配置網(wǎng)絡(luò)超時(shí)?？梢耘渲镁W(wǎng)絡(luò)請(qǐng)求、文件上傳、文件下載時(shí)最大的請(qǐng)求時(shí)間，超過(guò)這個(gè)時(shí)

間，則不再請(qǐng)求。

4

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

沒(méi)有開(kāi)啟debug模式

開(kāi)啟debug模式

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

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

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

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

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

小程序公共樣式表

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

5

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

4．project.config.json小程序項(xiàng)目個(gè)性化配置文件

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

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

工具在每個(gè)項(xiàng)目的根目錄都會(huì)生成一個(gè)project.config.json文件，用戶在工具上做的任何配置都

會(huì)寫入這個(gè)文件。重新安裝工具或者換計(jì)算機(jī)工作時(shí)，用戶只要載入同一個(gè)項(xiàng)目的代碼包，開(kāi)發(fā)

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

動(dòng)壓縮等一系列選項(xiàng)。

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

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

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

{

"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）其他頁(yè)面都會(huì)被索引。

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

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

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

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

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

2.1.2工具類文件

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

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

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

具類文件。

6

時(shí)間格式化工具類文件

2.1.3框架頁(yè)面文件

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

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

框架頁(yè)面文件

文件類型是否必填作用

js是頁(yè)面邏輯

json否頁(yè)面配置

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

wxs否小程序腳本語(yǔ)言

wxss否頁(yè)面樣式表

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

頁(yè)面文件

每個(gè)頁(yè)面都有一個(gè)獨(dú)立的文件夾，比如日志頁(yè)面logs文件夾，它的下面放置5個(gè)文件：logs.js

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

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

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

7

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

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

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

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

添加項(xiàng)目

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

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

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

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

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

8

配置頁(yè)面路徑

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

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

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

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

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

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

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

9

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

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

電影界面

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

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

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

生命周期函數(shù)

屬性類型描述觸發(fā)時(shí)機(jī)

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

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

次）

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

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

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

onErrorFunction錯(cuò)誤監(jiān)聽(tīng)函數(shù)

onError并附帶錯(cuò)誤信息

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

onPageNotFoundFunction頁(yè)面不存在監(jiān)聽(tīng)函數(shù)

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

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

其他Any

this可以使用

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

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

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

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

或者小程序的時(shí)候就會(huì)觸發(fā)onShow這個(gè)函數(shù)。只要程序啟動(dòng)或者從后臺(tái)進(jìn)入前臺(tái)都會(huì)觸發(fā)該函數(shù)。

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

該函數(shù)。

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

10

誤信息。

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

碼：

App({

onLaunch:function(){

//Dosomethinginitialwhenlaunch.

},

onShow:function(){

//Dosomethingwhenshow.

},

onHide:function(){

//Dosomethingwhenhide.

},

onError:function(msg)

{console.log(msg)

},

globalData:'Iamglobaldata'

})

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

在頁(yè)面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微信小程序注冊(cè)頁(yè)面的使用

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

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

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

如表所示。

object參數(shù)說(shuō)明

屬性類型描述

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

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

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

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

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

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

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

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

onShareAppMessageFunction用戶單擊右上角分享

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

onTabItemTapFunction當(dāng)前是tab頁(yè)時(shí)，點(diǎn)擊tab時(shí)觸發(fā)

onResizefunction頁(yè)面尺寸發(fā)生改變的事件可以使用頁(yè)面的onResize來(lái)監(jiān)聽(tīng)

11

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

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

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

Page({

data:{

text:"Thisispagedata."

},

onLoad:function(options){

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

},

onReady:function(){

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

},

onShow:function(){

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

},

onHide:function(){

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

},

onUnload:function(){

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

},

onPullDownRefresh:function(){

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

},

onReachBottom:function(){

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

},

onShareAppMessage:function(){

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

},

//事情處理

viewTap:function(){

this.setData({

text:'Setsomedataforupdatingview.'

})

},

customData:{

hi:'MINA'

}

})

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

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

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

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

示例代碼：

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

Page({

data:{

motto:'HelloWorld',

userInfo:{}

}})

2.3.2生命周期函數(shù)

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

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

（2）onShow頁(yè)面顯示：每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次。

12

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

圖層進(jìn)行交互，對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)趏nReady之后設(shè)置。

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

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

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

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

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

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

頁(yè)面的下拉刷新。

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

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

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

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

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

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

信耗時(shí)。

（4）onResize（頁(yè)面尺寸事件）：頁(yè)面尺寸發(fā)生改變的事件?？梢允褂庙?yè)面的onResize來(lái)監(jiān)

聽(tīng)。對(duì)于自定義組件，可以使用resize生命周期來(lái)監(jiān)聽(tīng)。回調(diào)函數(shù)中將返回顯示區(qū)域的尺寸信息。

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

示例代碼如下。

Page({

onResize(res){

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

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

}

})

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

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

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

分享參數(shù)

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

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

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

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

PNG及JPG。顯示圖片長(zhǎng)寬比是5:4

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

示例代碼如下。

Page({

onShareAppMessage:function(res){

return{

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

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

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

}

}

})

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

的說(shuō)明如表所示。

13

點(diǎn)擊tab頁(yè)object參數(shù)

字段類型說(shuō)明

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

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

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

示例代碼如下。

Page({

onTabItemTap(item){

console.log(item.index)

console.log(item.pagePath)

console.log(item.text)

}

})

2.3.4頁(yè)面路由管理

微信小程序的頁(yè)面路由都是由微信小程序框架來(lái)管理的，框架以棧的形式維護(hù)了所有頁(yè)面。棧作

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

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

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

時(shí)，新頁(yè)面入棧；打開(kāi)新頁(yè)面時(shí)，新頁(yè)面入棧；頁(yè)面重定向時(shí)，當(dāng)前頁(yè)面出棧，新頁(yè)面入棧；頁(yè)面返

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

載時(shí)，頁(yè)面全部出棧，只留下新的頁(yè)面。

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

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

頁(yè)面路由方式觸發(fā)時(shí)機(jī)路由后頁(yè)面路由前頁(yè)面

初始化小程序打開(kāi)的第一個(gè)頁(yè)面onLoad，onShow

打開(kāi)新頁(yè)面調(diào)用APIwx.navigateTo或onLoad，onShowonHide

使用組件<navigatoropen-

type="navigate"/>

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

用組件<navigatoropen-

type="redirect"/>

頁(yè)面返回onShowonUnload（多層頁(yè)面

調(diào)用APIwx.navigateBack

返回，每個(gè)頁(yè)面都會(huì)

或用戶按左上角返回按鈕

按順序觸發(fā)

onUnload）

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

tab切換Function

<navigatoropen-

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

tab

調(diào)用APIwx.reLaunch

或使用組件

重啟動(dòng)OnLoad，onShowonUnload

<navigatoropen-

type="reLaunch"/>

2.3.5自定義函數(shù)

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

層的組件中可以加入事件綁定，當(dāng)達(dá)到觸發(fā)事件時(shí)，就會(huì)執(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ā)送到視圖層，同時(shí)改變對(duì)應(yīng)的

this.data的值。

setData()參數(shù)格式：接受一個(gè)對(duì)象，以key，value的形式表示將this.data中的key對(duì)應(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(){

//可以用這種方式動(dòng)態(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頁(yè)面里的動(dòng)態(tài)數(shù)據(jù)，都是來(lái)自js文件Page的data，數(shù)據(jù)綁定就是通過(guò)雙大括號(hào)（{{}}）

15

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

示例代碼如下：

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控制屬性綁定

控制屬性綁定用來(lái)進(jìn)行if語(yǔ)句條件判斷，如果滿足條件，則執(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"，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成boolean類型后代表真值。

2.4.4運(yùn)算

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

1．三元運(yùn)算

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

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

<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．字符串運(yùn)算

16

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

data:{

name:'MINA'

}

})

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

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

data:{

object:{key:'Hello'

},

array:['MINA']

}

})

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

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

方式，來(lái)顯示天氣情況，如圖所示。

天氣微信小程序

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

weather項(xiàng)目

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

導(dǎo)航欄標(biāo)題為“中國(guó)天氣網(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ù)在界面里顯示出來(lái)，代碼如下：

Page({

data:{

temp:"4",

low:"-1℃",

high:"10℃",

type:"晴",

city:"北京",

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

}

})

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

<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添加樣式，美化頁(yè)面，代碼如下：

.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文件里通過(guò)雙大括號(hào)的方式，將數(shù)據(jù)值顯示

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

2.5微信小程序條件渲染

2.5.1wx:if判斷單個(gè)組件

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

19

如下：

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

使用wx:elif和wx:else來(lái)添加一個(gè)else塊：

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

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

<viewwx:else>3</view>

2.5.2blockwx:if判斷多個(gè)組件

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

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

碼如下：

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

<view>view1</view>

<view>view2</view>

</block>

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

性。

2.6微信小程序列表渲染

2.6.1wx:for列表渲染單個(gè)組件

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

組當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xià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列表渲染多個(gè)組件

wx:for應(yīng)用在某一個(gè)組件上，如果想渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊，這時(shí)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)識(shí)符

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

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

20

列表中項(xiàng)目的唯一標(biāo)識(shí)符。

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

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

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

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

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

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

示例代碼如下：

<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屬性可以使用三元運(yùn)算語(yǔ)法，來(lái)動(dòng)態(tài)決定具體需要渲染哪個(gè)模板：

<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將引用整個(gè)除了<template/>文件。

2.8.1import引用

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

假如在item.wxml中定義了一個(gè)叫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/>的整個(gè)代碼引入，相當(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小程序腳本語(yǔ)言

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

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

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

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