快速了解 mpvue 开发小程序使用指南_mpvue小白攻略

一、概念mpvue是 美团修改了 Vue.js的 runtime和 compiler使其可以运行在小程序环境中,从而引入了整套 Vue.js开发体验的小程序框架。二、优化细节1、实例生命周期不同于vue的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期除了 Vue 本身的生命周期外(详细的 vue 生命周期文档请看生命周期钩子

快速了解 mpvue 开发小程序使用指南

一、概念

mpvue是 美团修改了 Vue.js的 runtime和 compiler使其可以运行在小程序环境中,从而引入了整套 Vue.js开发体验的小程序框架。

快速了解 mpvue 开发小程序使用指南_mpvue小白攻略

二、优化细节

1、实例生命周期

不同于vue的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期

除了 Vue 本身的生命周期外(详细的 vue 生命周期文档请看生命周期钩子),mpvue 还兼容了小程序生命周期,这部分生命周期钩子的来源于微信小程序的 Page, 除特殊情况外,不建议使用小程序的生命周期钩子。

2、模板语法

几乎全支持 官方文档:模板语法,但需要注意的是:

(1)组件:由于要预编译出 wxml,只能使用单文件组件(.vue 组件)的形式进行支持,不支持:动态组件,异步组件,自定义 render,inline-template,X-Templates,<script type=”text/x-template”>字符串模版,Slot(scoped 暂时还没做支持)。

(2)不要在选项属性或回调上使用箭头函数,.eg:

 //箭头函数是和父级上下文绑定在一起的,this 不会是如你做预期的 Vue 实例,且 this.a 或 this.myMethod 也会是未定义的
created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())

(3) 页面内可以通过 this.$root.$mp.query(需要在 onLoad生命周期触发之后使用)获取小程序在 page onLoad 时候传递的 options(如:query参数等)。组件内通过** this.$root.$mp.appOptions**获取小程序在 app的 onLaunch/onShow 时候传递的 options,.eg:

  //pages/list/index.vue
methods:{
      toNewsDetail(item) {
        let url = `/pages/newsDetail/main?newsId=${item.id}`;
        wx.navigateTo({url})
      }
}

//pages/detail/index.vue

  onReady() {
      this.getNewsDetail({
        id: this.$root.$mp.query.newsId//获取URL传来的参数
      });
  },

(4)mpvue 可以支持小程序的原生组件,建议开发过程中直接使用 微信小程序:表单组件,.eg:

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange"><!--需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"-->
    <view class="picker">
      当前选择: {{date}}
    </view>
</picker>

(5)列表渲染,嵌套列表渲染,必须指定不同的索引。示例:

<!-- 在这种嵌套循环的时候, index 和 itemIndex 这种索引是必须指定,且别名不能相同,正确的写法如下 -->
<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template>

(6)事件处理器

列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@ @regionchange,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange=”functionName” @end=”functionName” @begin=”functionName”><map>bind 和 catch 事件(.stop阻止冒泡)同时绑定时,只触发 bind ,catch 不会被触发。小程序里没有键盘事件(键盘修饰符),默认(.prevent)事件,removeEventListener(.once)事件,.self没有可以判断的标识.capture( 1.0.9支持)使用捕获

// 事件映射表,左侧为 WEB 事件,右侧为 小程序 对应事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    input: 'input',
    change: 'change',//在 input 和 textarea 中 change 事件会被转为 blur 事件
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

(7)因为编译到 wxml,小程序不会生成节点,暂不支持在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class、 style 等样式属性。

<!--不生效,建议写在内部顶级元素上-->
<card class="class-name"> </card>
<card :style="{height:10+'px'}"> </card>
<card @click="clickFun"> </card>
<card v-show="showIf"> </card>//可用 v-if 代替

(8)不支持在 template 内使用 部分复杂的 JavaScript 渲染表达式,methods 中的函数,过滤器,v-html指令。我们会把 template 中的 {{}}双花括号的部分,直接编码到 wxml 文件中,由于微信小程序的能力限制(数据绑定),所以无法支持复杂的 JavaScript 表达式。目前可以使用的有 + – * % ?: ! == === > < [] .,剩下的还待完善。

<!-- 这种就不支持,建议写 computed -->
<p>{{ message.split('').reverse().join('') }}</p>

