接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下。

官网地址:http://mpvue.com/

1.快速上手 http://mpvue.com/mpvue/quickstart/

跟着官网提示走,搭建一个mpvue的小程序项目

注意,这里我用yarn代替了npm才安装成功。

2.分包机制

mpvue-loader 1.1.2-rc.2之后,优化了build后的文件生成结构,生成的目录结构保持了源文件夹下的目录结构,有利于对分包的支持。

3.注意事项:新增的页面需要重新 npm run dev 或 yarn run dev来进行编译

4.不要在选项属性或回调上使用箭头函数

比如:

created: () => console.log(this.a)

vm.$watch('a', newValue => this.myMethod())

因为箭头函数是和父级上下文绑定在一起的,this不会是如你做预期的vue实例,且this.a或this.myMethod也会是未定义的

5.微信小程序的页面的query参数是通过onLoad获取的,mpvue对此进行了优化,直接通过this.$root.$mp.query获取相应的数据参数,其调用需要在onLoad生命周期出发之后使用,比如onShow等

6.不支持 v-html

7.不支持部分复杂的JavaScript渲染表达式

8.不支持过滤器

9.不支持在template内使用methods中的函数

10.class支持的语法:

<p :class="{ active: isActive }">111</p>
<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</p>
<p class="static" :class="[activeClass, errorClass]">333</p>
<p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</p>
<p class="static" v-bind:class="[{ active: isActive }, errorClass]">555</p>

将分别被转换成:

<view class="_p {{[isActive ? 'active' : '']}}">111</view>
<view class="_p static {{[isActive ? 'active' : '', hasError ? 'text-danger' : '']}}">222</view>
<view class="_p static {{[activeClass, errorClass]}}">333</view>
<view class="_p static {{[isActive ? activeClass : '', errorClass]}}">444</view>
<view class="_p static {{[[isActive ? 'active' : ''], errorClass]}}">555</view>

11.style支持的语法:

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>
<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>

将分别被转换成:

<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">666</view>
<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">777</view>

不支持vue官网的class和style绑定语法

12.用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>

13.嵌套列表渲染必须指定不同的索引

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

14.事件处理器,全支持。

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

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

小程序能力所致,bind和catch事件同时绑定时,只会触发bind,catch不会被触发,要避免踩坑。

事件修饰符:

修饰符 说明
.stop 阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的catchEventName失效
.prevent 可以直接干掉,因为小程序里没有什么默认事件,比如submit并不会跳转页面
.capture  
.self 没有可以判断的标识
.once 也不能做,因为小程序没有removeEventListener,虽然可以直接在handleProxy中处理,但非常的不优雅,违背了意愿,暂不考虑
键值修饰符 在小程序中没有键盘,所以...

15.表单控件绑定,几乎全支持。

建议直接使用微信小程序表单组件。用法示例:

select组件用picker组件进行代替

<template>
  <div>
    <picker @change="bindPickerChange" :value="index" :range="array">
      <view class="picker">
        当前选择:{{array[index]}}
      </view>
    </picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      index: 0,
      array: ['A', 'B', 'C']
    }
  },
  methods: {
    bindPickerChange (e) {
      console.log(e)
    }
  }
}
</script>

表单元素radio用radio-group组件进行代替

<template>
  <div>
    <radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio :value="item.name" :checked="item.checked"/> {{item.value}}
      </label>
    </radio-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {name: 'USA', value: '美国'},
        {name: 'CHN', value: '中国', checked: 'true'},
        {name: 'BRA', value: '巴西'},
        {name: 'JPN', value: '日本'},
        {name: 'ENG', value: '英国'},
        {name: 'TUR', value: '法国'}
      ]
    }
  },
  methods: {
    radioChange (e) {
      console.log('radio发生change事件,携带value值为:', e.target.value)
    }
  }
}
</script>

16.详细的不支持列表:

  • 暂不支持在组件引用时,在组件上定义click等原生事件、v-show(可用v-if代替)和class style等样式属性
  • 例:<card class="class-name"> </card>样式时不会生效的,因为编译到wxml,小程序不会生成节点,建议写在内部顶级元素上
  • Slot(scoped暂时还没做支持)
  • 动态组件
  • 异步组件
  • inline-template
  • X-Templates
  • keep-alive
  • transition
  • class
  • style

17.mpvue可以支持小程序的原生组件

比如picker,map等等。需要注意的是原生组件上的事件绑定,需要以vue的事件绑定语法来绑定,如 bindchange="eventName"事件需要写成@change="eventName"

示例代码:

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
</picker>

18.TypeScript支持

配置方法 http://mpvue.com/build/mpvue-loader/#typescript, Demo见 mpvue-ts-demo

19.最佳实践

(1)精简data数据

(2)优化长列表性能

  • 避免在v-for中嵌套子组件,这样可以优化大部分setData时的冗余数据
  • 直接通过样式display来展示和隐藏

