uni-app (客户端)

最近更新时间:2024-07-02 16:46:11

我的收藏
本文档将详细介绍如何结合 TUICallKit 组件和 TIMPush 推送插件,实现音视频通话的离线推送能力。效果如下图所示:
应用在后台时或离线时
锁屏时



前置条件

1. 集成 Chat TUIKit

集成 Chat TUIKit 的操作步骤,详细可参见 含 UI 集成方案(荐) -> 集成基础功能 ->uni-app(Vue2/Vue3)

2. 集成 TUICallKit

集成 TUICallKit 的操作步骤,详细可参见 视频通话(含 UI) -> 快速接入(TUICallKit) -> uni-app(客户端)

3. 开通推送插件

进入 IM 控制台 > 插件市场,单击立即购买免费试用 。(每个应用可免费试用一次,有效期7天。)

注意:
推送插件试用或购买到期后,将自动停止提供推送服务(包括普通消息离线推送、全员/标签推送等服务)。为避免影响您业务正常使用,请提前购买/续费

4. 厂商配置

说明:
uniapp 厂商配置包含 Android 厂商配置 和 iOS 厂商配置, 可参见 厂商配置 - uniapp

5. 升级 @tencentcloud/chat 到最新版本

说明:
@tencentcloud/chat 向下兼容,可放心升级。如果您当前用的是 tim-js-sdktim-wx-sdk,请参考我们的升级指引
npm install @tencentcloud/chat@latest
在 HBuilder 日志中查看 TencentCloudChat.VERSION 版本号,来确认 @tencentcloud/chat ≥ 3.2.5 如图所示:


集成 TencentCloud-TIMPush 插件

步骤1:manifest.json App 模块配置

在项目 manifest.json > App 模块配置中配置消息推送模块,如图所示:


步骤2: 引入 TencentCloud-TIMPush 云打包服务,填写相关参数

1. 前往插件市场,开通 TencentCloud-TIMPush 云打包服务。如图所示:
注意:
1. 插件市场开通云打包服务项目的 appId 需要和项目 manifest.json 中的 appid 一致。
2. 开通云打包服务的 TencentCloud-TIMPush 仅用于一个项目。仅与项目有关。

2. 在项目的 manifest.json > App 原生插件配置 > 云端插件中勾选 TencentCloud-TIMPush,并设置相关参数。
注意:
1. 注意在 HBuilderX 中参数可能会出现乱序现象,请仔细认真填写。
2. 各个参数为必填项,否则会编译错误,默认为 0。
com.hihonor.push.app_id
com.vivo.push.app_id && com.vivo.push.api_key
TIMPushAppGroupID
说明:
com.hihonor.push.app_id 对应 hihonor 的 appID。
不启用 hihonor 推送时,com.hihonor.push.app_id 默认设置为 0 即可。
控制台配置
manifest.json 荣耀配置


说明:
com.vivo.push.api_id 对应 vivo 的 appID。
com.vivo.push.api_key 对应 vivo 的 appKey。
不启用 vivo 推送时,com.vivo.push.api_id 和 com.vivo.push.api_key 默认设置为 0 即可。
控制台配置
manifest.json vivo 配置






TIMPushAppGroupID 对应 iOS 的 appGroupID,它是 iOS 的触达上报的配置项,可参考 configuring-app-groups 生成 appGroupID。
注意:
不配置 TIMPushAppGroupID 不会影响正常推送功能。
不启动 iOS 的触达上报时,TIMPushAppGroupID 默认设置为 0 即可。
iOS appGroupID 生成指引
manifest.json iOS 配置
可参见 configuring-app-groups 生成 appGroupID




步骤3: manifest.json Android 权限配置

在项目的 manifest.json > 源码视图 > app-plus > distribute > android > permissions 中追加以下权限项,如图所示:
"<uses-permission android:name=\\"android.permission.INTERNET\\" />",
"<uses-permission android:name=\\"android.permission.ACCESS_NETWORK_STATE\\" />",
"<uses-permission android:name=\\"android.permission.ACCESS_WIFI_STATE\\" />",
"<uses-permission android:name=\\"android.permission.WRITE_EXTERNAL_STORAGE\\" />"


步骤4: 注册 TencentCloud-TIMPush

