欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序生命周期和WXS使用實(shí)例詳解

 更新時(shí)間：2022年08月19日 11:27:36   作者：亦世凡華、  
微信小程序中的wxs文件,大家或多或少都有見(jiàn)過(guò),下面這篇文章主要給大家介紹了關(guān)于微信小程序生命周期和WXS使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

引言

經(jīng)過(guò)web前端開(kāi)發(fā)的學(xué)習(xí)，相信大家對(duì)于前端開(kāi)發(fā)有了一定深入的了解，今天我開(kāi)設(shè)了微信小程序?qū)冢饕霃囊苿?dòng)端開(kāi)發(fā)方向進(jìn)一步發(fā)展，而對(duì)于我來(lái)說(shuō)寫(xiě)移動(dòng)端博文的第一站就是小程序開(kāi)發(fā)，希望看到我文章的朋友能對(duì)你有所幫助。

生命周期

生命周期(Life Cycle)是指一個(gè)對(duì)象從創(chuàng)建->運(yùn)行->銷(xiāo)毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段；小程序運(yùn)行的過(guò)程也是有生命周期，小程序的啟動(dòng)表示生命周期的開(kāi)始、小程序的關(guān)閉表示生命周期的結(jié)束，中間小程序運(yùn)行的過(guò)程就是小程序的生命周期。

生命周期分類(lèi)

在小程序中，生命周期分為兩類(lèi)，分別是：

應(yīng)用生命周期：特指小程序從啟動(dòng) -> 運(yùn)行 -> 銷(xiāo)毀的過(guò)程

頁(yè)面生命周期：特指小程序中，每個(gè)頁(yè)面的加載 -> 渲染 -> 銷(xiāo)毀的過(guò)程

其中，頁(yè)面的生命周期范圍比較小，應(yīng)用程序的生命周期范圍比較大。

生命周期函數(shù)

生命周期函數(shù)：是由小程序框架提供的內(nèi)置函數(shù)，會(huì)伴隨著生命周期，自動(dòng)按次序執(zhí)行。

生命周期函數(shù)的作用：允許程序員在特定的時(shí)間點(diǎn)，執(zhí)行某些特定的操作。例如：頁(yè)面剛加載的時(shí)候，可以在 onLoad 生命周期函數(shù)中初始化頁(yè)面的數(shù)據(jù)。

注意：生命周期強(qiáng)調(diào)的是時(shí)間段，生命周期函數(shù)強(qiáng)調(diào)的是時(shí)間點(diǎn)。

生命周期函數(shù)分類(lèi)

小程序中的生命周期分為兩類(lèi)，分別是：

應(yīng)用生命周期函數(shù)：特指小程序從啟動(dòng) -> 允許 -> 銷(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 () {
 
  }
})

我們可以在微信開(kāi)發(fā)者工具來(lái)模擬前臺(tái)切入后臺(tái)，后臺(tái)切入前臺(tái)時(shí)觸發(fā)的函數(shù)的過(guò)程。

如果沒(méi)有在導(dǎo)航工具欄看到切后臺(tái)的選項(xiàng)，可以在進(jìn)行如下操作：

找到工具欄管理，勾選上切后臺(tái)即可。

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

小程序的頁(yè)面生命周期需要在頁(yè)面的.js文件中進(jìn)行聲明

//頁(yè)面.js文件
Page({
    onLoad  : function(options){ }, //監(jiān)聽(tīng)頁(yè)面加載，一個(gè)頁(yè)面只調(diào)用一次
    onShow  : function() { },       //監(jiān)聽(tīng)頁(yè)面顯示
    onReady : function() { },       //監(jiān)聽(tīng)頁(yè)面初次渲染完成，一個(gè)頁(yè)面只調(diào)用一次
    onHide  : function() { },       //監(jiān)聽(tīng)頁(yè)面隱藏
    onUnload: function() { }        //監(jiān)聽(tīng)頁(yè)面卸載，一個(gè)頁(yè)面只調(diào)用一次
})

組件生命周期會(huì)在講解組件方面的時(shí)候講解。

