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