Ionic初学之Ionic3（Cordova）插件制作与添加

现在制作APP都流行混合开发，Ionic是个不错的选择，但是很多原生的功能，混合开发是无法实现的，这时候就要根据功能来制作Cordova插件来实现，下面就记录第一次制作Cordova插件的步骤和遇到的问题及解决方法。

首先cmd命令行创建自定义插件TestPlugin，格式：

plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version

plugman create --name TestPlugin --plugin_id com.plugin.testPlugin --plugin_version 1.0.0

创建好的文件结构如下：

src文件夹下存放各平台原生文件，首先要添加想要的平台，这里添加android平台，先cd到插件根目录：

cd TestPlugincordova platform add android

执行完上面的命令之后，src文件下多了android/TestPlugin.java文件，我们就可以在这个文件中编写想要实现的功能。

ok，现在一个Cordova插件建好了，就差往里面添加先要实现的功能，刚好现在公司要集成讯飞语音的功能，索性将android原生开发集成的讯飞语音移植到插件中试试。

由于没有针对cordova插件的编辑器，直接用其他编辑器修改cordova插件的文件内容比较麻烦，而且容易有纰漏，在向cordova插件中添加功能之前，最好先写一个android项目将功能实现，再将其移植到cordova即可，具体参见大神的文章：开发自己的cordova插件

开发之前本人已把讯飞语音封装好并且打包成aar文件，见：Android初学----自己封装集成讯飞语音和人脸识别，可直接使用。接下来就是在TestPlugin.java中编写语音合成。

写好的TestPlugin.java文件内容如下：

package com.face.plugintest;import android.app.Activity;import com.face.speech.Speech;
import com.face.speech.XunfeiSpeech;import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaWebView;
import org.json.JSONArray;
import org.json.JSONException;/*** Created by AA on 2018/1/18.*/public class TestPlugin extends CordovaPlugin {private Activity activity;private XunfeiSpeech speech;//封装的讯飞语音合成对象private String appId = "********";//讯飞语音APPID，可到讯飞开发平台上获取/*** * @param action          用来判断要执行的方法* @param args            参数组* @param callbackContext 回调* @return* @throws JSONException*/@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {if (action.equalsIgnoreCase("speak")){//执行语音合成方法speaking("说话的内容是："+args.get(0));return true;}return false;}/*** 该方法会在调用execute()方法之前调用，此时用来初始化activity和speech* @param cordova* @param webView*/@Overridepublic void initialize(CordovaInterface cordova, CordovaWebView webView) {//super.initialize(cordova, webView);this.activity = cordova.getActivity();speech = new XunfeiSpeech(this.activity,appId);}/*** 语音合成方法* @param content 合成内容*/public void  speaking (String content){if (this.activity==null){this.activity = cordova.getActivity();}if (speech==null){speech = new XunfeiSpeech(this.activity,appId);}speech.startSpeaking(content, new Speech.SpeakResultCallback() {@Overridepublic void onCompleted(String s) {}});}
}

然后修改www文文件夹下的TestPlugin.js文件，将插件方法暴露给Ionic项目中使用：

var exec = require('cordova/exec');
var myAPI = {}
myAPI.speak = function(arg0,arg1, success, error) {exec(success, error, "TestPlugin", "speak", [arg0,arg1]);};
module.exports = myAPI;

ok，到这一步比较头疼的就是如何把aar弄到插件里边去，网上找了很多文章，改了很久才弄好，首先，将讯飞语音识别的speech.aar复制到android文件夹下（也可以自己建一个文件夹来存放，最好在android文件夹下），然后修改plugin.xml文件：

<?xml version='1.0' encoding='utf-8'?>
<plugin xmlns:android="http://schemas.android.com/apk/res/android" id="com.plugin.test" version="0.0.1"xmlns="http://apache.org/cordova/ns/plugins/1.0"><name>TestPlugin</name><js-module name="TestPlugin" src="www/TestPlugin.js"><clobbers target="cordova.plugins.TestPlugin" /></js-module><platform name="android"><config-file parent="/*" target="res/xml/config.xml"><feature name="TestPlugin"><param name="android-package" value="com.plugin.test.TestPlugin" /></feature></config-file><!--这里是添加需要用到的权限到AndroidManifest.xml文件，6.0之后的权限申请自行考虑，本文没写--><config-file parent="/*" target="AndroidManifest.xml"><!-- 连接网络权限，用于执行云端语音能力 --><uses-permission android:name="android.permission.INTERNET" /><!-- 获取手机录音机使用权限，听写、识别、语义理解需要用到此权限 --><uses-permission android:name="android.permission.RECORD_AUDIO" /><!-- 读取网络信息状态 --><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><!-- 获取当前wifi状态 --><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><!-- 允许程序改变网络连接状态 --><uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" /><!-- 读取手机信息权限 --><uses-permission android:name="android.permission.READ_PHONE_STATE" /><!-- 读取联系人权限，上传联系人需要用到此权限 --><uses-permission android:name="android.permission.READ_CONTACTS" /><!-- 外存储写权限，构建语法需要用到此权限 --><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" /><!-- 手机定位信息，用来为语义等功能提供定位，提供更精准的服务 --><!-- 定位信息是敏感信息，可通过Setting.setLocationEnable(false)关闭定位请求 --><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><!-- 如需使用人脸识别，还要添加：摄相头权限，拍照需要用到 --><uses-permission android:name="android.permission.CAMERA" /></config-file><source-file src="src/android/TestPlugin.java"target-dir="src/com/plugin/test/TestPlugin" /><!--插件依赖speech.aar要用到的gradle，很关键--><framework src="src/android/build.gradle" custom="true" type="gradleReference"/><!--配置speech.arr文件，src为存放路径，target-dir：目标路径，意思大概理解就是编译的时候能够通过libs/speech.aar找到该文件--><resource-file src="src/android/speech.aar" target="libs/speech.aar"/></platform>
</plugin>

