即时通信 IM
有奖：腾讯混元大模型征文大赛邀您参加！> HOT
文档中心>即时通信 IM>聊天互动（含 UI）>接入离线推送>uni-app>uni-app（支持 FCM）

uni-app（支持 FCM）

最近更新时间：2024-08-23 10:17:41

我的收藏

本页目录：

说明：
由于平台限制，云打包功能暂不支持 FCM。为了实现 FCM 支持，您需要采用离线打包方式。

前置条件

1. 集成 Chat TUIKit，可参见 含 UI 集成方案（荐） -> 集成基础功能 ->uni-app（Vue2/Vue3）

说明：
1. 已集成 Chat TUIKit 可忽略此步骤。
2. 无 UI 集成 Chat 可忽略此步骤。

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

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


3. 开通推送服务

进入 IM 控制台 > 推送服务 Push > 接入设置，单击立即购买或免费试用 。（每个应用可免费试用一次，有效期7天。）

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

4. 厂商配置

说明：
uniapp 厂商配置包含 Android 厂商配置 和 iOS 厂商配置， 可参见 厂商配置 - uniapp。

配置 TencentCloud-TIMPush 并设置 FCM

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

在项目 【manifest.json】 > 【App 模块配置】 中配置消息推送模块，如图所示：


步骤2：项目引入 TencentCloud-TIMPush，填写相关参数

1. 前往插件市场，开通 TencentCloud-TIMPush 云打包服务。如图所示：
注意：
插件市场开通云打包服务项目的 appId 需要和项目 manifest.json 中的 appid 一致。

2. 在项目的 manifest.json > App 原生插件配置 中勾选 TencentCloud-TIMPush。

步骤3: 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 和 timpush-configs.json

timpush-configs.json 可以在 IM 控制台 > 推送服务 Push > 接入设置 进行下载, 并将 timpush-configs.json 放入 App.vue 同级目录中， 如图所示：

App.vue
含 UI 集成
无 UI 集成
在 App.vue 中引入 TencentCloud-TIMPush，并挂载到 uni 上。
在 App.vue 中引入 timpush-configs.json，并挂载到 uni 上。
// #ifdef APP-PLUS
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 || {};
// #endif
确认 uni.requireNativePlugin 引入 TencentCloud-TIMPush 成功，如图所示：

在 uikit 登录时，将 TencentCloud-TIMPush 注册进 uikit。

import { TUILogin } from "@tencentcloud/tui-core";
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 推送配置，如不需要可传空。
        }    
    }
})
在 chat 登录前，需要将 TencentCloud-TIMPush 注册进 chat 中。
import TencentCloudChat from '@tencentcloud/chat';
const chat = TencentCloudChat.create({SDKAppID: 0}) // 接入时需要将0替换为您的即时通信应用的 SDKAppID
chat.registerPlugin({
  'tim-push': uni.$TIMPush,
  pushConfig: {
    androidConfig: uni.$TIMPushConfigs,   // Android 推送配置。
    iOSConfig: {	
      "iOSBusinessID": "xxx" // iOS 推送配置。
     }    
  }
})
chat.login({
    userID: '', // 用户 ID。
    userSig: '' // 用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。具体生成方法请参见 https://cloud.tencent.com/document/product/269/32688 
})

步骤5. 生成本地打包 App 资源

单击 HBuilderX 的 发行 > 原生 App - 本地打包 > 生成本地打包 App 资源。如图所示：
说明：
本地打包 App 资源存放在 unpackage/resources/ 目录下。



步骤6. 下载 App 离线开发工具包，并配置 uniapp 相关参数

说明：
1. uniapp App 离线开发工具包： uniapp App 离线开发工具包。
2. uniapp 离线工程中所需 App 资源为 步骤1～步骤5 生成的本地打包 App 资源。
3. 根据 uniapp 离线打包流程配置 uniapp 相关参数。

步骤7. 配置 TencentCloud-TIMPush 插件信息

将 TencentCloud-TIMPush 插件信息配置到项目的 /app/src/main/assets/dcloud_uniplugins.json 中。如图所示：
{
  "hooksClass": "com.tencent.qcloud.tim.push.TIMPushAppProxy",
  "plugins": [
    {
      "type": "module",
      "name": "TencentCloud-TIMPush",
      "class": "com.tencent.qcloud.tim.push.TIMPushModule"
    }
  ]
}


