一.頁面導航

1.聲明式導航

通過navigator來跳轉

1.1 導航到tabBar頁面

比如跳轉到tabBar頁面就需要navigator來跳轉，要用到他的url和open-type屬性

1.2 導航到非tabBar頁面

非tabBar頁面只是沒有配置為tabBar的頁面，註意還是頁面

配置其他都一樣，將open-type改為navigate即可

為了簡便，當跳轉的為非tabBar頁面可以省略opentype

1.3 後退

點擊實現後退效果，兩個關鍵屬性 opentype為navigateBack，delta為數字表示後退的層級

為了簡便如果只是返回上一個頁面可以省略，delta

2. 編程式導航

2.1 tabBar

到tabBar需要調用 wx.switch(object)方法，裡面的對象配置屬性為

2.2 非tabBar

wx.navigateTo（）

裡面的對象屬性同上

2.3 後退

wx.navigateBack（）

配置對象為

3. 導航傳參

聲明式導航傳參通過裡面的url查詢字元串的方式

編程式導航通過對象裡面的url來傳參

在onLoad接受導航參數

任何形式導航參數都可以在onLoad鉤子中獲取到，通過他的參數options

二.頁面事件

2.1下拉刷新

實現頁面數據重新載入

• 首先需要開啟下拉刷新

• 配置背景顏色和loading樣式

• 監聽下拉的事件函數 onPullDownRefresh

• 停止下拉刷新效果，因為下拉刷新就是刷新了數據，但是你會發現loading效果還是在繼續，所以這個時候需要手動去取消刷新效果，wx.stopPullDownRefresh（）調用這個方法即可停止刷新

2.2 上拉觸底

就是往上波動也就是頁面向下滑動的過程中會到一個程式去刷新下麵的數據

通過 onReachBottom（）事件來監聽上拉觸底

是當一頁的高度走完了之後觸發

上拉觸底距離是指觸發上拉觸底事件時，滾動條距離頁面底部的距離

可在全局或者頁面的json文件配置，通過onReachBottmDistance來配置

不用寫單位，預設px

上拉觸底案例：

首先獲取介面數據，並渲染到頁面，直接通過rgba賦予背景色

然後在上拉觸底事件中，再次獲取數據，關鍵步驟在於獲取數據裡面給data賦值，是在重覆的用解構賦值，添加值進來

然後添加loading效果查看官方文檔，可看到wx.showloading

獲取值之前就loading

註意一個request的回調，complete，表示完成數據請求

節流處理：

為什麼要進行節流處理，因為當我們上拉觸底的時候，如果瘋狂上拉，會瘋狂獲取數據顯然這樣是不行的

而上拉觸底節流一般分為這幾個步驟，現在data定義節流閥，然後再獲取數據的函數裡面修改節流閥，最後在上拉觸底事件裡面判斷節流閥

2.3 自定義編譯模式

當我們每次在編輯其他頁面的時候，每次重新編譯都要重新點進這個頁面才能看效果很麻煩

我們可以自定義每次編譯完成都進入自己的頁面

三.生命周期

小程式的生命周期分為應用生命周期和頁面生命周期，其中應用生命周期包含頁面生命周期也就是相當於vm和vc的關係

所以與之對應應用生命周期函數就是小程式從啟動到銷毀的那些函數，而頁面生命周期函數就是一個頁面從載入到銷毀的一些函數

3.1 應用生命周期

應用生命周期函數在app.js中來聲明，分別是onLaunch，onShow，onHide

前臺就是當前在這個小程式裡面就是前臺，後臺就是退回桌面，此時小程式後臺運行

可以在開發工具模擬切後臺，沒有在工具，工具欄管理打開

3.2 頁面生命周期

頁面周期函數有五個

一般在onLoad初始化數據，在onReady修改頁面內容比如修改當面頁面標題

四.WXS腳本

wsx是小程式獨有的一套腳本語言，wxml無法調用頁面js中的函數，需要data來轉換一層，但是可以調用wxml定義的函數，wxs典型應用就是過濾器，將數據處理過後再渲染到頁面，wsx的語法跟js一樣，但是遵循的是commonJS語法

4.1 基本用法

跟script標簽一樣有標簽，寫在wxml中

剛纔是內嵌式，還可以外聯

註意沒有對象簡寫形式

如何引入外聯的wxs腳本

4.2 註意

• 雖然跟js很像，但是還是不是js語言

• wxs典型場景就是過濾器，經常配合插值語法使用，不能作為事件回調

  

• 具有隔離性，不能調用js裡面的函數，也不能調用小程式的api

• 在ios設備，wxs會比js快2-20倍

五.本地生活案例完善

繼續本地生活的案例這次做分頁

點擊list每一項應該進入一個新的頁面並且展示他的內容，所以要把這些都改成navigator組件

並且應該把當前的id和name都傳過去

註意參數為變數直接用插值語法

5.1 設置標題內容創建編譯模式

因為我們這裡的標題是動態獲取的，不能再json文件修改，通過文檔可發現 wx.setNavigationBarTitle動態設置標題

又見文檔可知，要修改視圖層的內容比如標題等，應該在onReady生命周期函數中來

但是由於參數要在onLoad獲取

為了方便我們來調試商鋪列表頁面數據，可以創建編譯模式

5.2 獲取並渲染商鋪列表數據

這裡主要註意兩點

一個是我們後面會上拉觸底繼續獲取請求看到更多數據，這個前面也做過的核心就在我們的數據應該是老數據和新數據的一個合併獲取

還有一個點就是我們需要獲取數據裡面返回來的總數據條數，好做分頁功能，具體是個什麼作用後面會說，這裡主要註意一點對象名如果帶有-這個分隔符就不能用什麼.什麼來獲取了必須要用【】這個形式而且裡面引號包裹

5.3 上拉刷新

首先需要在獲取數據裡面開啟關閉loading效果

然後設置一下上拉觸底的距離

然後邏輯就是在上拉觸底事件中將page+1 再獲取數據，這個時候就會融合目前數據和下一頁數據

然後記得還要做節流

初始為true，在獲取數據裡面先判斷是否為true，進來先改為false，然後complete改為true，下拉觸底事件判斷是否為true，true再page+1，否則return

判斷數據是否載入完畢：

為什麼要進行判斷，因為當我們數據沒有了，你還繼續下拉刷新，不判斷的話就會繼續去請求數據，返回一些空數據回來，正常邏輯這個時候不應該再發起請求了

這裡有個公式，用到前面說的total，專門用來判斷數據是否記載完畢的公式，當前頁碼乘以每一頁展示的數據>=總數據那麼就說明載入完畢了

所以可以在我們上拉觸底再來一個判斷

用微信自帶的彈出提示框

wx.showToast

只不過他要註意的是他預設icon為success，如果不需要要手動修改為none

5.4 下拉刷新

首先應該開啟下拉刷新事件

然後我們下拉刷新主要作用就是回到第一頁的狀態，那就需要重新規劃一些數據

這個時候處理我們的關閉刷新視窗，按理說是放在我們complete回調裡面

但是有個問題就是，這樣一弄不光是下拉刷新，上拉等一系列操作都會去停止一下下拉刷新，顯然不對，這裡應該這麼做

通過一個回調，給這個獲取數據的函數傳一個形參回調函數，然後判斷有回調就執行回調

5.5 wxs處理手機號

首先在外面創建一個wxs文件

裡面為一個函數，然後需要使用commonJs語法導出

註意沒有對象的簡寫形式

然後wxml這邊導入

註意這裡面的，splice方法，如果不刪除，就第二個參數為0，並且要插入就寫上你要插入的數據