「征文」在 cordova 中使用极光统计服务

写在前面：年前的时候，极光社区组织了一场征文活动，收到不少好的文章。现在打算和大家一起分享一下这些优秀的作品 :)

作者： Wilhan - 极光

原文：在 cordova 中使用极光统计服务

正文

这篇文字想要表达什么？分享一些cordova-plugin-janalytics的开发过程, 为 cordova 和极光新手提供帮助。
出于什么目的开发了cordova-plugin-janalytics? 主要是为了技术储备，在今后的项目中能更方便的使用极光统计服务。
为什么选择极光统计? 简单、免费、极光的名号。 ps.极光的商务部记得给我一些广告费啊:)

使用 cordova 极光统计插件

安装 cordova plugin install cordova-plugin-janalytics --variable API_KEY=极光 KEY --variable CHANNEL=渠道名
项目中调用极光统计 Janalytics.onPageStart("登陆页面", function(){}, function(err){});

更多更详细的用法请移步到cordova-plugin-janalytics

开发过程记录

准备工作

android 和 ios 的原生 janalytics-sdk
cordova 和plugman

创建并初始化 cordova 插件项目

创建插件项目 plugman create --name jcore --plugin_id cordova-plugin-jcore --plugin_version 0.0.1
向项目中添加 android 和 ios 平台 plugman platform add -platform_name android plugman platform add -platform_name ios

编写 plugin.xml

通过官方文档得知，极光统计 SDK 需要两个配置参数 APP_KEY 和 CHANNEL 其中 APP_KEY 极光分配的应用标示， CHANNEL 是作为渠道标示为了插件在多个项目中复用，故将 APP_KEY 和 CHANNEL 作为变量

<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-janalytics" version="1.0.4" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>JAnalytics</name>
    <description>JAnalytics for cordova plugin</description>
    <author>WilhanTian</author>
    <keywords>JAnalytics,analytics</keywords>
    <license>MIT License</license>

    <preference name="APP_KEY"/><!--应用 ID-->
    <preference name="CHANNEL" default="DEFAULT_CHANNEL"/><!--渠道字符串 注意！禁止为纯数字-->

    <dependency id="cordova-plugin-jcore" version="1.0.1"/>

    <!--cordova 引擎版本限制-->
    <engines>
        <engine name="cordova" version=">=3.0" />
    </engines>

    <js-module name="JAnalytics" src="www/JAnalytics.js">
        <clobbers target="JAnalytics" />
    </js-module>
    
    <!--IOS-->
    <platform name="ios">
        <config-file parent="/*" target="config.xml">
            <feature name="JAnalytics">
                <param name="ios-package" value="JAnalytics" />
            </feature>
        </config-file>

        <config-file parent="JAnalytics" target="*-Info.plist">
			<dict>
				<key>APP_KEY</key>
				<string>$APP_KEY</string>
                <key>CHANNEL</key>
				<string>$CHANNEL</string>
			</dict>
		</config-file>
        
        <!--库依赖-->
        <framework src="UIKit.framework" weak="true" />
        <framework src="SystemConfiguration.framework" weak="true" />
        <framework src="CoreTelephony.framework" weak="true" />
        <framework src="CoreGraphics.framework" weak="true" />
        <framework src="Security.framework" weak="true" />
        <framework src="Foundation.framework" weak="true" />
        <framework src="CoreLocation.framework" weak="true" />
        <framework src="CoreFoundation.framework" weak="true" />
        <framework src="CFNetwork.framework" weak="true" />
        <framework src="libz.tbd" weak="true" />
        <framework src="libresolv.tbd" weak="true" />

        <!--库文件-->
        <header-file src="src/ios/libs/JANALYTICSService.h" />
        <header-file src="src/ios/libs/JANALYTICSEventObject.h" />
        <source-file src="src/ios/libs/janalytics-ios-1.0.0.a" framework="true" />
        <!--IOS 插件源码-->
        <header-file src="src/ios/JAnalytics.h" />
        <source-file src="src/ios/JAnalytics.m" />
    </platform>

    <!--Android-->
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="JAnalytics">
                <param name="android-package" value="org.cordova.plugin.janalytics.JAnalytics" />
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml"/>

        <!--权限-->
		<config-file parent="/manifest" target="AndroidManifest.xml">
            <uses-permission android:name="android.permission.RECEIVER_USER_PRESENT" />
            <uses-permission android:name="android.permission.INTERNET" />
            <uses-permission android:name="android.permission.READ_PHONE_STATE" />
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
            <uses-permission android:name="android.permission.WRITE_SETTINGS" />
            <uses-permission android:name="android.permission.VIBRATE" />
            <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
            <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
            <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
            <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
            <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
            <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
            <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
            <uses-permission android:name="android.permission.GET_TASKS" />
            <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
		</config-file>
        
        <!--基础配置-->
		<config-file parent="/manifest/application" target="AndroidManifest.xml">
            <meta-data android:name="JPUSH_APPKEY" android:value="$APP_KEY"/>
            <meta-data android:name="JPUSH_CHANNEL" android:value="$CHANNEL"/>
		</config-file>

        <!--jar 包-->
        <source-file src="src/android/libs/janalytics-android_v1.0.0.jar" target-dir="libs" />
        <!--java 源码-->
        <source-file src="src/android/JAnalytics.java" target-dir="src/org/cordova/plugin/janalytics" />
    </platform>
