?程序

1 登錄

unionid和openid

了解?程序登陸之前，我們寫了解下?程序/公眾號(hào)登錄 涉及到兩個(gè)最關(guān)鍵的? 戶標(biāo)識(shí)：

OpenId 是?個(gè)?戶對(duì)于?個(gè)?程序／公眾號(hào)的標(biāo)識(shí)，開發(fā)者可以通過這個(gè)標(biāo)識(shí)識(shí)別出? 戶。
UnionId 是?個(gè)?戶對(duì)于同主體微信?程序／公眾號(hào)／ APP 的標(biāo)識(shí)，開發(fā)者需要在微信 開放平臺(tái)下綁定相同賬號(hào)的主體。開發(fā)者可通過 UnionId ，實(shí)現(xiàn)多個(gè)?程序、公眾號(hào)、甚 ?APP 之間的數(shù)據(jù)互通了。
關(guān)鍵Api

wx.login 官?提供的登錄能? wx.checkSession 校驗(yàn)?戶當(dāng)前的 session_key 是否有效 wx.authorize 提前向?戶發(fā)起授權(quán)請(qǐng)求 wx.getUserInfo 獲取?戶基本信息

登錄流程設(shè)計(jì)
利?現(xiàn)有登錄體系

直接復(fù)?現(xiàn)有系統(tǒng)的登錄體系，只需要在?程序端設(shè)計(jì)?戶名， 密碼/驗(yàn)證碼輸 ???，便可以簡(jiǎn)便的實(shí)現(xiàn)登錄， 只需要保持良好的?戶體驗(yàn)即可

利? OpenId 創(chuàng)建?戶體系

OpenId 是?個(gè)?程序?qū)τ?個(gè)?戶的標(biāo)識(shí)，利?這?點(diǎn)我們可以輕松的實(shí) 現(xiàn)?套基于?程序的?戶體系，值得?提的是這種?戶體系對(duì)?戶的打擾最 低，可以實(shí)現(xiàn)靜默登錄。具體步驟如下

?程序客戶端通過 wx.login 獲取 code傳遞 code 向服務(wù)端，服務(wù)端拿到 code 調(diào)?微信登錄憑證校驗(yàn)接?，微信服務(wù)器返回openid 和會(huì)話密鑰session_key ，此時(shí)開發(fā)者服務(wù)端便可以利? openid ?成?戶 ?庫，再向?程序客戶端返回?定義登錄態(tài)。
?程序客戶端緩存 （通過 storage ）?定義登錄態(tài)（ token ），后續(xù)調(diào)?接?時(shí)攜帶該 登錄態(tài)作為?戶身份標(biāo)識(shí)即可
利? Unionid 創(chuàng)建?戶體系

如果想實(shí)現(xiàn)多個(gè)?程序，公眾號(hào)，已有登錄系統(tǒng)的數(shù)據(jù)互通，可以通過獲取到 ?戶 unionid 的?式建??戶體系。因?yàn)?unionid 在同?開放平臺(tái)下的所所有應(yīng)?都是相同的，通過 unionid 建?的?戶體系即可實(shí)現(xiàn)全平臺(tái)數(shù)據(jù)的互通，更?便的接?原有的功能，那如何獲取 unionid 呢，有以下兩種?式

如果戶關(guān)注了某個(gè)相同主體公眾號(hào)，或曾經(jīng)在某個(gè)相同主體 App 、公眾號(hào)上進(jìn)?過微信登 錄授權(quán)，通過 wx.login 可以直接獲取 到 unionid
結(jié)合 wx.getUserInfo 和 這兩種?式引導(dǎo)?戶主動(dòng)授權(quán)，主動(dòng)授權(quán)后通過返回的信息和服務(wù)端交互 (這?有?步需要服務(wù)端解 密數(shù)據(jù)的過程，很簡(jiǎn)單，微信提供了示例代碼) 即可拿到 unionid 建??戶體系， 然后 由服務(wù)端返回登錄態(tài)，本地記錄即可實(shí)現(xiàn)登錄，附上微信提供的最佳實(shí)踐
調(diào)? wx.login 獲取 code ，然后從微信后端換取session_key ，?于解密getUserInfo 返回的敏感數(shù)據(jù)
使? wx.getSetting 獲取?戶的授權(quán)情況
如果?戶已經(jīng)授權(quán)，直接調(diào)? API wx.getUserInfo 獲取?戶最新的信息；
?戶未授權(quán)，在界?中顯示?個(gè)按鈕提示?戶登?，當(dāng)?戶點(diǎn)擊并授權(quán)后就獲取到? 戶的最新信息
獲取到?戶數(shù)據(jù)后可以進(jìn)?展示或者發(fā)送給??的后端
注意事項(xiàng)
需要獲取 unionid 形式的登錄體系，在以前（18年4?之前）是通過以下這種? 式來實(shí)現(xiàn)，但后續(xù)微信做了調(diào)整（因?yàn)?進(jìn)??程序，主動(dòng)彈起各種授權(quán)彈窗的這 種形式，?較容易導(dǎo)致?戶流失），調(diào)整為必須使?按鈕引導(dǎo)?戶主動(dòng)授權(quán)的? 式，這次調(diào)整對(duì)開發(fā)者影響較?，開發(fā)者需要注意遵守微信的規(guī)則，并及時(shí)和業(yè)務(wù) ?溝通業(yè)務(wù)形式，不要存在僥幸?理，以防造成?程序不過審等情況.

