258资源分享网

前段时间公司要求做了一个微信小程序，现在趁着还算空闲，总结一下小程序中所遇到的问题。有微信提供的文档接口和开发者工具，完成起来总是感觉那么畅快，但是在手机上预览 ...

 

 

 

一：踩坑之路

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

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

1、背景图片的问题

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

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

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

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

 

<navigatorurl="redirect?title=redirect"open-type="redirect"hover-class="other-navigator-hover">在当前页打开</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 组件

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

目测是渲染性能的问题

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