从零建立cordova插件(包括四大组件、架包、生命周期)

时间  2020-07-06
标签 建立 cordova 插件 包括 四大 组件 生命周期 栏目 Cordova 繁體版
原文   原文链接

1 介绍

本文将细致讲解cordova插件的建立、编写、plugin.xml配置、aar+jar+so架包配置、静态资源配置、四大组件php

2 开始整活一个简单cordova插件

2.1 初始化Cordova插件开发目录

初始化以前确保安装Cordovahtml

cordova create CordovaProject io.cordova.hellocordova CordovaApp
CordovaProject               是建立应用程序的目录名称。
io.cordova.hellocordova      是默认的反向域值。 若是可能，您应该使用您本身的域值。
CordovaApp                   是您应用的标题。

本人在jobProject下建立 CordovaProject前端

$ cordova create CordovaProject com.ths.toast ThsToast

此时根目录下会生成以下结构vue


在添加platforms和plugins以后，能够在此目录下打包java

CordovaProject$ cordova build android

应用的包名就是com.ths.toast,应用名称就是ThsToastnode

2.2 安装plugman

plugman是用于安装和卸载用于Apache Cordova项目的插件的命令行工具。
进入CordovaProject项目目录，安装plugmanlinux

$ npm install -g plugman

2.3 建立插件

2.3.1建立一个最简单的Toast插件

$ plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件版本]

为了方便管理，将插件建立在 Cordova 项目目录下的 plugins 文件夹下android

plugins$ plugman create --name ThsToast --plugin_id cordova-plugin-ths-toast --plugin_version 1.0.0


接着手动将ThsToast目录重命名为和上述plugin_id同样的值：cordova-plugin-ths-toast，这里以及上面的ths表示的是公司的统一标识，一般是英文字符串ios

进入插件目录，添加插件支持的平台环境git

cordova-plugin-ths-toast$ plugman platform add --platform_name android
cordova-plugin-ths-toast$ plugman platform add --platform_name ios

添加以后将在cordova-plugin-ths-toast目录下产生android和ios两个目录，此处只定义android环境的ThsToast,
生成的文件内容如图所示


注意：起名不要和安卓原生方法冲突了，好比这里ThsToast若是改为Toast，就会和android.widget.Toast中的Toast类重名，致使构建报错


2.3.2 插件配置

添加完平台后，cordova-plugin-ths-toast 目录下的 plugin.xml 文件将添加以下内容

修改 plugin.xml 文件内容以下

<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-ths-toast" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>Toast</name>
    <js-module name="ThsToast" src="www/ThsToast.js">
        <!-- target修改, 经过window.ThsToast.show或ThsToast.show便可调用api -->
        <clobbers target="ThsToast" />
    </js-module>

    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="ThsToast">
            <!-- param value修改，指向最终打包输出的主类完整路径 -->
                <param name="android-package" value="org.apache.cordova.thstoast.ThsToast" />
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml" />
        <!-- target-dir修改，输出到最终打包输出的主类完整目录路径 -->
        <source-file src="src/android/ThsToast.java" target-dir="src/org/apache/cordova/thstoast" />
    </platform>

    <platform name="ios">
        <config-file parent="/*" target="config.xml">
            <feature name="ThsToast">
                <param name="ios-package" value="ThsToast" />
            </feature>
        </config-file>
        <source-file src="src/ios/ThsToast.m" />
    </platform>
</plugin>

修改www/ThsToast.js，顺带提一下其中exec方法就是调用cordova插件的原始方法，该方法传的'ThsToast','show'和[arg0]，success,error参数对应的分别是android/ThsToast.java中的class类名，action和args，callbackContext.success，callbackContext.error



修改 android/ThsToast.java 文件,

2.3.3 写好README，给人鱼不放心，再给人渔杆

cordova-plugin-ths-toast$ touch README.md

2.3.4 初始化插件

npm init

提示的时候name输入插件id，其他根据提示填写，不清楚就直接按回车到结束，将建立一个 package.json 文件

{
  "name": "cordova-plugin-ths-toast",
  "version": "1.0.0",
  "description": "show toast",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/qtpalmtop/cordova-plugin-ths-toast.git"
  },
  "author": "lilin",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/qtpalmtop/cordova-plugin-ths-toast/issues"
  },
  "homepage": "https://github.com/qtpalmtop/cordova-plugin-ths-toast#readme"
}

接着修改package.json,keywords关键字配置是为了在Cordova Plugin Search中显示插件，engines配置是插件可能会列出多个发行版的依赖关系，以便在Cordova CLI选择要从npm获取的插件版本时向其提供指导，旨在最终替换plugin.xml中的engine元素。
详细内容请参考cordova建立插件

