小程序实践踩坑总结

六月份实在太忙，只能把遇到的问题简单记录，今天小程序二期的开发基本上结束了，才有空来总结整理在开发过程中遇到的问题。
在上一篇博客小程序学习实践总结中，我以为小程序的开发没太多可说的，使用mpvue，只要了解vue和小程序的api就可以了。事实证明我还是太年轻了，当时只是做一些简单维护，6月份开发小程序二期的时候，才发现有很多坑点。这里边有自己不熟悉的坑，有mpvue的坑，甚至还有微信开发者工具的坑。还有一些不算坑，但是了解到的小知识点，也一并记录在这里。

值得记录的问题

1.图片不显示的问题

问题描述： 小程序图片不显示。
问题原因： webpack使用了url-loader将图片转换为base64，limit默认是10000，约为10kb，图片大小超出责转换失败，所以就不显示了。
解决方案： 在webpack.base.conf.js文件中查找url-loader，修改limit字段；或使用较小的图片。

2.小程序的input的placeholder-class属性无效

问题描述： 小程序的input组件可以设置placeholder-class来增加placeholder的样式，但设置后不生效。
问题原因： vue单文件组件的<style>标签可以加上scoped，表示私有样式。webpack编译时会给这些css加上后缀并修改相应的html中的class，但漏掉了placeholder-class。
解决方案： 需要时单独写一个不带scoped的<style>标签，将placeholder-class中的class写在里边。

3.开发环境使用http或假证书

问题描述： 开发环境使用http或假证书时，ajax失败。
问题原因： 为保证安全，小程序要求使用https协议。
解决方案： 开发环境可以在开发工具-详情-项目设置中勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”即可。

4.wx.getUserInfo提示

问题描述： 直接使用wx.getUserInfo接口，会报警告。
问题原因： 微信改变了wx.getUserInfo接口。
解决方案： 第一次要使用<button open-type="getUserInfo"></button>来让用户点击，之后就可以直接调用了。

5. mpvue 使用wx.getUserInfo报错

问题描述： 直接使用wx.getUserInfo接口，会报错说onGetUserInfo函数未定义。
问题原因： mpvue的bug。
解决方案： 修改源码。

6. npm run dev 报错

问题描述： 改变网络环境之后，执行npm run dev报错。
问题原因： 似乎是node获取本机ip出错，但一直显示的是端口被占用类似的错误。
解决方案： 查看本机ip，然后在dev-server.js文件中查找app.listen，将其中的'localhost'改为本机ip即可。

7. v-model 效率低，快速输入提交数据不全

问题描述： 使用v-model双向绑定导致性能差或光标重设。
问题原因： mpvue 建议使用 v-model.lazy ，lazy会把数据绑定放在change事件上，优化性能。但这样会导致，如果快速输入并点击提交，输入的数据还没有完成的传入。
解决方案： 使用 v-model.lazy进行双向绑定，或者用value替代v-model，在需要时直接取value的值即可，不需要随时更新到vue。

8. textarea 中@focus获取键盘高度报错

问题描述： textarea 中bindfocus获取键盘高度，文档中有height属性，但在微信开发者工具中没有，导致报错。
问题原因： 微信开发者工具的bug。
解决方案： 使用真机配合console.log进行调试，注意返回的是单位是px，*2 转为rpx。

9. tabBar中icon图片找不到

问题描述： 使用微信自带的tabBar组件，可以设置icon，但在开发者工具中报错。
问题原因： webpack会把本地图片转为base64，而tabBar中使用的图片打包之后是在app.json文件当中的，导致路径不对，并且没有图片。
解决方案： 将这种静态图片放入static/img文件夹中，webpack会直接复制到dist/static/img中。