258资源分享网

第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种限制折腾的死去活来的,单向绑定, 没有promise,请求数限制,包大小限制,各种反人类,...反正我是感受到了满满的恶意. 最近接到一个工程类的小程序项目,做技术选型的时候,又把以前的东西捡起来看了看,重新熟悉了一下, 感觉小程序还是有在努力的,支持大部分es6语法了,还出了一个类Vue的mvvm框架wepy,还支持redux状态管理, 就大致建了个demo,跑了起来,赶紧虽然没有vue那么酸爽,但是还是挺ok的,至少比原生的小程序语法亲民很多.

然后就开始用wepy搭项目,写静态页面(由于公司的开发模式是先写静态页面, 等待后端的同学接口出来了再绑定数据),虽然wepy用起来比原生的顺手, 但是还是有很多坑的,这里就不列举了.....

就在我们静态页面快写完的时候,某天晚上论坛的时候看到一条消息, 美团出了个小程序框架mpVue （不知道为什么，每次看到这个名字，我只想到3个字，没朋友,哈哈）, 大致看了一下官方的介绍,主要有一下亮点:

跟vue一样的开发体验,包括vuex

H5代码转换编译成小程序目标代码的能力

也就是说,不但可以用我们熟悉的vue语法开发,还有可能直接把你的h5页面编译成小程序. 该项目到目前位置，开源不到20天，已经收到将近7000个star,可见天下苦秦已久。

建了个demo,跑了一下,感觉简直就是开发界的良心之作啊.顺便把之前写的wepy的静态页面代码复制过来看了一下, 发现只要改动一点点,就可以顺利从wepy切换到mpvue上来(整个项目的切换时间在半天左右). 说做就做,当天就切到mpvue.一直到现在项目接近尾声了,整个开发过程,真是令人愉悦.

Bug....我今天好像不是来给mpvue做广告的,我是来找茬的..

下面就盘点一下我最近用mpvue开发,遇到的一些需要需要注意的细节.(或者说跟vue不同的地方)

一,这个个人感觉是最大的坑,除了缺少文件会报错外,其他的代码语法错误等, 控制台大部分时间都是安静的(偶尔也会报一个xxx is undefined) 比较经常碰到的是这样 this.xxx =5 有些情况下会报错,而有些情况下则没有任何反应, 具体什么情况下会,什么情况下不会,我现在还没摸出规律来..

有一次我把

this.dataObject.map(() => { ...这里省略... })

结果map前面的 . 不小心给露掉了,实际代码变成

this.dataObjectmap(() => { ...这里省略... })

结果找了半天没找到问题的原因

二,这个也是比较难受的地方,就是模板的数据绑定里面,没办法在模板语法里面调用methods方法 (或者说没办法调用computed以外的函数),有人也许会说,那可以用computed属性,那如果我想给函数传参怎么办? 看下面代码:

<template> <view v-for="item in costList" > {{formatCost(item)}} </view> </template> <script> export default { data(){ return{ costList:[] } }, methods: { formatCost(item){ return item.toFixed(2) }, getData(){ let arr = [3.255,4.1,5,15] this.costList = arr } } </script>

这个时候 {{formatCost(item)}} 里面的内容,会渲染成空字符串,理由就是因为不支持函数,而且这中情况, 也无法使用computed属性,除非你想为每个数组元素写一个computed

这种情况,我的解决方案是在在获取到数据的时候,就先把数据改了.如上面的例子,我们可以在 getData方法里面这样写

let arr = [3.255,4.1,5,15] // 遍历数组里面的元素,然后格式化一下,添加到 costList里去 arr.map(item => { this.costList.push = this.formatCost(item) })

三,所有页面里面的created生命周期函数 都会在小程序加载的时候， 一次性执行，而不是每进入一个页面执行一次，如，我有3个页面

pageA

...省略一些代码... creatted(){ console.log('pageA 的 created函数执行') }

pageB

...省略一些代码... creatted(){ console.log('pageB 的 created函数执行') }

pageC

...省略一些代码... creatted(){ console.log('pageC 的 created函数执行') }

然后，启动小程序，不进入这3个页面，假设我现在有一个index页面，我们打开这个页面，会有一下输出

pageA 的 created函数执行 pageB 的 created函数执行 pageC 的 created函数执行

这个其实很好解决，用mounted或者onLoad或者onReady代替，说到这几个函数，那就顺便提一下, 这里的created和mounted是vue(mpvue)的生命周期，而onLoad、onReady是小程序的生命周期，mpvue官方给的说明是：

除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page， 除特殊情况外，不建议使用小程序的生命周期钩子。