(3)合理使用双向绑定,建议使用 v-model.lazy绑定方式以优化性能

(4)谨慎选择直接使用小程序的API,如果你有小程序和H5福永代码的需要,业务代码需要保持对WEB Vue.js的兼容性。可通过桥接适配层屏蔽两端差异。

20.常见问题

(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)
   }
}

21.mpvue框架使用场景汇总

mpvue小程序框架包含:

  • 运行时JS SDK
  • 初始化模板项目(包含推荐的目录结构,webpack构建,代码检查配置等)
  • 项目构建所需的npm依赖(已经包含在项目模板中,无需手动引入)

开发者可能会面对的四种典型场景:

  • 单独以mpvue框架构建小程序

    • 推荐的方式,无需额外支持
  • mpvue框架为主,同时使用其它框架(原生开发方式或wepy等)
  • 已经使用其他框架,引入mpvue做部分模块的开发
  • 只是用mpvue的JS SDK,自定义构建策略

(完)

以上笔记摘自: mpvue官方文档 http://mpvue.com/mpvue/

学习笔记:mpvue开发小程序——入门的更多相关文章

  1. 微信小程序开发:学习笔记[7]——理解小程序的宿主环境

    微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器

  2. 使用mpvue开发小程序教程(三)

    在上一篇文章中,我们熟悉了一下通过vue-cli生成的mpvue工程代码骨架的基本结构,大致了解了每一个部分的代码到底要放到何处.从本文起我们就开始涉及真正的编码部分,学习使用Vue的语法去编写小程序 ...

  3. 使用mpvue开发小程序教程(四)

    在上一章节中,我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvue开发小程序的第一步.今天我们将进一步来 ...

  4. 使用mpvue开发小程序教程(一)

    前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...

  5. 使用mpvue开发小程序教程(二)

    在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在V ...

  6. 使用mpvue开发小程序教程(五)

    在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法.在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,让每个部分都保持功能简洁.条理清楚.各司 ...

  7. 使用mpvue开发小程序

    前言: 最近接到小程序的开发需求,由于之前也没开发过小程序,心情还是有点激动.先花15分钟看一遍小程序官方文档,再花10分钟看一遍mpvue官方文档,然后拿着原型图和UI图就开干.踩了不少坑,写篇博客 ...

  8. mpvue学习笔记-之微信小程序数据请求封装

    简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...

  9. 使用mpvue开发小程序教程(六)

    在上一章节中,我们列举了在Vue中能用但在mpvue中不能用或需要特别注意的特性,在实际开发前了解一下还是很有必要的,可以避免浪费找错误的时间. 如果你使用过原生的小程序框架,你一定经历过或思考过怎么 ...

随机推荐

  1. AlloyRenderingEngine入门

    写在前面 AlloyRenderingEngine是一款非常快速的渲染引擎,目前该项目已经合并至 https://github.com/AlloyTeam/AlloyGameEngine/ , 属于A ...

  2. 企业信息系统——SCM

    供应链是供应商.制造商.仓库.配送中心和渠道商等构成的物流网络.同一个企业可能构成这个网络的不同组成节点,但更多的情况下是由不同的企业构成这个网络中的不同节点.例如,在某条供应链中,某个企业可能即在制 ...

  3. 如何做一个avalon组件

    在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌. 组件是由JS,HTML,CSS构成 JS 以AMD形式组织,引入HTML ...

  4. [RxJS] Drag and Drop example

    Improving our mouse drag event Our mouse drag event is a little too simple. Notice that when we drag ...

  5. NHibernate 存储过程使用

    NHibernate也是能够操作存储过程的,不过第一次配置可能会碰到很多错误. 一.删除 首先,我们新建一个存储过程如下: CREATE PROC DeletePerson @Id int AS DE ...

  6. 开发中遇到的问题(一)——java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

    1.错误描述: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) wit ...

  7. Keil C51怎样将子程序段定位在固定的地址位?

    以下2问题均要用C51解决1.怎样将1个子程序段定位在1个固定的地址位置?例如将 INT BCD2HEX(INT XX)定位在1000H2.如何在EEPROM 中固定的位置存放1字符串?如在200H处 ...

  8. UltraISO制作linux启动盘(包含写入不完整解决方法)

    网上教程挺多,主要是自己记录一下.

  9. UOJ #236. 【IOI2016】railroad

    Description Anna 在一个游乐园工作.她负责建造一个新的过山车铁路.她已经设计了影响过山车速度的 nn 个特殊的路段(方便起见标记为 00 到 n−1n−1).现在 Anna 必须要把这 ...

  10. PyOpenCV图像逆时针旋转90度

    warpAffine方法效果很搓,留下大片黑色区域. 使用flip和transpose可以实现逆时针旋转90度.先flip或先transpose均可. #coding:utf-8 import cv2 ...