mpvue 小程序引入微信官方直播功能实践及常见问题

mpvue 小程序直播组件使用

官方事例

{
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/home/home"
      ],
      "plugins": {
        "live-player-plugin": {
          "version": "1.0.0", // 填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号
          "provider": "wxxxxxxxxxxxxx" // 必须填该直播组件appid，该示例值即为直播组件appid
        }
      }
    }
  ]
}

mpvue 如何引入直播组件

// mpvue app.json 文件；引入 `live-player-plugin` 直播组件代码包
{
  "pages": [
    "pages/index/main",
     ······
  ],
  "subPackages":[
    {
        "root":"pages/staff/",
        "pages":[
            "employee/main",
        ]
    }
  ],
  "plugins": {
    "live-player-plugin": {
      "version": "1.0.1",
      "provider": "wxxxxxxxxxxxxx"
    }
  },

mpvue 中如何使用直播组件

<!-- vue 文件中通过 navigator 跳转到直播组件页面（页面链接加了一点样式）  -->
<template>
  <div class="live">
    <navigator url="plugin-private://wx2b03c6e6xxxxxxxx/pages/live-player-plugin?room_id=[直播房间id]">进入直播间页面</navigator>
    </div>
</template>

常见问题

1. 如何查看直播组件 live-player-plugin 最新版本号

官方文档注释中说的 微信开发者工具调试时可获取最新版本号 是指可以通过微信开发者工具工具栏上的 “详情” 按钮调出基本信息菜单，在菜单的插件信息项可看到插件的最新版本号，将最新版本号填入配置信息即可

2. 订阅组件 subscribe 引入报错以及引入成功后显示 2s 自动消失问题

官方给出的事例是将直播组件放入到分包的 plugins 中，将 plugins 配置拷贝至 app.json 文件的最外层即可（与 pages 同级）；只有当直播处于 未开始 状态时订阅组件才会一直显示；一旦处于 直播中、已结束、已过期 等其他状态会自动隐藏。