Android+WebView

梦里梦外; 2021-09-16 19:46 434阅读 0赞

> WebView是Android手机内置的一款高性能webkit内核浏览器，它是封装在SDK中的一个组件。通过使用WebView,可以很简易的与页面进行交互和数据处理，从而在安卓中使用各种前端框架，插件。

> 这儿我们就写一个简单用户登录的例子来讲解WebView的使用过程吧。实现的过程是我们使用WebView引入agree.html,agree.html这个页面实现的功能是页面布局、样式、JS逻辑；但是在这之前需要先写一个xml文件，这一步尤为重要。前两步都做了，就可以在类文件中写逻辑功能处理了。

# 一、定义html页面 #

> 创建assets文件夹。该文件夹放在app目录下面，应和java目录同级。该文件夹作用是存html，css,js等一些静态资源。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70][]

在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){
            }
        }
    }

运行之后，可以看到下面的效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 1][]

> 上面也仅仅只是引入了一个html页面。如何在页面中使用JS,并且与安卓进行交互？在agree.html中，给登录按钮定义一个事件。然后直接写js，运行之后，可以看到弹出层。

点击登录。获取输入的用户名和密码。这里是页面上的弹出。很好理解。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 2][]

下面请看从安卓传值到页面和页面传值到安卓的例子。

## 1.页面传值到安卓。 ##

> 很关键的一句话。window.jsbridge.login();login是你自定义的方法，account,password,zhangtaonum都是参数。

window.jsbridge.login(account,password,zhangtaonum);

我们在安卓中打印一下。在安卓类文件AgreeMentActivity中增加一个方法login(),对应页面上的login

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 3][]

@JavascriptInterface
     public void login(String ccount,String password,String zhangtaonum){
                Toast.makeText(AgreeMentActivity.this, "用户名:"+ ccount + "+密码:"+password, Toast.LENGTH_LONG).show();
     }

运行,输入用户名、密码，可以看到效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 4][]

## 2.安卓传值到页面。 ##

`AgreeMentActivity类文件中:`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 5][]

@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);
    }

运行效果。

无参传值：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 6][]

有参数传值：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 7][]

> 当然，这儿仅仅是演示了一下很简单的使用，其实WebView使用后，可以在页面使用几乎所有目前流行的前端框架，样式，极大提升了开发效率，项目风格开始也变得绚丽多彩。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70]: /images/20210809/3ffc63231c4348899627c9caa1cd5058.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 1]: /images/20210809/30b1eba11e4743c087c4de540e8f8a0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 2]: /images/20210809/e6185681e66b444ab633703c4697e802.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 3]: /images/20210809/99fe850ef3ad4654a5efd7c4a704d36b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 4]: /images/20210809/e31b8b74cfb646dabdcd742766f6f2b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 5]: /images/20210809/164e801978b14c4f84bb40e5ea8cabf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 6]: /images/20210809/1869218f53864233be89a2ff6832b73a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWxvbmdiaWFveXVsaQ_size_16_color_FFFFFF_t_70 7]: /images/20210809/8a51f680eb2341a99abaa3737ce0f61b.png

Android+WebView

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 androidwebview与js相互调用

相关 rem布局在Androidwebview中页面错乱