微信小程序踩坑之路，微信开发

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

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

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

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"时百度排名这个没有去解决；

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 组件

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

目测是渲染性能的问题

标签： 但是焦点图片程序