一、目標(biāo)

A. 能夠知道如何實(shí)現(xiàn)頁(yè)面之間的導(dǎo)航跳轉(zhuǎn)
B. 能夠知道如何實(shí)現(xiàn)下拉刷新效果
C. 能夠知道如何實(shí)現(xiàn)上拉加載更多效果
D. 能夠知道小程序中常用的生命周期

二、目錄

A. 頁(yè)面導(dǎo)航
B. 頁(yè)面事件
C. 生命周期
D. WXS腳本
E. 案例-本地生活（列表頁(yè)面）

三、頁(yè)面導(dǎo)航

3.1 什么是頁(yè)面導(dǎo)航

頁(yè)面導(dǎo)航指的是頁(yè)面之間的相互跳轉(zhuǎn)。例如，瀏覽器中實(shí)現(xiàn)頁(yè)面導(dǎo)航的方式有如下兩種：
A. 鏈接
B. location.href

3.2 小程序中實(shí)現(xiàn)頁(yè)面導(dǎo)航的兩種方式

A. 聲明式導(dǎo)航
在頁(yè)面上聲明一個(gè)導(dǎo)航組件，通過點(diǎn)擊組件實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

B. 編程式導(dǎo)航
調(diào)用小程序的導(dǎo)航API，實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)

3.3 頁(yè)面導(dǎo)航-聲明式導(dǎo)航

3.3.1 導(dǎo)航到tabBar頁(yè)面

tabBar頁(yè)面指的是被配置為tabBar的頁(yè)面在使用組件跳轉(zhuǎn)到指定的tabBar頁(yè)面時(shí)，需要指定url屬性和open-type屬性，其中：

A. url表示要跳轉(zhuǎn)的頁(yè)面的地址，必須以 / 開頭
B. open-type表示跳轉(zhuǎn)的方式，必須為switchTab
示例代碼如下：

<navigator url="/pages/3link/3link" open-type="switchTab">跳轉(zhuǎn)到[聯(lián)系我們]
</navigator>

3.3.2 導(dǎo)航到非tabbar界面

非tabBar頁(yè)面指的是沒有被配置為tabBar的頁(yè)面。
在使用組件跳轉(zhuǎn)到普通的非tabBar頁(yè)面時(shí)，則需要指定url屬性和open-type屬性，其中：
A. url表示要跳轉(zhuǎn)的頁(yè)面的地址，必須以/開頭
B. open-type表示跳轉(zhuǎn)的方式，必須為navigate
示例代碼

<navigator url="/pages/4info/4info" open-type="navigate">跳轉(zhuǎn)到[消息界面]
</navigator>

3.3.3 后退導(dǎo)航

如果要后退到上一頁(yè)面或多級(jí)頁(yè)面，則需要指定open-type屬性和delta屬性，其中：

A. open-type的值必須是navigateBack,表示要進(jìn)行后退導(dǎo)航
B. delta的值必須是數(shù)字，表示要后退的層級(jí)

示例代碼如下：

<navigator open-type="navigateBack" delta="1">后退【上一級(jí)】</navigator>

注意：為了方便，如果只是后退到上一頁(yè)面，則可以省略delta屬性，因?yàn)槠淠J(rèn)值就是1

3.4 頁(yè)面導(dǎo)航-編程式導(dǎo)航

3.4.1 導(dǎo)航到tabbar頁(yè)面

調(diào)用wx.switchTab(Object object)方法，可以跳轉(zhuǎn)到tabBar頁(yè)面。其中Object參數(shù)對(duì)象的屬性列表如下：

<button type="primary" bind:tap="goto">導(dǎo)航到【聯(lián)系我們2】</button>

goto(){wx.switchTab({url: '/pages/3link/3link'})
},

3.4.2 導(dǎo)航到非tabbar頁(yè)面

調(diào)用wx.navigateTo(Object object)方法，可以跳轉(zhuǎn)到非tabBar的頁(yè)面。其中Object參數(shù)對(duì)象的屬性列表

屬性：

<button type="warn" bind:tap="goto2">導(dǎo)航到【消息列表】</button>

goto2(){wx.navigateTo({url: '/pages/4info/4info',})
},

3.4.3 后退導(dǎo)航

