第17课：集成极光

末蓝、 2022-12-09 11:48 214阅读 0赞

知识点：

*  集成极光
 *  集成友盟

### 集成极光 ###

#### 极光设置 ####

创建一个新的应用，名字可以随便。

![enter image description here][]

配置“推送设置”信息，这里 Android 输入框中填写我们自己的包名，默认是 com.；项目名称，这里的项目名称就是使用 RN 命令创建的时候输入的名称；iOS 的设置只需要上传证书，这里就不展示了。

![enter image description here][enter image description here 1]

### 安装包 ###

极光有一个官方维护的 npm 包，[单击这里查看 Github 地址][Github]。

在项目根目录执行 npm install jpush-react-native jcore-react-native --save 命令安装第三方包。

执行命令 react-native link 尝试自动 link 原生部分，这个过程需要输入一次 appkey，该值在刚才创建的应用设置中可看到。

![enter image description here][enter image description here 2]

这里稍微注意一下，微信的 link 之前是改动过的，如果使用这种方式的话会导致之前的配置被修改，需要再手动改回去。

也可以指定包名称去 link，比如 react-native link jpush-react-native。

#### iOS 手动配置 ####

使用 Xcode 打开 iOS 项目，修改配置`TARGETS-> BUILD Phases -> LinkBinary with Libraries`，将 require 修改成 optional。

![enter image description here][enter image description here 3]

如果要使用 iOS 的推送，需要修改下面这个地方，将 off 修改为 on，此时需要登录 iOS 的开发者账户。

![enter image description here][enter image description here 4]

#### Android 手动配置 ####

修改安装的配置文件 /android/app/build.gradle，一般情况下 Appkey 已经填好了，只需要引入推送的两个包就好了。

