微信小程序踩坑之路

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

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

一、背景图片的问题

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

二、图片问题：通常页面背景图选择用png格式的图片，可是在小程序中，通常格式的图片做为背景图会很模糊，因此选择了矢量图svg来做为背景图base64转码；

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

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

<navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>

可是连续点击的话页面会进行屡次跳转，这时候个人解决办法是判断仅让点击一次执行操做；

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

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

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

八、消息提示框类型：小程序只提供了两种消息提示框类型：success、loading；对于有些须要提示的地方老是不合时宜，所以就本身写了一个；

九、小程序的布局：布局用了rpx布局，基本适应了大部分手机的大小，可是小屏手机就须要特别适应；

十、录音功能：小程序的录音格式是silk的，在其余播放控件上是不能播放的，wx.playVoice是能够播放本地缓存录音文件的；因此上传录音文件必需要进行转码，这个咱们是有后台进行转码处理的。

 

　　大概就是这些吧，个人记性不是太好，总之，小程序的总体的框架体系仍是极好的。。。