其他分享
首页 > 其他分享> > mpvue

mpvue

作者：互联网

1 优势

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 生命周期比较

4 语法

4.1 模板语法

1. 不支持 纯-HTML

2. 不支持部分复杂的 js 渲染表达式

3. 不支持过滤器

4.2 计算属性

4.3 不支持函数 -- ？？

4.4 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>

1. 用在组件上

4.5 条件渲染

4.6 列表渲染

注意：嵌套列表渲染，必须指定不同的索引

4.7 事件处理器

1. 在 input 和 textarea 中 change 事件会被转为 blur 事件

2. 踩坑注意：

事件修饰符

4.8 表单控件绑定

建议开发过程中直接使用 微信小程序：表单组件

4.9 组件

1. Vue组件

原因：要预编译出 wxml
详细的不支持列表

2. 小程序组件

注意：原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定

4.10 最佳实践

1.精简 data 数据

2.优化长列表性能

3.合理使用双向绑定

4.谨慎选择直接使用小程序的 API

4.11 常见问题

1. 如何获取小程序在 page onl oad 时候传递的 options

2. 如何获取小程序在 app onLaunch/onShow 时候传递的 options

3. 如何捕获 app 的 one rror

export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },

   // 捕获 app error
   one rror (err) {
       console.log(err)
   }
}

4. vue-router 支持吗？

methods: {
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    }
  },

5. 为什么我新增了页面，没有反应？

6. 能不能引用第三方的 UI 库？

7. 能否使用 echarts 等小程序原生组件？

8. 为什么有些组件名不可以使用?

以下为保留关键字，暂不支持作为组件名

标签：npm,mpvue,绑定,程序,支持,组件
来源： https://www.cnblogs.com/pleaseAnswer/p/15409915.html