用 jpush-react-native 插件快速集成推送功能（Android 篇）

概述

jpush-react-native 是极光推送官方开发的 React Native 版本插件，可以快速集成推送功能（Github 项目中包含了 example，文中提到的 demo 来源于此）。现在最新版本的 JPush SDK 分离了 JPush 及 JCore，让开发者可以分开集成 JMessage 及 JPush（以前 JMessage 包含了 JPush）。下面就来具体说一下如何快速集成以及使用 jpush-react-native 插件。

安装

npm install jpush-react-native --savenpm install jcore-react-native --save ## jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native

配置

配置包括两个步骤，自动配置和手动操作。

一、自动配置部分（以下命令均在你的 React Native Project 目录下运行，自动配置后仍需手动配置一部分）

• 执行脚本

npm run configureJPush <yourAppKey> <yourModuleName>//module name 指的是你 Android 项目中的模块名字(对 iOS 没有影响，不填写的话默认值为 app，会影响到查找 AndroidManifest 问题，//如果没找到 AndroidManifest，则需要手动修改，参考下面的 AndroidManifest 配置相关说明)//举个例子:npm run configureJPush d4ee2375846bc30fa51334f5 app

• Link 项目

//执行自动配置脚本后再执行 link 操作react-native link

二、手动操作部分 （3个步骤）

• 第一步：修改 app 下的 build.gradle 配置：

your react native project/android/app/build.gradle

