看看微信小程式開發,有哪些事件需要記住?

語言: CN / TW / HK

highlight: an-old-hope

1. 頁面導航

1.1 小程式中實現頁面導航的兩個方式
  1. 什麼是頁面導航

    頁面導航指的是頁面之間的相互跳轉,例如,在瀏覽器中實現頁面導航的方式有如下兩種:

    • a 標籤
    • location.href
  2. 小程式中實現頁面導航的兩種方式

    • 宣告式導航

      • 在頁面上宣告一個 <navigator> 導航元件
      • 通過點選 <navigator> 元件實現頁面跳轉
    • 程式設計式導航

      • 呼叫小程式的導航 API,實現頁面的跳轉
1.2 導航到 tabBar 頁面

tabBar 頁面指的是被配置為 tabBar 的頁面

在使用 <navigator> 元件跳轉到指定的 tabBar 頁面時,需要指定 url 屬性和 open-type 屬性,其中:

  • url 表示要跳轉的 頁面的地址,必須以 / 開頭
  • open-type 表示 跳轉的方式 ,必須為 switchTab

1.3 導航到非 tabBar 頁面

非 tabBar 頁面 指的是沒有被配置為 tabBar 的頁面

在使用 <navigator> 元件跳轉到普通的非 tabBar 頁面時,則需要指定 url 屬性和 open-type 屬性,其中:

  • url 表示要跳轉的 頁面的地址,必須以 / 開頭
  • open-type 表示 跳轉的方式 ,必須為 navigate

1.4 後退導航

如果要後退到上一頁面或多級頁面,則需要指定 open-type 屬性和 delta 屬性,其中

  • open-type 的值必須是 navigateBack,表示要進行後退導航
  • delta 的值必須是數字,表示要後退的層級

1.5 導航到 tabBar 頁面

呼叫 wx.switchTab(Object object) 方法,可以跳轉到 tabBar 頁面,其中 Object 引數物件的屬性列表如下:

| 屬性 | 型別 | 是否必選 | 說明 | | -------- | -------- | ---- | ----------------------------- | | url | string | 是 | 需要跳轉的 tabBar 頁面的路徑 ,路徑後不能帶引數。 | | success | function | 否 | 介面呼叫成功的回撥函式 | | fail | function | 否 | 介面呼叫失敗的回撥函式 | | complete | function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |

示例程式碼:

1.6 導航到非 tabBar 頁面

呼叫 wx.navigateTo(Object object) 方法,可以跳轉到非 tabBar 的頁面。其中 Object 引數物件的屬性列表如下

| 屬性 | 型別 | 必填 | 說明 | | -------- | -------- | -- | ---------------------------------- | | url | string | 是 | 需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑後可以帶引數 | | success | function | 否 | 介面呼叫成功的回撥函式 | | fail | function | 否 | 介面呼叫失敗的回撥函式 | | complete | function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |

示例程式碼:

1.7 後退導航

呼叫 wx.navigateBack(Object object) 方法,可以返回上一頁面或多級頁面。其中 Object 引數物件可選的屬性列表如下:

| 屬性 | 型別 | 預設值 | 必填 | 說明 | | -------- | -------- | --- | -- | ------------------------------- | | delta | number | 1 | 否 | 返回的頁面數,如果 delta 大於現有頁面數,則返回到首頁。 | | success | function | | 否 | 介面呼叫成功的回撥函式 | | fail | function | | 否 | 介面呼叫失敗的回撥函式 | | complete | function | | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |

示例程式碼:

1.8 宣告式導航傳參
  1. navigator 元件的 url 屬性用來指定將要跳轉到的頁面的路徑。同時,路徑的後面還可以攜帶引數

  2. 引數路徑 之間使用 ? 分隔

    • 引數鍵引數值= 相連
    • 不同引數& 分隔
  3. 不能夠往 tabBar 頁面傳遞引數

  4. 程式碼示例如下:

1.9 程式設計式導航傳參
  1. 呼叫 wx.navigateTo(Object object) 方法跳轉頁面時,也可以攜帶引數,程式碼示例如下:

    • 不能夠往 tabBar 頁面傳遞引數
  2. 示例程式碼:

1.10 在 onLoad 中接收導航引數
  1. 通過 宣告式導航傳參程式設計式導航傳參 所寫攜帶的引數,可以直接在 onLoad 事件中直接獲取到

  2. 示例程式碼:

    2. 頁面事件

2.1 瞭解什麼是下拉重新整理
  1. 下拉重新整理 是移動端的專有名詞,指的是通過手指在螢幕上的下拉滑動操作,從而 重新載入頁面資料 的行為
2.2 啟動下拉重新整理

在開啟下拉重新整理以後,如何不手動停止下拉,下拉動作會一直存在,不會彈回去

在模擬器中會彈回去,在真機上不會彈回去

  1. 啟動下拉重新整理的三種方式

    • 全域性開啟下拉重新整理

      • app.jsonwindow 節點中,將 enablePullDownRefresh 設定為 true
    • 區域性開啟下拉重新整理

      • 在頁面的 .json 配置檔案中,將 enablePullDownRefresh 設定為 true
    • 使用小程式提供的 API 實現下拉重新整理

      • wx.startPullDownRefresh()
  2. 在實際開發中,推薦使用第 2 種方式,為需要的頁面單獨開啟下拉重新整理的效果

2.3 配置下拉重新整理視窗的樣式

在全域性或頁面的 .json 配置檔案中,通過 backgroundColorbackgroundTextStyle 來配置下拉重新整理視窗的樣式,其中

  • backgroundColor 用來配置下拉重新整理 視窗的背景顏色,僅支援 16 進位制的顏色值
  • backgroundTextStyle 用來配置下拉重新整理 loading 的樣式,僅支援 darklight
2.4 監聽頁面的下拉重新整理事件
  1. 在頁面的 .js 檔案中,通過 onPullDownRefresh() 函式即可監聽當前頁面的下拉重新整理事件

  2. 案例1:在頁面的 wxml 中有如下的 UI 結構,點選按鈕可以讓 count 值自增 +1

  3. 案例2:在觸發頁面的下拉重新整理事件的時候,如果要把 count 的值重置為 0,示例程式碼如下:

2.5 停止下拉重新整理的效果
  1. 當處理完下拉重新整理後,下拉重新整理的 loading 效果會一直顯示,不會主動消失, 所以需要手動隱藏 loading 效果,此時,呼叫 wx.stopPullDownRefresh() 可以停止當前頁面的上拉重新整理

  2. 示例程式碼:

2.6 瞭解什麼是上拉觸底

上拉觸底是移動端的專有名詞,通過手指在螢幕上的上拉滑動操作,從而載入更多資料的行為

2.7 監聽頁面的上拉觸底事件
  1. 在頁面的 .js 檔案中,通過 onReachBottom 函式即可監聽當前頁面上的上拉觸底事件

  2. 示例程式碼如下

2.8 配置上拉觸底距離
  1. 上拉觸底距離指的是 觸發上拉觸底事件時,滾動條距離頁面底部的距離
  2. 可以在全域性或頁面的 .json 配置檔案中,通過 onReachBottomDistance 屬性來配置上拉觸底的距離
  3. 小程式預設的觸底距離是 50px,在實際開發中,可以根據自己的需求修改這個預設值

3. 生命週期

3.1 什麼是生命週期
  1. 生命週期 (Life Cycle) 是指一個物件從 建立 -> 執行 -> 銷燬 的整個階段,強調的是一個時間段

  2. 小程式的生命週期

    • 小程式的 啟動,表示 生命週期的開始
    • 小程式的 關閉,表示 生命週期的結束
    • 中間小程式執行的過程,就是小程式的生命週期
3.2 小程式生命週期的兩個分類
  1. 應用生命週期

    • 特指小程式從啟動 --> 執行 --> 銷燬的過程
  2. 頁面生命週期

    • 特指小程式中,每個頁面的載入 --> 渲染 --> 銷燬的過程
  3. 注意:頁面的生命週期範圍較小,應用程式的生命週期範圍較大