wx.login(獲取code) ===> wx.getUserInfo(?戶授權(quán)) ===> 獲取 unionid

因?yàn)?程序不存在 cookie 的概念， 登錄態(tài)必須緩存在本地，因此強(qiáng)烈建議為登錄態(tài)設(shè)置過期時(shí)間 值得?提的是如果需要?持?控安全校驗(yàn)，多平臺(tái)登錄等功能，可能需要加??些公共參數(shù)，例如 platform ， channel ， deviceParam 等參數(shù)。在和服務(wù)端確 定?案時(shí)，作為前端同學(xué)應(yīng)該及時(shí)提出這些合理的建議，設(shè)計(jì)合理的系統(tǒng)。
openid ， unionid 不要在接?中明?傳輸，這是?種危險(xiǎn)的?為，同時(shí)也很
不專業(yè).

2 圖?導(dǎo)出

這是?種常?的引流?式，?般同時(shí)會(huì)在圖?中附加?個(gè)?程序?維碼。

基本原理
借助 canvas 元素，將需要導(dǎo)出的樣式?先在 canvas 畫布上繪制出來 （ api 基本和h5 保持?致，但有輕微差異，使?時(shí)注意即可。
借助微信提供的 canvasToTempFilePath 導(dǎo)出圖?，最后再使?saveImageToPhotosAlbum （需要授權(quán)）保存圖?到本地。
如何優(yōu)雅實(shí)現(xiàn)
繪制出需要的樣式這?步是省略不掉的。但是我們可以封裝?個(gè)繪制庫，包含常?圖形的繪制，例如矩形，圓?矩形，圓， 扇形，三?形， ?字，圖?減少繪制代碼，只需要提煉 出樣式信息，便可以輕松的繪制，最后導(dǎo)出圖?存?相冊(cè)。筆者覺得以下這種?式繪制更為優(yōu)雅清晰?些，其實(shí)也可以使?加??個(gè)type參數(shù)來指定繪制類型，傳?的?個(gè)是樣式 數(shù)組，實(shí)現(xiàn)繪制。
結(jié)合上?步的實(shí)現(xiàn)，如果對(duì)于同?類型的卡?有多次導(dǎo)出需求的場(chǎng)景，也可以使??定義 組件的?式，封裝同?類型的卡?為?個(gè)通?組件，在需要導(dǎo)出圖?功能的地?，引?該 組件即可。

class CanvasKit { constructor() { } drawImg(option = {}) { ... return this } drawRect(option = {}) { return this } drawText(option = {}) { ... return this } static exportImg(option = {}) { ... } } let drawer = new CanvasKit('canvasId').drawImg(styleObj1).drawText(styleOb drawer.exportImg()

注意事項(xiàng)

?程序中?法繪制?絡(luò)圖?到 canvas 上，需要通過 downLoadFile 先下載圖? 到本地臨時(shí)?件才可以繪制 通常需要繪制?維碼到導(dǎo)出的圖?上，有?種?式導(dǎo)出?維碼時(shí)，需要攜帶的參數(shù) 必須做編碼，?且有具體的?度（ 32 可?字符）限制，可以借助服務(wù)端?成短鏈接 的?式來解決。

3 數(shù)據(jù)統(tǒng)計(jì)

數(shù)據(jù)統(tǒng)計(jì)作為?前?種常?的分析?戶?為的?式，?程序端也是必不可少 的。?程序采取的曝光，點(diǎn)擊數(shù)據(jù)埋點(diǎn)其實(shí)和h5原理是?樣的。但是埋點(diǎn)作為?個(gè)和業(yè)務(wù)邏輯不相關(guān)的需求，我們?nèi)绻诿?個(gè)點(diǎn)擊事件，每?個(gè)?命周期加?各種埋點(diǎn)代碼，則會(huì)?擾正常的業(yè)務(wù)邏輯，和使代碼變的臃腫，筆者提供 以下?種思路來解決數(shù)據(jù)埋點(diǎn)。
?程序的代碼結(jié)構(gòu)是，每?個(gè) Page 中都有?個(gè) Page ?法，接受?個(gè)包含 ?命周期函數(shù)，數(shù)據(jù)的 業(yè)務(wù)邏輯對(duì)象 包裝這層數(shù)據(jù)，借助?程序的底層邏輯實(shí)現(xiàn)??的業(yè)務(wù)邏輯。通過這個(gè)我們可以想到思路，對(duì) Page 進(jìn)??次包裝， 篡改它的?命周期和點(diǎn)擊事件，混?埋點(diǎn)代碼，不?擾業(yè)務(wù)邏輯，只要做?些 簡(jiǎn)單的配置即可埋點(diǎn)，簡(jiǎn)單的代碼實(shí)現(xiàn)如下：

