腾讯云商业直播嵌入页面插件

操作场景

SaaS 商业直播方案只需要在小程序端引入插件代码即完成页面嵌入,可在控制台进行编辑、管理和发布直播页面。本文为您介绍引入插件代码的操作。

前提条件

  • 注册 腾讯云账号,并完成 企业实名认证。
  • 完成小程序的 注册,下载并安装最新版本的 微信开发者工具。

操作步骤

  1. 使用小程序绑定的微信号扫码登录开发者工具。

  2. 申请插件使用权限,在小程序管理后台的【设置】>【第三方设置】中选择【添加插件】。

  3. 在弹出的面板中搜索“腾讯云企业直播”,选中插件并添加。

  4. 在小程序中引入插件代码,对于插件的使用者,使用插件前要在小程序工程的 app.json 中声明需要使用的插件,例如:

    {
    "plugins": {
    "bizlive": {
    "version": "1.1.31",
    "provider": "wx2cd0e76ea0473495"
    }
    }
    }

  5. 在小程序使用插件中的组件。

    1. 直播预览页面组件。

      {
      "usingComponents": {
      "bizlive": "plugin://bizlive/bizlive" //预览页面组件
      }
      }

    2. 在 page 的 .wxml 文件加载上一步引入的 bizlive 组件。

      <bizlive AppId="{{AppId}}" bindcustomevent="updateNavigationBar" PageID="{{PageID}}" UserKey="{{UserKey}}"/>

      直播预览页面组件相关属性说明:

      属性 类型 默认值 说明
      AppId Number 0 后台服务 AppId
      PageID Number 0 页面 ID
      UserKey String 开启聊天室功能后,需传入的关键字段,若不使用聊天室功能可置空
      bindcustomevent EventHandle null 更新状态栏的响应函数,样例如下

      bindcustomevent 样例:

      updateNavigationBar(e){ var NaviBarInfo = e.detail;if (NaviBarInfo.title){ wx.setNavigationBarTitle(NaviBarInfo.title)}if (NaviBarInfo.color) wx.setNavigationBarColor(NaviBarInfo.color) wx.setBackgroundColor(NaviBarInfo.color)}

  6. 获取聊天室相关 UserKey。
    实现流程如下:

    流程简介:
    a. 使用插件前小程序向客户业务服务器请求获取 UserKey。
    b. 客户业务后台参考云图接口向腾讯云服务器请求获取 UserKey。
    c. 腾讯云服务器返回 UserKey。
    d. 客户业务服务器返回 UserKey。
    e. 小程序将 UserKey 传给插件。
    接口详细请参考云图接口 注册聊天室。

注明:本文为星速云原创版权所有,禁止转载,一经发现将追究版权责任!

发表评论

登录后才能评论
问答社区 QQ客服
微信客服
微信客服
分享本页
返回顶部