无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

一 小程序的生命周期

代碼生命周期就是一個(gè)對(duì)象的生老病死，通常指程序從創(chuàng)建、開始、暫停、喚起、停止、卸載的過程。小程序的生命周期又可分為應(yīng)用生命周期和頁面的生命周期，先單獨(dú)分析，在結(jié)合兩者分析

應(yīng)用生命周期

應(yīng)用生命周期指得是小程序本身的初始化加載、方法以及最終被銷毀的過程。

1. 用戶首次打開小程序，觸發(fā)onLaunch,用于監(jiān)聽小程序初始化,整個(gè)應(yīng)用生命周期中只觸發(fā)一次；
2. 初始化之后，觸發(fā)onShow監(jiān)聽小程序顯示，小程序啟動(dòng)或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow；
3. 小程序用前臺(tái)進(jìn)入后臺(tái)，觸發(fā)onHide方法；
4. 小程序在后臺(tái)允許一定時(shí)間，或系統(tǒng)資源占用過高，會(huì)被銷毀；

在上面提到的前臺(tái)和后臺(tái)，給出的解釋是：用戶點(diǎn)擊右上角關(guān)閉、按home健離開微信返回主頁，這些情況屬于小程序進(jìn)入后臺(tái)但沒有直接銷毀，只有在小程序進(jìn)入后臺(tái)一段時(shí)間，或者系統(tǒng)資源占用過高的情況才會(huì)被銷毀，就是說小程序的銷毀是需要額外的條件，而非是直接進(jìn)入后臺(tái)就銷毀；當(dāng)再次打開微信或打開小程序就稱為從后臺(tái)進(jìn)入前臺(tái)；

頁面的生命周期

小程序的頁面生命周期是指程序內(nèi)部某個(gè)頁面從進(jìn)入到離開或某個(gè)頁面到另一個(gè)頁面的過程

1. 小程序注冊(cè)完成后，加載頁面，觸發(fā)onLoad方法，一個(gè)頁面只會(huì)調(diào)用一次。
2. 頁面載入后觸發(fā)onShow方法，顯示頁面，每次打開頁面都會(huì)調(diào)用一次。
3. 首次顯示頁面，會(huì)觸發(fā)onReady方法，渲染頁面元素和樣式，一個(gè)頁面只會(huì)調(diào)用一次。
4. 當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁面時(shí)，觸發(fā)onHide方法。
5. 當(dāng)小程序有后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁面時(shí)，觸發(fā)onShow方法。
6. 當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁返回上一頁wx.navigateBack()，觸發(fā)onUnload

wx.navigateTo跳轉(zhuǎn)狀態(tài)下，頁面A和頁面B的生命周期邏輯

1. 進(jìn)入A頁面：A執(zhí)行onLoad()-->onShow()-->onReady()；
2. A頁面navigateTo B頁面：A執(zhí)行onHide()，B執(zhí)行onLoad()-->onShow()-->onReady()；
3. B頁面返回A頁面：B執(zhí)行onUnload()，A執(zhí)行onShow()；
4. 退出A頁面：A執(zhí)行onUnload()。

應(yīng)用生命周期和頁面生命周期

1. 小程序初始化完成后，頁面首次加載觸發(fā)onLoad，只會(huì)觸發(fā)一次。
2. 當(dāng)小程序進(jìn)入到后臺(tái)，先執(zhí)行頁面onHide方法再執(zhí)行應(yīng)用onHide方法。
3. 當(dāng)小程序從后臺(tái)進(jìn)入到前臺(tái)，先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁面onShow方法。
4. 應(yīng)用生命周期和頁面生命周期不是分開的，兩者一起進(jìn)行，相互交叉使用，會(huì)用到相同的方法，比如onShow和onHide

二 小程序框架的選擇和對(duì)比

開源框架

1、 mpvue

mpvue 是美團(tuán)點(diǎn)評(píng)開源的一個(gè)使用 Vue.js 開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗(yàn)。使用 mpvue 開發(fā)小程序，你將在小程序技術(shù)體系的基礎(chǔ)上獲取到這樣一些能力：