{
  "name": "cordova-plugin-ths-toast",
  "version": "1.0.0",
  "description": "show toast",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/qtpalmtop/cordova-plugin-ths-toast.git"
  },
  "author": "lilin",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/qtpalmtop/cordova-plugin-ths-toast/issues"
  },
  "homepage": "https://github.com/qtpalmtop/cordova-plugin-ths-toast#readme",
  "keywords": [
    "ecosystem:cordova",
    "cordova-android",
    "cordova-ios"
  ],
  "engines": {
    "cordovaDependencies": {
      "2.0.0": {
        "cordova-android": ">=3.6.0"
      },
      "4.0.0": {
        "cordova-android": ">=3.6.0",
        "cordova-windows": ">=4.4.0"
      },
      "6.0.0": {
        "cordova": ">100"
      }
    },
    "node": ">=6.0.0"
  }
}

2.3.5 发布插件

发布后就能够正常的经过cordova plugin add cordova-plugin-ths-toast在项目中经过ThsToast.show()使用，可是要在angular项目中使用还须要咱们开发自定义插件api，下面咱们开始ionic-native的api模块开发

cd cordova-plugin-ths-toast
npm login
npm publish

3 cordova开发进阶

3.1 Activity：四大组件之活动

简单来讲，活动至关于angular的page，vue的vue，是一个可包含组件（fragment）的ui页面。

1.开启普通活动

// 应用上下文
Context context = cordova.getActivity().getApplicationContext();
String pkgName  = context.getPackageName();

// 打开app应用
Intent intent = context
        .getPackageManager()
        .getLaunchIntentForPackage(pkgName);

// 打开XxxActivity
// Intent intent=new Intent(cordova.getActivity(), XxxActivity.class);

// 打开应用必需要加 CATEGORY_LAUNCHER
intent.addCategory(Intent.CATEGORY_LAUNCHER);

intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_SINGLE_TOP);

// 启动应用
context.startActivity(intent);

// 启动活动
// cordova.getActivity().startActivity(intent);

// 启动有返回值的活动
// cordova.startActivityForResult((CordovaPlugin) this, intent, 0);
  1. 打开第三方Android SDK活动 如:百度地图uri 
// 若是有百度地图 uri详情：http://lbsyun.baidu.com/index.php?title=uri/api/android
Intent intent = Intent.parseUri("intent://map/direction?"
                        + "origin="+options.getOrigin4Baidu()
                        + "&destination="+options.getDestination4Baidu()
                        + "&mode="+options.getModel4Baidu()
                        + "&coord_type=wgs84&referer=Autohome|GasStation#Intent;scheme=bdapp;package=com.baidu.BaiduMap;end",0);
                        
cordova.getActivity().startActivity(intent);

3.2 BroadcastReceiver: 四大组件之广播

广播其实就是一个在app范围内的事件推送和接受中心，相似于iframe的postMessage。

和原生广播没有区别，通常静态广播用在插件比较多

plugin.xml 静态注册广播

3.3 Service: 四大组件之服务

服务能够同步或执行一些小任务、小进程，甚至对其余进程的ui页面作操做，可类比angular的service服务。

和原生Service同样的用法

plugin.xml

3.4 ContentProvider: 四大组件以内容提供者

内容提供者实际上是一个手机系统范围的API调度中心，好比能够读取和修改通信录和相册的内容。


plugin.xml, 访问其余应用的内容须要配置应用读写权限

<config-file target="AndroidManifest.xml" parent="/manifest">
  <uses-permission android:name="android.permission.READ_CALENDAR"/>
  <uses-permission android:name="android.permission.WRITE_CALENDAR"/>
</config-file>

<!-- 若是不是上面Calendar这种系统provider(android.provider.*)，则须要注册 -->
<config-file target="AndroidManifest.xml" parent="/*/application">
    <provider
        android:name="org.apache.cordova.provider.TestContentProvider"
        android:authorities="org.apache.cordova.provider.testprovider"
        android:exported="false" />
</config-file>

3.5 jar、aar、so架包和资源配置

3.5.1 jar

jar包能够理解为api的集合，解压后所有是编译好的class，可是不包含资源文件，能够直接使用使用其中的类。

引入jar包类

jar包路径位于libs目录下


plugin.xml

3.5.2 so

so是在NDK平台开发的，NDK是用来给安卓手机开发软件用的，可是和SDK不一样的是它用的是C语言，而SDK用的是Java语言。NDK开发的软件在安卓的环境里是直接运行的，通常只能在特定的CPU指令集的机器上运行。

so配置在libs目录下便可

3.5.3 aar

aar和jar相似，可是他包含了全部资源，class以及res资源文件

aar和gradle放在libs下

gradle中要在repositories中配置flatDir，dependencies中配置compile

plugin.xml

使用：例如跳转activity

3.5.4 静态资源和java文件配置

静态资源放在res目录下


plugin.xml 经过resource-file和source-file配置当前路径和输出路径，静态资源默认路径是src/android/res/xxx, 输出路径是res/xxx，java文件默认路径是src/android/Xxx.java 输出目录是src/包/名/字/，注意target-dir是目录路径，target才是文件路径。

