前言:之前做过两次,但每次开始的时候总是忘记流程。最近又做了一次,所以记录一下以便于查阅。

一:代码部分(该部分不分ios和android)

 

由于我的flutter版本没有更新到最新的所以
我导入的是 : jpush_flutter: ^0.6.3
如果flutter是最新的小伙伴可以使用 jpush_flutter: ^2.1.2

下面是代码部分

import 'package:jpush_flutter/jpush_flutter.dart';
import '../caches/caches_index.dart';//我项目下面的工具类路径

///极光推送配置
class AppJPush {

  static final JPush jPush = new JPush();
	
  static Future<void> initialized() async {
    jPush.setup(
    	//填写在极光官网 组册的 该应用的 **ios系统的** appKey
        appKey: '14235jkadhakhjafhs',
        channel: 'theChannel',
        production: false,
        debug: true);
    //TODO 设置别名
    //jPush.setAlias("123");//随便填的测试使用的
    jPush.setAlias(SharedStorage.userId);///我这边是根据userId设置别名
    /// 监听jPush
    jPush.applyPushAuthority(
        new NotificationSettingsIOS(sound: true, alert: true, badge: true));
    jPush.addEventHandler(
      onReceiveNotification: (Map<String, dynamic> message) async {
        print(message);
      },
      onOpenNotification: (Map<String, dynamic> message) async {
        /// 点击通知栏消息,在此时通常可以做一些页面跳转等。。。
        ///可根据自己项目需求结合插件官方文档自行写入
      },
    );
  }
}

一般在登陆的时候进行使用,将下面代码写入登陆方法里

AppJPush.jPush.setAlias('别名 名称');

退出的时候删除别名

AppJPush.jPush.deleteAlias();

在启动的时候也写个方法在main.dart里面

AppJPush.initialized();

二:极光官网

1: 极光开发者官网:https://www.jiguang.cn/ 2:登陆账号后右上角找到并点击‘服务中心’

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter


3:进入之后点击‘开发者平台’

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_02


4:再进入后点击创建应用

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_03


以上就是 极光官网 创建应用的流程!具体ios和android 的创建会在下面分别说明!

三:配置android
1.项目:找到项目下面的 android/app/build.grade 配置文件 按下图所示

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_04


按上图填写如下内容:

manifestPlaceholders = [
                JPUSH_PKGNAME : applicationId,
                JPUSH_APPKEY : "982374892738957jskdfhj", // NOTE: JPush 上注册的包名对应的 Appkey.
                JPUSH_CHANNEL : "developer-default", //暂时填写默认值即可.
        ]

2:android极光官网配置

在上面的 第二步 创建应用操作之后,进入系统选择页面,默认选择的是android系统 。点击下一步,出现下面界面。

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_05


应用包名是在 项目路径下面的:android/app/src/main/AndroidMainfest.xml 里面查找,如图:

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_06


填写完之后点击下一步就可以了,然后返回到应用管理里面,查看创建的应用信息。

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_android_07


将应用密钥,也就是appKey 复制到 项目路径下面的 android/app/build.grade 配置文件的 ‘JPUSH_APPKEY’后面。 到此android的推送就配置完成了。

四:ios(以一个新项目来演示)
注:该过程需要Macbook电脑,还需要一个苹果开发者账号,该账号是要交钱的,600多一年,具体多少忘记了,这边也不提供具体的账号交费流程了,有需要的小伙伴还请研究下其他文章。

1:得到Bundle Id
有了个人开发者账号,那么开始进入苹果开发者官网进行登录。https://developer.apple.com 进入之后点击右上角Account,然后登录账号。

进入之后点击中间那个,如下流程图:

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_android_08


进入之后,再如图;

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_android_09


flutter的iOS首次弹出网络权限弹窗 flutter ios推送_android_10


flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_11


flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_12


在上图页面下拉:找到push Notifications,勾选

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_13

该流程得到了Bundle Id:com.abc.flutter(自行命名,后面有用)

2:xcode配置

在xcode 开发工具中,打开该项目的,ios目录下面的Runner.xcworkspace文件,注意别打开上面那个文件了,那个文件运行会出现坑(亲测)

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_14


将上面1中得到的com.abc.flutter 填写入Bundle Identifier 里面

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_15


接着 如下图 找到signing&capabilities

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_android_16


之后出现

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_17


到此xcode就配置完成了!

3:配置ios系统的极光推送

先回到 苹果开发者中心,还是点击中间那个按钮。再点击下图的 + 按钮

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_18


进入下级页面后下拉,找到下图

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_19


这边先创建第二个生产证书,进入下一级页面如图,选择你的Bundle Id

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_20


flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_21


到这里需要选择证书了。获得证书的方法如下在当前macbook的其他里面找到“钥匙串访问”

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_22


打开之后进行下面操作,点击 从证书颁发机构请求证书

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_android_23


接下来会进入下面页面,常用名称填 电脑拥有者姓名 就可以

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_android_24


之后会得到一个文件,保存到桌面上。

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_25

接下来打开你的苹果开发者官网,在上次没有填写完的页面 点击 choose File,选择上面创建的在桌面上的文件。点击下一步,再点击右上角 Download,下载下来。会得到一个名字为 aps.cer 的文件。

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_26


双击打开之后会进入 钥匙串访问

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_27

右键点击刚创建的对应的证书然后 选择 导出,文件格式为.p12,然后存储(最好在桌面单独创建个文件夹来管理这些证书)

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_android_28


上面创建的是 生产证书,开发证书创建方式相同,在开发者中心选择第2个创建即可。4:接下来回到 极光应用管理,创建新的应用。选择 ios

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_flutter_29


选择下一步。。。

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_android_30


根据上图选择2步骤中最后得到的.p12 格式的证书,填入点击下一步,然后返回查看该应用的信息,得到appKey,填写到最开始的代码中就完成了!

五:推送测试
不需要在代码中写推送测试代码
很简单在 极光官网 进行推送也可以。

如图:

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_android_31


flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_32


设置别名推送。别名可以和后端开发商讨设置什么为 唯一别名

flutter的iOS首次弹出网络权限弹窗 flutter ios推送_官网_33


最好重新设置好之后重新debug项目,然后再使用网页推送。