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 等样式属性(例： 样式是不会生效的)，因为编译到 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 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
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/pleaseAnswer/p/15409915.html