注意:
@tencentcloud/chat ≥ 3.2.5 支持 TencentCloud-TIMPush。
androidConfig 是 Android 推送配置,如不需要打包 Android App,可传空。
iOSConfig 是 iOS 推送配置,如不需要打包 iOS App, 可传空。
获取 Android 配置 timpush-configs.json
获取 iOS 配置 iOSBusinessID
timpush-configs.json 可以在 IM控制台 > 推送 > 接入设置 进行下载, 并将 timpush-configs.json 放入 App.vue 同级目录中, 如图所示:


iOS 的 iOSBusinessID 可以在 IM 控制台 > 推送 > 接入设置获取,如图所示:

引入插件
登录插件
在 App.vue 中引入 TencentCloud-TIMPush,并挂载到 uni 上。
在 App.vue 中引入 timpush-configs.json,并挂载到 uni 上。
在 App.vue 中引入 TUILogin,并挂载到 uni 上。
// #ifdef APP-PLUS
import { TUILogin } from "@tencentcloud/tui-core"; // npm i @tencentcloud/tui-core
import TIMPushConfigs from "./timpush-configs.json";
const TIMPush = uni.requireNativePlugin("TencentCloud-TIMPush");
console.warn(`TencentCloud-TIMPush: uni.requireNativePlugin ${!!TIMPush ? 'success' : 'fail'}`);
uni.$TIMPush = TIMPush;
uni.$TIMPushConfigs = TIMPushConfigs || {};
uni.$TUILogin = TUILogin;
// #endif
确认 uni.requireNativePlugin 引入 TencentCloud-TIMPush 成功,如图所示:

uni.$TUILogin.login({
SDKAppID: 0, // 接入时需要将0替换为您的即时通信应用的 SDKAppID
userID: '',
// UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。
// 该方法仅适合本地跑通 Demo 和功能调试,详情请参见 https://cloud.tencent.com/document/product/269/32688
userSig: '',
// 如果您需要发送图片、语音、视频、文件等富媒体消息,请设置为 true
useUploadPlugin: true,
framework: `vue${vueVersion}` // 当前开发使用框架 vue2 / vue3
TIMPush: uni.$TIMPush, // APP 注册推送插件
pushConfig: {
androidConfig: uni.$TIMPushConfigs, // Android 推送配置,如不需要可传空。
iOSConfig: {
"iOSBusinessID": "" // iOS 推送配置,如不需要可传空。
}
}
})

步骤5: 生成自定义基座

单击 HBuilderX 的 运行 > 运行到手机或模拟器 > 制作自定义调试基座制作自定义基座。
注意:
配置原生插件,必须打包自定义基座进行测试。
制作基座时,Android 包名为插件开通云打包时绑定的应用包名。
证书使用云端证书。


步骤6: 运行并登录项目,确认 TencentCloud-TIMPush 集成成功。

运行时,选择自定义基座运行,在 HBuilder 的日志中,确认有 TIMPushModule._setToken ok 打印,表示 TencentCloud-TIMPush 集成成功。


步骤7: 体验您的第一条电话推送



高级功能

自定义推送内容、通知铃声

注意:
接收端需集成TencentCloud-TIMPush
发送端 @tencentcloud/chat ≥ 3.3.2
支持华为、小米、FCM 和 APNS。
1. 接收端引入铃声文件。
Android
iOS
定制的铃音资源文件,添加到项目 nativeResources/android/res/raw 目录下,如图所示:

注意:
iOS 自定义铃音,uni-app 必须为正式包。
iOS 自定义铃音长度不能超过 30s。
定制的铃音资源文件,添加到项目 nativeResources/ios/Resources 目录下,如图所示:

2. 配置 offlinePushInfo 字段。
说明:
androidSound 为铃声文件名,不需要后缀名。
iOSSound为铃声文件名,需要后缀名。
callParams: {
offlinePushInfo: {
title: 'test-title',
description: 'you have a test call',
androidSound: 'rain', // androidSound 为铃声文件名,不需要后缀名
iOSSound: 'rain.mp3', // iOSSound为铃声文件名,需要后缀名
},
},



常见问题

1. 若在集成过程中遇到问题,请务必先查阅 插件推送-常见问题 进行自助排查。
2. 条件说明:部分厂商要求必须上架应用市场才可以正常使用推送服务,详情参见下表:
厂商通道
是否需要上架
账号说明
小米
需要注册企业开发者账号
vivo
需要注册企业开发者账号
OPPO
需要注册企业开发者账号
荣耀
需要注册企业开发者账号
华为
个人开发者账号即可
魅族
个人开发者账号即可

交流与反馈

如有问题,欢迎您加入我们的 TUICallKit 技术交流平台 zhiliao,进行技术交流和产品沟通。