学习笔记：mpvue开发小程序——入门

接下来可能要开发一个小程序，同事推荐使用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/