// 代碼僅供理解思路 page = function(params) {let keys = params.keys()keys.forEach(v => {if (v === 'onLoad') {params[v] = function(options) {stat() //曝光埋點(diǎn)代碼params[v].call(this, options)}}else if (v.includes('click')) {params[v] = funciton(event) {let data = event.dataset.configstat(data) // 點(diǎn)擊埋點(diǎn)param[v].call(this)}}}) }

這種思路不光適?于埋點(diǎn)，也可以?來作全局異常處理，請(qǐng)求的統(tǒng)?處理等場(chǎng)景。
分析接?
對(duì)于特殊的?些業(yè)務(wù)，我們可以采取 接?埋點(diǎn)，什么叫接?埋點(diǎn)呢？很多情況下，我們有的 api 并不是多處調(diào)?的，只會(huì)在某?個(gè)特定的??調(diào)?，通過這個(gè)思路我們可以分析出，該接?被請(qǐng)求，則這個(gè)?為被觸發(fā)了，則完全可以通過服務(wù)端?志得出埋點(diǎn)數(shù)據(jù)，但是這種?式局限性較?，?且屬于分析結(jié)果 得出過程，可能存在誤差，但可以作為?種思路了解?下。

微信本身提供的數(shù)據(jù)分析能?，微信本身提供了常規(guī)分析和?定義分析 兩種數(shù)據(jù)分析?式，在?程序后臺(tái)配置即可。 借助?程序數(shù)據(jù)助?這款?程序可以很 ?便的查看。

4 ?程化

?程化做什么

?前的前端開發(fā)過程，?程化是必不可少的?環(huán)， 那?程序?程化都需要做些什么呢， 先看下?前?程序開發(fā)當(dāng)中存在哪些問題需要解決：

不?持 css 預(yù)編譯器,作為?種主流的 css 解決?案，不論是 less , sass , stylus都可以提升 css 效率 不?持引?npm包 （這?條，從微信公開課中聽聞，微信準(zhǔn)備?持） 不?持 ES7 等后續(xù)的 js 特性，好?的 async await 等特性都?法使? 不?持引?外部字體?件，只?持 base64
沒有 eslint 等代碼檢查?具。
?案選型

對(duì)于?前常?的?程化?案， webpack ， rollup ， parcel 等來看， 都常 ?與單?應(yīng)?的打包和處理，??程序天?是 “多?應(yīng)?” 并且存在?些特定的配置。根據(jù)要解決的問題來看， ??是?件的編譯，修改，拷?這些處理， 對(duì)于這些需求， 我們想到基于流的 gulp ?常的適合處理， 并且相對(duì)webpack 配置多? 應(yīng)?更加簡(jiǎn)單。所以?程序?程化?案推薦使? gulp。

具體開發(fā)思路

通過 gulp 的 task 實(shí)現(xiàn)：

實(shí)時(shí)編譯 less ?件?相應(yīng)?錄 。
引??持 async ， await 的運(yùn)?時(shí)?件 。
編譯字體?件為 base64 并?成相應(yīng) css ?件，?便使?。
依賴分析哪些地?引?了 npm 包，將 npm 包打成?個(gè)?件，拷??相應(yīng)?錄。
檢查代碼規(guī)范。

5 ?程序架構(gòu)

微信?程序的框架包含兩部分 View 視圖層、 App Service 邏輯層。
View 層?來渲染??結(jié)構(gòu)， AppService 層?來邏輯處理、數(shù)據(jù)請(qǐng)求、接?調(diào)?。
它們?cè)趦蓚€(gè)線程?運(yùn)?。

視圖層和邏輯層通過系統(tǒng)層的 JSBridage 進(jìn)?通信， 邏輯層把數(shù)據(jù)變化通知 到視圖層，觸發(fā)視圖層??更新， 視圖層把觸發(fā)的事件通知到邏輯層進(jìn)?業(yè)務(wù)處理

視圖層使? WebView 渲染， iOS 中使??帶 WKWebView ，在 Android 使?騰訊的x5 內(nèi)核（基于 Blink ）運(yùn)?。
邏輯層使?在 iOS 中使??帶的 JSCore 運(yùn)?，在 Android 中使?騰訊的 x5 內(nèi)核 （基于 Blink ）運(yùn)?。 開發(fā)?具使? nw.js 同時(shí)提供了視圖層和邏輯層的運(yùn)?環(huán)境。

6 WXML && WXSS

WXML
?持?jǐn)?shù)據(jù)綁定 。
?持邏輯算術(shù)、運(yùn)算。
?持模板、引? ?持添加事件（ bindtap ）。
Wxml 編譯器： Wcc 把 Wxml ?件 轉(zhuǎn)為 JS。
執(zhí)??式： Wcc index.wxml
使? Virtual DOM ，進(jìn)?局部更新。
WXSS
wxss編譯器： wcsc 把 wxss ?件轉(zhuǎn)化為 js
執(zhí)??式： wcsc index.wxss
尺?單位 rpx
rpx（responsive pixel ）: 可以根據(jù)屏幕寬度進(jìn)??適應(yīng)。規(guī)定屏幕寬為750rpx 。公式：

