微信小程序能不能用 vue.js 开发? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
接触微信小程序有一段时间的开发者或开发团队, 我相信多多少少都会为自己搭建封装一些便于开发的框架 / 脚手架, 尤其是一些做过 web 开发的开发者, 受到现如今 Web 主流开发框架如 Angular,React,vue 等的核心思想的影响, 对数据 / 状态管理, 组件化, 跨平台等都有较高的追求.
所以, 从小程序出现到现在, 已经陆陆续续出现了一些遵循了这些 Web 开发思想的小程序框架, 比较突出的就是 WePY, 一个由腾讯团队推出的小程序组件化开发框架, 主要的特点如下:
类 Vue 开发风格
支持自定义组件开发
支持引入 NPM 包
支持 Promise
支持 ES2015 + 特性, 如 Async Functions
支持多种编译器, Less/Sass/Styus,Babel/Typescript,Pug
支持多种插件处理, 文件压缩, 图片压缩, 内容替换等
支持 Sourcemap,ESLint 等
小程序细节优化, 如请求列队, 事件优化等
这些特性基本上是现今主流 Web 开发的标配了. 因为我在开发 Web 应用的时候也经常使用 Vue, 所以在试用 WePY 的过程中觉得非常的熟悉好上手, 它确实是一个值得使用, 可以有效提高生产力的好框架.
不过, 今天的主角并不是这个类 Vue 框架 WePY, 我想聊的是另外一个基于 Vue 的框架: 美团点评团队出品的小程序开发框架:. 为什么说 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 真的很好用啊!
另外, 提供一个对原生微信小程序, mpvue,WePY 这三种开发小程序方式的比较, 感兴趣的朋友可以参考一下:
更多 Web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17242.html