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

一 小程序的生命周期

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

應(yīng)用生命周期

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

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

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

頁面的生命周期

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

1. 小程序注冊完成后，加載頁面，觸發(fā)onLoad方法，一個頁面只會調(diào)用一次。
2. 頁面載入后觸發(fā)onShow方法，顯示頁面，每次打開頁面都會調(diào)用一次。
3. 首次顯示頁面，會觸發(fā)onReady方法，渲染頁面元素和樣式，一個頁面只會調(diào)用一次。
4. 當(dāng)小程序后臺運行或跳轉(zhuǎn)到其他頁面時，觸發(fā)onHide方法。
5. 當(dāng)小程序有后臺進(jìn)入到前臺運行或重新進(jìn)入頁面時，觸發(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，只會觸發(fā)一次。
2. 當(dāng)小程序進(jìn)入到后臺，先執(zhí)行頁面onHide方法再執(zhí)行應(yīng)用onHide方法。
3. 當(dāng)小程序從后臺進(jìn)入到前臺，先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁面onShow方法。
4. 應(yīng)用生命周期和頁面生命周期不是分開的，兩者一起進(jìn)行，相互交叉使用，會用到相同的方法，比如onShow和onHide

二 小程序框架的選擇和對比

開源框架

1、 mpvue

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

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

官網(wǎng)：mpvue-docs

2、Tina.js

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

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

3、Taro

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

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、App 端等）運行的代碼。同時 Taro 還提供開箱即用的語法檢測和自動補(bǔ)全等功能，有效地提升了開發(fā)體驗和開發(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ā)小程序項目變得更加簡單，高效。

特性：

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

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

5、weweb

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

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

5、Touch WX

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

特點如下：

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

這套框架的原理是：

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

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

不過因為是單文件的開發(fā)方式，在文件的代碼結(jié)構(gòu)上稍有不同。請注意這一點。

這樣好處在于：

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

組件庫

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

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

三 常見的面試知識點

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

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

注：

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

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

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

參數(shù)傳值的方法

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

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

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

小程序與原生App比較

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

微信小程序原理

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

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

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

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

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

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

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

小程序的異步請求問題

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