步骤8. 导入 TencentCloud-TIMPush 依赖

下载 TencentCloud-TIMPush，将 TencentCloud-TIMPush/android 下的 aar 包 导入项目的 /app/libs 中。如图所示：


步骤9. 配置 TencentCloud-TIMPush 厂商仓库

将 TencentCloud-TIMPush 的厂商仓库地址补充到根目录 build.gradle 中。如图所示：
注意：
仓库地址的配置涉及 buildscript.repositories、buildscript.dependencies 和 allprojects.repositories，参考图示进行配置。
 buildscript {
    
    repositories {
        ......
        maven { url 'https://developer.huawei.com/repo/' }
        maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
    }
    dependencies {
        ......
        classpath 'com.google.gms:google-services:4.3.15'
    }
}

allprojects {
    repositories {
        ......
        maven { url 'https://developer.huawei.com/repo/' }
        maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
    }
}


步骤10. 配置 TencentCloud-TIMPush 厂商依赖

将 TencentCloud-TIMPush 的厂商依赖补充到应用的 /app/src/build.gradle 中。如图所示：
// TIMPush 的依赖
implementation "com.huawei.hms:push:6.11.0.300"
implementation "com.tencent.timpush:xiaomi-vendor:5.9.9"
implementation "com.tencent.timpush:oppo-vendor:3.1.0"
implementation "com.tencent.timpush:vivo-vendor:4.0.0.0"
implementation "com.tencent.timpush:honor-vendor:6.0.5"
implementation "com.tencent.timpush:fcm:7.9.5668"
implementation "com.meizu.flyme.internet:push-internal:4.3.0"
implementation "com.tencent.liteav.tuikit:tuicore:7.8.5484"
implementation "com.tencent.imsdk:imsdk-plus:7.8.5484"
implementation "commons-codec:commons-codec:1.15"
implementation "androidx.appcompat:appcompat:1.3.0"
implementation "com.google.android.material:material:1.3.0"
implementation "com.google.code.gson:gson:2.9.1"
implementation "com.google.auto.service:auto-service-annotations:1.1.1"
implementation "com.google.gms:google-services:4.3.15"


步骤11. 配置 TencentCloud-TIMPush 厂商信息（仅荣耀和 ViVO）

将 vivo 的 appID 和 appKey 和 hihonor 的 appID 配置到项目的 /app/src/main/assets/AndroidManifest.xml 中。如图所示：
说明：
1. 使用 vivo 推送必须 AndroidManifest.xml 中配置 appID 和 appKey。
2. 使用 hihonor 推送必须 AndroidManifest.xml 中配置 appID。
<meta-data
    tools:replace="android:value"
    android:name="com.vivo.push.app_id"
    android:value="0" /> <!-- vivo 的 appID -->
<meta-data
    tools:replace="android:value"
    android:name="com.vivo.push.api_key"
    android:value="0" /> <!-- vivo 的 appKey -->
<meta-data
    tools:replace="android:value"
    android:name="com.hihonor.push.app_id"
    android:value="0" />  <!-- hihonor 的 appID -->


步骤12. 配置华为 agconnect-services.json（仅华为）

将华为 agconnect-services.json 配置文件添加到工程的根目录，如图所示：




步骤13. 配置 FCM google-services.json

将华为 google-services.json 配置文件添加到应用 app 目录下，如图所示：


步骤14. 启动 FCM push 服务

在应用的 build.gradle 中头部配置 apply plugin: 'com.google.gms.google-services'。如图所示：
apply plugin: 'com.google.gms.google-services'


步骤15. 运行并登录项目，确认 TencentCloud-TIMPush 集成成功

使用 Android Studio 运行项目，登录完成后，在 Android Studio 的日志中，确认有 register push successfully 打印，表示 TencentCloud-TIMPush 集成成功，如图所示：


步骤16. 体验您的第一次离线推送

进入 IM 控制台 > 推送服务 Push > 接入测试 发送您的第一条推送。如图所示：
注意：
1. 接收端的应用必须置于后台，或者结束进程的状态。
2. 直播群不支持离线消息推送。



技术咨询

点此进入IM社群，享有专业工程师的支持，解决您的难题。

中国站
文档反馈
文档活动
message-icon联系我们
目录