3.3 什麼是生命週期函式
  1. 小程式框架提供的內建函式,會伴隨著生命週期,自動按次序執行

  2. 生命週期函式的作用:

    • 允許程式設計師在特定的生命週期時間點上,執行某些特定的操作
    • 例如,頁面剛載入的時候,在生命週期函式中自動發起資料請求,獲取當前頁面的資料
  1. 注意:生命週期強調的是時間段,生命週期函式強調的是時間點。
3.4 小程式中生命週期函式的兩個分類

小程式中的生命週期函式分為兩類,分別是:

  1. 應用生命週期函式

    • 特指小程式從啟動 --> 執行 --> 銷燬期間依次呼叫的那些函式
  2. 頁面生命週期函式

    • 特指小程式中,每個頁面從 載入 --> 渲染 --> 銷燬期間依次呼叫的那些函式
3.5 應用的生命週期
  1. app.js 是小程式執行的入口檔案,在 app.js 中必須呼叫 App() 函式,且只能呼叫一次。其中,App() 函式是用來註冊並執行小程式的

  2. App(Object) 函式接收一個 Object 引數,可以通過這個 Object 引數,指定小程式的應用生命週期函式

  3. app.js 中的程式碼

    js App({ ​ /** * 當小程式初始化完成時,會觸發 onLaunch(全域性只觸發一次) */ onLaunch: function () { }, ​ /** * 當小程式啟動,或從後臺進入前臺顯示,會觸發 onShow */ onShow: function (options) { }, ​ /** * 當小程式從前臺進入後臺,會觸發 onHide */ onHide: function () { }, ​ /** * 當小程式發生指令碼錯誤,或者 api 呼叫失敗時,會觸發 onError 並帶上錯誤資訊 */ onError: function (msg) { } }) ​

3.6 頁面的生命週期
  1. 每個小程式頁面,必須擁有自己的 .js 檔案,且必須呼叫 Page() 函式,否則報錯。其中 Page() 函式用來註冊小程式頁面

  2. Page(Object) 函式接收一個 Object 引數,可以通過這個 Object 引數,指定頁面的生命週期函式

  3. page.js

    js //index.js //獲取應用例項 const app = getApp() ​ Page({ ​ /** * 頁面的初始資料 */ data: { }, ​ /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { }, ​ /** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function () { }, ​ /** * 生命週期函式--監聽頁面顯示 */ onShow: function () { }, ​ /** * 生命週期函式--監聽頁面隱藏 */ onHide: function () { }, ​ /** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () { }, ​ /** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () { }, ​ /** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () { }, ​ /** * 使用者點選右上角分享 */ onShareAppMessage: function () { } })

4. wxs

4.1 什麼是 wxs
  1. 什麼是 wxs

    • WXS (WeiXin Script) 是小程式的一套指令碼語言,結合 WXML,可以構建出頁面的結構
  2. wxs 的應用場景

    • 小程式中 wxs典型應用場景 就是 過濾器
4.2 wxs 和 JavaScript 的關係
  1. 雖然 wxs 的語法類似於 JavaScript,但是 wxsJavaScript 是完全不同的兩種語言

    • wxs 有自己的資料型別

      • number 數值型別
      • string 字串型別
      • boolean 布林型別
      • object 物件型別
      • function 函式型別
      • array 陣列型別
      • date 日期型別
      • regexp 正則
    • wxs 不支援類似於 ES6 及以上的語法形式

      • ECMAScript
  2. JavaScript: DOM、BOM、ECMAScript

  3. wxs 遵循 CommonJS 規範

    • module 物件:
    • module.export
    • require 函式
4.3 拓展: wxs 遵循 CommonJS 模組化規範

CommonJSjavascript 的模組化規範之一,小程式的指令碼語言 wxs 遵循了 CommonJS 規範,因此,使用 wxs 時的體驗和使用 node.js 的體驗比較相似。

  • module 物件

    • 每個 wxs 都是獨立的模組,每個模組均有一個內建的 module 物件,每個模組都有自己獨立的作用域。
  • module.exports

    • 由於 wxs 擁有獨立作用域,所以在一個模組裡面定義的變數與函式,預設為私有的,對其他模組不可見,
    • 通過 module.exports 屬性,可以對外共享本模組的私有變數與函式。
  • require函式

    • wxs 模組中引用其他 wxs 檔案模組,可以使用 require 函式。
