mpvue
1 优势
mpvue
提供vuex
进行数据状态管理,能满足复杂应用状态管理需求,这是其他框架都不具备的
2 新建项目
A Mpvue project
# 初始化项目
vue init mpvue/mpvue-quickstart myproject
cd myproject
# 安装依赖
npm i
# 开发时构建
npm dev
# 打包构建
npm run build
# 指定平台的开发时构建(微信、百度、头条、支付宝)
npm dev:wx
npm dev:swan
npm dev:tt
npm dev:my
# 指定平台的打包构建
npm run build:wx
npm run build:swan
npm run build:tt
npm run build:my
# 生成 bundle 分析报告
npm run build --report
3 生命周期比较
- 微信小程序的页面的
query
参数是通过onLoad
获取的 mpvue
对此进行了优化,直接通过this.$root.$mp.query
获取相应的参数数据,其调用需要在onLoad
生命周期触发之后使用
4 语法
4.1 模板语法
- 几乎全支持
1. 不支持 纯-HTML
- 小程序里所有的
BOM/DOM
都不能用,也就是说v-html
指令不能用
2. 不支持部分复杂的 js 渲染表达式
- 目前可以使用的有
+ - * % ?: ! == === > < [] .
,剩下的还待完善
3. 不支持过滤器
- 渲染部分会转成
wxml
,wxml
不支持过滤器,所以这部分功能不支持
4.2 计算属性
- 支持
4.3 不支持函数 -- ??
- 不支持在
template
内使用methods
中的函数
4.4 Class 与 Style 绑定
-
不支持
-
官方文档:
Class
与Style
绑定 中的classObject
和styleObject
语法
<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>
1. 用在组件上
- 暂不支持在组件上使用
Class
与Style
绑定
4.5 条件渲染
- 支持
4.6 列表渲染
- 支持
注意:嵌套列表渲染,必须指定不同的索引
4.7 事件处理器
- 几乎全支持
1. 在 input 和 textarea 中 change 事件会被转为 blur 事件
2. 踩坑注意:
事件修饰符
-
.stop
的使用会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的catchEventName
失效! -
.prevent
可以直接干掉,因为小程序里没有什么默认事件,比如 submit 并不会跳转页面 -
.capture
支持 1.0.9 -
.self
没有可以判断的标识 -
.once
也不能做,因为小程序没有removeEventListener
, 虽然可以直接在handleProxy
中处理,但非常的不优雅,违背了原意,暂不考虑
4.8 表单控件绑定
- 几乎全支持
建议开发过程中直接使用 微信小程序:表单组件
-
select
组件用picker
组件进行代替 -
表单元素
radio
用radio-group
组件进行代替
4.9 组件
1. Vue组件
-
有且只能使用单文件组件(.vue 组件)的形式进行支持
-
其他的诸如:动态组件,自定义
render
,和<script type="text/x-template">
字符串模版等都不支持
原因:要预编译出 wxml
详细的不支持列表
-
暂不支持在组件引用时,在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class style 等样式属性(例:
-
Slot(scoped 暂时还没做支持)
-
动态组件
-
异步组件
-
inline-template
-
X-Templates
-
keep-alive
-
transition
-
class
-
style
2. 小程序组件
mpvue
可以支持小程序的原生组件
注意:原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定
- 如
bindchange="eventName"
事件,需要写成@change="eventName"
4.10 最佳实践
1.精简 data 数据
data
每次变更都会从微信小程序的JSCore
进程,通过setData
序列化成字符串后发送到JSRender
进程
2.优化长列表性能
-
避免在
v-for
中嵌套子组件,这样可以优化大部分部分setData
时的冗余数据。 -
通过实践发现
wx:if
和hidden
的优化肉眼不可见,所以或许可以试试直接通过样式display
来展示和隐藏。 -
如果列表过长,强烈建议产品思考更好的展示形态。比如只展示热门,多余的折叠等形式。
3.合理使用双向绑定
- 建议使用
v-model.lazy
绑定方式以优化性能
4.谨慎选择直接使用小程序的 API
- 更好的选择是通过桥接适配层屏蔽两端差异
4.11 常见问题
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)
}
}
4. vue-router 支持吗?
-
路由是不能支持的,因为小程序无法动态的插入和控制节点,几乎无法实现。
-
而且小程序对页面的切换性能做了很多优化,页面切换体验也好了很多,所以使用
vue-router
也不那么必要
methods: {
bindViewTap () {
const url = '../logs/main'
if (mpvuePlatform === 'wx') {
mpvue.switchTab({ url })
} else {
mpvue.navigateTo({ url })
}
}
},
5. 为什么我新增了页面,没有反应?
- 因为
webpack
编译的文件是由配置的entry
决定的,新增的页面并没有添加进entry
,所以需要手动npm run dev
一下
6. 能不能引用第三方的 UI 库?
- 原理上是可以的,但是要去掉
Dom
和Bom
相关的API
操作,还要去掉mpvue
不支持的一些vue
特性,小程序不支持的css
选择器等,去掉这些就可以使用了
7. 能否使用 echarts 等小程序原生组件?
- 可以
8. 为什么有些组件名不可以使用?
以下为保留关键字,暂不支持作为组件名
- a
- canvas
- cell
- content
- countdown
- datepicker
- div
- element
- embed
- header
- image
- img
- indicator
- input
- link
- list
- loading-indicator
- loading
- marquee
- meta
- refresh
- richtext
- script
- scrollable
- scroller
- select
- slider-neighbor
- slider
- slot
- span
- spinner
- style
- svg
- switch
- tabbar
- tabheader
- template
- text
- textarea
- timepicker
- trisition-group
- trisition
- video
- view
- web