摘要：原理架構(gòu)作為與之間相互通信的橋梁部分在環(huán)境中注入的實(shí)現(xiàn)代碼，包含了協(xié)議的拼裝發(fā)送參數(shù)池回調(diào)池等一些基礎(chǔ)功能。部分在客戶端中的功能映射代碼，實(shí)現(xiàn)了攔截與解析環(huán)境信息的注入通用功能映射等功能。

作為native 與 JS 之間相互通信的橋梁
JS部分(bridge): 在JS環(huán)境中注入 bridge 的實(shí)現(xiàn)代碼，包含了協(xié)議的拼裝/發(fā)送/參數(shù)池/回調(diào)池等一些基礎(chǔ)功能。
Native部分(SDK): 在客戶端中 bridge 的功能映射代碼，實(shí)現(xiàn)了URL攔截與解析/環(huán)境信息的注入/通用功能映射等功能。

1、邏輯層負(fù)責(zé)計(jì)算邏輯處理
2、視圖層負(fù)責(zé)頁面展示
數(shù)據(jù)變更驅(qū)動(dòng)視圖更新；視圖交互觸發(fā)事件，事件響應(yīng)函數(shù)修改數(shù)據(jù)再次觸發(fā)視圖更新（用戶交互，觸發(fā)邏輯計(jì)算，最后由視圖更新展示）

vue - data -> 小程序
vue <- 事件響應(yīng) - 小程序

1、生命周期關(guān)聯(lián)：在小程序上觸發(fā)數(shù)據(jù)更新，由vue處理，vue處理完后同步到小程序
為實(shí)現(xiàn)數(shù)據(jù)同步，mpvue 修改了 Vue.js runtime 實(shí)現(xiàn)，在 Vue.js 的生命周期中增加了更新小程序數(shù)據(jù)的邏輯。
2、事件代理機(jī)制：用戶交互觸發(fā)的數(shù)據(jù)更新通過事件代理機(jī)制完成，在小程序觸發(fā)的事件代理到vue的method上
在小程序組件節(jié)點(diǎn)上觸發(fā)事件后，找到虛擬 DOM 上對(duì)應(yīng)的節(jié)點(diǎn)，觸發(fā)對(duì)應(yīng)的事件；另一方面，Vue.js 事件響應(yīng)如果觸發(fā)了數(shù)據(jù)更新，其生命周期函數(shù)更新將自動(dòng)觸發(fā)，在此函數(shù)上同步更新小程序數(shù)據(jù)，數(shù)據(jù)同步也就實(shí)現(xiàn)了

Vue代碼
1、將小程序頁面編寫為 Vue.js 實(shí)現(xiàn)
2、以 Vue.js 開發(fā)規(guī)范實(shí)現(xiàn)父子組件關(guān)聯(lián)

小程序代碼
1、以小程序開發(fā)規(guī)范編寫視圖層模板
2、配置生命周期函數(shù)，關(guān)聯(lián)數(shù)據(jù)更新調(diào)用
3、將 Vue.js 數(shù)據(jù)映射為小程序數(shù)據(jù)模型

并在此基礎(chǔ)上，附加如下機(jī)制
1、Vue.js 實(shí)例與小程序 Page 實(shí)例建立關(guān)聯(lián)
2、小程序和 Vue.js 生命周期建立映射關(guān)系，能在小程序生命周期中觸發(fā) Vue.js 生命周期
3、小程序事件建立代理機(jī)制，在事件代理函數(shù)中觸發(fā)與之對(duì)應(yīng)的 Vue.js 組件事件響應(yīng)

Vue.js 視圖層渲染由 render 方法完成，同時(shí)在內(nèi)存中維護(hù)著一份虛擬 DOM，mpvue 無需使用 Vue.js 完成視圖層渲染，通過改造 render 方法，禁止視圖層渲染；在 Vue runtime 時(shí)，添加平臺(tái) mpvue

1、在 mpvue 生成的 wxml 文件中，所有的事件都被 handleProxy 的函數(shù)接管，在 handleProxy 進(jìn)行處理后再去調(diào)用我們寫的真正的事件處理函數(shù)。這個(gè)方法在initMp時(shí)，作為小程序Page構(gòu)造函數(shù)的一個(gè)選項(xiàng)，從而可以在wxml中被正確調(diào)用
2、handleProxy將小程序的event對(duì)象傳給handleProxyWithVue函數(shù)進(jìn)行進(jìn)一步處理
3、handleProxyWithVue 的作用