3.6 meta-data: 添加插件时传入参数

拿一个分享插件举例作示范

plugin.xml：配置preference，用于接收用户传参variable的值，config-file中配置meta-data, 保存参数键值信息用于给java类调用。


Plugin.java：经过cordova.getActivity().getPackageManager().getApplicationInfo(cordova.getActivity().getPackageName(), PackageManager.GET_META_DATA)获取参数存储的对象appInfo，再经过appInfo.metaData.getType(key)取得参数value，getType有getString、getInt……

传入插件参数有两种办法，

1.用cordova 安装时利用--variable key=value 传入

cordova plugin add cordova-plugin-share --variable WEIXIN_APP_ID=xxx --variable WEIXIN_APP_SECRET=xxx --variable QQ_APP_ID=xxx --variable QQ_APP_KEY=xxx

2.添加插件完成后，在项目的config.xml中手动添加

<plugin name="cordova-plugin-share" spec="1.0.0">
    <variable name="WEIXIN_APP_ID" value="xxx" />
    <variable name="WEIXIN_APP_SECRET" value="xxx" />
    <variable name="QQ_APP_ID" value="xxx" />
    <variable name="QQ_APP_KEY" value="xxx" />
</plugin>

3.7 权限

当须要使用系统的某个功能时，必定要加上权限询问配置，全部的权限在这查看

<config-file target="AndroidManifest.xml" parent="/manifest">
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <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.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
</config-file>

3.8 CordovaPlugin生命周期和自带方法

3.9.1 excute：执行插件方法

调用插件执行方法。第一个参数action是调用的方法名，第二个参数args是传入的参数数组，第三个参数CallbackContext是传入的回调函数上下文，能够经过callbackContext.success(message)和callbackContext.error(errorMessage)传入回调参数;

@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
}

3.8.2 initialize：初始化

在插件构造函数执行和字段初始化以后调用，此时还没有执行excute方法。

@Override
public void initialize (CordovaInterface cordova, CordovaWebView webView) {}

3.8.3 pluginInitialize：无参初始化

在插件构造函数执行和字段初始化以后调用，没有参数，此时还没有执行excute方法，pluginInitialize 不支持 cordova 3.0-3.5 。

@Override
protected void pluginInitialize() {}

3.8.4 onStart：活动开始周期

活动正在被启动，已经可见，可是还没位于前台。

@Override
public void onStart() {}

3.8.5 onResume：活动恢复周期

活动位于前台，而且能够与用户交互了。

/**
 * 当活动将开始与用户互动时调用。
 *
 * @param multitasking 表示是否为应用程序打开了多任务
 */
@Override
public void onResume(boolean multitasking) {
    super.onResume(multitasking);
    // deviceready();
}

3.8.6 onPause：活动暂停周期

活动处于正在中止的状态，一般当要离开这活动的时候会被调用。接下去onStop()立刻会被调用，若是是弹出一个对话框，那么onStop不会被调用。

/**
 * 在系统即将开始恢复上一个活动时调用
 *
 * @param multitasking 表示是否为应用程序打开了多任务
 */
@Override
public void onPause(boolean multitasking) {
    super.onPause(multitasking);
}

3.8.7 onStop：活动中止周期

活动即将中止，活动彻底不可见。

/**
 * 活动中止前调用
 */
@Override
public void onStop() {
    super.onStop();
}

3.8.8 onReset：活动重置周期

这个方法表示活动正在从新启动，活动由中止状态恢复为运行状态，一般由上一个活动返回到这个活动时，这个活动会调用此方法。

/**
 * 当视图导航时调用
 */
@Override
public void onReset() {}

3.8.9 onActivityResult：返回活动数据

当从另外一个活动返回到当前活动时，当前活动中的onActivityResult可接收刚才活动的返回数据。

@Override
public void onActivityResult(int requestCode, int resultCode, Intent intent) {
    super.onActivityResult(requestCode, resultCode, intent);
}

3.8.10 onDestroy：活动销毁周期

活动彻底销毁前调用，能够在这作一些资源释放的操做。

/**
 * 活动销毁前调用
 */
@Override
public void onDestroy() {
    // deviceready = false;
}

4 总结

咱们从建立一个简单的cordova自定义插件，到四大组件的配置和使用，还讲了如何导入jar、aar、so、静态资源，最后概括了经常使用的生命周期，看到这，咱们应该已经具有独立建立和改写插件的基本能力，剩下的就只有本身多看多用cordova-plugin，实践出真知，这篇文章仍是写了一周，毕竟是个前端开发，如有总结不到位或者遗漏的地方，还请各位大佬多多指出，谢谢你们！若是这篇文章对前端或其余方向的你有所帮助或者启发，记得点个赞哦亲：）

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程