android cordova混合开发（交互部分）

最新推荐文章于 2023-09-28 04:24:03 发布

Debug_As

最新推荐文章于 2023-09-28 04:24:03 发布

阅读量1.1w

点赞数 9

分类专栏： android java 文章标签： Cordova android js交互 cordova跟js交互

本文链接：https://blog.youkuaiyun.com/u010819959/article/details/50608273

版权

android 同时被 2 个专栏收录

16 篇文章

订阅专栏

java

10 篇文章

订阅专栏

最近公司需要混合开发一个app，先讲个基础需求，需求是这样的：js脚本调用本地的相机，拍照完成后，上传服务器然后再通知js，，OK，这就涉及到2个问题：

1.js调用android本地端method；

2.android本地端代码调用JS的function；

在讲cordova之前，我们先看看android源生的webView，也就是webKit是如何做到这个交互的：

WebView跟js的交互方式：

这里需要讲一下：

android调用JS的方式：

mWebView.loadUrl("javascript:showMsg()");

解释：通过loadUrl方式加载 javascript : founction名字()的方式进行调用

js调用android的方式：

mWebView.getSettings().setJavaScriptEnabled(true);
		//把js绑定到全局的myjs上，myjs的作用域是全局的，初始化后可随处使用
		mWebView.addJavascriptInterface(js, "myjs");
		
		mWebView.loadUrl("file:///android_asset/jstest.html");

解释: 先开启javascript，然后添加一个javascriptInterface（对象名，“js调用的名字（详细解释在下面js代码处）”）

对应的js脚本应该是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd">
<HTML>
<HEAD>
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi" />
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
   function showMsg(){
      alert("hello world!");
   }
   function showMsgInAndroid(){
      myjs.showMsg('hello in android!');
   }
</script>
</HEAD>
<BODY>
<span>测试js使用</span>

<button id='btntest' οnclick='showMsgInAndroid()'>调用android方法</button>
</BODY>
</HTML>

解释下：

这里解释下上面的问题，请看下面代码中的 showMsgInAndroid（）的function

<script>
   function showMsg(){
      alert("hello world!");
   }
   function showMsgInAndroid(){
      myjs.showMsg('hello in android!');
   }
</script>

看到“myjs”是不是很熟悉呢？对，没错，就是

mWebView.addJavascriptInterface(js, "myjs");

中的myjs。。然后这个showMsg（“”）是哪里来的呢？，，请再次往下看

js = new JSKit(this);

这里解释下，JSKit是自己定义的一个object，他的结构如下:

package com.harold.base;

import android.util.Log;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

import com.harold.jstest.MainActivity;

public class JSKit {
	private MainActivity ma;
	
	public JSKit(MainActivity context) {
		this.ma = context;
	}
	@JavascriptInterface
	public void showMsg(String msg) {
		Toast.makeText(ma, msg, Toast.LENGTH_SHORT).show();
	}
}

看到了么，showMsg（String msg）；（注意:对应方法必须加入注解@JavascriptInterface 或 @android.webkit.JavascriptInterface）,否则编译不过，

至于原因呢，是因为js此时具有很高的权限，可以通过反射定义来做很多事，带来很大安全隐患，加入注解，就是为了防止这样事情发生，具体请见google 的android API for 4.0 webView部分

这样js里调用过程我们就懂了，myjs找到对应的Object，然后通过反射调用你的同名方法。

---------------------------------------------------------------------------------万恶的分切线-------------------------------------------------------------------------

上下代码：

主界面layout文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	android:id="@+id/rl_main"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	xmlns:android="http://schemas.android.com/apk/res/android"
    >
   <WebView 
       android:id="@+id/wv_test"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:layout_above="@+id/btn_showmsg"/>
   <Button 
       android:id="@+id/btn_showmsg"
       android:layout_width="200dip"
       android:layout_height="40dip"
       android:layout_alignParentBottom="true"
       android:layout_centerHorizontal="true"
       android:text="调用html中js方法"/>
</RelativeLayout>

main页面：

package com.harold.jstest;

import com.harold.base.JSKit;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {
	
	private WebView mWebView;
	private Button btnShowInfo;
	private JSKit js;
	private Handler mHandler = new Handler();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		//初始化控件
		mWebView = (WebView) findViewById(R.id.wv_test);
		btnShowInfo = (Button) findViewById(R.id.btn_showmsg);
		//实例化js对象
		js = new JSKit(this);
		//设置参数
		mWebView.getSettings().setBuiltInZoomControls(true);
		//内容的渲染需要webviewChromClient去实现，设置webviewChromClient基类，解决js中alert不弹出的问题和其他内容渲染问题
		mWebView.setWebChromeClient(new WebChromeClient());
		mWebView.getSettings().setJavaScriptEnabled(true);
		//把js绑定到全局的myjs上，myjs的作用域是全局的，初始化后可随处使用
		mWebView.addJavascriptInterface(js, "myjs");
		
		mWebView.loadUrl("file:///android_asset/jstest.html");
		
		btnShowInfo.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				mHandler.post(new Runnable() {
					@Override
					public void run() {
						//调用 HTML 中的javaScript 函数
						mWebView.loadUrl("javascript:showMsg()");
					}
				});
			}
		});
	}

}

