Android WebView与JavaScript交互实现Web App
当我们去开发一个基于web的android app时，我们第一须要处理的就是与JavaScript的交互问题。Android须要做的事情就是开放某些特定的接口供web里的JavaScript调用，能够开放弹出框功能，Toast，界面跳转等等。这样我们的web视图以假乱真的当成Android的原生界面。而这套web代码又能够嵌入iPhone的client中。也就是说Android和IOSclient不过提供一个共web使用的框架，业务都由web端处理。这岂不是开发一次。可处处执行。然而这一切都是后话，且让我们先实现WebView和JavaScript的交互问题。这里我以Android
app为例。
1. 首先在Eclipse中创建一个空的Android项目，我将它命名为JSInteraction。找到并打开AndroidManifest.xml文件，在Permissions里加入一个android.permission.WRITE_EXTERNAL_STORAGE权限。
2.这里我已经加入了一个主页面activity_main.xml，一个基本的Activity MainActivity.java。及一个提供各种功能供JavaScript调用的类JsOperator.java。
基本的文件夹结构例如以下图所看到的
主页面activity_main.xml代码例如以下所看到的。只唯独一个WebView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
MainActivity.java的代码例如以下所看到的。
表示加入供JS调用的对象。其别名是JsInteraction。这样在JS中仅仅要写JsInteraction.<方法名称>()就能够调用对应的方法了。WebView将载入assets目录里LoginJs目录下的login.html，这个文件会在后面创建。
package com.yld.jsinteraction;
import android.support.v7.app.ActionBarActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.annotation.SuppressLint;
import android.os.Bundle;
public class MainActivity extends ActionBarActivity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.webView = (WebView) this.findViewById(R.id.webView);
this.initializeWebView();
}
@SuppressLint({ "NewApi", "SetJavaScriptEnabled" })
private void initializeWebView(){
webView.addJavascriptInterface(new JsOperator(MainActivity.this),
"JsInteraction");
try {
String url = "file:///android_asset/LoginJs/login.html";
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
this.webView.loadUrl(url);
} catch (Exception e) {
e.printStackTrace();
}
}
}
JsOperator.java的代码例如以下
package com.yld.jsinteraction;
import org.json.JSONObject;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.content.Context;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.webkit.JavascriptInterface;
public class JsOperator {
private Context context;
public JsOperator(Context context) {
this.context = context;
}
/**
* 弹出消息对话框
*/
@JavascriptInterface
public void showDialog(String message) {
AlertDialog.Builder builder = new Builder(context);
builder.setMessage(message);
builder.setTitle("提示");
builder.setPositiveButton("确认", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
}
});
builder.setNegativeButton("取消", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
builder.create().show();
}
/**
* 获取登录的username和password
* @return JSON格式的字符串
*/
@JavascriptInterface
public String getLoginInfo(){
try{
JSONObject login = new JSONObject();
login.put("Username", "YLD");
login.put("Password", "111");
return login.toString();
}catch(Exception e){
e.printStackTrace();
}
return null;
}
}
JsOperator提供了两个方法，一个方法用来弹出对话框，还有一个方法则是返回一个登录信息的JSON字符串，并且这两个方法都打上了标签@JavascriptInterface，这是比較重要的，由于在较低的版本号中假设不声明它是JavaScript可调用的方法。JS将无法调用。
3.在assets目录下创建LoginJs目录，并在其下创建两个文件login.html，login.js
login.html中有一个usernamepassword输入框及一个登录button。代码例如以下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title id="title">Login</title> <script type="text/javascript" src="login.js"></script> </head> <body style="background:lightblue"> <div style="margin-top: 20px;margin-left: 20px"> <div> <label>Username:</label> <input id="txtUsername" type="text" style="margin-left: 20px"/> </div> <div style="margin-top: 20px"> <label>Password:</label> <input id="txtPassword" type="text" style="margin-left: 20px"/> </div> <div style="margin-top: 20px;margin-left: 160px"> <button onclick="loginObj.login()" style="width:100px">Login</button> </div> </div> </body> </html>
在login.js的setLoginInfo里使用JsInteraction.getLoginInfo()调用android提供的接口，并获取登录信息并将登录信息填充到用户输入框中，login方法则是调用了JsInteraction.showDialog("Login start...")来调用android端提供的弹出对话框的接口。
var Login = (function(){
function Login(){
}
Login.prototype.login = function(){
JsInteraction.showDialog("Login start...");
}
Login.prototype.setLoginInfo = function(){
var logininfoJson = JsInteraction.getLoginInfo();
//解析json字符串
var logininfo = eval("("+logininfoJson+")");
document.getElementById("txtUsername").value = logininfo.Username;
document.getElementById("txtPassword").value = logininfo.Password;
}
return Login;
})();
var loginObj = new Login();
window.onload=function(){
loginObj.setLoginInfo();
}
4.Html和client的创建已经完毕，执行效果例如以下
点击Loginbutton
源码下载页：http://download.csdn.net/detail/leyyang/8995887
