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

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

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

vue - data -> 小程序
vue <- 事件響應 - 小程序

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

Vue代碼
1、將小程序頁面編寫為 Vue.js 實現(xiàn)
2、以 Vue.js 開發(fā)規(guī)范實現(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ù)模型

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

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

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

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

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

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

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

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

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

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

app啟動：
app-beforeCreate -> app-created -> app-onlaunch -> app-beforeMount -> app-mounted -> app-onShow

進入頁面，更新操作：
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 (點擊左上角返回鍵)

1、App啟動
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、進入 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、進入page B
B-onLoad....
B-onShow....
B-onReady.....
B-beforeMount.....
B-mounted.....
B-beforeUpdate..... // 更新
B-updated.....

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

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

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

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

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

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

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

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

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

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

7、不支持filter過濾器，因為小程序wxml不支持

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

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

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

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

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

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

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

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

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