mpvue——基于vue的小程序开发框架

mpvue 是一款使用 Vue.js 开发微信小程序的前端框架。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。
1、全局安装cli
npm install –global vue-cli
2、创建一个基于 mpvue-quickstart 模板的新项目
vue init mpvue/mpvue-quickstart my-project
3、安装依赖
cd my-project
npm install
4、启动构建
npm run dev
5、启动微信开发者工具，引入项目即可预览。

接下来就好好看看mpvue与以往的vue、小程序有何优势。
1、生命周期
mpvue除了支持vue的生命周期的同时，也兼容了小程序的生命周期。小程序的生命周期是执行小程序的onReady
，mpvue会在小程序的onReady 后，再去触发 vue的mounted生命周期。官网建议：除特殊情况外，不建议使用小程序的生命周期钩子。且，在属性函数或回调函数中，不推荐使用ES6语法，容易将this的执行修改。
例：

new Vue({data: {a: 1},created () {// `this` 指向 vm 实例console.log('a is: ' + this.a)},onShow () {// `this` 指向 vm 实例console.log('a is: ' + this.a, '小程序触发的 onshow')}
})
// => "a is: 1"

2、模板
（1）小程序不支持对BOM和DOM进行操作，因此，vue中的v-html指令不可用。
（2）不支持复杂的表达式进行渲染。目前支持的表达式：+ - * % ?: ! == === > < [] .
（3）小程序中不支持vue中的过滤器。
（4）Class 与 Style 绑定
a、class的语法转换

转换前：

<p :class="{ active: isActive }">111</p>
<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</p>
<p class="static" :class="[activeClass, errorClass]">333</p>
<p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</p>
<p class="static" v-bind:class="[{ active: isActive }, errorClass]">555</p>

转换后：

<view class="_p {{[isActive ? 'active' : '']}}">111</view>
<view class="_p static {{[isActive ? 'active' : '', hasError ? 'text-danger' : '']}}">222</view>
<view class="_p static {{[activeClass, errorClass]}}">333</view>
<view class="_p static {{[isActive ? activeClass : '', errorClass]}}">444</view>
<view class="_p static {{[[isActive ? 'active' : ''], errorClass]}}">555</view>

b、style的语法转换

转换前：

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>
<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>

转换后：

<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">666</view>
<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">777</view>

由class和style的语法转换对比可知，转换后中以”_”开头的是转换前的标签，比如以上，转换前的p标签，在转换后类名便是”_p”,若转换前为div标签，则转换后类名则为”_div”,以此类推。
注：mpvue不支持vue中Class 与 Style 绑定中的 classObject 和 styleObject 语法。
3、列表渲染
若是嵌套列表渲染，必须指定不同的索引且别名不能相同。
4、事件映射

    //左侧为 WEB 事件，右侧为 小程序 对应事件click: 'tap',touchstart: 'touchstart',touchmove: 'touchmove',touchcancel: 'touchcancel',touchend: 'touchend',tap: 'tap',longtap: 'longtap',input: 'input',change: 'change',submit: 'submit',blur: 'blur',focus: 'focus',reset: 'reset',confirm: 'confirm',columnchange: 'columnchange',linechange: 'linechange',error: 'error',scrolltoupper: 'scrolltoupper',scrolltolower: 'scrolltolower',scroll: 'scroll'

5、注意点
（1）列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@ @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
（2）bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发。
（3）.stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效。
（4）若开发过程中需要使用到表单组件，建议使用微信小程序的表单组件。
（5）select 组件用 picker 组件进行代替，表单元素 radio 用 radio-group 组件进行代替。
（6）引用自定义组件时，若在自定义组件中设置class、style等属性，由于会变成wxml文件，因此，这些属性均无效。mpvue 可以支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange=”eventName” 事件，需要写成 @change=”eventName”。
（7）在 app 的根组件上添加名为 onError 的回调函数进行捕获 app 的 onError。

温馨提示：mpvue本就是使用vue.js进行小程序的开发，自然，mpvue更趋向于小程序，因此，vue中可以使用jquery，可以使用new进行对象的创建，而由于小程序不允许，故而，mpvue中自然也是不允许的。总而言之，mpvue的结构是小程序的项目结构，那么在开发的过程中，在使用vue的同时也要更着重考虑小程序。

小编认为，mpvue并没有使小程序的开发进行优化，只是为不熟悉小程序而熟悉vue的开发人员提供了便利，不需要再去了解掌握小程序而已。且，若是对于即熟悉小程序和vue的开发人员而言，使用mpvue开发时会更明显的感受到。若是mpvue开发新手，容易将vue和小程序以及mpvue三者的开发模式混乱。以上皆是小编的个人见解，不喜勿喷~

mpvue——基于vue的小程序开发框架相关推荐

python基于vue微信小程序房屋租赁出租系统
目录 1 绪论 1 1.1课题背景 1 1.2课题研究现状 1 1.3初步设计方法与实施方案 2 1.4本文研究内容 2 2 系统开发环境 4 2.1 2.2MyEclipse环境配置 4 2.3 B ...
小程序开发框架mpvue开发文档
什么是mpvue mpvue 继承自 Vue.js,其技术规范和语法特点与 Vue.js 保持一致.mpvue是一个微信小程序开发框架,他的语法特点和vue是一样的,除了一些微信小程序官方api以外. ...
FinClip黑板报：3分钟了解Vue开发小程序的技术原理
Vue. React 和 Angular 是当前应用最广的三大前端框架,仅从 GitHub 趋势来看,Vue 更是排在了第一位,目前已经达到了 17 万的 Star. 目前,不管是 BAT 大厂,还是 ...
3分钟了解Vue开发小程序的技术原理
Vue. React 和 Angular 是当前应用最广的三大前端框架,仅从 GitHub 趋势来看,Vue 更是排在了第一位,目前已经达到了 17 万的 Star. 目前,不管是 BAT 大厂,还是 ...
浅入了解Vue开发小程序的技术原理
Vue. React 和 Angular 是当前应用最广的三大前端框架,仅从 GitHub 趋势来看,Vue 更是排在了第一位,目前已经达到了 17 万的 Star. 目前,不管是 BAT 大厂,还是 ...
用 vue 写小程序，基于 mpvue 框架重写 weui
mpvue-weui 前言上周美团开源了 mpvue 框架,他基于Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系.what,小程序可以用vue写了?简直有点不太敢确定, ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
6篇干货带你学会用vue开发小程序——mpvue
#第 003 期# 前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用 ...
小程序开发框架WePY和mpvue使用感受
今天想和小伙伴聊聊小程序开发框架的问题. 种种原因,去年年末接触到了小程序,使用mpvue做了两个项目,也使用WePY做了一个项目,关于这两个框架的恩恩怨怨,我觉得我有资格说两句. 1.主人公介绍首 ...

mpvue——基于vue的小程序开发框架

mpvue——基于vue的小程序开发框架相关推荐

最新文章

热门文章