<!-- 但写在 @event 里面的表达式是都支持的,因为这部分的计算放在了 vdom 里面 -->
<ul>
    <li v-for="item in list">
        <div @click="clickHandle(item, index, $event)">{{ item.value }}</p>
    </li>
</ul>

(9)不支持keep-alive、transition

(10)不支持 官方文档:Class 与 Style 绑定中的 classObject和 styleObject语法。可以用 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>

3、注意事项

(1)开启单个页面的“下拉刷新”,你需要在该页面文件夹中建一个.json文件,在.json文件中配置

{
  "enablePullDownRefresh":true
}

(2)如果你先全局注册store,你需要先在src/main里添加在注册到vue实例中:

Vue.prototype.$store = store

(3)底部导航的图片你需要放在static文件夹下,否则不会正常显示

(3)精简 data 数据。冗余数据不要挂在 data 里,所有在 data/props/computed 中的数据,每次变更都会从微信小程序的 JSCore 进程,通过 setData 序列化成字符串后发送到 JSRender 进程。所以,如果你的数据量巨大的时候,会导致页面非常卡顿。

(4) 优化长列表性能

避免在 v-for 中嵌套子组件,这样可以优化大部分部分 setData 时的冗余数据。通过实践发现 wx:if 和 hidden 的优化肉眼不可见,所以或许可以试试直接通过样式 display 来展示和隐藏。

(5)建议使用 v-model.lazy绑定方式以优化性能,v-model在老基础库下输入框输入时可能存在光标重设的问题。

(6)如果你有小程序和H5复用代码的需要,业务代码需要保持对 WEB Vue.js的兼容性,建议不要在代码中直接调用小程序API,更好的选择是通过桥接适配层屏蔽两端差异。

(7)如何捕获 app 的 onError。由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:

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

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

二、使用

通过 Vue.js命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目:

npm install --global vue-cli//全局安装vue-cli,如果你已安装@vue/cli,你需要拉取2.x模板:npm install -g @vue/cli-int
vue init mpvue/mpvue-quickstart <project name>//创建一个基于 mpvue-quickstart 模板的新项目
cd my-project //进入项目目录
npm install //安装依赖
npm run dev //启动构建

