您的位置：首页 > 移动开发 > Android开发

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

2016-01-29 17:56 766 查看
最近公司需要混合开发一个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' onclick='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.csdn.net/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.csdn.net/detail/u010819959/9422503
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航