live-player在自定义组件内部使用的bug
live-player封装至某一个自定义组件中以后,
bindstagechange定义的事件,在自定义组件中无法触发,
console中不断的提示“do not find stagechange handler in current page”
如果把bindstagechange事件定义在引用该自定义组件的page中,则无此提示,
能成功触发引用该自定义组件的Page js中定义的函数
自定义组件中其他bind函数无此问题
自定义组件的wxml
<live-player id="livePlayer" src="rtmp://live.hkstv.hk.lxdns.com/live/hks" mode="live" background-mute autoplay="false" bindstatechange="statechange" binderror="error" class="player {{fullScreen ? 'player-fullscreen': ''}};" /> |
自定义组件js
Component({ properties: { src: String, // 简化的定义方式 }, data: { status: undefined, showControls: false, fullScreen: false, }, ready: function(e) { const animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease', }) this.animation = animation // 使用 wx.createMapContext 获取 map 上下文 this.liveCtx = wx.createLivePlayerContext('livePlayer', this) if (this.data.url) { this.liveCtx.play() } }, methods: { statechange(e) { const { code } = e.detail console.log(code) switch (code) { case 2004: //开始 this.setData({ status: 'playing', }) break case 2006: //结束 this.setData({ status: 'pause', }) break default: break } }, },}) |
此种方式,console会提示在page中找不到statechange handler
如果在引用此自定义组件的page中定义:
// packages/live/pages/details/index.jsPage({ data: { url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks', }, statechange(e) { const { code } = e.detail console.log(code) },}) |
则可以触发page中的stagechange函数
按理说,要想触发page中的函数,需要在自定义组件中triggerEvent才对
bug?