android {
        defaultConfig {
            applicationId "com.anxintao"
            ...
            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
    }

![enter image description here][enter image description here 5]

修改 /android/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')

![enter image description here][enter image description here 6]

检查一下参数，默认情况下这个配置是好的，文件路径 /android/app/src/main/AndroidManifest.xml。

![enter image description here][enter image description here 7]

最后还要修改 Java 文件，将推送的包加入到 RN 组件中，文件路径 /android/app/src/main/java/com/anxintao/MainApplication.java，导入 Java 包并设置参数。

![enter image description here][enter image description here 8]

下面是一个调用推送的 demo。

import JPushModule from 'jpush-react-native';
    
    ...
    
    // example
    componentDidMount() {
        JPushModule.notifyJSDidLoad();
        JPushModule.addReceiveCustomMsgListener((message) => {
          this.setState({pushMsg: message});
        });
        JPushModule.addReceiveNotificationListener((message) => {
          console.log("receive notification: " + message);
        })
      }
    
      componentWillUnmount() {
        JPushModule.removeReceiveCustomMsgListener();
        JPushModule.removeReceiveNotificationListener();
      }

### 集成友盟 ###

友盟的推送、统计、分享等功能真的非常实用，这里还是推荐集成一个的。

首先要在官网下载友盟的 SDK，这里 Android 和 iOS 是区别下载的，要根据自己的需求来下载具体的 SDK，[下载地址请单击这里][Link 1]。

![enter image description here][enter image description here 9]

如果选择了分享 SDK，这里注意一下，在选择了之后是可以单独设置分享到那些平台的。

![enter image description here][enter image description here 10]

#### Android 集成 ####

首先要将下载的 jar 包导入到项目的 app/libs 下，如果文件夹不存在可以创建一个新的。

![enter image description here][enter image description here 11]

![enter image description here][enter image description here 12]

如果内部还包含依赖，比如下面这个就是还有依赖，里面的文件还包括 .so 后缀的文件，此时需要将整个文件夹也拷贝进去。

![enter image description here][enter image description here 13]

在 MainApplication.java 中添加友盟的初始化配置，这里第三个参数就是推送的 key，如果没有集成推送可以不填。

![enter image description here][enter image description here 14]

如果提示 UMConfigure 找不到引用，这应该是刚才导入的 jar 包没有引用到项目所导致的，可以在 jar 上点击右键，在弹出的菜单中选择 add as lib… 将 jar 包链接到我们的项目。

![enter image description here][enter image description here 15]

现在来修改 AndroidManifest.xml 文件，将相关权限和友盟的 Appkey 等信息填进去。

![enter image description here][enter image description here 16]

填写 key 的时候注意一下，key 是填写在 application 节点下的。

![enter image description here][enter image description here 17]

如果需要统计页面的消息，还需要在首页加入统计的代码，在 MainActivity.java 中设置开启统计，默认创建的代码是没有 onCreate 方法的，需要我们自己来添加这个方法。

![enter image description here][enter image description here 18]

#### iOS 集成 ####

请在你的工程目录结构中，添加友盟统计框架，在选项 TARGETS→Build Phases→Link Binary With Libraries→Add Other，选择文件 UMMobClick.framework 等文件并选择确认。

检查下面的引用库，查看是否存在下面的几个库，没有就添加上就好了。

![enter image description here][enter image description here 19]

SystemConfiguration.framework
    CoreGraphics.framework
    CoreTelephony.framework
    ImageIO.framework
    libsqlite3.tbd
    libc++.tbd
    libz.tbd

如果有更多的分享还需要将分享的平台加入白名单。

![enter image description here][enter image description here 20]

在 AppDelegate.m 中添加友盟的初始化代码，如果提示引用错误，请返回检查 link 的库是否正确。

#import <UMCommon/UMConfigure.h>
    
    
      [UMConfigure setLogEnabled:YES];
      [UMConfigure initWithAppkey:@"599d6d81c62dca07c5001db6" channel:@"App Store"];
      //统计
      [MobClick setScenarioType:E_UM_NORMAL];

到这里友盟的集成就告一段落了，更多更详细的设置还需要大家在后面自行研究，如果你对 iOS 的语法不熟悉的话还是建议先学一学，后面需要设置的东西更加精细化也更加复杂，若对 iOS 没有一定的了解的话很难解决其中遇到的问题。

如果想了解集成支付宝的可以参考支付宝第三方组件，[详见这里][Link 2]。

[enter image description here]: /images/20221123/70aad625d7894e7b869ab9cb3b27e63d.png
[enter image description here 1]: /images/20221123/4c258eb3ed244df09db7847439cc7cf7.png
[Github]: https://github.com/jpush/jpush-react-native
[enter image description here 2]: /images/20221123/08fdec9fcba14f8a8389aca4d9506203.png
[enter image description here 3]: /images/20221123/d1ea25a236104b29b3fad9e160a8dc64.png
[enter image description here 4]: /images/20221123/98622a5d176547a6b45be38a78271723.png
[enter image description here 5]: /images/20221123/a6b865da761b40a983ca48dc42c6fae2.png
[enter image description here 6]: /images/20221123/df2c0b5f38fc4682b6393c625a3dfba9.png
[enter image description here 7]: /images/20221123/8423dab599514dbab8d572a5848515a2.png
[enter image description here 8]: /images/20221123/81b5669abb2f4a13b8c94ec849912239.png
[Link 1]: https://developer.umeng.com/sdk/ios
[enter image description here 9]: /images/20221123/b4f93016e1714308817ef0912d904312.png
[enter image description here 10]: /images/20221123/ad71d7bd02a94cfc8fcb2041dd436d42.png
[enter image description here 11]: /images/20221123/058ba2739dd04da491b796bf47e34168.png
[enter image description here 12]: /images/20221123/b728a1d1835a4855af330781769dcc6b.png
[enter image description here 13]: /images/20221123/06ef5aa97e544e1597228642e83a7dd4.png
[enter image description here 14]: /images/20221123/cdbd149a414f4a988266ada03c0abdb7.png
[enter image description here 15]: /images/20221123/ef02c524a7eb4b3d89323013f4aab5fc.png
[enter image description here 16]: /images/20221123/aeeb84bcfbd8461f91be3ba42ff13026.png
[enter image description here 17]: /images/20221123/81c46c7e434e4ed7923575a0f7602b06.png
[enter image description here 18]: /images/20221123/ee7c752c0b344f8f824a7c05e6c167e7.png
[enter image description here 19]: /images/20221123/27e8e2c1027542b59c7610e0eeea284d.png
[enter image description here 20]: /images/20221123/fdda08ab8b744b4fa00e4fc1438d2ef6.png
[Link 2]: https://www.npmjs.com/package/react-native-alipay