用Vue.js开发微信小程序:mpvue

开源:美团点评技术团队
mpvue官网

小程序开发特点

1、简洁的开发方式;
2、通过多页面聚合完成轻量的产品功能;
4、小程序以离线包方式下载到本地,通过微信客户端载入和启动;
5、开发规范简洁,技术封装彻底,自成开发体系;
6、小程序本身定位为一个简单的逻辑视图层框架;

mpvue 是什么

1、一套定位于开发小程序的前端开发框架,核心目标是提高开发效率,增强开发体验;
2、框架提供了完整的Vue.js 开发体验,开发者编写Vue.js代码,mpvue将其解析转换为小程序并确保其正确运行;
3、框架还通过 vue-cli 工具向开发者提供 quick start 示例代码,开发者只需要执行一条简单命令,即可获得运行的项目;

小程序开发阶段面临的主要问题

1、组件化机制不够完善
2、代码多端复用能力欠缺
3、小程序框架和团队技术栈无法有机结合
4、小程序学习成本不够低

使用Vue.js 开发小程序,带来如下开发效率提升

1、H5代码可以通过最小修改复用到小程序;
2、使用Vue.js 组件机制开发小程序,可实现小程序和H5组件复用;
3、技术栈统一后小程序学习成本降低,开发者从H5 转换到小程序不需要更多学习;
4、Vue.js 代码可以让所有前端直接参与开发维护

Vue.js 与 小程序 的联系

1、一致的工作原理:都是典型的逻辑视图层框架,逻辑层和视图层之间的工作方式为:数据变更驱动视图更新;视图交互触发事件,事件响应函数修改数据再次触发视图更新。

mpVue 实现原理

mpVue实现原理

思路 : 鉴于Vue.js 和 小程序一致的工作原理,我们思考将小程序的功能托管给Vue.js,在正确的时机将数据变更同步到小程序,从而达到开发小程序的目的。这样,我们可以将精力聚焦在Vue.js上,参照Vue.js编写与之对应的小程序代码,小程序负责视图层展示,所有业务逻辑收敛到Vue.js中,Vue.js数据变更后同步到小程序。

Vue 代码
  • 将小程序页面编写为Vue.js实现
  • 以Vue.js 开发规范实现父子组件关联
小程序代码
  • 以小程序开发规范编写视图层模板
  • 配置生命周期函数,关联数据更新调用
  • 将Vue.js 数据映射为小程序数据模型
并在此基础上,附加如下机制
  • Vue.js 实例与小程序Page实例建立关联
  • 小程序和Vue.js 生命周期建立映射关系,能在小程序生命周期中触发 Vue.js 生命周期
  • 小程序事件建立代理机制,在事件代理函数中触发与之对应的Vue.js 组件事件响应

QA

1、要同时维护 Vue.js 和小程序,是否需要写两个版本的代码实现?
2、小程序负责视图层展现,Vue.js的视图层是否还需要,如果不需要应该如何处理?
3、生命周期如何打通,数据同步更新如何实现?

首先,mpvue 为提高效率而生,本身提供了 自动生成 小程序代码的能力,小程序代码根据 Vue 代码构建得到,并 不需要 同时开发两套代码。

Vue.js 视图层渲染由 render 方法完成,同时在内存中维护着一份虚拟DOM,但是mpvue不需要使用Vue.js 完成视图层渲染,因此我们改造了render方法,禁止视图层渲染。Vue runtime 有多个平台实现,所以我们增加了新的平台 mpvue。

生命周期关联
1、生命周期和数据同步是mpvue框架的灵魂,Vue.js和小程序的数据彼此隔离,各自有不同的更新机制。
2、mpvue 从生命周期和事件回调函数切入,在Vue.js 触发数据更新时实现数据同步。
3、小程序通过视图层呈现给用户、通过事件响应用户交互,Vue.js在后台维护着数据变更和逻辑。
4、数据更新发端于小程序,处理自Vue.js,Vue.js数据变更后再同步到小程序。
5、为了实现数据同步,mpvue修改了Vue.js runtime 实现,在Vue.js 的生命周期中增加了更新小程序数据的逻辑。

事件代理机制
1、用户交互触发的数据更新通过事件代理机制完成
2、一方面,Vue.js执行环境中维护着一份实时的虚拟DOM,这与小程序的视图层完全对应,因此,在小程序组件节点上触发事件后,只要找到虚拟DOM上对应的节点,就可以触发对应的事件。
2、另一方面,Vue.js事件响应如果触发了数据更新,其生命周期函数更新将自动触发,在此函数上同步更新小程序数据,数据同步也就实现了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,194评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,058评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,780评论 0 346
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,388评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,430评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,764评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,907评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,679评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,122评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,270评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,867评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2 348

推荐阅读更多精彩内容