下面就是添加plugin.xml文件中提到的build.gradle文件：

def DEFAULT_MIN_SDK_VERSION = 15
def minSdk = Math.max(DEFAULT_MIN_SDK_VERSION, cdvHelpers.getConfigPreference('android-minSdkVersion',0) as Integer);
if (cdvMinSdkVersion == null || Integer.parseInt('' + cdvMinSdkVersion) < minSdk ) {ext.cdvMinSdkVersion = minSdk;
}
//指定资源库libs
repositories{jcenter()flatDir{dirs 'libs'}
}dependencies {compile 'com.android.support:support-v4:+'//关键就是这句话，添加speech依赖，compile(name:'speech', ext:'aar')
}android {packagingOptions {exclude 'META-INF/NOTICE'exclude 'META-INF/LICENSE'}
}

到这里，cordova插件开发完成了？？？

并没有，我可是改了N多变啊，老铁，因为打包生成的aar文件总是和ionic项目中的android配置文件有冲突，就像这样：

这里的错误是ionic项目中，platforms->android平台下的AndroidManifest.xml文件和aar中的AndroidManifest.xml文件冲突：

两个文件中的icon重复，系统编译就不知道要选择哪一个ic_launcher，这里建议吧application中的属性都删掉即可，若aar文件中的value文件也存在错误，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jW4lpBO3-1573549929499)(https://img-blog.csdn.net/20180118154318975?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRGVhckxD/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]

这里的错误是解析主题和颜色出错，无法找到“Theme.AppCompat.Light.DarkActionBar”，将其删除即可。或者根据错误内容增加没有的文件或是删除多余的文件。

最后在项目中使用插件。

先添加插件，命令行cd到Ionic项目根目录，执行：

ionic cordova plugin add 插件路径

添加完开始调用插件：

完成！

Ionic初学之Ionic3（Cordova）插件制作与添加相关推荐

【No.4 Ionic】修改 cordova 插件
在使用 cordova 过程使用的插件有可能不能满足个人需求,就需要修改,下面就直接说说步骤插件结构我用 cordova-plugin-inappbrowser 插件讲解在目录中有个 sr ...
Win10 UWP开发系列：使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
cordova 蓝牙_Ionic通过Cordova插件使用设备能力
1. Cordova插件 App运行在手机上,少不了需要使用手机上的设备能力,比如蓝牙.相机.数据库等等.在之前的文章中我们知道Ionic框架实际上还是一个UI框架,一个基于WEB的框架.那么Ioni ...
Ionic JPush极光推送插件实例
1.需要去这里注册https://www.jiguang.cn 注册成功获取AppKey 备注填写应用包名规范点,在项目还要用那 2.创建ionic 项目指定你注册时候的包名(假如:com.ioni ...
极光推送Cordova插件适配Capacitor
极光推送官方提供的Cordova插件目前无法适配Capacitor电容器平台进行开发,之前问了官方什么时候会考虑适配,官方的回答是暂不做开发安排,需要调研,这对于想使用Capacitor进行开发的同学 ...
Ionic3 Cordova Android 6.x集成最新极光华为/小米厂商通道推送
Ionic3 Cordova Android 6.x集成最新极光华为/小米厂商推送前置一.集成华为厂商推送 1.在开放平台创建并配置应用 2.在安卓项目配置SDK 2.1. 添加配置文件 2.2. ...
ionic3+cordova使用qr扫描仪
1.下载好qrcode的cordova插件:ionic cordova plugin add codova-plugin-qrscanner 2.下载好npm install --save @ioni ...
Ionic3 Cordova Android 6.x集成最新极光华为/小米厂商点击通知跳转实现
Ionic3 Cordova Android 6.x集成最新极光华为/小米厂商点击通知跳转实现一.添加跳转处理页面OpenClickActivity 二.MainActivity获取传递参数三.J ...
Cordova入门系列（三）Cordova插件调用
上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容,插件的调用.演示一个例子,通过cordova插件,去调用摄像头. 一.插件的安装以及基本信息: ...

Ionic初学之Ionic3（Cordova）插件制作与添加

Ionic初学之Ionic3（Cordova）插件制作与添加相关推荐

最新文章

热门文章