如果使用vue cli 3先拉取 2.x 模板(详情参考本人博客:https://my.oschina.net/wangnian/blog/2051369)

海计划公众号
(0)
上一篇 2020/03/20 23:49
下一篇 2020/03/20 23:49

您可能感兴趣的内容

  • 云瑞设计小白教程_专注于优秀的设计资源分享的站点

    云瑞设计小白教程 官方网址:https://www.yrucd.com/ 简介描述:专注于优秀的设计资源分享的站点 云瑞设计分享顶级ui模板/sketch模板/海报模板/简历模板/…

    2020/03/06
  • API 接口设计规范入门知识_api基础入门

    概述这篇文章分享 API 接口设计规范,目的是提供给研发人员做参考。规范是死的,人是活的,希望自己定的规范,不要被打脸。路由命名规范动作前缀备注获取getget{XXX}获取getget{XXX}List新增addadd{XXX}修改updateupdate{XXX}保存savesave{XXX}删除deletedelete{XXX}上传uploaduplo

    2020/03/20
  • 写技术文的三个原则是什么?使用帮助_技术基础知识教程

    我关注了很多技术类的公众号,看着大佬的公众号几千的阅读量,甚是羡慕,这直接导致了我没有心情减肥,甚至多吃了一个鸡腿。要怎么才能写出一篇好技术文章,让读到的人感到身心舒畅,快速Get到想说的点,我想破了脑袋。喜欢读我文章的人多少都和互联网行业沾边,像咱们这一行加班是常有的,看文章的时间也比较琐碎:蹲厕所、挤地铁、吃饭、睡前玩手机。基本就是这四个时间,不是正在做

    2020/03/24
  • GitHub短网址入门指南_设置GitHub 短链接

    GitHub短网址入门指南 官方网址:https://git.io/ 简介描述:设置GitHub 短链接 执行如下命令 curl -i https://git.io -F url=…

    2020/03/06
  • Ubuntu Pastebin使用帮助_发布代码工具

    Ubuntu Pastebin使用帮助 官方网址:https://paste.ubuntu.com/ 简介描述:发布代码工具 这是一个发布代码的网站。打开后(不用注册)输入post…

    2020/03/11
  • JS实现数字金额转大写金额新手入门_数字入门基础知识

    数字大写对照表:12345678壹贰叁肆伍陆柒捌90十百千万亿元玖零拾佰仟万亿圆JS将金额数字转大写的方法封装 ,下面为大家整理些常用的实现方法。方式一:function digitUppercase(price) {const fraction = [‘角’, ‘分’];const digit = [‘零’, ‘壹’, ‘贰’, ‘叁’, ‘肆’, ‘伍’

    2020/03/29
  • 也许vue基础教程css3做交互特效更简单基础知识入门_特效作者: 守候

    1.前言做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用vue,开发技术栈方面,理所当然就使用了vue+css3开发,过程中发现使用vue+css3开发特效,和javascript/jquery+css3的思维方式不一样,但是比javascript/jquery+css3简单一点点。今天就分享三个简单的小实例,希望能起到拓展思维的作用,让大家

    2020/04/06
  • 一个程序员的自白:如何面临跳槽、转型新手入门_程序员菜鸟教程网

    本文作者毕业四年多,从底层技术到IT主管,从月薪3000到现在的14K。作者在这篇文章中,会告诉年轻的你,面料跳槽、转型时该如何做出自己的选择。有时候我们虽然起点比别人慢了些,却因为有着一腔热血,实现自己的目标也不是难事。我和众多朋友一样,都是从还没毕业就开始不停的担心未来的职业规划,职业选择,等到就业后又担心自己职业前景是否走的正确,总之就是一路走一路看一

    2020/04/03
  • Vue之样式绑定基础知识入门_样式新手入门

    在前端开发中,设置元素的 class 列表和内联样式是基本要求。本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正。概述Vue操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因

    2020/03/23
  • 开发者吐槽:谷歌引入 Web 新标准的方式过于专横攻略教程_web菜鸟教程

    我和我在微软的同事们认为世界需要更多的 Clippy——也就是这个可爱的动画回形针。为此,我们在 Edge 6.0 中引入了一项新功能。Web 开发者现在可以使用 来调用一个动画虚拟助手了。我和微软的几个同事聊过这个事情,大家都认为这是一个好主意。我们翻看了许多优秀的软件项目(大都是来自微软的),发现 Clippy 并没有统一的呈现和调用方

    2020/03/29
  • 程序员的17种状态,你有过几种?指南攻略_段子入门基础教程

    1明明是个小bug但就是死活修不好…2作为一个码工我意外走入了一个充满PM的会议室…3偶然间看到了自己多年前写的代码4调试过多线程的都会懂!5这就是你们追捧的结对编程6Git merge7当他们问我是否需要兼容IE的时候8当我以为已捕获了所有可能的异常…的时候9你永远try…catch不到所有的可能性!10数据库的Delete语句忘了使用限定

    2020/04/06
  • Web前端开发规范手册小白攻略_规范菜鸟教程网

    1.文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合。a. HTML的命名原则引文件统一使用index.htm index.html index.asp文件名(小写)各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如:关于我们 \ aboutus 信息反馈 \ feedback 产 品 \ product每一个目录中应该包含一

    2020/03/23
  • 使用vue实现一个电子签名组件攻略教程_组件小白帮助

    在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件,被吐槽不够安全,那么这个电子签名组件想必不会被吐槽了吧~canvas 标签是 HTML 5 中的新标签。

    2020/03/22
  • 搜狐IT使用帮助聚合互联网、智能硬件、创业投资、通讯数码等科技资讯的媒体平台

    搜狐IT使用攻略 官方网址:http://it.sohu.com/ 简介描述:聚合互联网、智能硬件、创业投资、通讯数码等科技资讯的媒体平台 搜狐科技是聚合互联网、智能硬件、创业投资…

    2020/03/06
  • imgLiquid小白指南_一个调整图片尺寸以适应容器的 jQuery 插件

    imgLiquid小白指南 官方网址:http://goo.gl/Wk8bU GitHub:https://github.com/karacas/imgLiquid 简介描述:一个…

    2020/03/06
  • 如何才能通俗易懂的解释js里面的‘闭包’?使用帮助_闭包菜鸟教程

    看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’?,受到一些启发,因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解。1. “闭包就是跨作用域访问变量。” 【示例一】var name = ‘wangxi’
    function user () {// var name = ‘wangxi’function getName (

    2020/03/24