小程序模板網(wǎng)

美團點評開源用 Vue.js 開發(fā)小程序的前端框架 mpvue

發(fā)布時間:2018-05-07 14:50 所屬欄目:小程序開發(fā)教程

美團點評近日開源了 mpvue ,這是一個使用 Vue.js 開發(fā)小程序的前端框架。使用此框架,開發(fā)者將得到完整的 Vue.js 開發(fā)體驗,同時為 H5 和小程序提供了代碼復用的能力。如果想將 H5 項目改造為小程序,或開發(fā)小程序后希望將其轉(zhuǎn)換為 H5,mpvue 將是十分契合的一種解決方案。

mpvue 的核心目標是提高開發(fā)效率,增強開發(fā)體驗。使用該框架,開發(fā)者只需初步了解小程序開發(fā)規(guī)范、熟悉 Vue.js 基本語法即可上手??蚣芴峁┝送暾?Vue.js 開發(fā)體驗,開發(fā)者編寫 Vue.js 代碼,mpvue 將其解析轉(zhuǎn)換為小程序并確保其正確運行。此外,框架還通過 vue-cli 工具向開發(fā)者提供 quick start 示例代碼,開發(fā)者只需執(zhí)行一條簡單命令,即可獲得可運行的項目。

主要特性:

  • 徹底的組件化開發(fā)能力:提高代碼

  • 完整的 Vue.js 開發(fā)體驗

  • 方便的 Vuex 數(shù)據(jù)管理方案:方便構(gòu)建復雜應用

  • 快捷的 webpack 構(gòu)建機制:自定義構(gòu)建策略、開發(fā)階段 hotReload

  • 支持使用 npm 外部依賴

  • 使用 Vue.js 命令行工具 vue-cli 快速初始化項目

  • H5 代碼轉(zhuǎn)換編譯成小程序目標代碼的能力

實現(xiàn)原理:

Vue代碼

  • 將小程序頁面編寫為 Vue.js 實現(xiàn)

  • 以 Vue.js 開發(fā)規(guī)范實現(xiàn)父子組件關(guān)聯(lián)

小程序代碼

  • 以小程序開發(fā)規(guī)范編寫視圖層模板

  • 配置生命周期函數(shù),關(guān)聯(lián)數(shù)據(jù)更新調(diào)用

  • 將 Vue.js 數(shù)據(jù)映射為小程序數(shù)據(jù)模型

并在此基礎(chǔ)上,附加如下機制

  • Vue.js 實例與小程序 Page 實例建立關(guān)聯(lián)

  • 小程序和 Vue.js 生命周期建立映射關(guān)系,能在小程序生命周期中觸發(fā) Vue.js 生命周期

  • 小程序事件建立代理機制,在事件代理函數(shù)中觸發(fā)與之對應的 Vue.js 組件事件響應

據(jù)悉,mpvue 框架已經(jīng)在業(yè)務(wù)項目中得到實踐和驗證,目前正在美團點評內(nèi)部大范圍使用。mpvue 是基于 Vue.js 源碼進行二次開發(fā),在增加了小程序平臺的實現(xiàn)同時,保留了跟隨 Vue.js 版本升級的能力。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24280.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