最近我手上用mpvue基于第三方平台开发的第一个模板小程序上线了,这里我在接着唠下我在开发过程中比较蛋疼的事情,有兴趣的可以一起吐槽下,或者指教一下。大神绕道。
首先我们来看下比较新的版本的mpvue里面做了哪些更新和修复。这个时候我们可以直接去看下package.json这个文件的更新状态
我们看到,在最新的依赖文件中,loader的版本已经更新了非常多(由于我算是比较早使用这个框架的),这说明我们美团的开发人员非常给力和重视,也说明我们的开发者朋友也非常的努力给意见,给99个赞。
在插件中,我发现有了webpack-mpvue-asset-plugin这个插件,说明多个子组件样式不能被服用的问题已经被收纳进去,所以我们不用再去自己安装这个插件了。
这里我说下我在开发中遇到的问题。
在开发中,封装网络需求对于我们来说是必不可少的一个行为,而我们大多数情况会采用promise去封装我们的异步请求,但是不知道为什么在早期版本中,我在使用promise的时候开发工具报没找到promise的错误,于是我就去安装了一个promise库,去支持promise的需求。
刚开始以为这样子做是解决问题了,但是到了项目的中后期,发现爆炸了。在我有次上传小程序的时候,报上传文件超过大小(vender.js)的错误,以至于无法上传。
my god.那么是什么引起这个问题的呢,当时有那么几种可能: 1.引用了第三方库,导致打包进去的文件过大 2.图片过多。随之可能性确定在了第一种,那就是第三方库的引用。因为当时除了引用promise库以外,我还引用了mockjs以便我去模拟数据。
这里也要提示的一点,就是引用mockjs的时候,你使用@去生成随机数据的时候可能会报错,这个问题我目前没找到,只知道可以在对应方法加个参数或者用Random.XXXX就可以了。
言归正传,当时我的第一个想法就是引用了promise库的原因导致的,所以当时我就纳闷了,不用promise肯定是不现实的,可是用了就文件过大,这就说明一个问题,小程序本身应该是支持promise才对的!于是向官方人员以及大神得到了求证。那么问题又来了,明明是支持的,为毛我的会报错啊,cao。不小心一鸡冻又想到了,webpack!babel!然后又去屁颠屁颠跑去找大神要了他的babelrc和package.json看了下,果然如此。然后我又开始了新的一轮删除和安装插件,主要两个插件如下,然后问题解决了。这里具体安装过程不多说,百度上都有的呢。
这里再说下,我们的微信开发者工具中的项目设置中,你可以把 es6 这一项给去掉,因为我们mpvue在打包的过程中已经帮我们编译好了,因此不用重复次操作。
还有个问题,就是mpvue中,页面的切换,可能不能及时清空页面的数据,这里我们需要在onUnload里面去自己清楚一下。其实我觉得这个操作还蛮简单的,写个方法初始化下数据就好了。
还有一个这样的场景: 用户在A页面点击进入B页面,点击左上角物理返回键的时候想进入C页面。现在我采用的方式是在B页面的onUnload函数中使用wx.redirectTo这个方法去帮助跳转,这样基本能满足我的要求,但是会有个'界面后退然后自动切换'的一个效果,我觉得这样用户体验不太好,希望有不一样的解决方式,请告知,感激不敬!!!!(膜拜)
这里说最后一个碰到的小问题。我开发的项目中会有一个通过微信端生成的二维码图分享小程序的功能。微信接口要求提供对应页面的路径以及要携带的参数,并且对参数的要求和长度做了限制。按照业务场景需求我对携带的参数只要传字符串 '1,2'就足够了,那么我在对应页面的onload函数中的参数可以拿到这个数据,再使用
split 这个api转换成数组并且进行处理就可以了。然后错就错在我想以为然。测试中一直在这个环节上报错!
懵逼,why?经过排查发现,是拿到的数据和处理方式有问题。原来,在option(形参).scene中拿到的并不是我传给服务器的'1,2'中, ',' 被转义了!wtf。 于是,我们用decodeURIComponent就可以转义转回来了。这个算是栽在自己大意上了。
至于最上面提到的依赖问题,我现在还是找不出真正的原因-为什么当时不支持promise呢?因为现在我使用的是更新后的版本,正确的babelrc就是QuickStart里面的那个,所以不用再担心这个问题。还有在下在这给点建议,在使用mpvue的时候请先去读下官方文档,因为我发现有很多刚参与进来的开发者问的问题,明显在文档上是有注明的。我感觉如果不做好准备工作的话,是在加大自己的时间成本。
至于其它问题,本人目前还没有发现,如果发现有意义的问题,我会再分享出来。