回调的Object：

package com.harold.base;

import android.util.Log;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

import com.harold.jstest.MainActivity;

public class JSKit {
	private MainActivity ma;
	
	public JSKit(MainActivity context) {
		this.ma = context;
	}
	@JavascriptInterface
	public void showMsg(String msg) {
		Log.i("texts", "---------------------------");
		Log.i("texts", "---------------------------");
		Log.i("texts", "---------------------------");
		Toast.makeText(ma, msg, Toast.LENGTH_SHORT).show();
		Log.i("texts", "---------------------------");
	}
}

项目结构图：

demo地址: http://download.youkuaiyun.com/detail/u010819959/9422456

好的，言归正传，我们来看看cordova的交互，至于原理，请参考 www.apache.org官方网站，或者访问以下地址

http://cordova.apache.org/docs/en/latest/guide/platforms/android/plugin.html

这玩意说实话，真心恶心，走了很多很多很多弯路，先说下导入项目容易出错的几个恶心的地方吧：

1.你得有21之上的任一SDK，最低是14，最高22

2.记得看下sdk目录下面sdk\build-tools\下面的文件夹命名，，，这种是cordova认为是非法的builde目录名：build-tools-20.0.0 这玩意是google下载时候默认的

，别担心，我们改成这样就被cordova加载调用了如图：

选中文件夹重命名即可。

好的，然后我们来看结构树：

我们发现android的cordova是一个外引lib工程+一个当前项目，这是编译好的空项目，

代码太多，我将提供编译好的空项目提供运行就不贴代全部码了；

我们首先看看这套框架怎么用:

首先我们找到官方要求我们声明的config.xml文件，在此添加我们的自定义类用于回调：

没错就是这个文件，

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.mk.oms" version="0.0.1">
    <preference name="loglevel" value="DEBUG" />
    <feature name="Whitelist">
        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
        <param name="onload" value="true" />
    </feature>
    <feature name="BarcodeScanner">
        <param name="android-package" value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />
    </feature>
    <feature name="CallNumber">
        <param name="android-package" value="mx.ferreyra.callnumber.CFCallNumber" />
    </feature>
    <allow-intent href="market:*" />
    <name>oms</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="http://115.159.182.127:8080/web1/11/index.html" />
    <access origin="*" />
    <allow-navigation href="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
</widget>

其中添加一个：

<feature name="CallNumber">
        <param name="android-package" value="mx.ferreyra.callnumber.CFCallNumber" />
    </feature>

name就跟上面说的myjs是一个东西。用于调用function的，value是对应的方法的包名

我们看官方解释：

官方让我在初始化时候添加一个这个属性，然后捏，解释下这个 onload是个啥玩意，其实也就是初始化就进行加载这个feature，仅此而已。（默认false）

然后我们再看官方文档：

我们看到，这里我们定义的需要定义个实体类，然后继承CordovaPlugin这个类，然后复写一个execute方法，，我给出的例子是这样的：

package mx.ferreyra.callnumber;

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

import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.telephony.TelephonyManager;

public class CFCallNumber extends CordovaPlugin
{
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        String number = args.getString(0);
        number = number.replaceAll("#","%23");
        
        if( number.startsWith("tel:") == false){
            number = String.format("tel:%s", number);
        }

        try {
            Intent intent = new Intent(isTelephonyEnabled() ? Intent.ACTION_CALL : Intent.ACTION_VIEW);
            intent.setData(Uri.parse(number));
            cordova.getActivity().startActivity(intent);
            callbackContext.success();
        }catch (Exception e) {
            callbackContext.error("CouldNotCallPhoneNumber");
        }

        return true;
    }

    private boolean isTelephonyEnabled(){
        TelephonyManager tm = (TelephonyManager)cordova.getActivity().getSystemService(Context.TELEPHONY_SERVICE);

        return tm != null && tm.getPhoneType() != TelephonyManager.PHONE_TYPE_NONE;
    }
}

cordova调用打电话方法，解释下这个callbackContext，这玩意是用于回调js的，你只需要调用其success或者error方法即可；

是不是看到这里觉得跟webkit方式很像，换汤不换药，，，

然后讲下cordova调用js方式，

其实跟webkit一样，老版本的

sendJavascript（""）;被废弃。那么我们也可以用cordova提供的loadURL（）;方法，用法跟webkit一样;

说到这里，有人会问，这个交互框架怎么去load一个页面呢，，，其实很简单

public class MainActivity extends CordovaActivity{

    @Override
    protected void onResume() {
        super.onResume();

        
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml

        loadUrl("http://weixinsimu.congqipms.com/weixin2.0/index.html");
    }

}
继承cordovaActivity,然后就使用protected方法loadURL即可;
项目地址：http://download.youkuaiyun.com/detail/u010819959/9422503