taro微信小程序直播

刚刚毕业之后就接的第一个项目，微信小程序，没搞过啊，不管了，搞。

从来没搞过啊，就使用了taro里面的组件live-player,拉流，但是高了几天不是这个组件，并且发现了这个组件的一个问题，拉流一直都是无法拉取，官方不知道解决了没，

其实使用的微信小程序的组件live-player-plugin：

官网：https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html

没人教啊，得自己看文档。

自己搞，走了很多坑。

那开始代码：

可在app.json文件中主包和分包中引入

分包如下

"subpackages": [ { "plugins": { "live-player-plugin": { "version": "1.2.3", // 注意该直播组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释） "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid，该示例值即为直播组件appid（复制时请去掉注释） } } } ]

分包引入：
{
        root: 'pages/liveRecord/',
        "pages": [
          "index"
        ],
        "plugins": {
          "live-player-plugin": {
            "version": "1.2.3",
            "provider": "wx2b03c6e691cd7370"  // 直播插件的ID  
          }
        }
      }

在拉取直播的列表中获取房间号room_id，跳转到直播间。看代码操作

  toLiveRecord (roomId) { //跳转到直播间
    Taro.navigateTo({
      url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
    })
  }
//提示： url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
不能修改，必须这样，之前踩的坑就是在这里了


页面：
render () {
    const { liveInfoList } = this.state
    //101：直播中，102：未开始，103已结束，104禁播，105：暂停，106：异常，107：已过期
    return (
      <View className='live'>
        <ScrollView className='live-scroll' scrollY onScrollToUpper={this.toTopChange.bind(this)} onScrollToLower={this.toBottomChange.bind(this)}>
          {liveInfoList && liveInfoList.length > 0

            ? liveInfoList.map((item) => {
              if (item.liveStatus === '101' || item.liveStatus === '105' || item.liveStatus === '103') {
                return (
                  <View className='live-card'>
                    <View className='live-card-livePlayer'>
                      <Image src={item.coverImg} onClick={this.toLiveRecord.bind(this, item.roomId)}></Image>
                      <View className='identification'>
                       <View className='identification-left'>回看</View>
                       <View className='identification-right'>{item.startTime}</View>
                      </View>
                      <View className='anchor-name'>主播：{item.anchorName}</View>
                    </View>
                    <View className='live-card-name'>{item.name}</View>
                  </View>
                )
              }
            }) : ''
          }
        </ScrollView>
      </View>
    )
  }

具体操作已微信小程序的官网为主，此举为自己理解走过的坑