即时通信 IM 微信小程序（原生）

一、小程序 Demo 体验

·如果你想要直接体验音视频通话小程序，单击 Demo 体验，扫描小程序二维码。

·如果你想要直接跑通一个新工程，请直接阅读 微信小程序 Demo 快速跑通。

二、开发环境要求

·微信 App iOS 最低版本要求：7.0.9。

·微信 App Android 最低版本要求：7.0.8。

·小程序基础库最低版本要求：2.10.0。

注意：警告：

三、步骤1：开通企业类小程序

小程序推拉流标签不支持个人小程序，只支持企业类小程序。需要在 注册 时填写主体类型为企业：

四、步骤2：在小程序控制台开启实时音视频接口

·小程序推拉流标签使用权限暂时只开放给有限类目，具体支持类目参见该地址。

·符合类目要求的小程序，需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限。

·登录小程序控制台更新隐私保护政策，勾选麦克风、摄像头。

五、步骤3：在小程序控制台配置域名

在 微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中设置 request 合法域名 和 socket 合法域名。

·将以下域名添加到 socket 合法域名：

·将以下域名添加到 request 合法域名：

·将以下域名添加到 uploadFile 合法域名：

·将以下域名添加到 downloadFile 合法域名：

·如下所示，服务器域名配置：

六、步骤1：开通服务

在使用腾讯云提供的音视频服务前，你需要前往控制台，为应用开通音视频服务。具体步骤请参见 开通服务。

七、步骤2：创建小程序项目

1. 在微信开发者工具上创建一个小程序项目，选择不使用模板。

2. 配置渲染模式，在 app.json 中设置 renderer 为 webview。如下：

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "webview"}

3. 新建终端。

4. 执行 npm init -y 命令生成 package.json 文件。

npm init -y

八、步骤3：下载并导入 TUICallKit 组件

1. 下载 TUICallKit 组件。

npm i @trtc/calls-uikit-wx

MacOS 端Windows 端mkdir -p ./TUICallKit && cp -r node_modules/@trtc/calls-uikit-wx/ ./TUICallKitxcopy node_modules\\@trtc\\calls-uikit-wx\\ .\\TUICallKit /i /e

2. 执行完以上命令后，你的目录下生成 TUICallKit 文件夹，其中包含有 TUICallKit 组件。目录如下：

3. 构建 npm，打开微信开发者工具单击工具 > 构建 npm，新增 miniprogram_npm 目录。目录如下：

九、步骤4：填写 SDKAPPID 以及 SECRETKEY

修改 TUICallKit/debug/GenerateTestUserSig-es.js 文件 的 SDKAPPID 以及 SECRETKEY。

十、步骤5：调用 TUICallKit 组件

1. 修改 app.json 文件，添加如下代码，新增全局监听页面。

{ "pages": [ "pages/index/index", "TUICallKit/pages/globalCall/globalCall" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "webview"}

2. 修改 pages/index 文件夹下的文件。

index.wxmlindex.jsindex.wxss<view class="container"> <view class="box"> <view class="input-box"> <input type="text" maxlength="20" placeholder="{{isLogin?'请输入呼叫者userID':'请输入登录者userID' }}" value="{{userID}}" bindinput='bindInputUserID' placeholder-style="color:#BBBBBB;" /> </view> <view class='login'> <button class='loginBtn' bindtap="{{isLogin?'call':'login'}}">{{isLogin?'呼叫':'登录'}}</button> </view> </view></view>// 导入 TUICallKitAPI 模块，使你的应用具有全局呼叫的能力import { TUICallKitAPI } from "../../TUICallKit/TUICallService/index";// 导入 CallManager 模块，使你的应用具有全局监听来电的能力import { CallManager } from "../../TUICallKit/TUICallService/serve/callManager";import * as GenerateTestUserSig from "../../TUICallKit/debug/GenerateTestUserSig-es.js";wx.CallManager = new CallManager();Page({ data: { userID: "", isLogin: false, }, bindInputUserID(e) { this.setData({ userID: e.detail.value, }); },
async login() { const userID = this.data.userID; if (!userID) return; const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({ userID: userID, }); await wx.CallManager.init({ sdkAppID: SDKAppID, userID: userID, userSig: userSig, globalCallPagePath: "TUICallKit/pages/globalCall/globalCall", }); wx.showToast({ title: "登录成功", icon: "success", }); this.setData({ isLogin: true, userID: "", }); },
async call() { await TUICallKitAPI.calls({ userIDList: [this.data.userID], type: 2, }); },});.container { width: 100vw; height: 100vh;}.box{ flex: 1; width: 100vw; margin-top: -40px; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center;}input{ display: flex; font-size: 20px; width: 60vw;}.login { display: flex; width: 100vw; text-align: center; bottom: 5vh; margin: 70rpx;}.login button{ width: 80%; background-color: #006eff; border-radius: 50px; color: white;}

十一、步骤6：编译运行

1. 请在本地设置里面勾选上“不校验合法域名、web-view (业务域名)、 TLS 版本以及 HTTPS 证书”。

注意：警告：

注意：如果不勾选该条目，则会在控制台出现如下错误。

注意：

2. 单击清缓存 > 全部清除，避免开发者工具的缓存造成渲染异常。

3. 编译小程序。

4. 该项目快速集成后的预期效果图。

十二、步骤7：拨打你的第一通电话

·请单击预览，扫描二维码，在真机环境使用小程序。

·登录后，请输入呼叫用户 ID，拨打你的第一通电话。具体效果如下：

注意：第一次使用小程序通话，需要获取摄像头和麦克风权限。

十三、开启悬浮窗功能

注意：v4.2.10+ 支持。由于 live-player 限制，该功能仅在视频通话场景下支持。

你可以通过调用 enableFloatWindow 开启/关闭悬浮窗功能，在初始化 TUICallKit 组件时启用该功能，默认状态为关闭（false）。可通过点击通话界面左上角的悬浮窗按钮，将通话界面缩小为悬浮窗形式。

调用 enableFloatWindow(enable: boolean) API 开启/关闭悬浮窗。

TUICallKitAPI.enableFloatWindow(true)

十四、常见问题

如果你的接入和使用中遇到问题，请参见 常见问题。