2018-11-20 | weChat | UNLOCK

mpvue和Taro

主要特点

     小程序版本的Vue.js

  • 彻底的组件化开发能力:提高代码复用性
  • 完整的 Vue.js 开发体验
  • 方便的 Vuex 数据管理方案:方便构建复杂应用
  • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
  • 支持使用 npm 外部依赖
  • H5 代码转换编译成小程序目标代码的能力

生命周期

有趣的是 mpvue 框架的生命周期是融合了vue小程序的生命周期,重新组合的一套兼容 mini-app的一套完整生命周期

注意点

  1. 在小程序的 onReady 后,才会去出发 mounted 的生命周期
  2. 如果每次进入页面都要重新请求数据,建议使用 onShow 来请求数据,但是用户体验不太好, 如果只需要在第一次进入页面时请求数据,随后的数据都不改变,应该使用 mounted,不必要频繁的去请求接口、刷新页面。 3.官方文档上建议使用 Vue 的生命周期函数
  3. 小程序的 onPullDownRefresh 能够检测到页面下拉动作,可以用来实现上拉刷新的操作, 需要搭配 stopPullDownRefresh 来使用
  4. onReachBottom 页面上拉触底事件的处理函数,

mpvue 暂时不能使用的语法

  1. 不支持 纯-HTML ,小程序不支持所有的 DOM 和/BOM 操作,v-html 的语法是不能用的
  2. 尽量不要在代码的双花括号中处理数据,例如:三元判断,字符处理等等的,compouted 是更好的选择
  3. 在列表循环渲染时: 一定要牢记,千万不要在嵌套的 for 循环中使用相同的 index
<ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
  1. 事件修饰符: .stop 能处理一些预料之外的情况
  2. 不支持在组件引用时,在组件上定义原生的事件(click),并且 class 和 style 等样式属性也不会生效,解决样式的问题: 写在内部顶级元素上,不要使用 scoped 来限制,可以加一个顶级 class 来防止 class 样式外泄