如何在离子框架+ angularjs中调用函数？

Question

我正在使用离子框架来制作Android应用程序.我有cordova 5.1版本.首先我使用命令行离子启动myApp标签创建一个项目.我添加了android平台.现在我需要将java代码传递给javascript代码.使用谷歌我发现我需要制作自定义插件.但我没有在谷歌上找到任何解决方案我们将如何创建自定义插件.我发现ng-cordova给出了自己的插件我们无法制作自定义插件.

我只需要UI上的一个按钮.点击该按钮我需要调用java函数打印一些登录控制台.然后返回成功或错误回调JavaScript文件

你能否告诉我如何在离子中创建一个简单的插件？

Answer 1

是的,自定义cordova插件是痛苦的,因为官方文档不是那么好.

首先,我们需要了解自定义插件文件夹结构.

1. wrapper - 要为插件提供的名称
2. src - 源代码所在的文件夹
3. android - 因为你正在寻找android,需要一个android文件夹
4. www - 它包含调用java代码的javascript函数.(使用cordova)
5. plugin.xml - 插件的核心,这个文件配置插件(添加权限,将文件复制到平台等)

在你的android文件夹中创建一个CustomPlugin.java文件.

package com.example.myplugin;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONObject;
import org.json.JSONArray;
import org.json.JSONException;

public class CustomPlugin extends CordovaPlugin {

   @Override
   public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    if ("beep".equals(action)) {
        // print your log here... 
        callbackContext.success();
        return true;
    }
    return false;  // Returning false results in a "MethodNotFound" error.
    }
 }

现在我们需要在javascript和java代码之间建立一个接口.

Cordova为此提供了一个简单的功能.

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

MycustomPlugin.js在www文件夹中创建一个文件.

cordova.exec( successCallback,  ErrorCallBack, "service","action", []);

值得知道的是,

service - > java类的名称

动作 - >我们要调用的动作(在这种情况下"嘟嘟"见上面的代码)

您的MycustomPlugin.js文件应如下所示:

var MyPlugin = {
  PrintLog: function (successCallback, errorCallback, action) {
    cordova.exec(
            successCallback, // success callback function
            errorCallback, // error callback function
            'CustomPlugin', // mapped to our native Java class called
            action, // with this action name , in this case 'beep'
            []  )// arguments, if needed
  }
}
module.exports = MyPlugin;

最后,您需要配置plugin.xml文件

 <?xml version="1.0" encoding="utf-8"?>
    <plugin xmlns="http://www.phonegap.com/ns/plugins/1.0"
            id="com.example.plugin"
            version="0.0.1">        
      <name>Cordova Plugin</name> 

      <engines>
        <engine name="cordova" version=">=3.4.0"/>
      </engines> 

      <js-module src="www/MycustomPlugin.js" name="CustomPlugin">
        <clobbers target="window.MycustomPlugin" />
      </js-module>    
    <platform name="android">

        <config-file target="res/xml/config.xml" parent="/*">
           <feature name="CustomPlugin">
              <param name="android-package" value="com.example.myplugin.CustomPlugin"/>
           </feature>
        </config-file>

       <source-file src="src/android/CustomPlugin.java" target-dir="src/com/example/myplugin"/>     

   </platform>
</plugin>

现在将此插件添加到您的项目中.myApp(你创建的那个)使用cordova plugin add /path/to/your/custom/plugin

并在$ ionicPlatform.ready函数中从javascript调用您的java代码

   window.MycustomPlugin.PrintLog(function(res){
     //success
   }, function(err){
        //error
   }, "beep")