</plugin>

标签解析:

preference: 用于声明变量定义。可以在安装时plugin plugin install 插件名 --variable 变量名=变量注入变量。
dependency: 从属 /依赖插件。当一个插件需要使用另外一个插件时使用。
framework: 用于引入 IOS 平台静态 /动态库。
header-file: 引入.h 文件，主要用在 IOS 平台下。
source-file: 引入插件源码。.mm .m .cpp .java和.jar等文件都可以使用此标签引入。
uses-permission: 声明 Andorid 平台 APP 所需权限。
js-module: 插件 js 模块定义。这些标签都可以在cordova 文档中找到

让 js 调用原生 janalytics

使用 plugman 创建工程后，已经默认帮你创建了一个 java 和 oc 类，只需要两个类中撰写相关业务即可。

Android 示例

public class JAnalytics extends CordovaPlugin {

    @Override
    protected void pluginInitialize() {
        //初始化极光统计服务
        JAnalyticsInterface.init(this.cordova.getActivity().getApplication());
    }

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
        if(action.equals("onPageStart")){//判断动作名
            String pageName = args.getString(0);//从 json 数组中取出第一个参数
            JAnalyticsInterface.onPageStart(this.cordova.getActivity(), pageName);//向统计一个页面进入事件
            callbackContext.success();//反馈给 js 回调函数
        }
        return true;
    }
}

IOS 实例

@implementation JAnalytics

- (void)pluginInitialize
{
    // 从 plist 中读取变量
    NSDictionary *plistDic = [[NSBundle mainBundle] infoDictionary];
    NSString* APP_KEY = [[plistDic objectForKey:@"JAnalytics"] objectForKey:@"APP_KEY"];
    NSString* CHANNEL = [[plistDic objectForKey:@"JAnalytics"] objectForKey:@"CHANNEL"];
    
    // 初始化极光统计服务
    JANALYTICSLaunchConfig * config = [[JANALYTICSLaunchConfig alloc] init];
    config.appKey = APP_KEY;
    config.channel = CHANNEL;
    [JANALYTICSService setupWithConfig:config];
}

// js 的动作名会自动映射到 oc 方法名上
- (void)onPageStart:(CDVInvokedUrlCommand *)command
{
    NSString* pageName = [command.arguments objectAtIndex:0];//从字典中取出第一个参数
    [JANALYTICSService startLogPageView:pageName];//向统计一个页面进入事件
    
    //反馈给 js 回调函数
    CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

编写插件 API

www/JAnalytics.js

示例

var exec = require('cordova/exec');

// 页面启动接口
exports.onPageStart = function(pageName, success, error) {
    pageName = pageName || "";
    exec(success, error, "JAnalytics", "onPageStart", [pageName]);
};

enjoy

如果 cordova-plugin-janalytics 帮助了你，那就请给个 Star 吧；如果发现有 bug 或者有意见，欢迎在 github 中 PR 和 issues 。

欢迎关注知乎专栏：极光日报