live-player在自定义组件内部使用的bug
发布于 6 年前 作者 wfeng 12887 次浏览 来自 问答

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.js
Page({
  data: {
    url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks',
  },
 
  statechange(e) {
    const { code } = e.detail
    console.log(code)
  },
})

则可以触发page中的stagechange函数

按理说，要想触发page中的函数，需要在自定义组件中triggerEvent才对

bug？

1 回复

你好  你有在自定义组件中实现live-player全屏播放吗  我这样写live-player实例对象获取到了  但调取全屏方法始终不生效  代码没报错  在小程序里一样的代码可以全屏

回到顶部