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的小程序开发框架

猜你喜欢