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>
    )
  }

具體操作已微信小程序的官網為主，此舉為自己理解走過的坑