如何實現頁面之間的導航跳轉

• 宣告式導航、程式設計式導航

如何實現下來重新整理效果

• enablePullDownRefresh、onPullDownRefresh

如何實現上拉載入更多效果

• onReachBottomDistance、onReachBottom

小程式中常用的生命週期函式

• 應用生命週期函式：onLaunch、onShow、onHide

• 頁面生命週期函式：onLoad、onShow、onReady、onHide、onUnload

頁面導航

宣告式導航

• 在頁面上宣告一個 <navigator> 導航元件

• 通過點選 <navigator> 元件實現頁面跳轉

• 導航到 tabBar 頁面

  • 使用 <navigator> 元件跳轉到指定的 tabBar 頁面時，需要指定 url 屬性和 open-type 屬性

    • url 表示要跳轉的頁面的地址，必須以 / 開頭

    • open-type 表示跳轉的方式，必須為 switchTab

       <navigator url="/pages/message/message" open-type="switchTab">導航到訊息頁面</navigator>

• 導航到 非tabBar 頁面

  • url 表示要跳轉的頁面的地址，必須以 / 開頭

  • open-type 表示跳轉的方式，必須為 navigate

    （可以省略不寫）

    <navigator url="/pages/info/info" open-type="navigate">導航到info頁面</navigator>

• 後退導航

  • 如果要退到上一頁面或多級頁面，則需要指定 open-type 屬性和 delta 屬性

  • open-type 的值必須是 navigateBack，表示要進行後退導航

  • delta 的值必須是數字，表示的是後退的層級（預設值為1，可以省略不寫）

    <navigator open-type="navigateBack" delta="1">返回上一頁</navigator>
     
    

程式設計式導航

• 呼叫小程式的導航 API，實現頁面的跳轉

• 導航到 tabBar 頁面

  • 呼叫 wx.switchTab(object object)方法，可以跳轉到 tabBar 頁面。

    • object 的引數物件

      • url，必填， 需要跳轉的 tabBar 頁面的路徑，路徑後不能帶引數

      • success 介面呼叫成功的回撥函式

      • fail 介面呼叫失敗的回撥函式

      • complete 介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

• 導航到 非tabBar 頁面

  • 呼叫 wx.navigateTo(object object)方法，可以跳轉到 tabBar 頁面。（具體使用類似 wx.switchTab）

• 後退導航

  • wx.navigateBack()

導航傳參

宣告式導航傳參

navigator 元件的 url 屬性用來指定將要跳轉到的頁面路徑。同時，路徑的後面還可以攜帶引數。

• 引數與路徑之間使用 ？分隔

• 引數鍵與引數值用 = 相連

• 不同引數用 & 分隔

  <vavigator url="/pages/info/info?name=zs&age=20">跳轉到info頁面</vavigator>

程式設計式導航傳參

呼叫 wx.navigateTo(object object) 方法跳轉頁面時，也可以攜帶引數。

在 onLoad 中接收導航引數

通過宣告式導航傳參或程式設計式導航傳參所攜帶的引數，可以直接在 onLoad 事件中直接獲取到

onLoad: function(option){
    // option 就是導航傳遞過來的引數物件
}

頁面事件

下拉重新整理

enablePullDownRefresh設定為 true

1. 全域性開啟下拉重新整理

2. 區域性開啟下拉重新整理

監聽下拉重新整理事件

onPullDownRefresh()

停止下拉重新整理效果

wx.stopPullDownPrefresh()

上拉觸底

監聽上拉觸底事件

onReachBottom()

配置上拉觸底距離

在全域性或頁面的.json配置檔案，配置onReachBottomDistance屬性，修改值。

生命週期

宣告週期的分類

1. 應用生命週期

   小程式從啟動 → 執行 → 銷燬的過程

   app.js →app({})

2. 頁面生命週期

   小程式中每個頁面的載入 → 渲染 → 銷燬的過程

   Page({})

WXS 指令碼

wxs 的應用場景

wxml 中無法呼叫在頁面的 .js 中定義的函式，但是，wxml 中可以呼叫 wxs 中定義的函式。因此，小程式中 wxs 的典型應用場景就是“過濾器”。

wxs 和 JavaScript的關係

1. wxs 有自己的資料型別

   • number 數值型別、string 字串型別、boolean 布林型別、object 物件型別、function 函式型別、array 陣列型別、date 型別、regexp 正則

2. wxs 不支援類似於 ES6 及以上的語法形式

   • 不支援：let、const、解構賦值、展開運算子、箭頭函式、物件屬性簡寫

   • 支援：var 定義變數、普通 function 函式等類似於 ES5 的語法

3. wxs 遵循 CommonJS 規範

   • module 物件

   • require() 函式

   • module.exports 物件

內嵌 wxs 指令碼

wxs 程式碼可以編寫在 wxml 檔案中的 <wxs> 標籤內。

wxml 檔案中的每個 <wxs></wxs> 標籤，必須提供 module 屬性，用來指定當前 wxs 的模組名稱，方便在 wxml 在訪問模組中的成員。

<view>{{ m1.toUpper(username) }}</view>
<wxs module="m1">
    // 將文字轉為大寫形式 zs → ZS
    module.exports.toUpper = function(str){
        return str.toUpperCase();
    }
</wxs> 

定義外聯的 wxs 指令碼

以 .wxs為字尾名的檔案

function toUpper(str){
    return str.toUpperCase();
}
​
module.exports = {
    toUpper: toUpper
}

使用外聯的wxs 指令碼

在 wxml 中引入外聯的 wxs 指令碼時，必須為 <wxs> 標籤新增 module 和 src 屬性。

• module 用來指定模組的名稱

• src 用來指定要引入的指令碼的路徑，且必須是相對路徑

<view>{{ m1.toUpper(username) }}</view>
// 引用外聯的 tools.wxs 指令碼，並命名為 m2
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

wxs 的特點

1. 與 JavaScript 不同

2. 不能作為元件的事件回撥

3. 隔離性

   1. 不能呼叫 js 中定義的函式

   2. 不能呼叫小程式提供的 API

4. 效能好

   1. 在 iOS 裝置上，小程式內的 wxs 會比 JavaScript 程式碼快 2~20 倍

   2. 在 android 裝置上，二者的執行效率無差異