mpvue 开发框架介绍和最佳实践⼩小程序开发的新姿势

Vue.js

酒旅终端研发基础服务平台

动态化技术、⼩小程序应⽤用

⼩小程序⼯工程化开发、业务级应⽤用

美团

⽬目录CONTENTS

mpvue 介绍

使⽤用⽅方式

设计思路路

实践 & 展望

1 mpvue 介绍作为⼩小程序应⽤用开发框架，mpvue 具有什什么特点？为开发者带来了了是什什么？当前社区的反馈如何？

mpvue 是什什么

Vue.js 代码 ⼩小程序代码

使⽤用 Vue.js 开发⼩小程序的前端框架

⼯工程化体系集成cli 命令⾏行行⼯工具 编译构建集成

⽣生态扩展能⼒力力npm 管理理⽀支持

Vue 组件机制开发规范扩展Vue 编码规范 Vue 语法⽀支持

Vue 引擎驱动

mpvue 的能⼒力力

好扩展

适⽤用性增强

易易学习

超低上⼿手 成本

多端复⽤用

技术沉淀收益规模化 提⾼高开发效率

减少重复劳动

⾃自动化构建

组件化开发

企业级开发核⼼心能⼒力力 适⽤用⼤大型项⽬目重要

• 美团点评官⽅方开源和⽀支持 • 累计 star 数量量 11k • npm 扩展 26 个，其中社区贡献 21 个 • npm 包⾸首⽉月下载量量 9.3K

• 公众号推送⽂文章阅读量量 30k • 知乎《如何看待美团开源的 mpvue》浏览量量 20w • 微信⼩小程序官⽅方转发⽂文章

• 微信⼩小程序技术运营洽谈中

技术交流群 技术社区

• 微信技术交流群，成员1500+

• QQ 千⼈人技术交流群

• 三个技术社区上有 mpvue 专栏

• FDCon2018 上海海前端峰会

• ⽃斗⻥鱼直播 + gitchat 精品课 + gitchat 线上交流

• 程序员杂志封⾯面报道：《⽤用 Vue.js 开发⼩小程序：解析前端框架 mpvue》

• 技术交流 & 线下沙⻰龙：《基于 Vue.js 的⼩小程序开发框架 mpvue 和⼩小程序性能优化实践》

类别 序号 接⼊入⽅方

酒店旅游

1 美团酒店

2 美团⻔门票

3 美团汽⻋车票

4 美团⽕火⻋车票

美团点评

1 ⾦金金融

2 到店

3 外卖

4 点评

美团⽕火⻋车票

• 酒旅⼩小程序标准⽅方案，10+ ⼩小程序接⼊入

• 美团点评⼩小程序陆续接⼊入中

• 外部合作持续洽谈接⼊入中

54%

美团外卖

62%

2 mpvue 使⽤用⽅方式mpvue 框架针对的使⽤用场景如何，在各种复杂的场景下应该如何使⽤用，典型的使⽤用流程是怎样的？

使⽤用 mpvue 之前

了了解⼩小程序能⼒力力 & 边界 了了解 Vue.js 特性 了了解前端构建

mpvue 做什什么 & 不不做什什么

设计⼀一种编码⽅方式

确定⼀一套语法集合

内置编译构建⼯工具

推荐示例例项⽬目模板

UI 组件库

常⽤用⼯工具库

第三⽅方平台⽀支持

H5 差异抹平和适配

mpvue only mpvue 为主 mpvue 做增量量开发

使⽤用场景

• 官⽅方标准使⽤用⽅方式• 从零构建⼩小程序项⽬目• quickstart 集成⽅方案

• mpvue ⽅方案为基础• 不不同⽅方案边界隔离• 差异化构建 + 集成

• 维持既有技术⽅方案• 使⽤用 simple ⼯工具• 定制构建策略略

# install vue-cli $ npm install --global vue-cli

