如何在微信小程序中接入Web SDK

本文将介绍如何使用微信web-view组件来接入AI实时互动Web SDK。

说明

在小程序中,每个页面仅允许存在一个web-view。该web-view会自动填充整个页面,并覆盖其他组件。

前置准备

  • 准备好一个域名,并满足以下条件:

    • 已经过 ICP 备案。

    • 具备操作权限,可以将文件放置于域名根目录。

    • 已配置HTTPS证书。

  • 准备一个非个人类型的小程序。

接入流程

  1. 以普通浏览器环境的形式接入Web SDK,并部署到准备好的域名下,建议UI适配移动端。具体操作流程,请参考快速使用阿里云ARTC Web SDK

  2. 在小程序管理后台,管理-开发管理页面中,配置业务域名,如下所示:

    image

    说明

    您需要按照界面上的指引,将校验文件放置在域名根目录下。

    提示:在开发阶段,可以先绕过步骤2,在微信开发者工具中,详情-本地设置里,勾选「不校验 web-view 业务域名」来加速本地开发,在正式发布上线前完成步骤2即可。操作如下图所示:

    image

  3. wxml文件中引入web-view组件,并将src属性指向包含Web SDK的页面URL。

    <web-view src="https://example.com/path/to/rtc/page"></web-view>
  4. 使用开发者工具中的模拟器或者真机预览页面效果。与浏览器环境相同,在首次打开该页面时,需要在小程序里授权摄像头、麦克风的使用权限。

相关参考

  1. 快速使用阿里云ARTC Web SDK

  2. ARTC 基础功能

  3. ARTC 进阶指引

  4. 小程序 web-view 内如何与小程序交互

  5. 如何判断当前是否在小程序环境

  6. 业务域名设置失败自查指引