WEBAPP开发之Android WebView与JavaScript交互实现Web App-职坐标

WEBAPP开发之Android WebView与JavaScript交互实现Web App

白羽 2019-01-08 来源：网络阅读 529 评论 0

摘要：本文将带你了解WEBAPP开发Android WebView与JavaScript交互实现Web App，希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发Android WebView与JavaScript交互实现Web App，希望本文对大家学WEBAPP有所帮助。

当我们去开发一个基于web的android app时，我们第一需要处理的就是与JavaScript的交互问题，Android需要做的事情就是开放某些特定的接口供web里的JavaScript调用，可以开放弹出框功能，Toast，界面跳转等等，这样我们的web视图以假乱真的当成Android的原生界面，而这套web代码又可以嵌入iPhone的客户端中，也就是说Android和IOS客户端仅仅是提供一个共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="//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(); } /** * 获取登录的用户名和密码 * @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

<!DOCTYPE html><html><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端提供的弹出对话框的接口。

4.Html和客户端的创建已经完成，运行效果如下

点击Login按钮

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

移动应用解决方案平台移动支付安全解决方案手机应用开发教程

本文由 @白羽发布于职坐标。未经许可，禁止转载。