博客站

在 UniApp 中，推送通知是提升用户参与度的重要手段。UniApp 支持通过 UniPush 和 第三方推送服务（如极光推送、个推等）实现推送通知功能。以下是 UniApp 处理推送通知的常用方法：

一、使用 UniPush

UniPush 是 DCloud 提供的推送服务，支持 iOS、Android 和 H5 平台。

1. 开通 UniPush

• 登录 DCloud 开发者中心，在项目中开通 UniPush 服务。
• 配置 iOS 和 Android 的推送证书。

2. 集成 UniPush

• 在 manifest.json 中配置 UniPush：

  {
    "app-plus": {
      "distribute": {
        "ios": {
          "unipush": {
            "enabled": true
          }
        },
        "android": {
          "unipush": {
            "enabled": true
          }
        }
      }
    }
  }
  

3. 初始化 UniPush

• 在 App.vue 中初始化 UniPush：

  export default {
    onLaunch() {
      // 初始化 UniPush
      uni.getPushClientId({
        success: (res) => {
          console.log('推送客户端 ID：', res.cid);
        },
        fail: (err) => {
          console.log('获取推送客户端 ID 失败：', err);
        }
      });
  
      // 监听推送消息
      uni.onPushMessage((res) => {
        console.log('收到推送消息：', res);
      });
    }
  };
  

4. 发送推送通知

• 在 DCloud 开发者中心或通过 API 发送推送通知。

二、使用第三方推送服务

如果 UniPush 不满足需求，可以使用第三方推送服务，如 极光推送 或 个推。

1. 集成极光推送

• 安装极光推送插件：

  npm install jpush-unipush
  

• 在 manifest.json 中配置极光推送：

  {
    "app-plus": {
      "plugins": {
        "jpush": {
          "appkey": "你的 AppKey",
          "channel": "默认渠道"
        }
      }
    }
  }
  

• 初始化极光推送：

  import JPush from 'jpush-unipush';
  
  export default {
    onLaunch() {
      JPush.init();
      JPush.getRegistrationID((id) => {
        console.log('极光推送 Registration ID：', id);
      });
  
      // 监听推送消息
      JPush.addReceiveMessageListener((message) => {
        console.log('收到推送消息：', message);
      });
    }
  };
  

2. 集成个推

• 安装个推插件：

  npm install getui-unipush
  

• 在 manifest.json 中配置个推：

  {
    "app-plus": {
      "plugins": {
        "getui": {
          "appid": "你的 AppID",
          "appkey": "你的 AppKey",
          "appsecret": "你的 AppSecret"
        }
      }
    }
  }
  

• 初始化个推：

  import GeTui from 'getui-unipush';
  
  export default {
    onLaunch() {
      GeTui.init();
      GeTui.getClientId((cid) => {
        console.log('个推 Client ID：', cid);
      });
  
      // 监听推送消息
      GeTui.addReceiveMessageListener((message) => {
        console.log('收到推送消息：', message);
      });
    }
  };
  

三、处理推送通知

1. 处理点击通知

• 通过监听 onPushMessage 或第三方推送的回调函数处理点击通知事件。
• 示例：

  uni.onPushMessage((res) => {
    if (res.type === 'click') {
      console.log('用户点击了通知：', res);
      uni.navigateTo({ url: '/pages/detail/detail' });
    }
  });
  

2. 处理后台通知

• 在 App.vue 的 onShow 生命周期中处理后台通知。
• 示例：

  export default {
    onShow(options) {
      if (options.referrerInfo && options.referrerInfo.extraData) {
        console.log('后台通知数据：', options.referrerInfo.extraData);
      }
    }
  };
  

四、总结

UniApp 处理推送通知的步骤如下：

1. 使用 UniPush：通过 DCloud 提供的 UniPush 服务实现推送通知。
2. 使用第三方推送服务：集成极光推送或个推等第三方推送服务。
3. 处理推送通知：通过监听推送消息和点击事件处理通知。

以下是一个完整的 UniPush 示例：

1. manifest.json 配置

{
  "app-plus": {
    "distribute": {
      "ios": {
        "unipush": {
          "enabled": true
        }
      },
      "android": {
        "unipush": {
          "enabled": true
        }
      }
    }
  }
}

2. App.vue 初始化

export default {
  onLaunch() {
    uni.getPushClientId({
      success: (res) => {
        console.log('推送客户端 ID：', res.cid);
      },
      fail: (err) => {
        console.log('获取推送客户端 ID 失败：', err);
      }
    });

    uni.onPushMessage((res) => {
      console.log('收到推送消息：', res);
      if (res.type === 'click') {
        uni.navigateTo({ url: '/pages/detail/detail' });
      }
    });
  }
};

通过合理使用这些方法，可以轻松实现 UniApp 中的推送通知功能，提升用户参与度。