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