互聯網信息化咨詢/技術開發/整合營銷
請通過以下方式免費咨詢
提交
美團點評近日開源了 mpvue ,這是一個使用 Vue.js 開發小程序的前端框架。使用此框架,開發者將得到完整的 Vue.js 開發體驗,同時為 H5 和小程序提供了代碼復用的能力。如果想將 H5 項目改造為小程序,或開發小程序后希望將其轉換為 H5,mpvue 將是十分契合的一種解決方案。
mpvue 的核心目標是提高開發效率,增強開發體驗。使用該框架,開發者只需初步了解小程序開發規范、熟悉 Vue.js 基本語法即可上手。框架提供了完整的 Vue.js 開發體驗,開發者編寫 Vue.js 代碼,mpvue 將其解析轉換為小程序并確保其正確運行。此外,框架還通過 vue-cli 工具向開發者提供 quick start 示例代碼,開發者只需執行一條簡單命令,即可獲得可運行的項目。
主要特性:
1.徹底的組件化開發能力:提高代碼
2.完整的 Vue.js 開發體驗
3.方便的 Vuex 數據管理方案:方便構建復雜應用
4.快捷的 webpack 構建機制:自定義構建策略、開發階段 hotReload
5.支持使用 npm 外部依賴
6.使用 Vue.js 命令行工具 vue-cli 快速初始化項目
7.H5 代碼轉換編譯成小程序目標代碼的能力
實現原理:
Vue代碼
將小程序頁面編寫為 Vue.js 實現
1.以 Vue.js 開發規范實現父子組件關聯
2.以小程序開發規范編寫視圖層模板;配置生命周期函數,關聯數據更新調用;將 Vue.js 數據映射為小程序數據模型
并在此基礎上,附加如下機制
1.Vue.js 實例與小程序 Page 實例建立關聯
2.小程序和 Vue.js 生命周期建立映射關系,能在小程序生命周期中觸發 Vue.js 生命周期
3.小程序事件建立代理機制,在事件代理函數中觸發與之對應的 Vue.js 組件事件響應
據悉,mpvue 框架已經在業務項目中得到實踐和驗證,目前正在美團點評內部大范圍使用。mpvue 是基于 Vue.js 源碼進行二次開發,在增加了小程序平臺的實現同時,保留了跟隨 Vue.js 版本升級的能力。