唯品秀博客
首页 > 前端开发 > Js前端框架 > 关于微信小程序mpvue框架的实践采坑小记

关于微信小程序mpvue框架的实践采坑小记

2018年09月18日 唯品秀 2161次浏览

前言 — 首先说说mpvue,当你看到这篇文章时候你应该对小程序是有所了解了。mpvue顾名思义是基于vue的一套框架,用于小程序,由美团开发,它的初衷就是尽可能让一套代码兼容多个终端(微信小程序,支付宝小程序,H5移动端等等)。但,mpvue又不完全等于vue,vue是运行在浏览器的,而小程序是依赖微信的,所以还是有区别的。mpvue去掉了vue的一些功能,并且在多个循环setData计算上性能其实不如原生,最重要的是,小程序原生本身就已经封装好了很多你需要的工具,比如完整的生命钩子函数以及数据的双向绑定。因此,在项目如果不需要考虑扩展兼容的话,其实mpvue是个累赘(其他小程序框架同理),哦,学习嘛,装逼嘛,还是可以的嘛

1、不支持在组件上使用 Class 与 Style 绑定

1
<my-component :class="myClass"></my-component> // 不支持

2、不支持在 template 内使用 methods 中的函数

1
<p>时间{{formatTime(time)}}</p> // 不支持

3、所有页面的created钩子在onLaunch后就执行了

页面初始化执行的函数写在onReady或onLoad里,created一般情况下不使用。

4、小程序参数获取

获取小程序在 page onLoad 时候传递的 options: this.$root.$mp.query

获取小程序在 app onLaunch/onShow 时候传递的 options:this.$root.$mp.appOptions

很显然,在原生里有类似的方法(option),这个只不过是画蛇添足

5、刷新当前页面(hack)

  • 先获取当前页的url(包括query),然后重定向:
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let pagesStack = getCurrentPages()  // eslint-disable-line
    let activePage = pagesStack[pagesStack.length - 1]
    let pageParams = activePage.options
    let url = (function () {
      let base = './main'
      for (let i in pageParams) {
        base += '&' + i + '=' + pageParams[i]
      }
      let result = base.replace('&', '?')
      return result
    })()
    wx.redirectTo({ url: url })

    6、本地图片使用

    解决是:把路径import进来,或者是把图片放在static目录下引用,然而作为css background-image引用时,只能选择引用远程cdn图片,或者相对目录小于8k(webpck配置有关)的图片,不然编译器会报错。

    7、不支持vuex的mapActions等辅助函数

    只能用传统方式,调用同步的用commit,异步的调用dispatch(异步dispatch里面实际调用的还是同步方法)


    8、Cannot assign to read only property 'exports' of object '#Object' 编译报错

    这是因为引用第三方插件的时候,带入了module.exports的写法,webpack可以使用require和export ,但是不能混合使用import 和module.exports,你需要做的是更新根目录下的.babelrc文件配置

    9、eslint连vue和js后缀文件都有严格校验

    二话不说,直接找到build目录的webpack.base.conf.js把器rule注释掉。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // {
    //   test: /\.(js|vue)$/,
    //   loader: 'eslint-loader',
    //   enforce: 'pre',
    //   include: [resolve('src'), resolve('test')],
    //   options: {
     //     formatter: require('eslint-friendly-formatter')
    //   }
    // },

    「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

    赞( 2 ) 打赏

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    2

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信

    上一篇:

    下一篇:

    共有 0 条评论 - 关于微信小程序mpvue框架的实践采坑小记

    博客简介

    唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

    精彩评论

    友情链接

    他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!

    站点统计

    • 文章总数: 190 篇
    • 草稿数目: 2 篇
    • 分类数目: 13 个
    • 页面总数: 21 个
    • 评论总数: 875 条
    • 链接总数: 13 个
    • 标签总数: 371 个
    • 建站时间: 886 天
    • 注册用户: 690 人
    • 访问总量: 8673289 次
    • 最近更新: 2019年5月17日
    服务热线:
     173xxxx7240

     QQ在线交流

     旺旺在线