const dsWidth = 750 export const screenHeightOfRpx = function () {return 750 / env.screenWidth * env.screenHeight } export const rpxToPx = function (rpx) {return env.screenWidth / 750 * rpx } export const pxToRpx = function (px) {return 750 / env.screenWidth * px }

樣式導(dǎo)?
使? @import 語句可以導(dǎo)?外聯(lián)樣式表， @import 后跟需要導(dǎo)?的外聯(lián)樣 式表的相對(duì)路徑，? ; 表示語句結(jié)束。
內(nèi)聯(lián)樣式靜態(tài)的樣式統(tǒng)?寫到 class 中。 style 接收動(dòng)態(tài)的樣式，在運(yùn)?時(shí)會(huì)進(jìn)?解析，請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn) style中，以免影響渲染速度
全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作?于每?個(gè)??。在 page 的wxss ?件中定義的樣式為局部樣式，只作?在對(duì)應(yīng)的??，并會(huì)覆蓋app.wxss 中相同的選擇器 。

7 ?程序的問題

?程序仍然使? WebView 渲染，并?原?渲染。（部分原?） 服務(wù)端接?返回的頭?法執(zhí)?，?如： Set-Cookie 。
依賴瀏覽器環(huán)境的 JS 庫不能使?。
不能使? npm ，但是可以?搭構(gòu)建?具或者使? mpvue 。（未來官?有計(jì)劃?持）。
不能使? ES7 ，可以??? babel+webpack ?搭或者使? mpvue 。 不?持使???的字體（未來官?計(jì)劃?持）。
可以? base64 的?式來使? iconfont 。
?程序不能發(fā)朋友圈（可以通過保存圖?到本地，發(fā)圖?到朋友前。?維碼可以使?B接?）。
獲取?維碼/?程序接?的限制
程序推送只能使?“服務(wù)通知” ?且需要?戶主動(dòng)觸發(fā)提交 formId ， formId 只有7天有 效期。（現(xiàn)在的做法是在每個(gè)??都放? form 并且隱藏以此獲取更多的 formId 。后端 使?原則為：優(yōu)先使?有效期最短的）。
?程序??限制 2M，分包總計(jì)不超過 8M 。
轉(zhuǎn)發(fā)（分享）?程序不能拿到成功結(jié)果，原來可以。鏈接（?游戲造的孽）。
拿到相同的 unionId 必須綁在同?個(gè)開放平臺(tái)下。開放平臺(tái)綁定限制：
50 個(gè)移動(dòng)應(yīng)?
10 個(gè)?站
50 個(gè)同主體公眾號(hào)
5 個(gè)不同主體公眾號(hào)
50 個(gè)同主體?程序
5 個(gè)不同主體?程序
公眾號(hào)關(guān)聯(lián)?程序
所有公眾號(hào)都可以關(guān)聯(lián)?程序。
?個(gè)公眾號(hào)可關(guān)聯(lián)10個(gè)同主體的?程序，3個(gè)不同主體的?程序。
?個(gè)?程序可關(guān)聯(lián)500個(gè)公眾號(hào)。
公眾號(hào)?個(gè)?可新增關(guān)聯(lián)?程序13次，?程序?個(gè)?可新增關(guān)聯(lián)500次。
?個(gè)公眾號(hào)關(guān)聯(lián)的10個(gè)同主體?程序和3個(gè)?同主體?程序可以互相跳轉(zhuǎn) 品牌搜索不?持?融、醫(yī)療 。
?程序授權(quán)需要?戶主動(dòng)點(diǎn)擊
?程序不提供測(cè)試 access_token
安卓系統(tǒng)下，?程序授權(quán)獲取?戶信息之后，刪除?程序再重新獲取，并重新授權(quán)，得到 舊簽名，導(dǎo)致第?次授權(quán)失敗
開發(fā)者?具上，授權(quán)獲取?戶信息之后，如果清緩存選擇全部清除，則即使使?了wx.checkSession ，并且在 session_key 有效期內(nèi)，授權(quán)獲取?戶信息也會(huì)得到新的
session_key

8 授權(quán)獲取?戶信息流程

session_key 有有效期，有效期并沒有被告知開發(fā)者，只知道?戶越頻繁使??程序，session_key 有效期越?。
在調(diào)? wx.login 時(shí)會(huì)直接更新 session_key ，導(dǎo)致舊session_key 失效 ?程序內(nèi)先調(diào)? wx.checkSession 檢查登錄態(tài)，并保證沒有過期的 session_key 不會(huì) 被更新，再調(diào)? wx.login 獲取 code 。接著?戶授權(quán)?程序獲取?戶信息，?程序拿到加密后的?戶數(shù)據(jù)，把加密數(shù)據(jù)和 code 傳給后端服務(wù)。后端通過 code 拿到session_key 并解密數(shù)據(jù)，將解密后的?戶信息返回給?程序。
?試題：先授權(quán)獲取?戶信息再 login 會(huì)發(fā)?什么？


