微信小程序踩坑之常遇到的问题和解决办法

一：踩坑之路

前段时间公司要求做了一个微信小程序，现在趁着还算空闲，总结一下小程序中所遇到的问题。

有微信提供的文档接口和开发者工具，完成起来总是感觉那么畅快，但是在手机上预览后，总是会有这样那样的问题：

1、背景图片的问题

微信要求打包的小程序不超过1M，也许是出于这个原因，微信不允许用本地图片，但可以使用image标签来展示图片，或者将背景图转为base64，也或者用图片网络地址也可以，将图片存到服务器上，但是每次图片有修改都要重新上传，如此也是很麻烦;base64图片编码如果图片大的话编码会很长，但是这种也算方面些;

2、图片问题：一般页面背景图选择用png格式的图片，但是在小程序中，一般格式的图片作为背景图会很模糊，所以选择了矢量图svg来作为背景图base64转码;

3、数据接口：小程序规定接口必须是https的请求，必须在小程序的管理后台配置好请求域名，上传域名，开发工具可以是http;

4、页面之间的跳转：小程序的页面跳转有wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack四种跳转方式，同时规定跳转不能超过5层;跳转的实现通过bindtap点击事件或组件navigator

在当前页打开

但是连续点击的话页面会进行多次跳转，这时候我的解决办法是判断仅让点击一次执行操作;

5、文本框的默认提示文字：当光标到文本框内，获取焦点时，默认提示文字会闪动，这个没有去解决;

6、文本框设置为密码框时：当文本框为密码框时，type="text"，手机键盘第一次输入数字后闪动到字母键盘，这个没有去解决;

7、按钮的点击效果：文档中提示当hover-class="none"时，没有点击效果，但是并不是如此;当button按钮设置为镂空时，仍然有效果的出现，因此不设置镂空就可以了;

8、消息提示框类型：小程序只提供了两种消息提示框类型：success、loading;对于有些需要提示的地方总是不合时宜，因此就自己写了一个;

9、小程序的布局：布局用了rpx布局，基本适应了大部分手机的大小，但是小屏手机就需要特别适应;

10、录音功能：小程序的录音格式是silk的，在其他播放控件上是不能播放的，wx.playVoice是可以播放本地缓存录音文件的;所以上传录音文件必须要进行转码，这个我们是有后台进行转码处理的。

二：坑点合集

分享者：o2team，原文地址

假如你有其中的解决方法或思路，欢迎回复在这里!

input 组件

placeholder 文字与 input 的值重叠

暂无解决方案

获取焦点 和 失去焦点 时，光标和文字跳动

暂无解决方案

当 input 设置为居中对齐时，光标会出现在奇怪的位置

暂无解决方案

bindconfirm 事件在失去焦点时也会触发，类似于 blur(微信版本 6.5.3)

暂无解决方案

对 input 做动画时，如果是获取焦点状态，会失效

暂无解决方案，因为 input 在获取焦点时是 native 组件，失去焦点后改回

web 组件

type 为 idcard, digit 时并不是调用数字键盘

暂无解决方案，目前起作用的只有 number

scroll-view 组件

安卓下列表较长时滚动白屏

目测是渲染性能的问题

动态渲染列表内容的时候，滚动条回到顶部

手动设置 scrollTop 值，组件自己并不会自动更新这个值

image 组件

image 标签的 url 需要添加协议

添加协议头

调试

控制台输出错误信息不正确，如 语法错误 等会输出错误指向文件顶部，而不是出错的位置

暂无解决方案

系统错误 {“baseresponse":{"errcode":-80002,"errmsg”:””}}`

无权限?

某些情况下 wxml 面板空白

暂无解决方案

某些奇怪的原因导致真机出现 $gwx 错误

检查 wx:key 是否配置正确

样式

nth-child、nth-of-type 不支持

单独使用 class 控制

元素设置为 inline-block时，调试工具 与 真机表现不一致，调试工具有间隔，真机无间隔

设置 font-size:0

navigator 标签 display: flex; 失效

暂无解决方案

hidden 指令值为 true 时无效

手动设置样式控制，因为某些情况下，微信的 display: none 的权重比较低，会被覆盖

background-iamge在真机环境下，无法使用相对路径的图片

可以使用 base64 或者外链，也可以使用 image 组件替代

clip-path 在安卓机上性能消耗严重，与 scroll-view 一起使用时，会导致 scroll-view 滚动严重卡顿

使用别的样式替换 clip-path

API

已拉起的键盘无法收起，wx.hideKeyboard() 方法无效

暂无解决方案

快速点击导致页面重复打开

暂无解决方案

onReachBottom 被重复触发

改用 scroll-view 或者 手动节流

Modal 弹窗中的内容无法换行

自定义弹窗组件

wx.request 只支持 UTF8 编码

转换编码

wx.previewImage 不会使用Image 组件已经加载过的图片缓存

暂无解决方案

兼容性

安卓下目前没有分享功能

暂无解决方案

scroll-view 使用 flex 布局，使用 flex: 1 撑起高度时，安卓下 scroll-view 会对下方元素造成不可见的遮挡

可再设置 height: calc(100% - xxx px); 进行兼容

安卓下使用的是 X5 内核，所以很多特性无法使用，比如 Promise、Object.assign、Array.prototype.includes 等等

单独引入 polyfill

其他

require 只能引入 .js 文件，没有文件后缀或者后缀不是.js 会在最后补上 ‘.js’

暂无解决方案

wxml 和 wxss 文件引入文件可以使用绝对路径，以当前应用程序的目录为根目录，js 文件不行

暂无解决方案

模板中出现的某些特殊符号(如 word 中插入的符号)导致模板渲染失败

替换符号 或者 使用变量

通过 querystring 方式进行页面传值的时候，内容包含 % 会解码错误

将 % 进行 URL 编码为 %25，微信会自动解码