为了账号安全,请及时绑定邮箱和手机立即绑定
慕课专栏

目录

索引目录

mpvue原理深入解析36讲

原价 ¥ 49.00

立即订阅
01 深入多端小程序框架 - mpvue 2.0
更新时间:2019-08-16 10:54:30
天才就是百分之二的灵感,百分之九十八的汗水。

——爱迪生

你好,我是 Sam,现任 BAT 中一家的前端架构师,长期专注于前端技术栈。如果你看过我在慕课网的实战课的话,应该对我不陌生。我在慕课网出过两门实战课程,一个是《Vue 实战商业级读书 Web APP》,这门课程主要是使用 Vue 全家桶结合第三方插件完成了一个读书 Web App;另一个是最近刚刚推出的《mpvue2.0 实战读书多端小程序》,这门课程主要是围绕 mpvue2.0 框架讲解如何制作一款多端小程序应用。也是在制作这门实战课程的过程中,有很多学员提出希望系统学习 mpvue 基础知识及其原理部分,这部分更适合用文字表达。所以,就有了你现在看到的专栏。

为什么要学习小程序开发

自从 2017 年初,微信团队推出小程序以来,小程序可谓是移动端目前主流的一种表现形式。微信团队对小程序的定位是无需下载,用完即走。随着 5G 网络的来临,这种超级 APP + 小程序的形式大有颠覆原有的原生 APP,毕竟小程序是不需要下载的,也就不需要占用手机的存储空间。

为什么我会说小程序已成为移动端主流的表现形式?这是因为在微信团队推出小程序之后,支付宝、百度和头条也都相继推出基于自家 APP 的小程序。不仅如此,就连腾讯自家的另一款超级 APP —— QQ 也推出了 QQ 小程序。阿里巴巴也将支付宝小程序升级为基于阿里巴巴全线产品的小程序。这样看,你还不认为小程序已经成为移动端的主流吗?

为什么一定是 mpvue 框架

各家的小程序开发标准各不相同,再加上不同平台提供的 API 接口也不尽相同,这就导致了前端开发者的不友好,毕竟前端开发者更熟悉像 Vue 或 React 这种前端框架。

于是 2018 年初美团宣布开源小程序框架 mpvue(github地址),这个小程序框架是基于 Vue.js 框架开发的。到 2019 年 2 月,mpvue 更新至 2.0 版本,并且支持微信、支付宝、百度和头条四大平台的小程序。mpvue 正已猛烈的势头冲击着小程序开发版图,其以 github 1.8w+ Star 坐稳 Vue 生态小程序框架第一的位置。同时随着小程序的应用场景越来越多,mpvue 可以说是 Vue 开发者不可不学的必备技能之一。那么 mpvue 具体来说是什么呢?我们先看一下官方的解释:

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

通过官方的解释,我们可以初步了解 mpvue 是:

  • 基于 Vue.js 源码修改,使小程序获得 Vue.js 的开发体验;
  • 修改 Vue.js 的 runtime 和 compiler 源码,兼容小程序环境。

以上两点是 mpvue 的核心特质,简单说我们可以编写 Vue.js 源码,通过 mpvue 提供的 compiler 模块实时将源码转换为小程序源码。除此之外,在程序 runtime(运行时)我们还可以继续使用 Vue.js 的特性来提升开发效率,如组件化、计算属性、指令等。以上两点大大降低了小程序开发门槛,使得我们可以用极低的学习成本介入全新的小程序开发,这也是 mpvue 快速走红的重要原因。

哪些人需要学习小程序开发

看到这儿,你已经对小程序以及 mpvue 框架有了初步的了解。那么你现在可能有个问题,就是我为什么要学习小程序开发,或者说为什么要学习 mpvue 框架呢?

我觉得第一种情况是你目前的工作中已经涉及到小程序开发,但苦于不同平台的标准和 API 不同。mpvue 框架可以很好地解决你现有工作中的问题,提高工作效率。

其次,就是目前的前端领域已经进入到大前端时代,所谓大前端就是指所有你看到的终端将来都将由前端技术栈完成,就比如现在移动端的原生 APP 和小程序都是属于大前端概念中的。所以,第二种情况就是你不想在未来的某一天被淘汰的话,那就抓紧学起来吧!

本专栏都讲了 mpvue 中的啥

基于上面所有已经说的内容,本专栏主要围绕 mpvue 这个多端小程序框架为中心展开。但不想让你局限于仅仅是使用 mpvue 框架开发小程序,更想让你了解 mpvue 深层的原理。

本专栏可以分成三个核心模块:

mpvue 的核心部分

核心部分主要分为基础篇和核心篇,其中基础篇主要是讲解 mpvue 的基础语法和 API,而核心篇主要是围绕 mpvue 兼容小程序进行展开的。

mpvue 的原理部分

上面的内容已经介绍了,mpvue 框架和 Vue.js 框架的主要区别在于 runtime 和 compiler 两个部分。所以,原理部分主要就是通过 mpvue 框架的 runtime 和 compiler 的部分源码来了解其原理。

mpvue 的实战指南

实战指南部分我会提供 mpvue 的最佳学习路径以及开发常见问题的总结等。毕竟我们学习一个技术最终的目的还是要应用到真实案例或者工作中的,那就免不了要爬很多的坑,这部分就是分享我之前曾爬过的坑以及出坑的技巧。

学习本专栏之后的收获

通过学习本专栏,我希望你能收获以下:

  • 会用: 掌握 mpvue 开发的基本招式,能够将其应用到实际项目开发中;
  • 用好: 能够掌握 mpvue 的最佳实践,在项目中用好 mpvue;
  • 知根: 懂得 mpvue 的实现原理,了解 mpvue 和 vue 的差异。

强烈建议: 把本专栏和对应的实战课结合在一起进行学习,效果更佳!

}
立即订阅 ¥ 49.00

你正在阅读课程试读内容,订阅后解锁课程全部内容

千学不如一看,千看不如一练

手机
阅读

扫一扫 手机阅读

mpvue原理深入解析36讲
立即订阅 ¥ 49.00

举报

0/150
提交
取消