從根實(shí)例開始，根據(jù)comkey找出事件處理函數(shù)所在的mpvue實(shí)例(getVm)

通過遍歷找到的vm的vnode，結(jié)合eventid找到小程序事件對(duì)應(yīng)的真實(shí)的事件處理函數(shù)(getHandle)

將小程序的event對(duì)象包裝為mpvue的event對(duì)象(getWebEventByMP),并添加了preventDefault和stopPropagation方法

將包裝后的event對(duì)象傳給真實(shí)的處理函數(shù)進(jìn)行調(diào)用。

（生成的wxml中綁定事件的節(jié)點(diǎn)都有data-comkey和data-eventid屬性，在一個(gè)事件觸發(fā)時(shí)，它們是被用來尋找事件對(duì)應(yīng)的vm實(shí)例和對(duì)應(yīng)的事件處理函數(shù)的）

1、App對(duì)象，主要有onLaunch, onShow和onHide
2、Page對(duì)象，主要有onLoad, onShow, onReady, onHide和onUnload

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

app啟動(dòng)：
app-beforeCreate -> app-created -> app-onlaunch -> app-beforeMount -> app-mounted -> app-onShow

進(jìn)入頁面，更新操作：
page beforeCreate -> page created -> page onLoad -> page onShow -> page onReady -> page beforeMount -> component beforeCreate -> component created -> component onLoad -> component onReady -> component beforeMount -> component mounted -> page mounted

返回（隱藏），沒有觸發(fā)destroy：
page onUnload -> component onUnload

page A、B(page tab)、C、D(page tab) (c 是 A 的子組件)
A -> B -> A （按鈕跳轉(zhuǎn)）
A -> B (點(diǎn)擊左上角返回鍵)

1、App啟動(dòng)
app-beforeCreate.....
app-created...
app-onlaunch...
app-beforeMount.....
app-mounted.....
app-onShow....
A-beforeCreate.....
A-created....
B-beforeCreate.....
B-created.....
D-beforeCreate.....
D-created.....

2、進(jìn)入 page A
A-onLoad....
A-onShow....
A-onReady.....
A-beforeMount.....
C-beforeCreate.....
C-created.....
C-onLoad....
C-onReady.....
C-beforeMount.....
C-mounted.....
A-mounted.....

3、離開page A
A-onUnload....
C-onUnload....

4、進(jìn)入page B
B-onLoad....
B-onShow....
B-onReady.....
B-beforeMount.....
B-mounted.....
B-beforeUpdate..... // 更新
B-updated.....

5、離開page B
B-onHide.....

6、重新進(jìn)入page A（switchTab）
A-onLoad....
C-onLoad....
A-onShow....
C-onShow....
A-onReady.....
C-onReady.....
A-beforeMount.....
A-beforeUpdate.....
A-mounted.....
C-beforeUpdate.....
C-updated.....

7、通過返回鍵返回 page B
A-onUnload....
C-onUnload....
B-onShow....

# 安裝 vue-cli
$ npm install --global vue-cli
# 根據(jù)模板項(xiàng)目創(chuàng)建本地項(xiàng)目，目前為內(nèi)網(wǎng)地址
$ vue init mpvue/mpvue-quickstart my-project
# 安裝依賴和啟動(dòng)自動(dòng)構(gòu)建
$ cd my-project
$ npm install
# 現(xiàn)在支持微信wx、頭條tt、支付寶my、百度swan，運(yùn)行該命令生成dist文件夾，即小程序
$ npm run dev 

├── build                  編譯配置
├── config                 編譯配置
├── dist                   小程序運(yùn)行代碼目錄（該目錄由編譯生成）
├── `node_modules`           
├── src                    開發(fā)目錄
|   ├── components         組件目錄
|   |   ├── a.vue      組件a
|   |   └── b.vue      組件b
|   ├── pages              頁面目錄
|   |   ├── index          index頁面（默認(rèn)會(huì)在src/main.js主入口生成pages配置，路徑為pages/index/main）
            ├── index.vue  由其入口文件編譯main.js后，生成index/main.js、index/main.wxml和index/main.wxss文件
            ├── main.js     頁面默認(rèn)入口文件（config屬性會(huì)編譯為頁面配置文件index/main.json）