?戶授權(quán)時(shí)，開放平臺(tái)使?舊的 session_key 對(duì)?戶信息進(jìn)?加密。調(diào)? wx.login重新登錄，會(huì)刷新 session_key ，這時(shí)后端服務(wù)從開放平臺(tái)獲取到新 session_key ， 但是?法對(duì)? session_key 加密過的數(shù)據(jù)解密，?戶信息獲取失敗 在?戶信息授權(quán)之前先調(diào)? wx.checkSession 呢？ wx.checkSession 檢查登錄態(tài)，并 且保證 wx.login 不會(huì)刷新session_key ，從?讓后端服務(wù)正確解密數(shù)據(jù)。但是這?存在?個(gè)問題，如果?程序較?時(shí)間不?導(dǎo)致 session_key 過期，則 wx.login 必定會(huì)重 新?成 session_key ，從?再?次導(dǎo)致?戶信息解密失敗。

9 性能優(yōu)化

我們知道 view 部分是運(yùn)?在 webview 上的， 所以前端領(lǐng)域的?多數(shù)優(yōu)化?式都有?。

加載優(yōu)化

代碼包的??是最直接影響?程序加載啟動(dòng)速度的因素。 代碼包越?不僅下載 速度時(shí)間?，業(yè)務(wù)代碼注?時(shí)間也會(huì)變?。 所以最好的優(yōu)化?式就是減少代碼 包的??。

?程序加載的三個(gè)階段的表示

優(yōu)化?式
代碼壓縮。
及時(shí)清理??代碼和資源?件。
減少代碼包中的圖?等資源?件的??和數(shù)量。
分包加載。
?屏加載的體驗(yàn)優(yōu)化建議
提前請(qǐng)求: 異步數(shù)據(jù)請(qǐng)求不需要等待??渲染完成。
利?緩存: 利? storage API 對(duì)異步請(qǐng)求數(shù)據(jù)進(jìn)?緩存，?次啟動(dòng)時(shí)先利?緩存數(shù)據(jù)渲染??，在進(jìn)?后臺(tái)更新。
避免?屏：先展示???架?和基礎(chǔ)內(nèi)容。
及時(shí)反饋：即時(shí)地對(duì)需要?戶等待的交互操作給出反饋，避免?戶以為?程序?響應(yīng)。
使?分包加載優(yōu)化

在構(gòu)建?程序分包項(xiàng)?時(shí)，構(gòu)建會(huì)輸出?個(gè)或多個(gè)功能的分包，其中每個(gè)分包?程序必定 含有?個(gè)主包，所謂的主包，即放置默認(rèn)啟動(dòng)??/ TabBar ??，以及?些所有分包都需 ?到公共資源/ JS 腳本，?分包則是根據(jù)開發(fā)者的配置進(jìn)?劃分。
在?程序啟動(dòng)時(shí)，默認(rèn)會(huì)下載主包并啟動(dòng)主包內(nèi)??，如果?戶需要打開分包內(nèi)某個(gè)? ?，客戶端會(huì)把對(duì)應(yīng)分包下載下來，下載完成后再進(jìn)?展示。
優(yōu)點(diǎn)：
對(duì)開發(fā)者??，能使?程序有更?的代碼體積，承載更多的功能與服務(wù)。
對(duì)?戶??，可以更快地打開?程序，同時(shí)在不影響啟動(dòng)速度前提下使?更多功能。
整個(gè)?程序所有分包??不超過 8M
單個(gè)分包/主包??不能超過 2M
原?分包加載的配置 假設(shè)?持分包的?程序?錄結(jié)構(gòu)如下

├── app.js ├── app.json ├── app.wxss ├── packageA │ └── pages │ ├── cat │ └── dog ├── packageB │ └── pages │ ├── apple │ └── banana ├── pages │ ├── index │ └── logs └── utils

開發(fā)者通過在 app.json subPackages 字段聲明項(xiàng)?分包結(jié)構(gòu)。

