第10集：uni-app 推送功能

章节概述

推送功能是移动应用中非常重要的一个特性，它能够帮助应用主动向用户发送消息通知，提高用户活跃度和留存率。uni-app 提供了跨平台的推送能力，开发者可以通过统一的 API 实现多端推送功能。本章节将详细介绍 uni-app 中的推送功能，包括推送 API 的使用、消息订阅、推送配置以及多端推送集成等核心知识点，并通过实用案例帮助开发者掌握消息推送功能的实现方法。

核心知识点

1. 推送 API 介绍

uni-app 提供了 uni.push API 用于实现推送功能，主要包括以下方法：

uni.push.register(): 注册推送服务
uni.push.getClientInfo(): 获取客户端推送标识
uni.push.subscribe(): 订阅推送主题
uni.push.unsubscribe(): 取消订阅推送主题
uni.push.on(): 监听推送事件
uni.push.off(): 取消监听推送事件

2. 消息订阅机制

消息订阅是推送功能中的重要概念，它允许应用根据用户的兴趣和行为，向特定用户群体发送个性化的推送消息。uni-app 支持基于主题的订阅机制，开发者可以通过 uni.push.subscribe() 方法订阅特定主题，当有消息发送到该主题时，订阅了该主题的用户将收到推送通知。

3. 推送配置

在使用推送功能之前，开发者需要在各平台进行相应的配置：

App 端：需要在 manifest.json 中配置推送相关参数，如厂商通道配置
微信小程序：需要在微信公众平台配置消息推送
其他小程序：需要在对应平台的开发者后台配置推送服务

4. 多端推送集成

uni-app 支持多端推送，包括：

App 端：支持极光推送、个推、华为、小米、OPPO、vivo 等厂商推送
微信小程序：支持模板消息和订阅消息
支付宝小程序：支持支付宝消息推送
其他平台：支持对应平台的推送服务

实用案例

实现消息推送功能

案例描述

开发一个消息推送功能，实现以下功能：

注册推送服务
获取客户端推送标识
订阅推送主题
监听推送消息
处理推送消息点击事件

代码示例

注册推送服务

// 在 App.vue 的 onLaunch 生命周期中注册推送服务
onLaunch() {
  // 注册推送服务
  uni.push.register({
    provider: 'jpush', // 推送服务提供商，如 jpush、getui 等
    success(res) {
      console.log('推送服务注册成功:', res);
    },
    fail(err) {
      console.log('推送服务注册失败:', err);
    }
  });
  
  // 监听推送消息
  uni.push.on('receive', function(res) {
    console.log('收到推送消息:', res);
    // 处理推送消息
    uni.showToast({
      title: '收到新消息',
      duration: 2000
    });
  });
  
  // 监听推送消息点击事件
  uni.push.on('click', function(res) {
    console.log('点击推送消息:', res);
    // 处理推送消息点击事件
    uni.navigateTo({
      url: '/pages/message/detail?id=' + res.data.id
    });
  });
}

获取客户端推送标识

// 获取客户端推送标识
uni.push.getClientInfo({
  success(res) {
    console.log('获取客户端推送标识成功:', res);
    // 将 clientId 发送到服务器，用于定向推送
    const clientId = res.clientId;
    // 调用后端 API 保存 clientId
    saveClientId(clientId);
  },
  fail(err) {
    console.log('获取客户端推送标识失败:', err);
  }
});

// 保存 clientId 到服务器
function saveClientId(clientId) {
  uni.request({
    url: 'https://api.example.com/save-client-id',
    method: 'POST',
    data: {
      clientId: clientId,
      userId: uni.getStorageSync('userId')
    },
    success(res) {
      console.log('保存 clientId 成功:', res);
    },
    fail(err) {
      console.log('保存 clientId 失败:', err);
    }
  });
}

订阅推送主题

// 订阅推送主题
uni.push.subscribe({
  topic: 'news', // 订阅的主题
  success(res) {
    console.log('订阅主题成功:', res);
  },
  fail(err) {
    console.log('订阅主题失败:', err);
  }
});

// 取消订阅推送主题
uni.push.unsubscribe({
  topic: 'news', // 取消订阅的主题
  success(res) {
    console.log('取消订阅主题成功:', res);
  },
  fail(err) {
    console.log('取消订阅主题失败:', err);
  }
});

推送配置（manifest.json）

{
  "name": "uni-app-push-demo",
  "appid": "__UNI__XXXXXX",
  "description": "uni-app 推送功能示例",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": true,
  "app-plus": {
    "push": {
      "jpush": {
        "appkey": "your_jpush_appkey",
        "channel": "your_jpush_channel"
      }
    },
    "modules": {
      "Push": {
        "description": "消息推送"
      }
    }
  },
  "mp-weixin": {
    "appid": "your_wechat_appid",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  }
}

常见问题与解决方案

1. 推送服务注册失败

问题：调用 uni.push.register() 失败。

解决方案：

检查 manifest.json 中的推送配置是否正确
确保推送服务提供商的 AppKey 和 Channel 配置正确
检查网络连接是否正常
对于 App 端，确保已添加推送模块

2. 无法收到推送消息

问题：注册推送服务成功，但无法收到推送消息。

解决方案：

检查推送服务提供商的后台是否正确配置
确保客户端已正确注册并获取到 clientId
检查推送消息的格式是否正确
对于 App 端，检查厂商通道配置是否正确
对于小程序端，检查是否已获得用户授权

3. 推送消息点击事件不触发

问题：收到推送消息，但点击消息后不触发 click 事件。

解决方案：

确保已正确监听 click 事件
检查推送消息的格式是否包含必要的参数
对于 App 端，检查应用是否在前台运行
对于小程序端，检查是否已配置消息点击跳转逻辑

学习总结

本章节详细介绍了 uni-app 中的推送功能，包括推送 API 的使用、消息订阅、推送配置以及多端推送集成等核心知识点，并通过实用案例帮助开发者掌握消息推送功能的实现方法。通过本章节的学习，开发者应该能够：

了解 uni-app 推送功能的基本概念和原理
掌握 uni.push API 的使用方法
学会配置多端推送服务
实现消息推送功能和消息订阅机制
解决推送功能开发中遇到的常见问题

推送功能是移动应用中非常重要的一个特性，它能够帮助应用主动向用户发送消息通知，提高用户活跃度和留存率。开发者应该根据应用的实际需求，合理使用推送功能，避免过度推送导致用户反感。同时，开发者还应该关注各平台的推送政策和规范，确保推送内容符合平台要求。

练习与思考

实现一个完整的推送功能，包括注册推送服务、获取客户端推送标识、订阅推送主题、监听推送消息等功能。
配置多端推送服务，包括 App 端和小程序端。
设计一个推送消息的后端服务，实现向特定用户或用户群体发送推送消息的功能。
思考如何通过推送功能提高应用的用户活跃度和留存率。
了解各平台的推送政策和规范，确保推送内容符合平台要求。