嵌入页面插件

最近更新时间:2019-08-23 16:14:09

操作场景

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 传给插件。
    接口详细请参考云图接口 注册聊天室