• 徹底的組件化開發(fā)能力：提高代碼復(fù)用性
• 完整的 Vue.js 開發(fā)體驗(yàn)
• 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用
• 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload
• 支持使用 npm 外部依賴
• 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目
• H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

官網(wǎng)：mpvue-docs

2、Tina.js

Tina.js 一款輕巧的漸進(jìn)式微信小程序框架。

特性： 輕盈小巧。 極易上手，保留 MINA (微信小程序官方框架) 的大部分 API 設(shè)計(jì)；無論你有無小程序開發(fā)經(jīng)驗(yàn)，都可以輕松過渡上手。 漸進(jìn)增強(qiáng)，既有狀態(tài)管理器，也有路由增強(qiáng)，還可以自己編寫插件。

3、Taro

Taro 是由京東 - 凹凸實(shí)驗(yàn)室打造的一套遵循 React 語法規(guī)范的多端統(tǒng)一開發(fā)框架。我要沒記錯(cuò)的話，是最近剛剛開源的。

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、App 端等）運(yùn)行的代碼。同時(shí) Taro 還提供開箱即用的語法檢測和自動(dòng)補(bǔ)全等功能，有效地提升了開發(fā)體驗(yàn)和開發(fā)效率。

官網(wǎng)：Taro - A set of multi-end development solutions that follow the React grammar specification.

4、wepy

WePY 是一款讓小程序支持組件化開發(fā)的框架，通過預(yù)編譯的手段讓開發(fā)者可以選擇自己喜歡的開發(fā)風(fēng)格去開發(fā)小程序?？蚣艿募?xì)節(jié)優(yōu)化，Promise，Async Functions 的引入都是為了能讓開發(fā)小程序項(xiàng)目變得更加簡單，高效。

特性：

• 類 Vue 開發(fā)風(fēng)格
• 支持自定義組件開發(fā)
• 支持引入 NPM 包
• 支持 Promise
• 支持 ES2015 + 特性，如 Async Functions
• 支持多種編譯器，Less/Sass/Styus、Babel/Typescript、Pug
• 支持多種插件處理，文件壓縮，圖片壓縮，內(nèi)容替換等
• 支持 Sourcemap，ESLint 等
• 小程序細(xì)節(jié)優(yōu)化，如請(qǐng)求列隊(duì)，事件優(yōu)化等

官網(wǎng)：https://tencent.github.io/wepy

5、weweb

weweb 是一個(gè)兼容小程序語法的前端框架，你可以用小程序的寫法，來寫 web 應(yīng)用。如果你已經(jīng)有小程序了，通過它你可以將你的小程序運(yùn)行在瀏覽器中。

特性： 跨平臺(tái)，一套代碼多端運(yùn)行（小程序、h5、未來直接打包成安卓、ios app 也不是夢) 自帶常用組件，完美繼承了小程序內(nèi)置組件 兼容小程序 rpx 語法，使頁面更容易適配各種機(jī)型

5、Touch WX

Touch WX 是一套完全免費(fèi)的微信小程序開發(fā)框架，包含豐富的 UI 控件用于官方組件的補(bǔ)充。

特點(diǎn)如下：

1. 組件擴(kuò)充：增加了 30 多種常用的組件用于官方組件的補(bǔ)充。
2. 功能擴(kuò)充：兼容阿里的 iconfont 圖標(biāo)庫，海量矢量圖標(biāo)隨意使用；補(bǔ)充了常用樣式庫、支持 less 語法、支持全局配置主題色等
3. 開發(fā)體驗(yàn)改善：四文件方式改為單文件方式，通過 VSCode 編輯器 + 插件的方式開發(fā)，擁有 web 開發(fā)體驗(yàn)；
4. 小程序轉(zhuǎn)為 H5 應(yīng)用：可以與 H5 開發(fā)框架 Touch UI 工程相互轉(zhuǎn)換，發(fā)布成 webApp。開發(fā)一套代碼，擁有兩套應(yīng)用。

這套框架的原理是：

將 Touch WX 工程中所寫的代碼進(jìn)行編譯，直接輸出為微信小程序工程原始代碼。擴(kuò)充的 30 多種組件，完全是基于小程序官方的自定義組件機(jī)制實(shí)現(xiàn)（row&col 除外）。