調(diào)用wx.navigateBack(Object object)方法，可以返回上一頁(yè)面或多級(jí)頁(yè)面。其中Object參數(shù)對(duì)象可選的屬性列表如下：

<button bind:tap="goback2">返回【上一級(jí)】</button>

goback2(){wx.navigateBack()
},

3.5 頁(yè)面導(dǎo)航-導(dǎo)航傳參

3.5.1 聲明式導(dǎo)航傳參

navigator組件的url屬性用來指定將要跳轉(zhuǎn)到的頁(yè)面的路徑。同時(shí)，路徑的后面還可以攜帶參數(shù)：

A. 參數(shù)與路徑之間使用？分隔
B. 參數(shù)鍵與參數(shù)值用=相連
C. 不同參數(shù)用&分隔

代碼示例如下：

<navigator open-type="navigate" url="/pages/4info/4info?name=zs&age=18">聲明式傳參
</navigator>

3.5.2 編程式導(dǎo)航傳參

調(diào)用wx.navigateTo(Object object)方法跳轉(zhuǎn)頁(yè)面時(shí)，也可以攜帶參數(shù)，代碼示例如下：

<button bind:tap="goto3">編程式傳參</button>

goto3(){wx.navigateTo({url: '/pages/4info/4info?name=ls&age=20',})
},

3.5.3 在onLoad中接收導(dǎo)航參數(shù)

通過聲明式導(dǎo)航傳參或編程式導(dǎo)航傳參所攜帶的參數(shù)，可以直接在onLoad事件中直接獲取到，示例代碼如下：

/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad(options) {//options就是導(dǎo)航傳參過來的參數(shù)對(duì)象，返回的是一個(gè)對(duì)象console.log(options);//要把返回過來的數(shù)據(jù)放在data里面this.setData({user: options});
},

要把數(shù)據(jù)放在data里面，其它的方法可能被訪問

四、頁(yè)面事件-下拉刷新事件

4.1 什么是下拉刷新

下拉刷新是移動(dòng)端的專有名詞，指的是通過手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁(yè)面數(shù)據(jù)的行為。

4.2 啟用下拉刷新

啟用下拉刷新有兩種方式：

A. 全局開啟下拉刷新
在app.json的window節(jié)點(diǎn)中，將enablePullDownRefresh設(shè)置為true
B. 局部開啟下拉刷新(推薦)
在頁(yè)面的.json配置文件中，將enablePullDownRefresh設(shè)置為true
在實(shí)際開發(fā)中，推薦使用第二種方式，為需要的頁(yè)面單獨(dú)開啟下拉刷新的效果

4.3 配置下拉刷新窗口的樣式

在全局或頁(yè)面的.json配置文件中，通過backgroundColor和backgroundTextStyle來配置下拉刷新窗口的樣式，其中：

A. backgroundColor用來配置下拉刷新窗口的背景顏色，僅支持16進(jìn)制的顏色值
B. backgroundTextStyle用來配置下拉刷新loading的樣式，僅支持dark和light

4.4 監(jiān)聽頁(yè)面的下拉刷新事件

在頁(yè)面的.js文件中，通過onPullDownRefresh()函數(shù)即可監(jiān)聽當(dāng)前頁(yè)面的下拉刷新事件。例如，在頁(yè)面的wxml中有如下的UI結(jié)構(gòu)，點(diǎn)擊按鈕可以讓count值自增+1;

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

<view>count:{{count}}</view>
<button type="primary" bind:tap="countAdd">+1</button>

js：

data: {count:0
},
countAdd(){this.setData({count:this.data.count+1});
},

在觸發(fā)頁(yè)面的下拉刷新事件的時(shí)候，如果要把count的值重置為0，示例代碼如下：
.json

js

/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh() {this.setData({count: 0})
},

4.5 停止下拉刷新

當(dāng)處理完下拉刷新后，下拉刷新的loading效果會(huì)一直顯示，不會(huì)主動(dòng)消失，所以需要手動(dòng)隱藏loading效果。此時(shí)，調(diào)用wx.stopPulldownRefresh()可以停止當(dāng)前頁(yè)面的下拉刷新。示例如下：

/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh() {this.setData({count: 0})//當(dāng)數(shù)據(jù)重置成功之后，調(diào)用此函數(shù)，關(guān)閉下拉刷新效果wx.stopPullDownRefresh()
},