# create new project with template $ vue init mpvue/mpvue-quickstart my-project

# install dependencies and go $ cd my-mpvue $ npm install $ npm run dev

shell

使⽤用⽅方式

3 mpvue 实现思路路⼩小程序开发姿势各不不相同，mpvue 是如何决策的？制定规则还是复⽤用规则，mpvue 如何通过最⼩小的代价，打通传统前端和⼩小程序开发的壁垒？

View

VDom

Component

WXML

WXSS

Service

mpvue SDK

事件函数逻辑

Data ⽣生命周期

data

event

Vue 代码

mpvue 编译器器视图层代码 逻辑层代码

执⾏行行阶段

编译阶段

单 JSCore多 webview

mpvue 框架组成

数据同步机制运⾏行行阶段 全局事件代理理⽣生命周期关联

构建集成开发阶段 项⽬目模板项⽬目初始化

样式编译编译阶段 脚本编译模板编译 SDK 注⼊入

Vue.js 引擎引⼊入 - 运⾏行行时⽀支持

维护 mp 对象实例例

mpvue runtime

实例例间⽣生命周期互通

维护 Vue 对象实例例

mp 触发事件 + Vue 执⾏行行回调函数

Vue 维护数据模型和虚拟 dom

⼩小程序负责视图层渲染

mpvue runtime 实现

事件函数

mp 对象

AppData

⽣生命周期

事件函数

Vue 对象

data

⽣生命周期

事件代理理机制

数据同步机制

⽣生命周期关联

mpvue SDK

从 SFC 提取出 AST

从 AST 构建模板代码

AST 数据改造

mpvue-loader

MINA mpvue wepy

语法规范 ⼩小程序开发规范 基于 Vue.js 类 Vue.js

样式规范 wxss sass, less, postcss, … sass, less, styus, …

组件化 component Vue.js SFC 类 Vue.js SFC

跨端复⽤用 不不可复⽤用 快速移植 H5, 快应⽤用 ⽀支持转换 H5

⾃自动构建 本身⽆无构建 webpack 构建 内置构建

上⼿手成本 全新学习 熟悉 Vue.js 即可 Vue.js 和 wepy

集中数据管理理 不不⽀支持 Vuex Redux

引⼊入代码 ⽆无增量量 50K SKD 模板代码 + 框架SDK

框架能⼒力力对⽐比

4 mpvue 实践 & 展望mpvue 框架解决哪部分核⼼心诉求，实际开发中有什什么好的建议？针对社区的反馈，mpvue 未来的⽅方向是什什么

现有 Vue.js H5 项⽬目迁移

平台差异抹平 基础库替换 构建⼯工具替换

H5 和浏览器器 API Vue.js 基础库 vue-loader

⼩小程序平台 API mpvue 基础库 mpvue-loader

推荐上⼿手路路径

segmentfault 专栏: https://segmentfault.com/search?type=question&q=mpvue

掘⾦金金专栏： https://juejin.im/tag/mpvue

项⽬目 issues: https://github.com/Meituan-Dianping/mpvue/issues

查阅官⽅方⽂文档

翻看github issue

加⼊入技术交流群讨论

最佳上⼿手路路径 经验和踩坑汇总

优化构建

代码体积

集成 Vue

Devtool

快应⽤用

XX ⼩小程序

框架机制

优化

最流⾏行行的

⼩小程序框架

社区第三⽅方库⽀支持

跨端动态化

泛⼩小程序

开源社区建设

微信⼩小程序

动态化能⼒力力展望

能⼒力力扩展和共建

社区⽣生态完善

专注微信⼩小程序⽀支持

将 mpvue 建设成最流⾏行行的⼩小程序开发框架 完善社区技术⽣生态 & 邀请社区贡献者 泛⼩小程序解决⽅方案 & 多应⽤用适配

技术交流欢迎参与 mpvue 社区建设美团技术团队 公众号