4.4 內嵌 wxs 指令碼
  1. 使用的規則

    • wxs 程式碼可以編寫在 wxml 檔案中的 <wxs></wxs> 標籤內,就像 javascript 程式碼可以編寫在 html 檔案中的 <script></script> 標籤內一樣。

    • wxml 檔案中的每個 <wxs></wxs> 標籤,必須提供一個 module 屬性,用來指定當前 <wxs></wxs> 標籤的模組名。在單個 wxml 檔案內,建議其值唯一。

    • module 屬性值的命名必須符合下面兩個規則:

      • 首字元必須是:字母(a-z A-Z),下劃線(_)
      • 剩餘字元可以是:字母(a-z A-Z),下劃線(_), 數字(0-9)
  2. 案例程式碼

4.5 定義外聯的 wxs 指令碼
  1. 使用的規則

    • wxs 程式碼可以編寫在以 .wxs 為字尾名的檔案內,就像 javascript 程式碼可以編寫在以 .js 為字尾名檔案中一樣。
  2. 例項程式碼

4.6 使用外聯的 wxs 指令碼
  1. wxml 中如果要引入外聯的 wxs 指令碼,必須為 <wxs></wxs> 標籤新增 modulesrc 屬性

    • module 用來為 <wxs></wxs> 標籤指定模組名,作為當前頁面訪問這個模組的標識名稱
    • src 用來指定當前 <wxs></wxs> 標籤要引入的指令碼路徑,必須是相對路徑
  2. 示例程式碼

4.7 瞭解 wxs 的 4 個特點
  1. 沒有相容性

    wxs 不依賴於執行時的基礎庫版本,可以在所有版本的小程式中執行

  2. javascript 不同

    • 為了降低 wxs 的學習成本, wxs 語言在設計時大量借鑑了 JavaScript 語法
    • 但本質上,wxsjavascript 是不同的語言,有自己的語法,並不和 javascript 一致
  1. 隔離性

    • wxs 的執行環境和其他 javascript 程式碼是隔離的

      • wxs 中不能呼叫其他 javascript 檔案中定義的函式
      • 也不能呼叫小程式提供的API
  1. 不能作為事件回撥

    • wxs 典型的應用場景就是 過濾器,經常配置 Mustache 語法進行使用

    • wxs 函式不能作為元件的事件回撥

  1. 效能好

    iOS裝置上比 javascript 執行快

    由於執行環境的差異,在 iOS 裝置上小程式內的 wxs 會比 javascript 程式碼快 2 ~ 20 倍。

    android 裝置上二者執行效率無差異

    5.其它

5.1 介紹判斷是否還有下一頁資料的公式
  1. 如果下面的公式成立,則證明沒有下一頁資料了:

    • 頁碼值 * 每頁顯示多少條資料 >= 總資料條數

      • page * pageSize >= total

      js - 舉例1:假設總共有 77 條資料,如果每頁顯示 10 條資料,則總共分為 8 頁,其中第 8 頁只有 7 條資料 - page (7)* pageSize (10) >= total(77)不成立, 所以有下一頁資料 - page (8)* pageSize (10) >= total(77)成立, 所以沒有下一頁資料

      js - 舉例2:假設總共有 80 條資料,如果每頁顯示 10 條資料,則總共分為 8 頁,其中第 8 頁面有 10條資料 - page (7)* pageSize (10) >= total(80)不成立, 所以有下一頁資料 - page (8)* pageSize (10) >= total(80)成立, 所以沒有下一頁資料

  2. 方式二:

    • 可以將 total 的值, 和陣列的長度進行對比
5.2 在手機上預覽不了的問題
  1. 問題

    • 小程式如果需要發起網路請求,必須在 伺服器域名中對域名進行配置,
    • 小程式會往配置域名中發起請求,
    • 但是,我們並沒有在後臺配置伺服器域名,所以在手機上訪問不了
  2. 解決方案

    • 手機掃碼 --> 點選小程式右上角 三個點 --> 彈出面板,點選開發除錯 --> 彈出新的面板,點選開啟除錯
    • 點選懸浮框 vConsole,會顯示頁面的結構,以及 log 等,在實際開發中,可以配置模擬器進行測試