五、上拉觸底

5.1 什么是上拉觸底

上拉觸底是移動(dòng)端的專有名詞，通過手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。

5.2 監(jiān)聽頁(yè)面的上拉觸底事件

在頁(yè)面的.js文件中，通過onReachBottom()函數(shù)即可監(jiān)聽當(dāng)前頁(yè)面的上拉觸底事件。示例代碼如下：

/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom() {console.log('已經(jīng)觸底了.......');
},

5.3 配置上拉觸底距離

上拉觸底距離指的是觸發(fā)上拉觸底事件時(shí)，滾動(dòng)條距離頁(yè)面底部的距離，可以在全局或局部的.json配置文件中，通過onReachBottomDistance屬性來配置上拉觸底的距離。
小程序默認(rèn)的觸底距離是50px,在實(shí)際開發(fā)中，可以根據(jù)自己的需求修改這個(gè)默認(rèn)值。

六、生命周期

6.1 什么是生命周期

生命周期（Life Cycle）是指一個(gè)對(duì)象從創(chuàng)建->運(yùn)行->銷毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段。例如：
A. 張三出生，表示這個(gè)人生命周期的開始
B. 張三離世，表示這個(gè)人生命周期的結(jié)束
C. 中間張三的一生，就是張三的生命周期

我們可以把每個(gè)小程序運(yùn)行的過程，也概括為生命周期：
A. 小程序的啟動(dòng)，表示生命周期的開始
B. 小程序的關(guān)閉，表示生命周期的結(jié)束
C. 中間小程序運(yùn)行的過程，就是小程序的生命周期

6.2 生命周期的分類

在小程序中，生命周期分為兩類，分別是：

A .應(yīng)用生命周期
特指小程序從啟動(dòng)->運(yùn)行->銷毀的過程
B .頁(yè)面生命周期
特指小程序中，每個(gè)頁(yè)面的加載->渲染->銷毀的過程
其中，頁(yè)面的生命周期范圍較小，應(yīng)用程序的生命周期范圍較大，如圖所示：

6.3 什么是生命周期函數(shù)

生命周期函數(shù)：是由小程序框架提供的內(nèi)置函數(shù)，會(huì)伴隨著生命周期，自動(dòng)按次序執(zhí)行。
生命周期函數(shù)的作用：允許程序員在特定的時(shí)間點(diǎn)，執(zhí)行某些特定的操作。例如，頁(yè)面剛加載的時(shí)候，可以在onLoad生命周期函數(shù)中初始化頁(yè)面的數(shù)據(jù)
注意： 生命周期強(qiáng)調(diào)的是時(shí)間段，生命周期函數(shù)強(qiáng)調(diào)的是時(shí)間點(diǎn)

6.4 生命周期函數(shù)的分類

小程序中的生命周期函數(shù)分為兩類，分別是：

A. 應(yīng)用的生命周期函數(shù)
特指小程序從啟動(dòng)->運(yùn)行->銷毀期間依次調(diào)用的那些函數(shù)
B. 頁(yè)面的生命周期函數(shù)
特指小程序中，每個(gè)頁(yè)面從加載->渲染->銷毀期間依次調(diào)用的那些函數(shù)

6.5 應(yīng)用的生命周期函數(shù)

小程序的應(yīng)用生命周期函數(shù)需要在app.js中進(jìn)行申明，示例代碼如下：

6.6 頁(yè)面的生命周期函數(shù)

小程序的頁(yè)面生命周期函數(shù)需要在頁(yè)面的.js文件中進(jìn)行生命，示例代碼如下：

Page({onLoad:function (options){}, //監(jiān)聽頁(yè)面加載，一個(gè)頁(yè)面只調(diào)用一次onShow:function (){},        //監(jiān)聽頁(yè)面顯示onReady:function (){},       //監(jiān)聽頁(yè)面初次渲染完成，一個(gè)頁(yè)面只調(diào)用一次onHide:function (){},        //監(jiān)聽頁(yè)面隱藏onUnload:function (){}       //監(jiān)聽頁(yè)面卸載，一個(gè)頁(yè)面只調(diào)用一次
})

七、wxs腳本-概述

7.1 什么是wxs

