当前位置：首页 > VUE

vue实现个推

2026-02-17 22:53:08VUE

Vue 集成个推（Getui）实现推送功能

个推（Getui）是一款常用的消息推送服务，支持 Android 和 iOS 平台。在 Vue 项目中集成个推，通常需要结合原生开发（如 Cordova、Capacitor 或原生混合开发框架）或使用 Web SDK（适用于 H5 场景）。

方法 1：通过 Cordova/ Capacitor 插件集成（混合开发）

适用于 Vue 开发的混合应用（如 Cordova 或 Capacitor 项目）。

安装 Cordova 插件：

cordova plugin add cordova-plugin-getui

在 Vue 中调用插件：

// 初始化个推
document.addEventListener('deviceready', () => {
  window.GeTuiSdkPlugin.initialize(
    '你的个推AppID',
    (success) => console.log('初始化成功', success),
    (error) => console.error('初始化失败', error)
  );
});

// 监听消息
window.GeTuiSdkPlugin.registerReceiveMessageCallback(
  (message) => console.log('收到推送消息', message)
);

方法 2：Web SDK 集成（纯 H5 场景）

个推提供 Web SDK，但功能有限（通常仅支持浏览器通知）。

引入个推 Web SDK：

<script src="https://cdn.getui.com/gtpush/web/gt.min.js"></script>

初始化并监听：

// 初始化配置
const gt = new window.GtPush({
  appId: '你的个推AppID',
});

// 注册设备
gt.register()
  .then((res) => console.log('注册成功', res))
  .catch((err) => console.error('注册失败', err));

// 监听消息
gt.onMessage((payload) => {
  console.log('收到推送', payload);
});

方法 3：原生集成（Vue + Android/iOS）

若 Vue 项目嵌入原生应用（如 WebView），需通过原生桥接实现。

Android 示例（Kotlin）：

// 在原生代码中初始化个推
GeTuiSdk.init(context, "你的个推AppID", null)

通过 WebView 桥接将消息传递给 Vue：

vue实现个推

// Vue 中监听原生事件
window.addEventListener('GT_PUSH_EVENT', (e) => {
  console.log('收到原生推送', e.detail);
});

注意事项

权限配置：Android 需配置 <uses-permission android:name="android.permission.INTERNET" />，iOS 需配置推送证书。
测试环境：个推提供测试模式，建议先通过测试 AppID 验证功能。
离线推送：纯 H5 无法实现离线推送，需依赖原生能力。

以上方法根据实际场景选择，混合开发推荐 Cordova/Capacitor 插件，纯 Web 可用 Web SDK（功能受限）。

标签: vue