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

語言: CN / TW / HK
時間 2022-03-29 10:15:05

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.json 的 window 節點中，將 enablePullDownRefresh 設置為 true

    • 局部開啟下拉刷新

      • 在頁面的 .json 配置文件中，將 enablePullDownRefresh 設置為 true

    • 使用小程序提供的 API 實現下拉刷新

      • wx.startPullDownRefresh()

  2. 在實際開發中，推薦使用第 2 種方式，為需要的頁面單獨開啟下拉刷新的效果

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

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

  • backgroundColor 用來配置下拉刷新 窗口的背景顏色，僅支持 16 進制的顏色值
  • backgroundTextStyle 用來配置下拉刷新 loading 的樣式，僅支持 dark 和 light
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，但是 wxs 和 JavaScript 是完全不同的兩種語言

    • 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 模塊化規範

CommonJS 是 javascript 的模塊化規範之一，小程序的腳本語言 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> 標籤添加 module 和 src 屬性

    • module 用來為 <wxs></wxs> 標籤指定模塊名，作為當前頁面訪問這個模塊的標識名稱
    • src 用來指定當前 <wxs></wxs> 標籤要引入的腳本路徑，必須是相對路徑

  2. 示例代碼

4.7 瞭解 wxs 的 4 個特點

  1. 沒有兼容性

    wxs 不依賴於運行時的基礎庫版本，可以在所有版本的小程序中運行

  2. 與 javascript 不同

    • 為了降低 wxs 的學習成本， wxs 語言在設計時大量借鑑了 JavaScript 語法
    • 但本質上，wxs 與 javascript 是不同的語言，有自己的語法，並不和 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 等，在實際開發中，可以配置模擬器進行測試
「」
「」