1. 生命周期函數(shù)

1.1. 應(yīng)用的生命周期函數(shù)

應(yīng)用的生命周期函數(shù)：指小程序從啟動(dòng) -> 運(yùn)行 -> 銷(xiāo)毀期間依次調(diào)用的那些函數(shù)。
小程序的應(yīng)用生命周期函數(shù)需要在 app.js 中進(jìn)行聲明。

// app.js
App({

  // 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）
  onLaunch: function () {},

  // 當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow
  onShow: function (options) {},

  // 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide
  onHide: function () {},

  // 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
  onError: function (msg) {}
})

上面這張圖就是從前臺(tái)進(jìn)入了后臺(tái)。后臺(tái)進(jìn)入前臺(tái)反之同理。

1.2. 頁(yè)面的生命周期函數(shù)

頁(yè)面的生命周期函數(shù)：指小程序中，每個(gè)頁(yè)面從加載 -> 渲染 -> 銷(xiāo)毀期間依次調(diào)用的那些函數(shù)

小程序的頁(yè)面生命周期函數(shù)，需要在頁(yè)面中的.js文件中聲明。

Page({
  
    // 監(jiān)聽(tīng)頁(yè)面加載
    onLoad(options) {},

    // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
    onReady() {},

    // 監(jiān)聽(tīng)頁(yè)面顯示
    onShow() {},

    // 監(jiān)聽(tīng)頁(yè)面隱藏
    onHide() {},

    //監(jiān)聽(tīng)頁(yè)面卸載
    onUnload() {},
})

2. wxs腳本

WXS（WeiXin Script）是小程序獨(dú)有的一套腳本語(yǔ)言，結(jié)合 WXML，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。
wxml 中無(wú)法調(diào)用在頁(yè)面的 .js 中定義的函數(shù)，但是，wxml 中可以調(diào)用 wxs 中定義的函數(shù)。因此，小程序中 wxs 的典型應(yīng)用場(chǎng)景就是“過(guò)濾器”。

2.1. wxs與JavaScript的關(guān)系

雖然 wxs 的語(yǔ)法類似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的兩種語(yǔ)言：

1. wxs 有自己的數(shù)據(jù)類型
   number 數(shù)值類型、string 字符串類型、boolean 布爾類型、
   object 對(duì)象類型、 function 函數(shù)類型、array 數(shù)組類型、
   date 日期類型、 regexp 正則

2. wxs 不支持類似于 ES6 及以上的語(yǔ)法形式
   不支持：
   let、const、解構(gòu)賦值、展開(kāi)運(yùn)算符、箭頭函數(shù)、對(duì)象屬性簡(jiǎn)寫(xiě)、etc…
   支持：
   var 定義變量、普通 function 函數(shù)等類似于 ES5 的語(yǔ)法

3. wxs 遵循 CommonJS 規(guī)范 module 對(duì)象 require() 函數(shù) module.exports 對(duì)象

2.2. wxs內(nèi)嵌腳本

wxs 代碼可以編寫(xiě)在 wxml 文件中的 標(biāo)簽內(nèi)，就像 Javascript 代碼可以編寫(xiě)在 html 文件中的

<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
  // 將文本轉(zhuǎn)換為大寫(xiě)
  module.export.toUpper = function(str){
     return str.toUpperCase()
  }
</wxs>

2.3. wxs外聯(lián)腳本

wxs 代碼還可以編寫(xiě)在以 .wxs 為后綴名的文件內(nèi)，就像 javascript 代碼可以編寫(xiě)在以 .js 為后綴名的文件中一樣。

wxs外聯(lián)腳本：tools.wxs

// tools.wxs 文件

function toLower(str){
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}

在 wxml 中引入外聯(lián)的 wxs 腳本時(shí)，必須為 標(biāo)簽添加 module 和 src 屬性，其中： module 用來(lái)指定模塊的名稱 src 用來(lái)指定要引入的腳本的路徑，且必須是相對(duì)路徑.

wxml前臺(tái)頁(yè)面:

<view>{{m2.toLower(username)}}</view>

<!-- 引入外聯(lián)的wxs腳本 -->
<wxs src="./tools.wxs" module="m2"></wxs>

2.4. tips

wxs 典型的應(yīng)用場(chǎng)景就是“過(guò)濾器”，經(jīng)常配合 Mustache 語(yǔ)法進(jìn)行使用.
wxs隔離性指的是 wxs 的運(yùn)行環(huán)境和其他 JavaScript 代碼是隔離的。
體現(xiàn)在如下兩方面：wxs 不能調(diào)用 js 中定義的函數(shù)wxs 不能調(diào)用小程序提供的 API文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-558823.html

到了這里，關(guān)于生命周期函數(shù)和wxs腳本的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！