WXS

WXS(Wei 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ò)濾器”。

wxs 和 JavaScript 的關(guān)系*

wxs語(yǔ)法類(lèi)似于JavaScript，但 wxs 和 JavaScript 是兩種不同的兩種語(yǔ)言。

wxs有自己的數(shù)據(jù)類(lèi)型：

number數(shù)值類(lèi)型、string字符串類(lèi)型、boolean布爾類(lèi)型、object對(duì)象類(lèi)型、function函數(shù)類(lèi)型

array數(shù)組類(lèi)型、date日期類(lèi)型、regexp正則

wxs不支持類(lèi)似于 ES6 以上的語(yǔ)法形式：

不支持：let、const、解構(gòu)賦值、展開(kāi)運(yùn)算符、箭頭函數(shù)、對(duì)象屬性簡(jiǎn)寫(xiě)等

支持：var 定義變量、普通function函數(shù)等類(lèi)似于ES5的語(yǔ)法

wxs遵循CommonJS規(guī)范：

module對(duì)象、require()函數(shù)、module.exports對(duì)象

內(nèi)嵌 wxs 腳本

wxs代碼可以編寫(xiě)在 wxml 文件中的<wxs>標(biāo)簽內(nèi)，就像JavaScript代碼可以編寫(xiě)在html文件中的<script>標(biāo)簽一樣。

wxml文件中的每個(gè)<wxs></wxs>標(biāo)簽，必須提供module屬性，用來(lái)指定當(dāng)前 wxs 的模塊名稱(chēng)，方便在wxml中訪(fǎng)問(wèn)模塊中的成員。

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

外聯(lián) wxs 腳本

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

//在.wxs文件下寫(xiě)如下代碼，在.wxs文件中同樣要將文件暴露出去
function toLower(str){
  return str.toLowerCase()
}
module.exports = {
  toLower:toLower
}

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

WXS特點(diǎn)

與JS關(guān)系：

為了降低wxs(WeiXin Script)的學(xué)習(xí)成本，wxs語(yǔ)言在設(shè)計(jì)時(shí)借鑒了大量的JavaScript語(yǔ)法。但在本質(zhì)上，wxs 和 JavaScript是完全不同的兩種語(yǔ)言！

不能作為組件的事件回調(diào)：

wxs典型的應(yīng)用場(chǎng)景就是過(guò)濾器，經(jīng)常配合Mustache語(yǔ)法進(jìn)行使用，但是，在wxs中定義的函數(shù)不能作為組件的事件回調(diào)函數(shù)。

隔離性：

指的是wxs的運(yùn)行環(huán)境和其他JavaScript代碼是隔離的，wxs不能調(diào)用js中定義的函數(shù)，wxs不能調(diào)用小程序提供的API

性能好：

在iOS設(shè)備上，小程序內(nèi)的WXS會(huì)比JavaScript代碼快2~20倍。

在安卓設(shè)備上，兩者運(yùn)行效率無(wú)差異

補(bǔ)充：適用場(chǎng)景

  • 用戶(hù)交互頻繁、僅需改動(dòng)組件樣式(比如布局位置)，無(wú)需改動(dòng)數(shù)據(jù)內(nèi)容的場(chǎng)景，比如側(cè)滑菜單、索引列表、滾動(dòng)漸變等
  • 純粹的邏輯計(jì)算，比如文本、日期格式化，通過(guò) WXS 可以模擬實(shí)現(xiàn) Vue 框架的過(guò)濾器, 如下是一個(gè)通過(guò) wxs 便捷實(shí)現(xiàn)首字母大寫(xiě)的示例
<wxs module="m1">
  // 首字母大寫(xiě)
  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 為當(dāng)前頁(yè)面 data 中定義的初始數(shù)據(jù) -->
    <text class="title">{{m1.capitalize(title)}}</text>
  </view>
</view>

總結(jié) 

到此這篇關(guān)于微信小程序生命周期和WXS使用的文章就介紹到這了,更多相關(guān)小程序生命周期和WXS使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論