引言

經(jīng)過web前端開發(fā)的學(xué)習(xí)，相信大家對于前端開發(fā)有了一定深入的了解，今天我開設(shè)了微信小程序?qū)?，主要想從移動端開發(fā)方向進(jìn)一步發(fā)展，而對于我來說寫移動端博文的第一站就是小程序開發(fā)，希望看到我文章的朋友能對你有所幫助。

生命周期

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

生命周期分類

在小程序中，生命周期分為兩類，分別是：

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

頁面生命周期：特指小程序中，每個頁面的加載 -> 渲染 -> 銷毀的過程

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

生命周期函數(shù)

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

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

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

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

小程序中的生命周期分為兩類，分別是：

應(yīng)用生命周期函數(shù)：特指小程序從啟動 -> 允許 -> 銷毀期間依次調(diào)用的那些函數(shù)

小程序的應(yīng)用生命周期函數(shù)需要在 app.js 中進(jìn)行聲明，代碼如下：

// app.js
App({
  //當(dāng)小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
  onLaunch: function () {
 
  },
  //當(dāng)小程序啟動，或從后臺進(jìn)入前臺顯示，會觸發(fā) onShow
  onShow: function (options) {
 
  },
  //當(dāng)小程序從前臺進(jìn)入后臺，會觸發(fā) onHide
  onHide: function () {
 
  }
})

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

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

找到工具欄管理，勾選上切后臺即可。

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

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

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

組件生命周期會在講解組件方面的時候講解。

WXS

WXS(Wei Script)是小程序獨有的一套腳本語言，結(jié)合WXML，可以構(gòu)建出頁面的結(jié)構(gòu)。

wxml中無法調(diào)用在頁面的.js中定義的函數(shù)，但是wxml中可以調(diào)用wxs中定義的函數(shù)，因此，小程序中的wxs的典型應(yīng)用場景就是“過濾器”。

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

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

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

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

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

wxs不支持類似于 ES6 以上的語法形式：

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

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

wxs遵循CommonJS規(guī)范：

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

內(nèi)嵌 wxs 腳本

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

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

<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可以編寫在.js為后綴名的文件中一樣。

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

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

WXS特點

與JS關(guān)系：

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

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

wxs典型的應(yīng)用場景就是過濾器，經(jīng)常配合Mustache語法進(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會比JavaScript代碼快2~20倍。

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

補(bǔ)充：適用場景

• 用戶交互頻繁、僅需改動組件樣式(比如布局位置)，無需改動數(shù)據(jù)內(nèi)容的場景，比如側(cè)滑菜單、索引列表、滾動漸變等
• 純粹的邏輯計算，比如文本、日期格式化，通過 WXS 可以模擬實現(xiàn) Vue 框架的過濾器, 如下是一個通過 wxs 便捷實現(xiàn)首字母大寫的示例

<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 為當(dāng)前頁面 data 中定義的初始數(shù)據(jù) -->
    <text class="title">{{m1.capitalize(title)}}</text>
  </view>
</view>

總結(jié) 

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

最新評論