PhoneGap（Cordova）之js调用本地native的方法 2

来源：互联网发布：选装修公司知乎编辑：程序博客网时间：2024/05/22 17:50

一、PhoneGap是跨平台的js调用本地native的插件，首先要在官网上下载版本，本文用的是2.9.0版本，

解压后将cordova-2.9.0.jar拷贝到libs下，将config.xml拷贝到res/xml下，将cordova.js拷贝到www下面，

详见下面的截图：

----------------------------------------------------------------------------------------------------------------

二、写插件Echo.java文件，必须CordovaPlugin接口实现execute方法

package com.liu;

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

import android.util.Log;

public class Echo extends CordovaPlugin{ // 必须继承 CordovaPlugin
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        Log.e("-------------",action);
        Log.e("-------------",args.toString());
        if (action.equals("echo")) {
            callbackContext.success(" success");
            return true;
        }
        else {
   callbackContext.error(0);
  }
        return false;
    }
}

--------------------------------------------------------------------

三、注册插件，在config.xml文件中，注册是

Echo是名字，com.liu.Echo具体位置

--------

<?xml version="1.0" encoding="UTF-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<widget xmlns     = "http://www.w3.org/ns/widgets"
        id        = "io.cordova.helloCordova"
        version   = "2.0.0">
    <name>Hello Cordova</name>

    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>

    <author href="http://cordova.io" email="dev@cordova.apache.org">
        Apache Cordova Team
    </author>

<content src="index.html" />

<feature name="App">
      <param name="android-package" value="org.apache.cordova.App"/>
    </feature>
    <feature name="Geolocation">
      <param name="android-package" value="org.apache.cordova.GeoBroker"/>
    </feature>
    <feature name="Device">
      <param name="android-package" value="org.apache.cordova.Device"/>
    </feature>
    <feature name="Accelerometer">
      <param name="android-package" value="org.apache.cordova.AccelListener"/>
    </feature>
    <feature name="Compass">
      <param name="android-package" value="org.apache.cordova.CompassListener"/>
    </feature>
    <feature name="Media">
      <param name="android-package" value="org.apache.cordova.AudioHandler"/>
    </feature>
    <feature name="Camera">
      <param name="android-package" value="org.apache.cordova.CameraLauncher"/>
    </feature>
    <feature name="Contacts">
      <param name="android-package" value="org.apache.cordova.ContactManager"/>
    </feature>
    <feature name="File">
      <param name="android-package" value="org.apache.cordova.FileUtils"/>
    </feature>
    <feature name="NetworkStatus">
      <param name="android-package" value="org.apache.cordova.NetworkManager"/>
    </feature>
    <feature name="Notification">
      <param name="android-package" value="org.apache.cordova.Notification"/>
    </feature>
    <feature name="Storage">
      <param name="android-package" value="org.apache.cordova.Storage"/>
    </feature>
    <feature name="FileTransfer">
      <param name="android-package" value="org.apache.cordova.FileTransfer"/>
    </feature>
    <feature name="Capture">
      <param name="android-package" value="org.apache.cordova.Capture"/>
    </feature>
    <feature name="Battery">
      <param name="android-package" value="org.apache.cordova.BatteryListener"/>
    </feature>
    <feature name="SplashScreen">
      <param name="android-package" value="org.apache.cordova.SplashScreen"/>
    </feature>
    <feature name="Echo">
      <param name="android-package" value="org.apache.cordova.Echo"/>
    </feature>
    <feature name="Globalization">
      <param name="android-package" value="org.apache.cordova.Globalization"/>
    </feature>
    <feature name="InAppBrowser">
      <param name="android-package" value="org.apache.cordova.InAppBrowser"/>
    </feature>
    
    <plugins>
        <plugin name="Echo" value="com.liu.Echo"/>

    </plugins>
</widget>
--------------------------------------------------------------------------------------------------------------------------------------

四、写js函数，在index.js中

window.NPhone = {
makeCall: function(telNumber, callback) {
  cordova.exec(callback, function(err) {
         callback('Nothing to echo.');
     }, "Echo", "echo", ['111']);
}
}

其中Echo是名字，echo是action，‘111’是参数，对应Echo.java中的execute方法的参数：String action, JSONArray args

其中callback, function(err) {
callback('Nothing to echo.');
},是调用成功时回调的方法callback，和调用失败时回调方法function(err)；

-----------------------------------------------------------------------------------------------------------------------------

五、调用四中js的html文件是accountInfo.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <title>Hello World</title>
    <style type="text/css" >body,div,p{font-size:28px;line-height:150%;}</style>
     <script type="text/javascript" src="index.js"></script>
      <script type="text/javascript" src="cordova.js"></script>
       <script type="text/javascript" src="index.js"></script>
</head>
<body>
    账号公司信息demo：
    <br />
    <input type="button" value="读取账号信息" onclick="getCompanyInfo();"/>

    <div id="info"></div>

// }

</script>
</body>
</html>

其中：window.NPhone.makeCall就是调用并且参数与index.js中的参数对应，

------------------------------------------------------------------------------------------------

六、MainActivity.java文件，页面加载部分该类继承了CordovaInterface：

package com.liu;

import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;

import org.apache.cordova.Config;
import org.apache.cordova.CordovaWebView;
import org.apache.cordova.DroidGap;
import org.apache.cordova.api.CordovaInterface;
import org.apache.cordova.api.CordovaPlugin;

import android.os.Bundle;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity implements CordovaInterface {

private CordovaWebView appView;
private final ExecutorService threadPool =Executors.newCachedThreadPool();
@Override
public void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);

setContentView(R.layout.main);
appView = (CordovaWebView) findViewById(R.id.appView);
Config.init(this);
appView.loadUrl("file:///android_asset/www/accountInfo.html", 4000);
// super.setIntegerProperty("splashscreen", R.drawable.ic_launcher);

// super.loadUrl("file:///android_asset/www/accountInfo.html", 4000);

}

@Override
public Activity getActivity() {
// TODO Auto-generated method stub
return this;
}

@Override
public ExecutorService getThreadPool() {
// TODO Auto-generated method stub
return threadPool;
}

@Override
public Object onMessage(String arg0, Object arg1) {
// TODO Auto-generated method stub
return null;
}

@Override
public void setActivityResultCallback(CordovaPlugin arg0) {
// TODO Auto-generated method stub

}

@Override
public void startActivityForResult(CordovaPlugin arg0, Intent arg1, int arg2) {
super.startActivityForResult(arg1, arg2);
}

}

------------------------------------------------------------------------

七、配置文件main.xml

</RelativeLayout>

0 0