您的当前位置:首页正文

小程序实践踩坑总结

2024-11-29 来源:个人技术集锦

值得记录的问题

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.lazylazy会把数据绑定放在change事件上,优化性能。但这样会导致,如果快速输入并点击提交,输入的数据还没有完成的传入。
解决方案: 使用 v-model.lazy进行双向绑定,或者用value替代v-model,在需要时直接取value的值即可,不需要随时更新到vue。

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

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

9. tabBar中icon图片找不到

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

显示全文