{ "pages":[ "pages/index", "pages/logs" ], "subPackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "pages": [ "pages/apple", "pages/banana" ] } ]

分包原則
聲明 subPackages 后，將按 subPackages 配置路徑進(jìn)?打包， subPackages 配置路 徑外的?錄將被打包到 app （主包） 中。
app （主包）也可以有??的 pages （即最外層的 pages 字段。
subPackage 的根?錄不能是另外?個(gè) subPackage 內(nèi)的??錄 。
??的 TAB ??必須在 app （主包）內(nèi)。
引?原則
packageA ?法 require packageB JS ?件，但可以 require app 、?? package 內(nèi)的 JS` ?件。
packageA ?法 import packageB 的 template ，但可以 require app 、?? package 內(nèi)的 template`
packageA ?法使? packageB 的資源，但可以使? app 、?? package` 內(nèi)的資源。
官?即將推出 分包預(yù)加載（截止目前還沒推出）

獨(dú)?分包

渲染性能優(yōu)化

每次 setData 的調(diào)?都是?次進(jìn)程間通信過程，通信開銷與 setData 的數(shù)據(jù)量正相關(guān)。
setData 會(huì)引發(fā)視圖層??內(nèi)容的更新，這?耗時(shí)操作?定時(shí)間中會(huì)阻塞?戶交互。
setData 是?程序開發(fā)使?最頻繁，也是最容易引發(fā)性能問題的。
避免不當(dāng)使? setData
使? data 在?法間共享數(shù)據(jù)，可能增加 setData 傳輸?shù)臄?shù)據(jù)量。。 data 應(yīng)僅包括 與??渲染相關(guān)的數(shù)據(jù)。
使? setData 傳輸?量數(shù)據(jù)，通訊耗時(shí)與數(shù)據(jù)正相關(guān)，??更新延遲可能造成??更新 開銷增加。僅傳輸??中發(fā)?變化的數(shù)據(jù)，使? setData 的特殊 key 實(shí)現(xiàn)局部更新。 短時(shí)間內(nèi)頻繁調(diào)? setData ，操作卡頓，交互延遲，阻塞通信，??渲染延遲。避免不必要的 setData ，對(duì)連續(xù)的 setData 調(diào)?進(jìn)?合并。
在后臺(tái)??進(jìn)? setData ，搶占前臺(tái)??的渲染資源。??切?后臺(tái)后的 setData 調(diào) ?，延遲到??重新展示時(shí)執(zhí)?。

避免不當(dāng)使?onPageScroll
只在有必要的時(shí)候監(jiān)聽 pageScroll 事件。不監(jiān)聽，則不會(huì)派發(fā)。
避免在 onPageScroll 中執(zhí)?復(fù)雜邏輯。
避免在 onPageScroll 中頻繁調(diào)? setData
避免滑動(dòng)時(shí)頻繁查詢節(jié)點(diǎn)信息（ SelectQuery ）?以判斷是否顯示，部分場(chǎng)景建議使?節(jié) 點(diǎn)布局橡膠狀態(tài)監(jiān)聽（ inersectionObserver ）替代。
使??定義組件

在需要頻繁更新的場(chǎng)景下，?定義組件的更新只在組件內(nèi)部進(jìn)?， 不受??其 他部分內(nèi)容復(fù)雜性影響。

10 wepy vs mpvue

相?傳統(tǒng)的?程序框架，這個(gè)?直是我們作為資深開發(fā)者?較期望去解決的， 在 Web 開發(fā)中，隨著 Flux 、 Redu x、 Vuex 等多個(gè)數(shù)據(jù)流?具出現(xiàn)， 我們也期望在業(yè)務(wù)復(fù)雜的?程序中使?。
WePY 默認(rèn)?持 Redux ，在腳?架?成項(xiàng)?的時(shí)候可以內(nèi)置
Mpvue 作為 Vue 的移植版本，當(dāng)然?持 Vuex ，同樣在腳?架?成項(xiàng)?的時(shí)候可以內(nèi)置。
組件化
WePY 類似 Vue 實(shí)現(xiàn)了單?件組件，最?的差別是?件后綴 .wpy ，只是寫法上會(huì)有差異。

export default class Index extends wepy.page {}

Mpvue 作為 Vue 的移植版本，?持單?件組件， template 、 script 和 style都在?個(gè) .vue ?件中，和 vue 的寫法類似，所以對(duì) Vue 開發(fā)熟悉的同學(xué)會(huì)?較適應(yīng)。現(xiàn)在主流前端框架：Anglar，react，Vue，都可以了解一下。
?程化

所有的?程序開發(fā)依賴官?提供的開發(fā)者?具。開發(fā)者?具簡(jiǎn)單直觀，對(duì)調(diào)試?程序很有幫助，現(xiàn)在也?持騰訊云（?前我們還沒有使?，但是對(duì)新的?些 開發(fā)者還是有幫助的），可以申請(qǐng)測(cè)試報(bào)告查看?程序在真實(shí)的移動(dòng)設(shè)備上運(yùn) ?性能和運(yùn)?效果，但是它本身沒有類似前端?程化中的概念和?具。

wepy 內(nèi)置了構(gòu)建，通過 wepy init 命令初始化項(xiàng)?，?致流程如下：
wepy-cli 會(huì)判斷模版是在遠(yuǎn)程倉庫還是在本地，如果在本地則會(huì)?即跳到第 3 步， 反之繼續(xù)進(jìn)?。
會(huì)從遠(yuǎn)程倉庫下載模版，并保存到本地。
詢問開發(fā)者 Project name 等問題，依據(jù)開發(fā)者的回答，創(chuàng)建項(xiàng)?。
mpvue 沿?了 vue 中推崇的 webpack 作為構(gòu)建?具，但同時(shí)提供了?些??的插件 以及配置?件的?些修改，?如 ：

不再需要 html-webpack-plugin 基于 webpack-dev-middleware 修改成 webpack-dev-middleware-hard-disk 最?的變化是基于 webpack-loader 修改成 mpvue-loader 但是配置?式還是類似，分環(huán)境配置?件，最終都會(huì)編譯成?程序?持的?錄結(jié)構(gòu)和?件后綴。

11 mpvue

mpvue
Vue.js ?程序版, fork ? vuejs/vue@2.4.1 ，保留了 vue runtime 能?， 添加了?程序平臺(tái)的?持。 mpvue 是?個(gè)使? Vue.js 開發(fā)?程序的前端框架。
框架基于 Vue.js 核?， mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí) 現(xiàn)，使其可以運(yùn)?在?程序環(huán)境中，從?為?程序開發(fā)引?了整套 Vue.js 開發(fā)體驗(yàn)。
框架原理
兩個(gè)??向：
通過 mpvue 提供 mp 的 runtime 適配?程序
通過 mpvue-loader 產(chǎn)出微信?程序所需要的?件結(jié)構(gòu)和模塊內(nèi)容。
七個(gè)具體問題：
要了解 mpvue 原理必然要了解 Vue 原理，這是?前提：
現(xiàn)在假設(shè)您對(duì) Vue 原理有個(gè)?概的了解。那么接下來會(huì)有幾個(gè)問題請(qǐng)帶入思考。（Vue不熟練的同學(xué)可以先收藏起來，以后再看哈）

由于 Vue 使?了 Virtual DOM ，所以 Virtual DOM 可以在任何?持 JavaScript語?的平臺(tái)上操作，譬如說?前 Vue ?持瀏覽器平臺(tái)或 weex ，也可以是 mp (?程 序)。那么最后 Virtual DOM 如何映射到真實(shí)的 DOM 節(jié)點(diǎn)上呢？ vue 為平臺(tái)做了?層適配層，瀏覽器平臺(tái)? runtime/node-ops.js 、 weex 平臺(tái)? runtime/nodeops.js ，?程序? runtime/node-ops.js 。不同平臺(tái)之間通過適配層對(duì)外提供相同的接 ?， Virtual DOM 進(jìn)?操作 Real DOM 節(jié)點(diǎn)的時(shí)候，只需要調(diào)?這些適配層的接?即可，?內(nèi)部實(shí)現(xiàn)則不需要關(guān)?，它會(huì)根據(jù)平臺(tái)的改變?改變 所以思路肯定是往增加?個(gè) mp 平臺(tái)的 runtime ?向?。但問題是?程序不能操作DOM ，所以 mp 下的 node-ops.js ??的實(shí)現(xiàn)都是直接 return obj
新 Virtual DOM 和舊 Virtual DOM 之間需要做?個(gè) patch ，找出 diff 。 patch完了之后的 diff 怎么更新視圖，也就是如何給這些 DOM 加? attr 、 class 、style 等 DOM 屬性呢？ Vue 中有 nextTick 的概念?以更新視圖， mpvue 這塊對(duì)于 ?程序的 setData 應(yīng)該怎么處理呢？ 另外個(gè)問題在于?程序的 Virtual DOM 怎么?成？也就是怎么將 template 編譯成 render function 。這當(dāng)中還涉及到運(yùn)?時(shí)-編譯器-vs-只包含運(yùn)?時(shí)，顯然如果要提? 性能、減少包??、輸出 wxml 、 mpvue 也要提供預(yù)編譯的能?。因?yàn)橐A(yù)輸出 wxml 且沒法動(dòng)態(tài)改變 DOM ，所以動(dòng)態(tài)組件，?定義 render ，和 <script type="text/xtemplate"> 字符串模版等都不?持
另外還有?些其他問題，最后總結(jié)?下
1.如何預(yù)編譯?成 render function 2.如何預(yù)編譯?成 wxml ， wxss ， wxs 3.如何 p atch 出 diff 4.如何更新視圖 5.如何建??程序事件代理機(jī)制，在事件代理函數(shù)中觸發(fā)與之對(duì)應(yīng)的 vue 組件事件響應(yīng)。 6.如何建? vue 實(shí)例與?程序 Page 實(shí)例關(guān)聯(lián)。 7.如何建??程序和 vue ?命周期映射關(guān)系，能在?程序?命周期中觸發(fā) vue ?命周期。
platform/mp 的?錄結(jié)構(gòu)

├── compiler //解決問題1，mpvue-template-compiler源碼部分 ├── runtime //解決問題3 4 5 6 7 ├── util //?具?法 ├── entry-compiler.js //mpvue-template-compiler的??。package.json相關(guān)命令會(huì)? ├── entry-runtime.js //對(duì)外提供Vue對(duì)象，當(dāng)然是mpvue └── join-code-in-build.js //編譯出SDK時(shí)的修復(fù)

mpvue-loader
mpvue-loader 是 vue-loader 的?個(gè)擴(kuò)展延伸版，類似于超集的關(guān)系， 除了 vue-loader 本身所具備的能?之外，它還會(huì)利? mpvue-templatecompiler ?成 render function
它會(huì)從 webpack 的配置中的 entry 開始，分析依賴模塊，并分別打包。在 entry 中
app 屬性及其內(nèi)容會(huì)被打包為微信?程序所需要的 app.js／app.json／app.wxss ，其 余的會(huì)?成對(duì)應(yīng)的?? page.js / page.json / page.wxml / page.wxss ，如示例的 entry 將會(huì)?成如 下這些?件，?件內(nèi)容下?慢慢講來：

// webpack.config.js { // ... entry: { app: resolve('./src/main.js'), // app 字段被識(shí)別為 app index: resolve('./src/pages/index/main.js'), // 其余字段被識(shí)別為 pag 'news/home': resolve('./src/pages/news/home/index.js') } } // 產(chǎn)出?件的結(jié)構(gòu) . ├── app.js ├── app.json ├──· app.wxss ├── components │ ├── card$74bfae61.wxml │ ├── index$023eef02.wxml │ └── news$0699930b.wxml ├── news │ ├── home.js │ ├── home.wxml │ └── home.wxss ├── pages │ └── index │ ├── index.js │ ├── index.wxml │ └── index.wxss └── static ├── css │ ├── app.wxss │ ├── index.wxss │ └── news │ └── home.wxss └── js ├── app.js ├── index.js ├── manifest.js ├── news │ └── home.js └── vendor.js

wxml 每?個(gè) .vue 的組件都會(huì)被?成為?個(gè) wxml 規(guī)范的 template ， 然后通過 wxml 規(guī)范的 import 語法來達(dá)到?個(gè)復(fù)?，同時(shí)組件如果涉及到props 的 data 數(shù)據(jù)，我們也會(huì)做相應(yīng)的處理，舉個(gè)實(shí)際的例?：

<template><div class="my-component" @click="test"><h1>{{msg}}</h1><other-component :msg="msg"></other-component></div> </template> <script> import otherComponent from './otherComponent.vue' export default {components: { otherComponent },data () {return { msg: 'Hello Vue.js!' }},methods: {test() {}} } </script>

這樣?個(gè) Vue 的組件的模版部分會(huì)?成相應(yīng)的 wxml

<import src="components/other-component$hash.wxml" /> <template name="component$hash"><view class="my-component" bindtap="handleProxy"><view class="_h1">{{msg}}</view><template is="other-component$hash" wx:if="{{ $c[0] }}" data="{{ ..</view> </template>

可能已經(jīng)注意到了 other-component(:msg=“msg”) 被轉(zhuǎn)化成了 。 mpvue在運(yùn)?時(shí)會(huì)從根組件開始把所有的組件實(shí)例數(shù)據(jù)合并成?個(gè)樹形的數(shù)據(jù)，然后通過 setData 到 appData , $c 是 $children 的縮寫。?于那個(gè) 0 則 是我們的 compiler 處理過后的?個(gè)標(biāo)記，會(huì)為每?個(gè)?組件打?個(gè)特定的 不重復(fù)的標(biāo)記。 樹形數(shù)據(jù)結(jié)構(gòu)如下。

// 這?數(shù)據(jù)結(jié)構(gòu)是?個(gè)數(shù)組，index 是動(dòng)態(tài)的 { $child: { '0'{ // ... root data $child: { '0': { // ... data msg: 'Hello Vue.js!', $child: { // ...data } } } } } }

wxss
這個(gè)部分的處理同 web 的處理差異不?，唯?不同在于通過配置?成.css 為 .wxss ，其中的對(duì)于 css 的若?處理，在 postcss-mpvuewxss 和 px2rpx-loader 這兩部分的?檔中?詳細(xì)的介紹。
推薦和?程序?樣，將 app.json／page.json 放到????處，使? copy-webpackplugin copy 到對(duì)應(yīng)的?成位置。
這部分內(nèi)容來源于 app 和 page 的 entry ?件，通常習(xí)慣是 main.js ， 你需要在你的???件中 export default { config: {} } ，這才能被我 們的 loader 識(shí)別為這是?個(gè)配置，需要寫成 json ?件。

import Vue from 'vue'; import App from './app'; const vueApp = new Vue(App); vueApp.$mount(); // 這個(gè)是我們約定的額外的配置 export default { // 這個(gè)字段下的數(shù)據(jù)會(huì)被填充到 app.json ／ page.json config: { pages: ['static/calendar/calendar', '^pages/list/list'], // Will be window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '##455A73', navigationBarTitleText: '美團(tuán)汽?票', navigationBarTextStyle: '##fff' } } };

每天一句中文式外語

泰語

1、你好！/Sa-wa-di-ka薩瓦迪卡（男生要說：薩瓦迪卡撲）/Hello！/Hi！?
2、你好嗎？/sa-bai-di-mai薩拜迪麥/How?are?you？
3、我還好！/sa-bai-di薩拜迪/I?am?fine！? ?
4、您叫什么名字？/kun-ci-a-lai坤賜阿萊/what?is?your?name??? ??
5、你去哪里？/kun-bai-nai?坤拜奈/where?are?you?going??? 6、再見！/la-gong?拉拱（聯(lián)想記憶：拉弓射箭：那就是再見了）/?Good?Bye！/Bye?Bye ?
7、祝好運(yùn)！/cuo-di措迪（聯(lián)想記憶：用腳搓地表示好運(yùn)）/?Good?Luck!?? ??
8、謝謝你！/kuo-kun擴(kuò)坤/Thank?you！ ?
9、對(duì)不起！/kuo-tuo擴(kuò)拓?/sorry!/Excuse?me!
10、不要緊！沒關(guān)系！/mai-bian-lai賣鞭來（窮的要命，但是心愛的馬兒舍不得賣，那就賣鞭來生活。賣鞭來）/never?mind!
（日常會(huì)常用的我用紅字標(biāo)識(shí)出來了）對(duì)了，英語是國(guó)際通用語言，一定要重視起來喲！

總結(jié)

以上是生活随笔為你收集整理的⼩程序（微信）【面试】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。