微信小程式生命週期和WXS使用範例詳解

2022-08-19 14:01:13

引言

經過web前端開發的學習，相信大家對於前端開發有了一定深入的瞭解，今天我開設了微信小程式專欄，主要想從行動端開發方向進一步發展，而對於我來說寫行動端博文的第一站就是小程式開發，希望看到我文章的朋友能對你有所幫助。

生命週期

生命週期(Life Cycle)是指一個物件從建立->執行->銷燬的整個階段，強調的是一個時間段；小程式執行的過程也是有生命週期，小程式的啟動表示生命週期的開始、小程式的關閉表示生命週期的結束，中間小程式執行的過程就是小程式的生命週期。

生命週期分類

在小程式中，生命週期分為兩類，分別是：

應用生命週期：特指小程式從啟動 -> 執行 -> 銷燬的過程

頁面生命週期：特指小程式中，每個頁面的載入 -> 渲染 -> 銷燬的過程

其中，頁面的生命週期範圍比較小，應用程式的生命週期範圍比較大。

生命週期函數

生命週期函數：是由小程式框架提供的內建函數，會伴隨著生命週期，自動按次序執行。

生命週期函數的作用：允許程式設計師在特定的時間點，執行某些特定的操作。例如：頁面剛載入的時候，可以在 onLoad 生命週期函數中初始化頁面的資料。

注意：生命週期強調的是時間段，生命週期函數強調的是時間點。

生命週期函數分類

小程式中的生命週期分為兩類，分別是：

應用生命週期函數：特指小程式從啟動 -> 允許 -> 銷燬期間依次呼叫的那些函數

小程式的應用生命週期函數需要在 app.js 中進行宣告，程式碼如下：

// app.js
App({
  //當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
  onLaunch: function () {
 
  },
  //當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
  onShow: function (options) {
 
  },
  //當小程式從前臺進入後臺，會觸發 onHide
  onHide: function () {
 
  }
})

我們可以在微信開發者工具來模擬前臺切入後臺，後臺切入前臺時觸發的函數的過程。

如果沒有在導航工具列看到切後臺的選項，可以在進行如下操作：

找到工具列管理，勾選上切後臺即可。

頁面生命週期函數：特指小程式中，每個頁面從載入 -> 渲染 -> 銷燬期間依次呼叫的那些函數

小程式的頁面生命週期需要在頁面的.js檔案中進行宣告

//頁面.js檔案
Page({
    onLoad  : function(options){ }, //監聽頁面載入，一個頁面只呼叫一次
    onShow  : function() { },       //監聽頁面顯示
    onReady : function() { },       //監聽頁面初次渲染完成，一個頁面只呼叫一次
    onHide  : function() { },       //監聽頁面隱藏
    onUnload: function() { }        //監聽頁面解除安裝，一個頁面只呼叫一次
})

元件生命週期會在講解元件方面的時候講解。

WXS

WXS(Wei Script)是小程式獨有的一套指令碼語言，結合WXML，可以構建出頁面的結構。

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

wxs 和 JavaScript 的關係*

wxs語法類似於JavaScript，但 wxs 和 JavaScript 是兩種不同的兩種語言。

wxs有自己的資料型別：

number數值型別、string字串型別、boolean布林型別、object物件型別、function函數型別

array陣列型別、date日期型別、regexp正則

wxs不支援類似於 ES6 以上的語法形式：

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

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

wxs遵循CommonJS規範：

module物件、require()函數、module.exports物件

內嵌 wxs 指令碼

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

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

<view>{{wxs.toUpper(username)}}</view>
 
<wxs module="wxs">
  //將模組方法暴露出去
  module.exports.toUpper = function(str){
    return str.toUpperCase()
  }
</wxs>

外聯 wxs 指令碼

wxs程式碼可以在以.wxs為字尾名的檔案內，和JavaScript可以編寫在.js為字尾名的檔案中一樣。

//在.wxs檔案下寫如下程式碼，在.wxs檔案中同樣要將檔案暴露出去
function toLower(str){
  return str.toLowerCase()
}
module.exports = {
  toLower:toLower
}

在wxml中引入外聯的 wxs 指令碼時，必須為 <wxs> 標籤新增 module (用來指定模組的名稱) 和 src (用來指定要引入的指令碼路徑，且必須是相對路徑) 屬性。

WXS特點

與JS關係：

為了降低wxs(WeiXin Script)的學習成本，wxs語言在設計時借鑑了大量的JavaScript語法。但在本質上，wxs 和 JavaScript是完全不同的兩種語言！

不能作為元件的事件回撥：

wxs典型的應用場景就是過濾器，經常配合Mustache語法進行使用，但是，在wxs中定義的函數不能作為元件的事件回撥函數。

隔離性：

指的是wxs的執行環境和其他JavaScript程式碼是隔離的，wxs不能呼叫js中定義的函數，wxs不能呼叫小程式提供的API

效能好：

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

在安卓裝置上，兩者執行效率無差異

補充：適用場景

使用者互動頻繁、僅需改動元件樣式(比如佈局位置)，無需改動資料內容的場景，比如側滑選單、索引列表、捲動漸變等
純粹的邏輯計算，比如文字、日期格式化，通過 WXS 可以模擬實現 Vue 框架的過濾器, 如下是一個通過 wxs 便捷實現首字母大寫的範例

<wxs module="m1">
  // 首字母大寫
  var capitalize = function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
  module.exports = {
    capitalize: capitalize
  }
</wxs>
<view class="content">
  <view class="text-area">
    <!-- title 為當前頁面 data 中定義的初始資料 -->
    <text class="title">{{m1.capitalize(title)}}</text>
  </view>
</view>