WXS(WeiXin Script)是小程序獨(dú)有的一套腳本語(yǔ)言，結(jié)合WXML，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。

7.2 wxs的應(yīng)用場(chǎng)景

wxml中無法調(diào)用在頁(yè)面的.js中定義的函數(shù)，但是,wxml中可以調(diào)用wxs中定義的函數(shù)。因此，小程序中wxs的典型應(yīng)用場(chǎng)景就是“過濾器”。

7.3 wxs和js的關(guān)系

雖然wxs的語(yǔ)法類似于JS,但是wxs和js是完全不同的兩種語(yǔ)言：

A. wxs有自己的數(shù)據(jù)類型
number數(shù)值類型、string字符串類型、boolean布爾類型、object對(duì)象類型、function函數(shù)類型、array數(shù)組類型、date日期類型、 regexp正則

B.wxs不支持類似于ES6及以上的語(yǔ)法形式
不支持：let、const、解構(gòu)賦值、展開運(yùn)算符、箭頭函數(shù)、對(duì)象屬性簡(jiǎn)寫、etc
支持：var 定義變量、普通function函數(shù)等類似于ES5的語(yǔ)法

C. wxs遵循CommonJS規(guī)范
module對(duì)象
require()函數(shù)
Module.exports對(duì)象

7.4 wxs腳本-基礎(chǔ)語(yǔ)法

7.4.1 內(nèi)嵌wxs腳本

WXS代碼可以編寫在wxml文件中的標(biāo)簽內(nèi)，就像JS代碼可以編寫在html文件中的標(biāo)簽內(nèi)一樣。wxml文件中的每個(gè)標(biāo)簽，必須提供module屬性，用來指定當(dāng)前wxs的模塊名稱，方便在wxml中訪問模塊中的成員

<view>~~~~~~~~~~~wxs~~~~~~~~~~~</view>
<view>信息：{{m1.message}}</view>
<view>轉(zhuǎn)化為大寫：{{m1.toUpper('zhangsan')}}</view>
<wxs module="m1">//靜態(tài)展示文本var msg = "hello world!!!!!!!!"module.exports.message=msg;//函數(shù)module.exports.toUpper=function (str){return str.toUpperCase();}
</wxs>

7.4.2 定義外聯(lián)的wxs腳本

wxs代碼還可以縮寫在以.wxs為后綴名的文件內(nèi)，就像JS代碼可以編寫在以.js為后綴名的文件中一樣。

示例代碼如下：

7.4.3 使用外聯(lián)的wxs腳本

在wxml中引入外聯(lián)的wxs腳本時(shí)，必須為標(biāo)簽添加module和src屬性，其中

A. module用來指定模塊的名稱
B. src用來指定要引入的腳本的路徑，且必須是相對(duì)路徑

示例代碼如下：

<view>外部的wxs:{{m2.toUpper2('lisi')}}</view>
<wxs src="./tool.wxs" module="m2"></wxs>

7.5 wxs腳本-wxs的特點(diǎn)

7.5.1 與js不同

為了降低wxs(WeiXin Script)的學(xué)習(xí)成本，wxs語(yǔ)言在設(shè)計(jì)時(shí)借大量鑒了JS的語(yǔ)法。但是本質(zhì)上，wxs和JS是完全不同的兩種語(yǔ)言！

7.5.2 不能作為組件的事件回調(diào)

wxs典型的應(yīng)用場(chǎng)景就是“過濾器”，經(jīng)常配合Mustache語(yǔ)法進(jìn)行使用，例如：

<view>轉(zhuǎn)化為大寫：{{m1.toUpper('zhangsan')}}</view>

但是，在wxs中定義的函數(shù)不能作為組件的事件回調(diào)函數(shù)。例如，下面的用法是錯(cuò)誤的：

<button bind:tap="m1.toUpper">按鈕</button>

7.5.3 隔離性

隔離性指的是wxs的運(yùn)行環(huán)境和JS代碼是隔離的。體現(xiàn)如下兩方面：
A . wxs不能調(diào)用js中定義的函數(shù)
B .wxs不能調(diào)用小程序提供的API

7.5.4 性能好

A. 在IOS設(shè)備上，小程序內(nèi)的WXS會(huì)比JS代碼快2-30倍
B. 在android設(shè)備上，二者的運(yùn)行效率無差異

八、案例