文档

微信小程序接入

更新时间:

本文介绍微信小程序集成AUI Kits互动直播场景竖屏样式组件的操作方式、注意事项及相关代码示例等内容。

前提条件

AppServer

您已经搭建AppServer并获取了访问域名。搭建步骤,请参见服务端集成

主播端

目前微信小程序仅包含观众端模块,暂未支持推流、连麦,如需体验完整的功能,需要您接入移动端的AUI Kits。接入方式请参见Android端接入iOS端接入

微信小程序权限

由于AUI Kits互动直播场景SDK所使用的小程序标签有更苛刻的权限要求,因此集成的前提是需要开通小程序的类目和标签使用权限,否则无法使用。

包括如下步骤:

  1. 注册企业类小程序:小程序推拉流标签仅支持企业类小程序申请,需要在注册时填写主体类型为企业,如下图所示:

    yuque_diagram.jpg

  2. 申请标签权限:小程序推拉流标签使用权限暂时只开放给有限类目。符合类目要求的小程序,需要在微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限,如下图所示:

    yuque_diagram (1).jpg

开发框架

本项目为能实现一套代码支持多个小程序平台,选用了uni-app框架进行开发,技术栈为Vue,如需了解更多框架信息,请参见uni-app 官网文档。目前已支持微信小程序平台及H5平台,后续支持更多的平台。

快速集成

环境准备

开发环境准备

推荐下载使用可视化编辑器HBuilderX进行开发,并且下载安装微信开发者工具,参见快速上手文档配置相关程序路径。

微信版本要求

  • 微信App iOS最低版本要求:7.0.9

  • 微信App Android最低版本要求:7.0.8

  • 小程序基础库最低版本要求:2.10.0

  • 由于小程序测试号不具备<live-pusher><live-player>的使用权限,请使用企业小程序账号申请相关权限进行开发。

  • 由于微信开发者工具不支持原生组件(即<live-pusher><live-player>标签),需要在真机上进行运行体验。

源码下载

开源项目根据播放器分别竖屏样式和横屏样式,请根据您的需求选择对应的项目。

配置

开发环境搭建完成后,在HBuilderX中打开下载的源码工程,配置以下数据:

配置 Appserver

请在 config.js 中配置所需的参数,目前支持配置 AppServer 域名。

export default {
  // AppServer 域名,注意:结尾请勿包含 / 
  appServer: 'https://your-appserver-origin',
};

配置小程序 AppID

在 manifest.json 中配置您的小程序 appid,项目初期没有时可不填,或者也可以在小程序开发者工具设置。

image.png

image.png

本地开发运行

配置完成后点击菜单栏中的运行 -> 运行到小程序模拟器 -> 微信开发者工具,就会对代码进行打包,并自动打开微信开发者工具运行该项目。

image.png

发布

域名配置

必需事先在小程序后台设置服务器域名,小程序才能正常调通相关接口,页面路径为开发管理 > 开发设置 > 服务器域名

request合法域名中需要填入上面的Appserver域名,注意小程序要求必须是HTTPS协议。若配置后接口仍然失败,请参见request返回request:fail -202:net::ERR_CERT_AUTHORI,同时在微信上将小程序先删除重新加载打开。

socket合法域名需要配置阿里云互动消息所使用的wss域名才能正常使用互动消息服务,域名为: wss://metapath.aliyuncs.com

image.png

代码发布

您可以选择在HBuilderX中发布,也可以选择在微信开发工具中上传,详情请参考uni-app 发布至微信小程序文档以及微信小程序官方文档

由您实现

本项目着重直播间模块的开发,其余配套的模块还需要集成方自行完善才能真正对外服务终端用户。

登录

当前项目中的登录模块为示例代码,直播间AppServer服务提供了以明文发送用户名及密码的login接口来获取身份Token,这部分逻辑仅仅只能作为本地开发、体验使用,切勿在实际生产环境中使用,登录功能实现请参考微信小程序登录文档自行实现。

直播列表

项目直播列表页面代码位于pages > roomList文件夹中,当前逻辑比较简单,需要您按实际情况自行优化。

编译为 H5

目前该 uni-app 工程也支持编译为 H5 页面。

本地运行

开发环境搭建完成并配置好参数后,单击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可体验。

image.png

页面是竖屏 H5 页面,因此可以打开浏览器控制台,切换为移动端模式。

image.png

发布

请参考 uni-app 官方文档 发布为 Web 网站