公众号回复 1024, 送你一个特别推送
介绍一个强大的小程序开发框架, 一起来学习吧!
作者: 一斤代码
https://www.jianshu.com/p/8f779950bfd9
正文
接触微信小程序有一段时间的开发者或开发团队, 我相信多多少少都会为自己搭建封装一些便于开发的框架 / 脚手架, 尤其是一些做过 web 开发的开发者, 受到现如今 Web 主流开发框架如 Angular,React,vue 等的核心思想的影响, 对数据 / 状态管理组件化跨平台等都有较高的追求
所以, 从小程序出现到现在, 已经陆陆续续出现了一些遵循了这些 Web 开发思想的小程序框架, 比较突出的就是 WePY, 一个由腾讯团队推出的小程序组件化开发框架, 主要的特点如下:
类 Vue 开发风格
支持自定义组件开发
支持引入 NPM 包
支持 Promise
支持 ES2015 + 特性, 如 Async Functions
支持多种编译器, Less/Sass/StyusBabel/TypescriptPug
支持多种插件处理, 文件压缩, 图片压缩, 内容替换等
支持 Sourcemap,ESLint 等
小程序细节优化, 如请求列队, 事件优化等
这些特性基本上是现今主流 Web 开发的标配了因为我在开发 Web 应用的时候也经常使用 Vue, 所以在试用 WePY 的过程中觉得非常的熟悉好上手, 它确实是一个值得使用可以有效提高生产力的好框架
不过, 今天的主角并不是这个类 Vue 框架 WePY, 我想聊的是另外一个基于 Vue 的框架: 美团点评团队出品的小程序开发框架: mpvue 为什么说 WePY 是一个类 Vue 的框架, 而这个 mpvue 是基于 Vue 的框架呢? 因为 WePY 是在代码开发风格上借鉴了 Vue, 本身和 Vue 没有什么关系; 而这个 mpvue 是从整个 Vue 的核心代码上经过二次开发而形成的一个框架, 相当于是给 Vue 本身赋能, 增加了开发微信小程序的能力
使用 mpvue 开发小程序, 你将在小程序技术体系的基础上获取到这样一些能力:
彻底的组件化开发能力: 提高代码
完整的 vue.js 开发体验
方便的 Vuex 数据管理方案: 方便构建复杂应用
快捷的 webpack 构建机制: 自定义构建策略开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力
它的目标是: 在未来最理想的状态下, 可以一套代码可以直接跑在多端: WEB 微信小程序支付宝小程序 Native(借助 weex) 不过由于各个端之间都存在一些比较明显的差异性, 从产品的层面上讲, 不建议这么做, 这个框架的官方他们对它的期望的也只是开发和调试体验的一致
通过官网提供的五分钟快速上手教程, 可以发现它的开发过程和 Vue 保持高度一致, 连使用的命令行工具也还是原先开发 Web 应用时所用 vue-cli:
- # 创建一个小程序工程
- vue init mpvue/mpvue-quickstart my-project
编写模板代码的时候通常也主要是以 html 为主, 比如我们编写一个. vue 组件时写了如下代码:
- <template>
- <div class="counter-warp">
- <p>Vuex counter:{{ count }}</p>
- <p>
- <button @click="increment">+</button>
- <button @click="decrement">-</button>
- </p>
- <a href="/pages/index/index" class="home"> 去往首页 </a>
- </div>
- </template>
而 mpvue 会通过编译, 将这个 HTML 模板转换成小程序的 WXML 代码:
- <template name="counter$39c97971">
- <view class="_div data-v-72101980 counter-warp">
- <view class="_p data-v-72101980">Vuex counter:{{ count }}</view>
- <view class="_p data-v-72101980">
- <button bindtap="handleProxy" data-eventid="{{'0'}}" data-comkey="{{$k}}" class="_button data-v-72101980">+</button>
- <button bindtap="handleProxy" data-eventid="{{'1'}}" data-comkey="{{$k}}"
- class="_button data-v-72101980">-</button>
- </view>
- <navigator url="/pages/index/index" class="_a data-v-72101980 home"> 去往首页 </navigator>
- </view>
- </template>
这样, 我们就可以完全用开发 Web 应用的方式去开发小程序了, 这为我们减少了一些思维切换方面的成本其实最重要的是:
Vue 真的很好用啊!
另外, 提供一个对原生微信小程序 mpvueWePY 这三种开发小程序方式的比较, 感兴趣的朋友可以参考一下:
阅读更多
这个时代, 作为程序员, 我什么要学习小程序
微信小程序开发 < 二 >
微信小程序开发 < 一 >
Python 探究之旅 Python 语言的基本认识
最新 2018(Android) 面试题级答案 (精选版)
相信自己, 没有做不到的, 只有想不到的
在这里获得的不仅仅是技术!
来源: http://mp.weixin.qq.com/s/LMppGJH0Rv-JQTYN3cs-fA