|   |   └── other           other頁面（默認(rèn)會(huì)在src/main.js主入口生成pages配置，路徑為pages/other/main）
            ├── index.vue  由其入口文件編譯main.js后，生成other/main.js、other/main.wxml和other/main.wxss文件
            ├── main.js    頁面默認(rèn)入口文件（config屬性會(huì)編譯為頁面配置文件other/main.json）
|   └── main.js            小程序配置項(xiàng)（全局?jǐn)?shù)據(jù)、樣式、聲明鉤子等；經(jīng)build后，會(huì)在dist目錄下生成app.js、app.json和app.wxss文件）
└── static                 靜態(tài)文件，會(huì)直接被復(fù)制到dist/下
└── package.json           項(xiàng)目的package配置
└── project.config.json    小程序開發(fā)工具的配置

自己寫的demo，在之前原生微信小程序的基礎(chǔ)上，使用 mpvue 重構(gòu)了電影模塊：
mpvue-play

以下是一些自己在寫demo時(shí)，踩過的坑或是一些需要注意的點(diǎn)（尤其對(duì)習(xí)慣了vue的童學(xué)），具體也可參見mpvue文檔
1、onShow 代替 mounted：從一個(gè)頁面返回到前一頁面時(shí)，mounted不會(huì)再次被調(diào)用，因?yàn)轫撁鏇]有被銷毀，因而不需要重新掛載
onLoad 代替 created： 啟動(dòng)項(xiàng)目時(shí)，所有頁面的beforeCreatecreated都已調(diào)用，并且進(jìn)入頁面時(shí)，不會(huì)再調(diào)用beforeCreatecreated
雖然建議盡量不要使用小程序中的生命周期的鉤子函數(shù)

2、小程序不支持路由，因此，路由跳轉(zhuǎn)使用小程序的頁面導(dǎo)航api代替
this.$router.push --> wx.navigateTo() //進(jìn)入子頁面
this.$router.replace --> wx.reLaunch()//打開新頁面

3、微信小程序的頁面的 query 參數(shù)是通過 onLoad 獲取的，mpvue 對(duì)此進(jìn)行了優(yōu)化，直接通過 this.$root.$mp.query 獲取相應(yīng)的參數(shù)數(shù)據(jù)

4、小程序里所有的 BOM／DOM 都不能用，因此v-html、v-text不能用

5、圖片 src="{{}}" => :src="",才能生效

6、不支持部分復(fù)雜的 JavaScript 渲染表達(dá)式，mpvue會(huì)把 template 中的 {{}} 雙花括號(hào)的部分，直接編碼到 wxml 文件中，由于微信小程序的能力限制(數(shù)據(jù)綁定)，所以無法支持復(fù)雜的 JavaScript 表達(dá)式。建議使用computed
目前可以使用的有 + - * % ?: ! == === > < [] .，剩下的還待完善。

7、不支持filter過濾器，因?yàn)樾〕绦騱xml不支持

8、列表渲染需要注意一點(diǎn)，嵌套列表渲染，必須指定不同的索引 :key=""

9、不支持在 template 內(nèi)使用 methods 中的函數(shù)，即

10、獲取當(dāng)前頁面地址
this.$route.fullPath --> getCurrentPages()[0].route

11、不支持本地圖片用作背景圖，可以使用網(wǎng)絡(luò)圖片、或者base64，或者使用img、image標(biāo)簽

12、上拉加載/下拉刷新，選用小程序的全局api; scroll-view中無法使用

13、不支持css媒體查詢，css樣式避免標(biāo)簽選擇器，不易于維護(hù)，盡量使用類選擇器

14、CSS樣式導(dǎo)入，使用 @import url("")

15、暫不支持在組件上使用 Class 與 Style 綁定

參考：
mpvue文檔
用Vue.js開發(fā)微信小程序：開源框架mpvue解析
mpvue小程序開發(fā) - 生命周期梳理
美團(tuán)小程序框架--mpvue入坑指南
mpVue的使用小技巧之跳轉(zhuǎn)與傳參
小程序開發(fā)框架WePY與mpvue
px2rpx-loader使用和源碼分析