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

【问题标题】：how to call function in ionic framework + angularjs?如何在离子框架+ angularjs中调用函数？
【发布时间】：2015-10-08 05:33:20
【问题描述】：

我正在使用 ionic 框架来制作 android 应用程序。我有 cordova 5.1 版本。首先我使用命令行创建一个项目 ionic start myApp tabs。我添加android平台。现在我需要将java代码与javascript代码通信。使用谷歌我发现我需要制作自定义插件。但我在谷歌上没有找到任何解决方案我们将如何创建自定义插件。我发现ng-cordova 提供自己的插件，我们无法制作自定义插件。

我只需要 UI 上的 button 。单击该按钮时，我需要调用 java 函数在控制台上打印一些日志。然后返回成功或错误回调JavaScript 文件

您能告诉我我们将如何在 ionic 中创建一个简单的插件吗？

【问题讨论】：

标签： android angularjs cordova ionic-framework phonegap-plugins

【解决方案1】：

是的，自定义 cordova 插件很痛苦，因为官方文档不是很好。

首先我们需要了解一个自定义插件文件夹结构。

wrapper - 你想给你的插件起的名字
src - 源代码所在的文件夹
android - 由于您正在寻找 android，因此需要一个 android 文件夹
www - 它包含调用java代码的javascript函数。（使用cordova）
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>]);

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

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

值得知道的是，

service -> java 类的名称

action -> 我们要调用的动作（在这种情况下“哔”见上面的代码）

您的 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")

【讨论】：

你好，但我使用的是离子框架，它适用于离子
是的，我知道，Ionic 是基于cordova 构建的，所以没关系。它也适用于离子。另外，如果您想了解更多详细信息，请查看devgirl.org/2013/09/17/…

【解决方案2】：

我发现了你的错误：

TypeError: Arguments to path.join must be strings
    at Object.win32.join (path.js:233:13)

已通过附加结束标记修复

</platform>
</plugin>

【讨论】：