微信小程序的坑，总结

1）音频播放 wx.createInnerAudioContext() 在IOS下，中文名播放无效的问题

问题描述：在苹果IOS下，含有中文的音频文件无法正常播放，在安卓和调试器都正常播放。

var audio = wx.createInnerAudioContext();
audio.src = ".../周杰伦.mp3";
audio.play();

 

解决方案：将中文名进行编码

var audio = wx.createInnerAudioContext();
audio.src = encodeURI(".../周杰伦.mp3");
audio.play();

 

2）webview中使用previewImage不起作用的原因

问题描述：需要在自定义页面webview中使用微信接口提供图片预览功能，但是发现无法正常使用和浏览

解决方案：previewImage的格式不正确，正确的格式如下：

wx.previewImage({
      urls: [src]
});

提示：

1）wx.miniProgram.previewImage的写法是错误的，正确写法为wx.previewImage

2）urls必须为数组，不能直接写字符串

3）网页中和小程序开发工具都无法显示效果，预览模式或真机调试可以显示效果

 

3）页面使用onPullDownRefresh下拉后顶部不能自动还原

问题描述：在json文件中开启下拉功能后（"enablePullDownRefresh": true），js文件中onPullDownRefresh事件中加载数据后，顶部不能自动还原

解决方案：在onPullDownRefresh事件中，最后加上wx.stopPullDownRefresh()即可解决

//页面下拉
onPullDownRefresh: function () {
    this.loadPage();
    wx.stopPullDownRefresh();
},

 

4）background-image不能使用本地图片

问题描述：在wxss样式文件中，background-image:url('/img/head.jpg')，无效果。原因是background-image不支持本地图片文件

解决方案：1）使用网络路径 2）使用base64编码格式 3）用image代替

 

 

5）content中的无法显示文本换行

问题描述：例如wx.showModal的content中，无法显示换行，

解决方案：用“\r\n”换行：replace(/\n/g, '\r\n')，如果在微信开发者工具中发现并没有换行，不要惊讶，用真机预览一下，就可以看到效果了。

 

 

 

 

不断更新中……