Cordova中JavaScript/TypeScript调用原生代码

Cordova官网上没有说怎么使用JS调用本地代码，但是告诉了我们如何写一个插件。

Cordova插件的根本原理就是JS和原生代码的交互。

所以抠出Cordova插件中调用本地代码的部分就可以了。

Ionic2创建插件简易教程:

http://www.cnblogs.com/eccainiao/p/6398072.html

适用于：

Cordova中JavaScript调用Android原生代码

Ionic中      TypeScript调用Android原生代码

IOS已经验证，同样原理，可以使用。

开发环境版本号：

cordova  6.5.0

Ionic        2.2.1

node       6.10.1

npm        3.10.10

一、写原生代码类

cordova项目或者Ionic项目编译后，会产生对应平台下的源码。

使用cordova/Ionic命令编译为android平台下的项目，使用AndroidStudio打开android源码(platforms\android目录下)，创建一个类，类的要求：

1.    继承CordovaPlugin类

2.   重写execute(String action, JSONArray args, CallbackContext callbackContext)方法:

       在execute方法中根据传来的action参数进行匹配，做对应的业务处理，有对应的action返回true，找不到对应的action返回false。

业务处理成功调用callbackContext.success(此方法会调用JavaScript/TypeScript中cordova.exec中传入的'成功回调方法'),

业务处理失败调用callbackContext.error(此方法会调用JavaScript/TypeScript中cordova.exec中传入的'失败回调方法')

示例:

package com.test.hello.myplugin;

import android.content.Context;

import android.content.SharedPreferences;

import org.apache.cordova.CallbackContext;

import org.apache.cordova.CordovaPlugin;

import org.json.JSONArray;

import org.json.JSONException;

public class Test extends CordovaPlugin {

    @Override

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

        if (action.equals("testAction")) {

            String message = args.getString(0);

            this.myMethod(message, callbackContext);

            return true;

        }

        return false;

    }

    private void myMethod(String message, CallbackContext callbackContext) {

        if (message != null && message.length() > 0) {

          SharedPreferences sp = cordova.getActivity().getSharedPreferences("config", Context.MODE_PRIVATE);

          String ss = sp.getString("test","SharedPreferences的数据");

            callbackContext.success(ss);

        } else {

            callbackContext.error("Expected one non-empty string argument.");

        }

    }

}

二、配置config.xml文件

config.xml文件在res/xml目录下

  <feature name="Test">

    <param name="android-package" value="com.test.hello.myplugin.Test" />

  </feature>

name="Test"   为JS或TS代码中cordova.exec传入的'服务参数'

value="com.test.hello.myplugin.Test"   为第一步中创建的类的完整类名

三、调用原生代码

cordova.exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);

参数说明:

successFunction        成功回调        

failFunction                 失败回调             

service                         服务名字

action                           action

args                              要传给原生代码的所有参数(以数组形式传递)

在JavaScript中调用本地代码示例：

   

    cordova.exec(function(msg){

          alert('test成功了' + msg)

        }, function(msg){

          alert('test失败了')

        }, "Test", "testAction", ['传递的参数']);

    }

  

在TypeScript中直接调用cordova.exec会报错，需要声明cordova为any类型，在import语句后添加

declare let cordova: any;

四、编译运行---------重点

此时如果使用cordova/Ionic命令运行项目的话,无法正常调用原生代码。

因为使用cordova/Ionic编译命令,会重新生成config.xml文件，之前的配置过的config.xml的feature 会丢失。

此时需要再次使用AndroidStudio打开android源码再配置一遍config.xml文件：

  <feature name="Test">

    <param name="android-package" value="com.test.hello.myplugin.Test" />

  </feature>

配置完后，使用AndroidStudio编译运行app（不能使用cordova/Ionic命令编译运行）

五、重点----为了解决config.xml文件被覆盖问题，在第二步中不再编辑config.xml文件,

而是编辑\platforms\android目录下的android.json文件,

在config_munge节点下添加如下片段:

{    "xml": "<feature name=\"Test\"><param name=\"android-package\" value=\"com.test.hello.myplugin.Test\" /></feature>",    "count": 1}

这样配置后,就不必使用AndroidStudio编译运行了,直接使用cordova/Ionic命令编译运行即可。

示例:

"config_munge": {    "files": {        "res/xml/config.xml": {            "parents": {                "/*": [                    {                        "xml": "<feature name=\"SplashScreen\"><param name=\"android-package\" value=\"org.apache.cordova.splashscreen.SplashScreen\" /><param name=\"onload\" value=\"true\" /></feature>",                        "count": 1                    },                    {                        "xml": "<feature name=\"StatusBar\"><param name=\"android-package\" value=\"org.apache.cordova.statusbar.StatusBar\" /><param name=\"onload\" value=\"true\" /></feature>",                        "count": 1                    },                    {                        "xml": "<feature name=\"Whitelist\"><param name=\"android-package\" value=\"org.apache.cordova.whitelist.WhitelistPlugin\" /><param name=\"onload\" value=\"true\" /></feature>",                        "count": 1                    },                    {                        "xml": "<feature name=\"Test\"><param name=\"android-package\" value=\"com.test.hello.myplugin.Test\" /></feature>",                        "count": 1                    }                ]            }        }    }}

Ionic2简易创建插件教程:

http://www.cnblogs.com/eccainiao/p/6398072.html