微信小程序中常见问题
video标签背景色
想必很多人都想修改video的那个黑色背景吧，还是别做梦了，还不支持哈。
微信小程序 swiper禁止手动切换
给swiper设置catchtouchmove为true，设置swiper-item的catchtouchmove返回false
<swiper
class="swiper"
indicator-dots="{{false}}"
circular
autoplay="{{true}}"
vertical="{{true}}"
interval="{{3000}}"
duration="{{300}}"
easing-function="easeInOutCubic"
catchtouchmove="true"
>
<block wx:for="{{list}}" wx:key="index">
<swiper-item catchtouchmove="stopChange">
<view class="swiper-item">{{item.name}}</view>
</swiper-item>
</block>
</swiper>
stopChange() {
return false
}
微信小程序多音频场景处理
背景：页面中有多条数据，每条数据都可以单独播放，不同时播放
核心逻辑就是每个音频单独初始化一个方法，每个音频播放的进度等信息都单独控制
通过wx.createInnerAudioContext来控制
// wxml
<view wx:for="{{list}}" wx:key="id">
<view play="{{play}}" url="{{item.url}}" id="{{item.id}}">播放</view>
</view>
// js
Component({
data: {
play: false,
list: [
{ id: 1, url: '' },
{ id: 2, url: '' },
{ id: 3, url: '' },
],
id: null,
},
onLoad: function () {},
onShow() {},
onHide() {
this.audioPause();
},
onUnload() {
this.audioPause();
},
handleAudioPlay(e) {
const { play, url, id } = e.detail;
if (!this[`innerAudioContext${id}`]) {
this[`innerAudioContext${id}`] = wx.createInnerAudioContext();
}
if (play) {
this[`innerAudioContext${id}`].pause();
} else {
this[`innerAudioContext${id}`].autoplay = true;
this[`innerAudioContext${id}`].src = url;
this[`innerAudioContext${id}`].play();
}
this.setData({
play: !play,
id,
});
this.innerAudioContext.onEnded(() => {
this.setData({
play: false,
});
});
},
audioPause() {
const { id } = this.data;
this[`innerAudioContext${id}`].pause();
this.setData({
play: false,
});
},
});
当采用这个方法时，还有三种常见的场景需要考虑：
- 页面返回键退出当前页面
- 右上角退出小程序
- 手机home键将小程序切换到后台
为什么需要考虑这三种情况呢，因为一般小程序退出当前页面或者切换到后台，需要停止当前播放的音乐
当通过返回键退出当前页面(或者点击页面跳转到其它页面) ，一般直接销毁音频初始化方法即可：
handlerBack() {
router.back()
const { id } = this.data
if (this[`innerAudioContext${id}`]) {
this[`innerAudioContext${id}`]. destroy()
}
}
当右上角退出小程序时
onUnload() {
const { id } = this.data
if (this[`innerAudioContext${id}`]) {
this[`innerAudioContext${id}`]. pause()
}
}
当按home键切换到后台时：
onHide() {
const { id } = this.data
if (this[`innerAudioContext${id}`]) {
this[`innerAudioContext${id}`]. pause()
}
}
当前音频是单独播放，只是针对每个音频初始化一个实例，假如需要同时播放多个音频，这种方式可能会导致内存不足导致的崩溃
微信小程序多音频场景处理 - 背景音频
提到音频播放控制，不得不提背景音频这个方法wx.getBackgroundAudioManager
很不幸，这个有坑。当使用场景为单音频播放或者不需要记录每个音频播放的位置时，使用它是一个合适的选择。当需要记录每个音频的播放位置时，这个就会有些问题了。问题来源backgroundAudioManager.seek这个API。
重要的事情说3遍：backgroundAudioManager.seek在模拟器上正常，但是在真机上不生效，每次都会重新播
重要的事情说3遍：backgroundAudioManager.seek在模拟器上正常，但是在真机上不生效，每次都会重新播
重要的事情说3遍：backgroundAudioManager.seek在模拟器上正常，但是在真机上不生效，每次都会重新播
Component({
data: {
play: false,
list: [
{ id: 1, url: '' },
{ id: 2, url: '' },
{ id: 3, url: '' },
],
duration: {},
id: null,
},
onLoad() {},
onShow() {},
onHide() {},
onUnload() { },
play() {
wx.nextTick(() => {
const { duration = {} } = this.data;
const currentTime = duration[id] || 0;
backgroundAudioManager.title = '每日快讯';
backgroundAudioManager.epname = '';
backgroundAudioManager.singer = '';
backgroundAudioManager.coverImgUrl = '';
backgroundAudioManager.src = url;
if (currentTime) {
// 跳转到指定的进度
backgroundAudioManager.seek(currentTime);
backgroundAudioManager.play();
}
});
},
handleAudioPlay(e) {
const { play, url, id } = e.detail;
const backgroundAudioManager = wx.getBackgroundAudioManager();
if (play) {
backgroundAudioManager.pause();
// 记录当前音频播放的进度
wx.getBackgroundAudioPlayerState({
success(res) {
const { currentPosition } = res;
that.setData({
duration: {
...duration,
[id]: currentPosition,
},
});
},
});
// 点击的不是当前播放的音频
if (this.data.id !== id) {
this.play()
}
} else {
this.play()
}
this.setData({
play: !play,
id,
}),
},
});
微信小程序警告 [Component] property received type-uncompatible value: expected but get null value. Used empty string instead
问题产生原因：子组件properties中定义的字段类型不满足导致相关警告
比如定义组件中src属性为String类型时，当src传入null时，就会有上述警告出现
// imagex
Component({
options: {},
externalClasses: ['class'],
properties: {
src: String,
},
data: {
loaded: false,
},
lifetimes: {
attached() {},
},
methods: {},
});
使用
<imagex src="{{null}}" />
自定义字体在Android端不生效的问题
现在看来这个问题在现在，依然没有解决
