支持各平臺(tái)小程序項(xiàng)目，包括微信、支付寶、百度小程序項(xiàng)目；實(shí)現(xiàn)一套代碼在多個(gè)平臺(tái)使用，降低開(kāi)發(fā)成本。
基于Vue技術(shù)棧，社區(qū)目前較完善的框架有mpVue官方、Megalo官方和Chameleon官方。
mpVue特點(diǎn)：
- 基于@vue-cli腳手架創(chuàng)建的項(xiàng)目
- 通過(guò)webpack構(gòu)建打包，多環(huán)境配置麻煩
- 不支持vue-router，支持vuex數(shù)據(jù)管理
- vue語(yǔ)法特性支持不足
- 兼容小程序生命周期，不建議使用小程序的生命周期鉤子
- webpack/dev-server.js文件實(shí)現(xiàn)熱更新，觸發(fā)小程序的調(diào)試工具檢測(cè)文件變化
- 保留vue.runtime核心方法，vue實(shí)例直接與小程序page實(shí)例建立關(guān)聯(lián)以及生命周期的綁定，vue實(shí)例掛載的時(shí)候把vue屬性同步到對(duì)應(yīng)的小程序?qū)嵗?。利用發(fā)布訂閱模式Observer，Watcher監(jiān)聽(tīng)數(shù)據(jù)更新；并在小程序生命周期中觸發(fā)vue的生命周期
image.png
目錄結(jié)構(gòu)
├── package.json
├── project.config.json
├── static
├── src
│ ├── components
│ ├── pages // 需要遵循每個(gè)小程序頁(yè)面放入一個(gè)單獨(dú)子目錄的形式
│ ├── utils
│ ├── App.vue
│ ├── store // 狀態(tài)管理
│ └── main.js // main.js+App.vue：為入口文件，相當(dāng)于原生小程序的app.json和app.js的復(fù)合體
├── config // 包含不同環(huán)境的配置信息，環(huán)境、api域名等
│ ├── index.js
│ ├── dev.env.js
│ └── prod.env.js
└── build
megalo特點(diǎn)：
- 基于@vue/cli3腳手架創(chuàng)建的項(xiàng)目
- 支持多環(huán)境，多模式，配置簡(jiǎn)易
- 不支持vue-router，支持vuex數(shù)據(jù)管理
- vue語(yǔ)法特性支持完善
- 兼容小程序生命周期
- api統(tǒng)一插件megalo-api，支持promise，但是不兼容全部平臺(tái)API，需要手動(dòng)處理
- megalo-cli-service 插件包含開(kāi)發(fā)環(huán)境運(yùn)行、監(jiān)聽(tīng)、生產(chǎn)環(huán)境打包
- 支持頁(yè)面.vue和.js的合并書(shū)寫(xiě)，增加<config>標(biāo)簽
- vue單文件的模版和style都可以通過(guò)指定platform做跨平臺(tái)兼容
- 支持js文件的跨平臺(tái)兼容（index.wechat.js / index.swan.js / index.alipay.js）
- 邏輯和模版分別在service和view中執(zhí)行，之間不具備共享數(shù)據(jù)通道。當(dāng) Vue 的 vm 上數(shù)據(jù)發(fā)生更新時(shí)，會(huì)重新渲染出 vdom，在的 patch 階段，框架不在去操作 DOM，而是通過(guò) Page 上的setDate方法將變化的數(shù)據(jù)更新到視圖層，完成 Vue 和 小程序的視圖更新。
image.png
目錄結(jié)構(gòu)
├── dist-*
│ ├── project.config.json // 工具配置
├── package.json
├── .env.development
├── .env.production
├── src
│ ├── components
│ ├── pages
│ ├── subPackage
│ ├── store
│ ├── static
│ ├── App.vue
│ └── main.js // app.json和app.js的匯總文件，小程序全局配置
└── build
vue特性支持情況對(duì)比
image.png
總體上來(lái)說(shuō)，二者都是大大降低了開(kāi)發(fā)成本，megalo基于mpvue做了進(jìn)一步優(yōu)化，且兼容vue版本的升級(jí)，貼近vue技術(shù)棧業(yè)務(wù)的開(kāi)發(fā)規(guī)范，當(dāng)然megalo作為后起之秀會(huì)存在更多的坑，需要我們?cè)趯?shí)際開(kāi)發(fā)中手動(dòng)填坑??，當(dāng)然后續(xù)我們也會(huì)做更多的賦能，減少開(kāi)發(fā)同學(xué)的煩惱 ??
附Chameleon調(diào)研：
- CML新語(yǔ)言，類(lèi)Vue，原有項(xiàng)目遷移困難，學(xué)習(xí)成本較高
- 編譯時(shí)使用自研多態(tài)協(xié)議（定義標(biāo)準(zhǔn)接口，除統(tǒng)一組件外，各端模塊各端獨(dú)立實(shí)現(xiàn)，例如登錄），包括兼容H5
- 內(nèi)置的組件和API，原生組件和H5組件導(dǎo)出引用
- 支持vue的周邊 包括router
- 獨(dú)立的語(yǔ)法檢查工具
- 優(yōu)化編譯速度、打包性能、包大?。o(wú)真實(shí)數(shù)據(jù)）
- 需要重新定制ui框架
主要問(wèn)題是遷移和學(xué)習(xí)成本過(guò)高
