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