WebView是Android手机内置的一款高性能webkit内核浏览器，它是封装在SDK中的一个组件。通过使用WebView,可以很简易的与页面进行交互和数据处理，从而在安卓中使用各种前端框架，插件。
这儿我们就写一个简单用户登录的例子来讲解WebView的使用过程吧。实现的过程是我们使用WebView引入agree.html,agree.html这个页面实现的功能是页面布局、样式、JS逻辑；但是在这之前需要先写一个xml文件，这一步尤为重要。前两步都做了，就可以在类文件中写逻辑功能处理了。
一、定义html页面
创建assets文件夹。该文件夹放在app目录下面，应和java目录同级。该文件夹作用是存html，css,js等一些静态资源。
在assets文件夹中新建agree.html
agree.html
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src=" http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.form-bg{
background: #00b4ef;
}
.form-horizontal{
background: #fff;
padding-bottom: 40px;
border-radius: 15px;
text-align: center;
}
.form-horizontal .heading{
display: block;
font-size: 35px;
font-weight: 700;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 30px;
}
.form-horizontal .form-group{
padding: 0 40px;
margin: 0 0 25px 0;
position: relative;
}
.form-horizontal .form-control{
background: #f0f0f0;
border: none;
box-shadow: none;
padding: 0 20px 0 45px;
height: 40px;
transition: all 0.3s ease 0s;
}
.form-horizontal .form-control_{
background: #f0f0f0;
border: none;
border-radius: 10px;
box-shadow: none;
padding: 0 20px 0 45px;
height: 40px;
transition: all 0.3s ease 0s;
}
.form-horizontal .form-control:focus{
background: #e0e0e0;
box-shadow: none;
outline: 0 none;
}
.form-horizontal .form-group i{
position: absolute;
top: 12px;
left: 60px;
font-size: 17px;
color: #c8c8c8;
transition : all 0.5s ease 0s;
}
.form-horizontal .form-control:focus + i{
color: #00b4ef;
}
.form-horizontal .fa-question-circle{
display: inline-block;
position: absolute;
top: 12px;
right: 60px;
font-size: 20px;
color: #808080;
transition: all 0.5s ease 0s;
}
.form-horizontal .fa-question-circle:hover{
color: #000;
}
.form-horizontal .main-checkbox{
float: left;
width: 20px;
height: 20px;
background: #11a3fc;
border-radius: 50%;
position: relative;
margin: 5px 0 0 5px;
border: 1px solid #11a3fc;
}
.form-horizontal .main-checkbox label{
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.form-horizontal .main-checkbox label:after{
content: "";
width: 10px;
height: 5px;
position: absolute;
top: 5px;
left: 4px;
border: 3px solid #fff;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.form-horizontal .main-checkbox input[type=checkbox]{
visibility: hidden;
}
.form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{
opacity: 1;
}
.form-horizontal .text{
float: left;
margin-left: 7px;
line-height: 20px;
padding-top: 5px;
text-transform: capitalize;
}
.form-horizontal .btn{
float: right;
font-size: 14px;
color: #fff;
background: #00b4ef;
padding: 10px 25px;
border: none;
text-transform: capitalize;
transition: all 0.5s ease 0s;
}
@media only screen and (max-width: 479px){
.form-horizontal .form-group{
padding: 0 25px;
}
.form-horizontal .form-group i{
left: 45px;
}
.form-horizontal .btn{
padding: 10px 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<form class="form-horizontal">
<span class="heading">用户登录</span>
<div class="form-group">
<input type="text" class="form-control" id="account" placeholder="用户名">
<i class="fa fa-user"></i>
</div>
<div class="form-group help">
<input type="password" class="form-control" id="password" placeholder="密码">
<i class="fa fa-lock"></i>
<a href="#" class="fa fa-question-circle"></a>
</div>
<div class="form-group">
<div class="main-checkbox">
<input type="checkbox" value="0" id="checkbox1" name="check"/>
<label for="checkbox1"></label>
</div>
<span class="text">Remember me</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block" onclick="login()">登录</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
二、定义xml文件
activity_agreement.xml<?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">
<WebView
android:id="@+id/wv_agreement"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="false"
android:fadingEdge="none"
android:overScrollMode="never"
android:scrollbars="none" />
</LinearLayout>
三、定义WebView
AgreeMentActivity类文件package com.example.youjie.barcode;
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
public class AgreeMentActivity extends AppCompatActivity {
private WebView webView;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_agreement);
//隐藏logo名
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null){
actionBar.hide();
}
webView = (WebView) findViewById(R.id.wv_agreement);
// 加载的html页面
webView.loadUrl("file:///android_asset/agree.html");
// 开启js
webView.getSettings().setJavaScriptEnabled(true);
// 允许js弹出框
webView.setWebChromeClient(new WebChromeClient());
// 安卓<==>JS交互
webView.addJavascriptInterface(new JSBridge(),"jsbridge");
// 页面加载完成时
webView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
// TODO: 2018/10/31 页面加载完成时需要执行的操作
}
});
}
/* TODO: 安卓<==>JS交互*/
// 和页面交互的安卓中的方法。
public class JSBridge{
@JavascriptInterface
public void jumppage(String jsondata,String arrjsonshow){
}
}
}运行之后，可以看到下面的效果。
上面也仅仅只是引入了一个html页面。如何在页面中使用JS,并且与安卓进行交互？在agree.html中，给登录按钮定义一个事件。然后直接写js，运行之后，可以看到弹出层。
<button type="submit" class="btn btn-primary btn-lg btn-block" onclick="login()">登录</button><script type="text/javascript">
function login(){
var account = $("#account").val();
var password = $("#password").val();
var zhangtaonum = $("#zhangtaonum").val();
alert("用户名:"+account+"=="+"密码:"+password);
}
</script>
点击登录。获取输入的用户名和密码。这里是页面上的弹出。很好理解。
下面请看从安卓传值到页面和页面传值到安卓的例子。
1.页面传值到安卓。
很关键的一句话。window.jsbridge.login();login是你自定义的方法，account,password,zhangtaonum都是参数。
window.jsbridge.login(account,password,zhangtaonum);<script type="text/javascript">
function login(){
var account = $("#account").val();
var password = $("#password").val();
var zhangtaonum = $("#zhangtaonum").val();
// 获取输入的用户名、密码传入安卓中，打印出来。
window.jsbridge.login(account,password,zhangtaonum);
}
</script>我们在安卓中打印一下。在安卓类文件AgreeMentActivity中增加一个方法login(),对应页面上的login
@JavascriptInterface
public void login(String ccount,String password,String zhangtaonum){
Toast.makeText(AgreeMentActivity.this, "用户名:"+ ccount + "+密码:"+password, Toast.LENGTH_LONG).show();
}运行,输入用户名、密码，可以看到效果：
2.安卓传值到页面。
AgreeMentActivity类文件中:
@Override
public void onPageFinished(WebView view, String url) {
// TODO: 2018/10/31 页面加载完成时需要执行的操作
// 有参调用===虚拟机上可能会不生效，真机上才会正常生效。
webView.loadUrl("javascript:android2htmlVal(\"" + "我是android传过来的值" + "\")");
// 无参调用
webView.loadUrl("javascript:android2html()");
}
agree.html中
// 无参数调用
function android2html(){
alert("我被条用了!");
}
// 有参数调用
function android2htmlVal(val){
alert(val);
}运行效果。
无参传值：
有参数传值：
当然，这儿仅仅是演示了一下很简单的使用，其实WebView使用后，可以在页面使用几乎所有目前流行的前端框架，样式，极大提升了开发效率，项目风格开始也变得绚丽多彩。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
