wordpress顯示錯(cuò)亂鄭州seo價(jià)格
生命周期
什么是生命周期
生命周期(Life Cycle)是指一個(gè)對(duì)象從創(chuàng)建 -> 運(yùn)行 -> 銷毀的整個(gè)階段,強(qiáng)調(diào)的是一個(gè)時(shí)間段。
我們可以把每個(gè)小程序運(yùn)行的過程,也概括為生命周期:
- 小程序的啟動(dòng),表示生命周期的開始
- 小程序的關(guān)閉,表示生命周期的結(jié)束
- 中間小程序運(yùn)行的過程,就是小程序的生命周期
生命周期的分類
在小程序中,生命周期分為兩類,分別是:
- 應(yīng)用生命周期(特指小程序從啟動(dòng) -> 運(yùn)行 -> 銷毀的過程)
- 頁面生命周期(特指小程序中,每個(gè)頁面的加載 -> 渲染 -> 銷毀的過程)
其中,頁面的生命周期范圍較小,應(yīng)用程序的生命周期范圍較大
什么是生命周期函數(shù)
生命周期函數(shù):是由小程序框架提供的內(nèi)置函數(shù),會(huì)伴隨著生命周期,自動(dòng)按次序執(zhí)行。
生命周期函數(shù)的作用:允許程序員在特定的時(shí)間點(diǎn),執(zhí)行某些特定的操作。例如,頁面剛加載的時(shí)候,可以在 onLoad 生命周期函數(shù)中初始化頁面的數(shù)據(jù)。
注意:生命周期強(qiáng)調(diào)的是時(shí)間段,生命周期函數(shù)強(qiáng)調(diào)的是時(shí)間點(diǎn)。
生命周期函數(shù)的分類
小程序中的生命周期函數(shù)分為兩類,分別是:
- 應(yīng)用的生命周期函數(shù)(特指小程序從啟動(dòng) -> 運(yùn)行 -> 銷毀期間依次調(diào)用的那些函數(shù))
- 頁面的生命周期函數(shù)(特指小程序中,每個(gè)頁面從加載 -> 渲染 -> 銷毀期間依次調(diào)用的那些函數(shù))
1.應(yīng)用的生命周期函數(shù)
小程序的應(yīng)用生命周期函數(shù)需要在 app.js 中進(jìn)行聲明,示例代碼如下:
//?app.js
App({
??/**
???*?當(dāng)小程序初始化完成時(shí),會(huì)觸發(fā)?onLaunch(全局只觸發(fā)一次)
???*/
??onLaunch:?function?()?{
????console.log('onLaunch')
??},
??/**
???*?當(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)輸出:?
2.頁面的生命周期函數(shù)
小程序的頁面生命周期函數(shù)需要在頁面的 .js 文件中進(jìn)行聲明,示例代碼如下:
//?pages/info/info.js
Page({
??/**
???*?頁面的初始數(shù)據(jù)
???*/
??data:?{
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面加載
???*/
??onLoad(options)?{
????console.log(options)
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
???*/
??onReady()?{
??},
??goBack(){
????wx.navigateBack()
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面顯示
???*/
??onShow()?{
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面隱藏
???*/
??onHide()?{
??},
??/**
???*?生命周期函數(shù)--監(jiān)聽頁面卸載
???*/
??onUnload()?{
??},
??/**
???*?頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
???*/
??onPullDownRefresh()?{
??},
??/**
???*?頁面上拉觸底事件的處理函數(shù)
???*/
??onReachBottom()?{
??},
??/**
???*?用戶點(diǎn)擊右上角分享
???*/
??onShareAppMessage()?{
??}
})
WXS 腳本
WXS(WeiXin Script)是小程序獨(dú)有的一套腳本語言,結(jié)合 WXML,可以構(gòu)建出頁面的結(jié)構(gòu)。
wxs 的應(yīng)用場景
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 對(duì)象類型、function 函數(shù)類型、array 數(shù)組類型、date 日期類型、regexp 正則
wxs 不支持類似于 ES6 及以上的語法形式
- 不支持:let、const、解構(gòu)賦值、展開運(yùn)算符、箭頭函數(shù)、對(duì)象屬性簡寫、etc... ?
- 支持:var 定義變量、普通 function 函數(shù)等類似于 ES5 的語法
wxs 遵循 CommonJS 規(guī)范
- module 對(duì)象
- ?require() 函數(shù) ?
- module.exports 對(duì)象
基礎(chǔ)語法
1. 內(nèi)嵌 wxs 腳本
wxs 代碼可以編寫在 wxml 文件中的 <wxs> 標(biāo)簽內(nèi),就像 Javascript 代碼可以編寫在 html 文件中的 <script> 標(biāo)簽內(nèi)一樣。
wxml 文件中的每個(gè) <wxs></wxs> 標(biāo)簽,必須提供 module 屬性,用來指定當(dāng)前 wxs 的模塊名稱,方便在 wxml 中訪問模塊中的成員:
2. 定義外聯(lián)的 wxs 腳本
wxs 代碼還可以編寫在以 .wxs 為后綴名的文件內(nèi),就像 javascript 代碼可以編寫在以 .js 為后綴名的文件中一樣。示例代碼如下:
3. 使用外聯(lián)的 wxs 腳本
在 wxml 中引入外聯(lián)的 wxs 腳本時(shí),必須為 <wxs> 標(biāo)簽添加 module 和 src 屬性,其中: ?
- module 用來指定模塊的名稱
- ?src 用來指定要引入的腳本的路徑,且必須是相對(duì)路徑
示例代碼如下:
WXS 的特點(diǎn)
1. 與 JavaScript 不同
為了降低 wxs(WeiXin Script)的學(xué)習(xí)成本, wxs 語言在設(shè)計(jì)時(shí)借大量鑒了 JavaScript 的語法。但是本質(zhì)上,wxs 和 JavaScript 是完全不同的兩種語言!
2. 不能作為組件的事件回調(diào)
wxs 典型的應(yīng)用場景就是“過濾器”,經(jīng)常配合 Mustache 語法進(jìn)行使用,例如:
但是,在 wxs 中定義的函數(shù)不能作為組件的事件回調(diào)函數(shù)。例如,下面的用法是錯(cuò)誤的:
3. 隔離性
隔離性指的是 wxs 的運(yùn)行環(huán)境和其他 JavaScript 代碼是隔離的。體現(xiàn)在如下兩方面:
- wxs 不能調(diào)用 js 中定義的函數(shù)
- wxs 不能調(diào)用小程序提供的 API
4. 性能好
- 在 iOS 設(shè)備上,小程序內(nèi)的 WXS 會(huì)比 JavaScript 代碼快 2 ~ 20 倍
- 在 android 設(shè)備上,二者的運(yùn)行效率無差異