mpvue开发微信小程序问题摘要

1，按照mpvue方式创建project后，微信开发者工具报找不到app.json入口文件

原因：新版本打包生成的dist目录下多了一层wx文件夹；
解决：project.config.json中添加选项："miniprogramRoot": "dist/wx",

2，vue中的style的scoped会使小程序样式placeholder-class失效。

没有scoped样式泄漏影响其他页面，故推荐使用placeholder-style，或者统一设置全局的placeholder-class

3，小程序中路径

绝对路径“/”代表根目录，“/xxx/ppp/aaa"，即寻找根路径下的xxx
（这是mpvue自带的alias，可以按需修改）

4，空计算属性错误：

mpvue开发最好不要使用计算属性，特别是列表，会有性能问题。
在编辑交互的时候，需要点击切换显示还是隐藏，于是报错如下：
找了好久，最后发现，是写了个空的计算属性。

20190316111159.jpg

20190316111221.jpg

7，class失效

因为在css中前一个class后面多了个点，不会报错，但是会导致当前class失效

350BEBFB-AF7D-4418-B4A8-96E77B4A5C0F.png

8，开发者工具基础库版本过低引起错误

例如：xx/xx/main.js 出现脚本错误或者未正确调用 Page()的解决办法
及时更新最新的基础库
调用一些小程序API时，最好低版本兼容（低版本兼容的几种写法，官方文档都有）

9，安卓与IOS差异的坑

例如：发送请求的set-cookie字段（用作登录），安卓全小写set-cookie，IOS首字母大写Set-Cookie

10，报错：Error: Final loader didn't return a Buffer or String

在网上查，有人说是mpvue-loader版本过低，可是我的是2.0.0，故排出，链接https://www.jianshu.com/p/abfdbe9ebcc0
另一种说法是引入文件名称引起，也不像，链接：https://blog.csdn.net/github_38928905/article/details/85680129

最后发现：v-if="searchText !=== xxx" 我的HTML文件中多写了一个等于号，导致编译错误，删掉即可。

总结，一般这种loader编译信息，从模版错误导致不可编译的方向查找较好。JS错误一般会有定位提示。

11，IOS不支持Date.parse()

微信小程序在IOS系统中，不支持Date.parse();这个坑是真的难以发现啊。。。。

12，canvas base64图片真机不显示

使用小程序封装的canvas绘制海报分享图的时候，小程序码是后台发过来的base64格式，直接拼接后绘制，开发者工具上可以正常显示，手机上无法显示。（这是小程序已知的问题且一直存在，最后写了一个函数，通过小程序的API转换成了本地图片最后绘制成功

13，首页列表出现了水平滚动条，安卓机补课水平滚动，IOS可以。

网上办法很多，大致都是说有元素水平超出范围。
1），设置最外层div overflow： hidden什么的没有效果；
2），每个元素加了个红色的背景颜色，发现有个元素使用了width: 100%;padding-right: 60rpx; IOS手机明显看到右侧超出。
解决：该元素设置box-sizing： border-box;

14，测试服切换正式服后，网页端输入的数据会在后端被加上两个/n，导致小程序解析失败

JSON.parse不能处理含有/n的字符串，会报错
解决：if判断返回是不是字符串，是的话用try，catch，先parse处理，失败的话全局替换 .replace(/\n/g, '')，再JSON.parse一次即可

15，for循环，需要动态替换列表（四个列表切换）。循环中的key，使用的是简历ID，每一项都不一样，会导致切换的时候，数据已经更新了，视图不更新。点击一下空白处，即可触发更新。

解决：后来参考小程序文档中对key的说明，讲key换成index或者item.companyID，视图即可随数据及时更新。具体待查……
具体原因，大神带着看了一下mpvue源码和编译后的文件，为mpvue设定的50ms更新视图导致，目的是为了防止频繁setData影响性能，具体实现原理待后续研究……

16，登陆有几率报错，后端报illegal buffer，code been used

验证发现，多出现在长时间（2分钟左右以上）搁置不操作小程序，重新登陆大概率发生。第一次登陆会报错，再点击登陆就会成功。
原因：登陆流程有问题，必须先调用login，再调用getuserinfo。由于getuserinfo改版，现在首次必须通过button授权才拿的到，于是我的流程是button获取到信息后然后调用wx.login，再一起发给后端。
解决：改为点击button授权后，wx.login然后再getuserinfo，再发给后端获取session_key，不会再出现失败情况
更新:登陆这块，必须要保证wx.login在前，code五分钟的有效期不能超时即可
（获取手机号同理）

.jpg

1.jpg

小程序获取手机号文档

17.小程序iPhone手机中，不支持2019.07.16格式的时间转换

new Date(2019.07.16).getFullYear(); =》 NaN
new Date(2019-07-16).getFullYear(); =》 2019

18.swiper组件点击穿透

点击覆盖在其上的蒙层的点击事件，会同时触发swiper的点击click
处理：swiper改为touchstart事件
mpvue GitHub上的issue讲已经修复了，还没有试

19，长列表，分页超过15页就会卡死

这个是困扰我最久的一个问题，试了各种办法（还是自己太菜）
1，试着接入原生recycle-view，失败（无法和mpvue兼容，可能要改底层代码，无能为力）
2，github上的各种vue infinite scroll插件，只抱着试试的态度，才久猜到不行
3，利用recycle-view的原理自己手写逻辑，失败，可以实现，但是试图更新体验不好，头像闪烁
解决：列表里面不再使用组件，尽量简化dom结构。
（怀疑是个坑，列表里面使用组件就会造成卡顿）

持续更新中~~~~~