所以它支持小程序的全部語法，怎么開發(fā)小程序，就怎么開發(fā) Touch WX。

不過因?yàn)槭菃挝募拈_發(fā)方式，在文件的代碼結(jié)構(gòu)上稍有不同。請(qǐng)注意這一點(diǎn)。

這樣好處在于：

1. 開發(fā)者遷移成本很小?？梢暂p松的將已有的小程序移植為 Touch WX 工程，來使用它的擴(kuò)展能力；
2. 便于排查錯(cuò)誤。當(dāng)遇到問題時(shí)，開發(fā)者也可以隨時(shí)查看輸出的小程序原始代碼來定位問題所在。不會(huì)搞不清楚到底是框架問題還是自己代碼的問題；
3. 按需編譯。由于小程序?qū)w積有限制，在使用框架開發(fā)時(shí)，只有使用到的組件才會(huì)編譯輸出為小程序源碼。沒用到的不會(huì)輸出。
4. 不會(huì)對(duì)框架產(chǎn)生依賴。以后不想用了這套框架，可以直接對(duì)已經(jīng)輸出的小程序工程進(jìn)行維護(hù)。

組件庫

還有各種開源的組件庫，比如有以下這幾個(gè)：

有贊的 zanui-weapp 和 iview 這兩個(gè)比較出名。

三 常見的面試知識(shí)點(diǎn)

微信小程序的相關(guān)文件類型

1. WXML （WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。內(nèi)部主要是微信自己定義的一套組件。
2. WXSS (WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式，
3. js 邏輯處理，網(wǎng)絡(luò)請(qǐng)求
4. json 小程序設(shè)置，如頁面注冊(cè)，頁面標(biāo)題及tabBar。

注：

1. app.json
   必須要有這個(gè)文件，如果沒有這個(gè)文件，項(xiàng)目無法運(yùn)行，因?yàn)槲⑿趴蚣馨堰@個(gè)作為配置文件入口，整個(gè)小程序的全局配置。包括頁面注冊(cè)，網(wǎng)絡(luò)設(shè)置，以及小程序的window背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。
2. app.js
   必須要有這個(gè)文件，沒有也是會(huì)報(bào)錯(cuò)！但是這個(gè)文件創(chuàng)建一下就行 什么都不需要寫以后我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。

封裝微信小程序的數(shù)據(jù)請(qǐng)求

1. 將所有的接口放在統(tǒng)一的js文件中并導(dǎo)出
2. 在app.js中創(chuàng)建封裝請(qǐng)求數(shù)據(jù)的方法
3. 在子頁面中調(diào)用封裝的方法請(qǐng)求數(shù)據(jù)

參數(shù)傳值的方法

1. 給HTML元素添加data-*屬性來傳遞我們需要的值，然后通過e.currentTarget.dataset或onload的param參數(shù)獲取。但data-名稱不能有大寫字母和不可以存放對(duì)象
2. 設(shè)置id 的方法標(biāo)識(shí)來傳值通過e.currentTarget.id獲取設(shè)置的id的值,然后通過設(shè)置全局對(duì)象的方式來傳遞數(shù)值
3. 在navigator中添加參數(shù)傳值

提高微信小程序的應(yīng)用速度

1. 提高頁面加載速度
2. 用戶行為預(yù)測
3. 減少默認(rèn)data的大小
4. 組件化方案

小程序與原生App比較

程序除了擁有公眾號(hào)的低開發(fā)成本、低獲客成本低以及無需下載等優(yōu)勢，在服務(wù)請(qǐng)求延時(shí)與用戶使用體驗(yàn)是都得到了較大幅度 的提升，使得其能夠承載跟復(fù)雜的服務(wù)功能以及使用戶獲得更好的用戶體驗(yàn)。

微信小程序原理

