快速开始
这份文档将指导您如何在 uni-app 项目集成音视频通话 UIKit小程序 SDK 并快速开始音视频通话。
准备环境：
- 参考 uni-app 文档创建项目。
- 使用微信小程序基础库1.7.0 或以上版本，否则不支持音视频播放。
- 通过微信小程序实时音视频播放相关类目审核（获取到对应的小程序 AppID），开通 live-player、live-pusher 组件权限。
前提条件
- 已在 ZEGO 控制台 创建项目，并申请有效的 AppID 和 AppSign，详情请参考 控制台 - 项目信息。
- 联系 ZEGO 技术支持，开通 UIKit 相关服务。
安装 SDK
请在项目根目录运行以下命令将 SDK 安装到项目中。
Untitled
npm i @zegocloud/zego-uikit-prebuilt-call-mini-program --save
1
使用步骤
1
在您的服务端部署好 Token 生成服务。
详细步骤请参考 Token 生成文档。如需快速调试，建议使用控制台生成的临时 Token，生成临时 Token 的具体操作请参考 控制台 - 项目管理。
2
导入 UIKit 页面
您需要在项目根目录下创建一个名为 ZegoUIKitPrebuiltCall 的目录，然后将 UIKit 相关的页面拷贝至该目录中。可以参考以下命令操作：
Untitled
mkdir -p ./ZegoUIKitPrebuiltCall && cp -r node_modules/@zegocloud/zego-uikit-prebuilt-call-mini-program/src/ ./ZegoUIKitPrebuiltCall/src/
1
3
在 uni-app 的 pages.json 文件中添加一个跳转至 UIKit 的页面配置项。
其中 path 指向上一个步骤中从 SDK 拷贝出来的页面路径。
pages.json
{
"path": "ZegoUIKitPrebuiltCall/src/pages/call/SingleCall",
"style": {
"navigationBarTitleText": "Call"
}
}
1
4
跳转至通话页面。
在您的其他页面中，参考以下代码调用 ZegoUIKitPrebuiltCall.joinRoom 方法，然后运行。当点击“拨打电话”按钮后，就会跳转至通话页面。
YourPage.vue
<template>
<view class="button-container">
<button @tap="startCall" >
拨打电话
</button>
</view>
</template>
<script setup>
import { ZegoUIKitPrebuiltCall } from '@zegocloud/zego-uikit-prebuilt-call-mini-program';
const appID = 0; // 您从控制台获取的 AppID
const server = ""; // 您从控制台获取的 Server 地址
const token = ""; // 您从服务端生成的 Token
const userID = "user1"; // userID，需用户自己定义，保证全局唯一，建议设置为业务系统中的用户唯一标识
const userName = "user1_name"; // userName 用户名
onMounted(() => {
ZegoUIKitPrebuiltCall.init(appID, server, userID, userName, token);
})
function startCall() {
const callID = "call"; // callID，通话ID，通话双方需输入同一个ID
ZegoUIKitPrebuiltCall.joinRoom(callID);
}
</script>
1
至此，您已经完成了所有步骤！运行后的效果如下：
 |  |