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 等样式属性(例：
样式是不会生效的)，因为编译到 wxml，小程序不会生成节点，建议写在内部*元素上。 -
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 onl oad 时候传递的 options
- 在所有 页面 的组件内可以通过
this.$root.$mp.query进行获取
2. 如何获取小程序在 app onLaunch/onShow 时候传递的 options
- 在所有的组件内可以通过
this.$root.$mp.appOptions进行获取
3. 如何捕获 app 的 one rror
- 由于 one rror 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 one rror 的回调函数即可
export default {
// 只有 app 才会有 onLaunch 的生命周期
onLaunch () {
// ...
},
// 捕获 app error
one rror (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