android {    defaultConfig {        applicationId "yourApplicationId"        ...        manifestPlaceholders = [                JPUSH_APPKEY: "yourAppKey", //在此替换你的APPKey                APP_CHANNEL: "developer-default"    //应用渠道号        ]    }}...dependencies {    compile fileTree(dir: "libs", include: ["*.jar"])    compile project(':jpush-react-native')  // 添加 jpush 依赖    compile project(':jcore-react-native')  // 添加 jcore 依赖    compile "com.facebook.react:react-native:+"  // From node_modules}

将此处的 yourApplicationId 替换为你的项目的包名；yourAppKey 替换成你在官网上申请的应用的 AppKey。

• 第二步：检查是否导入以下配置项：

i. 检查一下 dependencies 中有没有添加 jpush-react-native 及 jcore-react-native 这两个依赖。

your react native project/android/app/build.gradle

...dependencies {    compile fileTree(dir: "libs", include: ["*.jar"])    compile project(':jpush-react-native')  // 添加 jpush 依赖    compile project(':jcore-react-native')  // 添加 jcore 依赖    compile "com.facebook.react:react-native:+"  // From node_modules}

ii. 检查 android 项目下的 settings.gradle 配置有没有包含以下内容：

settings.gradle

include ':app', ':jpush-react-native', ':jcore-react-native'project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')

iii. 检查一下 app 下的 AndroidManifest 配置，有没有增加 <meta-data> 部分。

your react native project/android/app/AndroidManifest.xml

    <application        ...        <!-- Required . Enable it you can get statistics data with channel -->        <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>        <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>    </application>

iiii. 现在重新 sync 一下项目（点击 Android Studio sync 按钮），应该能看到 jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了。

• 第三步：加入 JPushPackage (找到 app 下的 MainApplication.java)：

app/src.../MainApplication.java

    private boolean SHUTDOWN_TOAST = false;    private boolean SHUTDOWN_LOG = false;    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {        @Override        protected boolean getUseDeveloperSupport() {            return BuildConfig.DEBUG;        }        @Override        protected List<ReactPackage> getPackages() {            return Arrays.<ReactPackage>asList(                    new MainReactPackage(),                    //加入 JPushPackage                    new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)            );        }    };

上面 JPushPackage 的两个参数是 bool 类型的，第一个参数设置为 true 表示关闭 toast 提示，第二个设置为 true 表示关闭日志打印，建议在 debug 版本中打开。然后在 MainActivity 中加入一些初始化代码即可：

app/src.../MainActivity.java

public class MainActivity extends ReactActivity {        ...    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        JPushInterface.init(this);    }    @Override    protected void onPause() {        super.onPause();        JPushInterface.onPause(this);    }    @Override    protected void onResume() {        super.onResume();        JPushInterface.onResume(this);    }}

这样就完成了所有的配置。接下来就可以在 JS 中调用插件提供的 API 了。

使用

收到推送

添加了此事件后，在收到推送时将会触发此事件。

需要注意的是，v1.6.6 版本以后，增加了 notifyJSDidLoad 方法，在监听所有相关事件之前要调用此方法，否则不会收到点击通知事件。

example/react-native-android/push_activity.js

...import JPushModule from 'jpush-react-native';...export default class PushActivity extends React.Component {    componentDidMount() {        // 在收到点击事件之前调用此接口        JPushModule.notifyJSDidLoad((resultCode) => {            if (resultCode === 0) {            }        });        JPushModule.addReceiveNotificationListener((map) => {            console.log("alertContent: " + map.alertContent);            console.log("extras: " + map.extras);            // var extra = JSON.parse(map.extras);            // console.log(extra.key + ": " + extra.value);        });}

点击通知

在用户点击通知后，将会触发此事件。

...componentDidMount() {    JPushModule.addReceiveOpenNotificationListener((map) => {            console.log("Opening notification!");            console.log("map.extra: " + map.key);        });}

高级应用

点击通知跳转到指定界面，需要在 Native 中声明一个 Activity，如 demo 中的 SecondActivity，而 SecondActivity 的界面仍然用 JS 来渲染。只需要改动一下 SecondActivity，让它继承自 ReactActivity 即可：

example/android/app/src.../SecondActivity.java

public class SecondActivity extends ReactActivity {    @Override    protected String getMainComponentName() {        return "SecondActivity";    }}

声明完成后，需要在 AndroidManifest 中声明一下（必要的时候可以声明 Activity 的启动模式，以更好地适配自己的需求）。

AndroidManifest.xml

...<application>    ...    <activity android:name=".SecondActivity"/></application>

然后使用 SecondActivity 中返回的字符串 “SecondActivity” 注册一个 Component 即可：

example/react-native-android/second.js

import React from 'react';import ReactNative from 'react-native';const {  AppRegistry,  Text,} = ReactNative;export default class second extends React.Component {     constructor(props) {         super(props);     }     render() {       return (        <Text> Welcome ! </Text>         );    } }AppRegistry.registerComponent('SecondActivity', () => second);

最后监听点击通知事件，并完成跳转：

JPushModule.addReceiveOpenNotificationListener((map) => {    console.log("Opening notification!");    console.log("map.extra: " + map.extras);    JPushModule.jumpToPushActivity("SecondActivity");});

这样就完成了用户点击通知后的自定义跳转界面。

接收自定义消息

在用户收到自定义消息后触发。

example/react-native-android/push_activity.js

 ...    componentDidMount() {        JPushModule.addReceiveCustomMsgListener((map) => {            this.setState({                pushMsg: map.message            });            console.log("extras: " + map.extras);        });...

得到 RegistrationId

用户注册成功后（一般在用户启动应用后），如果订阅了这个事件，将会收到这个 registrationId。

...    componentDidMount() {        JPushModule.addGetRegistrationIdListener((registrationId) => {            console.log("Device register succeed, registrationId " + registrationId);        });    }

清除所有通知

建议在用户退出前台后调用。

    ...    componentWillUnmount() {        console.log("Will clear all notifications");        JPushModule.clearAllNotifications();    }

设置标签

example/react-native-android/set_activity.js

    ...    setTag() {        if (this.state.tag !== undefined) {            /*            * 请注意这个接口要传一个数组过去，这里只是个简单的示范            */                  JPushModule.setTags(["VIP", "NOTVIP"], () => {                console.log("Set tag succeed");            }, () => {                console.log("Set tag failed");            });        }    }

设置别名

    ...    setAlias() {        if (this.state.alias !== undefined) {            JPushModule.setAlias(this.state.alias, () => {                console.log("Set alias succeed");            }, () => {                console.log("Set alias failed");            });        }    }

以上就是插件提供的主要接口的示例。总的来说，配置和使用都比较简单，适合开发者快速集成推送功能。

[阅读全文]

---

2017最新发布到App Store上架流程—详细图文

2017-03-16 by qtb000

如果你是新手，将在这里清晰发布到App Store整个上架流程，还有相应的流程解决方案。

如果你上架过iOS APP，这里会了解到有更快捷的上架过程。

上架iOS最基本需要一个付费的开发者账号，还没有的话申请一个或者借用。

如果只是安装到自己测试，现在有个新技术用普通的苹果id就能申请ios证书进行真机调试了。

免开发者账号申请ios证书真机调试介绍

ios上架通常也还需要一台Mac电脑，不过这里介绍到不用Mac在Windows系统中直接发布iOS APP到App Store。

如果没有Mac，也无所谓。

申请开发者账号介绍

iOS APP上架需要创建一个APP ID、申请iOS发布证书、再用iOS证书打包IPA，然后在上传IPA到App Store

上架过程分七个步骤，按步骤一步步来，清晰了步骤就跟简单了，欢迎交流！

1、创建APP身份证（App IDs）

2、申请发布证书

3、申请发布描述文件

4、使用iOS证书编译打包IPA

5、在iTunes Connect创建App

6、Windows下上传IPA到App Store

7、上传好IPA回到iTunes Connect填写APP信息并提交审核

一、创建唯一标示符App IDs

APP IDs在后面创建发布文件，创建APP时都要用到。

首先打开开发者中心https://developer.apple.com/cn/，进入证书页面。

1.1点击证书、ID及配件文件，进入设置。

1.2选择App IDs –>点击+创建一个新的App ID

其中有两项需要你自己填：

第一项Name，用来描述你的App ID，这个随便填，没有什么限制，最好是项目名称，这样方便自己辨识（不允许中文）

第二项Bundle ID (App ID Suffix)，这是你App ID的后缀，需要仔细填写。用来标示我们的 app，使它有一个固定的身份，和你的程序直接相关。填写 Explicit App ID 的格式为：com.company.appName，一定照着格式写，写个方便记的，后面很多地方要用到。

第三项App Services，默认会选择2项，不能修改，其它根据自己需要的服务选择上，然后点击Continue确认，下一步。

检查下没有错的话直接点击Register后点击Done完成App ID的创建。

二、申请发布证书

iOS证书申请要用到一个工具Appuploader，在win系统中辅助快速申请iOS证书，和后面上传IPA到App Store都要用到。

先安装好 Appuploader安装教程

2.1打开程序，输入苹果开发者中心账号，登录。



2.2选择Certification



2.3点击+ADD，这里有开发证书等等创建选项，这里选第三项发布证书。



2.4输入，证书名称（随意） 邮箱（任何邮箱都行） 密码（后面打包编译时用到）然后点击ok



2.5此时生成了好了一个发布证书，点击p12 File,下载证书文件，保存到电脑。

这样发布证书就创建好了。

三、申请发布描述文件

3.1回到软件点击Profiles



3.2点击+ADD，这里有开发描述文件等等选项，这里选发布描述文件。



3.3选择APP IDs，之前在开发者中心创建的，这里会自动出现。

3.4勾选刚创建的发布证书关联好，输入name，点击ok

3.5此时生成了发布描述文件，点击 Download下载到电脑保存

四、上传证书编译打包iOS

楼主做了几个开发工具的打包教程、可以参考下

xcode打包教程

HBuilder打包教程

APICloud打包教程

phonegap打包教程

这里以APPcan平台为例

4.1、选择完工的APP，点击应用打包，选择证书管理，iOS发布证书，上传之前申请的发布证书和申请时设置的密码及发布描述文件

点击检验，APP ids将自动出现，然后保存。

4.2选择云端打包，iOS打包，没有推送证书就不勾选支持推送，选择发布版证书，禁用http请求容易审核通过。

设置好版本号，选择appcan服务器，点击生成安装包。



4.3安装包生成成功后，下载保存到电脑，这个ipa包就可以上传到App Store了



五、在iTunes Connect创建App

5.1回到软件，点击ItunerConnect，进入iTunes Connect进入创建APP。

5.2选择我的APP点击左上角+号选择新建APP，输入你的应用名称，语言，套装ID，之前在开发者中心创建的对应APP IDs

（与创建iOS证书所选的appid要一致，这样用iOS证书打包的IPA，上传就能关联到了）

sku不能写中文，点击创建。

5.3这里提示要用到Xcode或者Application loader提交IPA，等下用Appuploader直接在Windows环境下上传ipa，不用Mac了。

现在APP各项信息都没填写，等下把IPA上传成功了再填写。

这里构建版本旁边还没有出现+号，后面上传了IPA就会出现，等下会用到。

六、Windows环境下上传IPA到App Store

6.1打开Appuploader程序，点击Upload.

6.2选择刚生成的iap包



6.3Appuploader将自动上传你的IPA，当出现以下提示时，说明上传成功，点击deail可以查看APP信息。



七、回到iTunes Connect提交审核

7.1上传好了IPA，然后回到iTunes Connect，进入填写信息的页面，下边有一个构建版本的选项，之前这旁边没有+号的，如果上传成功了，过几分钟旁边会出现一个加号按钮，点击一下+然后会出现你刚上传的APP，点击完成即可。

注意：如果一段时间后没有出现+号，可能ipa不符合要求，会有个反馈邮件过来，根据反馈的问题修改后重新上传。



7.2然后设置好APP相关的信息，截图、类别，价格、销售服务等。



7.2设置好相应的APP信息后，点击提交以供审核。



7.3提交审核回到我的APP查看会提示正在等待审核，审核要几天时间，常登陆看看审核情况

如果变成可供销售，恭喜你~上架成功了，如果显示被拒绝，点击查看问题，根据反馈修改再重新上传。