微信小程序采用JavaScript、WXML、WXSS三種技術(shù)進(jìn)行開發(fā)，從技術(shù)講和現(xiàn)有的前端開發(fā)差不多，但深入挖掘的話卻又有所不同。
JavaScript：首先JavaScript的代碼是運(yùn)行在微信App中的，并不是運(yùn)行在瀏覽器中，因此一些H5技術(shù)的應(yīng)用，需要微信App提供對(duì)應(yīng)的API支持，而這限制住了H5技術(shù)的應(yīng)用，且其不能稱為嚴(yán)格的H5，可以稱其為偽H5，同理，微信提供的獨(dú)有的某些API，H5也不支持或支持的不是特別好。
WXML：WXML微信自己基于XML語法開發(fā)的，因此開發(fā)時(shí)，只能使用微信提供的現(xiàn)有標(biāo)簽，HTML的標(biāo)簽是無法使用的。
WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并沒有詳細(xì)的文檔。
微信的架構(gòu)，是數(shù)據(jù)驅(qū)動(dòng)的架構(gòu)模式，它的UI和數(shù)據(jù)是分離的，所有的頁面更新，都需要通過對(duì)數(shù)據(jù)的更改來實(shí)現(xiàn)。
小程序分為兩個(gè)部分webview和appService。其中webview主要用來展現(xiàn)UI，appService有來處理業(yè)務(wù)邏輯、數(shù)據(jù)及接口調(diào)用。它們?cè)趦蓚€(gè)進(jìn)程中運(yùn)行，通過系統(tǒng)層JSBridge實(shí)現(xiàn)通信，實(shí)現(xiàn)UI的渲染、事件的處理

微信小程序的優(yōu)劣勢

優(yōu)勢：
1、無需下載，通過搜索和掃一掃就可以打開。
2、良好的用戶體驗(yàn)：打開速度快。
3、開發(fā)成本要比App要低。
4、安卓上可以添加到桌面，與原生App差不多。
5、為用戶提供良好的安全保障。小程序的發(fā)布，微信擁有一套嚴(yán)格的審查流程， 不能通過審查的小程序是無法發(fā)布到線上的。
劣勢：
1、限制較多。頁面大小不能超過1M。不能打開超過5個(gè)層級(jí)的頁面。
2、樣式單一。小程序的部分組件已經(jīng)是成型的了，樣式不可以修改。例如：幻燈片、導(dǎo)航。
3、推廣面窄，不能分享朋友圈，只能通過分享給朋友，附近小程序推廣。其中附近小程序也受到微信的限制。
4、依托于微信，無法開發(fā)后臺(tái)管理功能。

微信小程序與H5的區(qū)別

第一條是運(yùn)行環(huán)境的不同
傳統(tǒng)的HTML5的運(yùn)行環(huán)境是瀏覽器，包括webview，而微信小程序的運(yùn)行環(huán)境并非完整的瀏覽器，是微信開發(fā)團(tuán)隊(duì)基于瀏覽器內(nèi)核完全重構(gòu)的一個(gè)內(nèi)置解析器，針對(duì)小程序?qū)ｉT做了優(yōu)化，配合自己定義的開發(fā)語言標(biāo)準(zhǔn)，提升了小程序的性能。
第二條是開發(fā)成本的不同
只在微信中運(yùn)行，所以不用再去顧慮瀏覽器兼容性，不用擔(dān)心生產(chǎn)環(huán)境中出現(xiàn)不可預(yù)料的奇妙BUG
第三條是獲取系統(tǒng)級(jí)權(quán)限的不同
系統(tǒng)級(jí)權(quán)限都可以和微信小程序無縫銜接
第四條便是應(yīng)用在生產(chǎn)環(huán)境的運(yùn)行流暢度
長久以來，當(dāng)HTML5應(yīng)用面對(duì)復(fù)雜的業(yè)務(wù)邏輯或者豐富的頁面交互時(shí)，它的體驗(yàn)總是不盡人意，需要不斷的對(duì)項(xiàng)目優(yōu)化來提升用戶體驗(yàn)。但是由于微信小程序運(yùn)行環(huán)境獨(dú)立

小程序的雙向綁定和vue的區(qū)別

小程序直接this.data的屬性是不可以同步到視圖的，必須調(diào)用：this.setData

小程序的異步請(qǐng)求問題

1. 在回調(diào)函數(shù)中調(diào)用下一個(gè)組件的函數(shù)
2. 回調(diào)函數(shù)外自定義保留this指向