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
中。