微信小程序踩坑之路

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

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

1、背景图片的问题

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

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

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

4、页面之间的跳转：小程序的页面跳转有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>

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

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

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

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

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

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

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

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有