接下来可能要开发一个小程序，同事推荐使用mpvue，那么我提前熟悉下。
官网地址：http://mpvue.com/
1.快速上手 http://mpvue.com/mpvue/quickstart/
跟着官网提示走，搭建一个mpvue的小程序项目
注意，这里我用yarn代替了npm才安装成功。
2.分包机制
mpvue-loader 1.1.2-rc.2之后，优化了build后的文件生成结构，生成的目录结构保持了源文件夹下的目录结构，有利于对分包的支持。
3.注意事项：新增的页面需要重新 npm run dev 或 yarn run dev来进行编译
4.不要在选项属性或回调上使用箭头函数
比如：
created: () => console.log(this.a)
或
vm.$watch('a', newValue => this.myMethod())
因为箭头函数是和父级上下文绑定在一起的，this不会是如你做预期的vue实例，且this.a或this.myMethod也会是未定义的
5.微信小程序的页面的query参数是通过onLoad获取的，mpvue对此进行了优化，直接通过this.$root.$mp.query获取相应的数据参数，其调用需要在onLoad生命周期出发之后使用，比如onShow等
6.不支持 v-html
7.不支持部分复杂的JavaScript渲染表达式
8.不支持过滤器
9.不支持在template内使用methods中的函数
10.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>
11.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>
不支持vue官网的class和style绑定语法
12.用computed方法生成class或style字符串，插入到页面中
<template> <!-- 支持 --> <div class="container" :class="computedClassStr"></div> <div class="container" :class="{active: isActive}"></div> <!-- 不支持 --> <div class="container" :class="computedClassObject"></div> </template> <script> export default { data () { return { isActive: true } }, computed: { computedClassStr () { return this.isActive ? 'active' : '' }, computedClassObject () { return { active: this.isActive } } } } </script>
13.嵌套列表渲染必须指定不同的索引
<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 --> <template> <ul v-for="(card, index) in list"> <li v-for="(item, itemIndex) in card"> {{item.value}} </li> </ul> </template>
14.事件处理器，全支持。
// 事件映射表，左侧为 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' }
在input和textarea中change事件会被转为blur事件
小程序能力所致，bind和catch事件同时绑定时，只会触发bind，catch不会被触发，要避免踩坑。
事件修饰符：
| 修饰符 | 说明 |
| .stop | 阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的catchEventName失效 |
| .prevent | 可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面 |
| .capture | |
| .self | 没有可以判断的标识 |
| .once | 也不能做，因为小程序没有removeEventListener，虽然可以直接在handleProxy中处理，但非常的不优雅，违背了意愿，暂不考虑 |
| 键值修饰符 | 在小程序中没有键盘，所以... |
15.表单控件绑定，几乎全支持。
建议直接使用微信小程序表单组件。用法示例：
select组件用picker组件进行代替
<template> <div> <picker @change="bindPickerChange" :value="index" :range="array"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> </div> </template> <script> export default { data () { return { index: 0, array: ['A', 'B', 'C'] } }, methods: { bindPickerChange (e) { console.log(e) } } } </script>
表单元素radio用radio-group组件进行代替
<template> <div> <radio-group class="radio-group" @change="radioChange"> <label class="radio" v-for="(item, index) in items" :key="item.name"> <radio :value="item.name" :checked="item.checked"/> {{item.value}} </label> </radio-group> </div> </template> <script> export default { data () { return { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'} ] } }, methods: { radioChange (e) { console.log('radio发生change事件，携带value值为：', e.target.value) } } } </script>
16.详细的不支持列表：
- 暂不支持在组件引用时，在组件上定义click等原生事件、v-show(可用v-if代替)和class style等样式属性
- 例：<card class="class-name"> </card>样式时不会生效的，因为编译到wxml，小程序不会生成节点，建议写在内部顶级元素上
- Slot(scoped暂时还没做支持)
- 动态组件
- 异步组件
- inline-template
- X-Templates
- keep-alive
- transition
- class
- style
17.mpvue可以支持小程序的原生组件
比如picker,map等等。需要注意的是原生组件上的事件绑定，需要以vue的事件绑定语法来绑定，如 bindchange="eventName"事件需要写成@change="eventName"
示例代码：
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange"> <view class="picker"> 当前选择: {{date}} </view> </picker>
18.TypeScript支持
配置方法 http://mpvue.com/build/mpvue-loader/#typescript， Demo见 mpvue-ts-demo
19.最佳实践
（1）精简data数据
（2）优化长列表性能
- 避免在v-for中嵌套子组件，这样可以优化大部分setData时的冗余数据
- 直接通过样式display来展示和隐藏
（3）合理使用双向绑定，建议使用 v-model.lazy绑定方式以优化性能
（4）谨慎选择直接使用小程序的API，如果你有小程序和H5福永代码的需要，业务代码需要保持对WEB Vue.js的兼容性。可通过桥接适配层屏蔽两端差异。
20.常见问题
（1）如何获取小程序在page onLoad时候传递的options
this.$root.$mp.query
（2）如何获取小程序在app onLaunch/onShow的时候传递的options
this.$root.$mp.appOptions
（3）如何捕获app的onError
由于onError不是完整意义的生命周期，所以只提供一个捕获错误的方法，在app的根组件上添加名为onError的回调函数即可，如下：
export default { // 只有 app 才会有 onLaunch 的生命周期 onLaunch () { // ... }, // 捕获 app error onError (err) { console.log(err) } }
21.mpvue框架使用场景汇总
mpvue小程序框架包含：
- 运行时JS SDK
- 初始化模板项目（包含推荐的目录结构，webpack构建，代码检查配置等）
- 项目构建所需的npm依赖（已经包含在项目模板中，无需手动引入）
开发者可能会面对的四种典型场景：
- 单独以mpvue框架构建小程序
- 推荐的方式，无需额外支持
- mpvue框架为主，同时使用其它框架（原生开发方式或wepy等）
- 已经使用其他框架，引入mpvue做部分模块的开发
- 只是用mpvue的JS SDK，自定义构建策略
（完）
以上笔记摘自： mpvue官方文档 http://mpvue.com/mpvue/