混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条

2016-08-12 571

混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条

现在关于混合开发也越来越多了，很多人喜欢跟随，比如HB,比如RN，其实这东西很早就有这么一个概念了，而且说实话，这方面的需求目前来讲，还是只针对一个别的应用的，不过日后会发展成什么样，那我就不知道了，不过在此之前，我们的WebView，还是用的比较多的，包括他浏览新闻，以及加载一些动作，也就是加载JS，这样的话，我们就可以拿出来讲一讲了，说真的，学习android也挺久的了，感觉很多东西，一出来的时候都哇哇哇的，到后来都是不了了之了，因为只在于型，而万变不离其宗，源码才是最好的老师，所以现在越来越往下面走了，不过我主要还是处于上层（framework和application），好像有点跑题了，我们就不废话了，我们直接进入主题吧，你在本章节中，将会学习到

WebView加载网页的技巧
WebView加载JavaScript的技巧
WebView增加加载进度条

一.加载网页

先来说说大家经常用的加载网页吧，其实前辈们已经走出来了一条道路了，这里我也比较推荐这个知乎

Android WebView 在开发过程中有哪些坑？

我们新建一个WebViewSample，然后给layout添加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/mWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

对了，这个要记得添加网络权限哦

<uses-permission android:name="android.permission.INTERNET"/>

好的，我们前期工作都准备OK了，开撸吧，骚年！！！

package com.lgl.webviewsample;

/*
 *  项目名：  WebViewSample 
 *  包名：    com.lgl.webviewsample
 *  文件名:   UrlActivity
 *  创建者:   LGL
 *  创建时间:  2016/8/12 22:40
 *  描述：    加载网页
 */

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;

public class UrlActivity extends AppCompatActivity {

    private WebView mWebView;
    //地址
    private String url = "http://www.baidu.com";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_url);
        //初始化
        mWebView = (WebView) findViewById(R.id.mWebView);
        //加载网页
        mWebView.loadUrl(url);
    }
}

我们通过这段代码就可以去加载百度的网页，但是你会发现，只要一进去他就会跳转到浏览器，没错，这里我们需要做点处理了，因为他只是把url加载到我们本地的浏览器，这里也就牵扯到一个概念混合开发

混合开发比较火，这个是毋庸置疑的，我们还是的理解他的概念，混合开发有两种模式

1.Web App
2.Native App

比较主流的当然是Native App啦。因为他更加的灵活，等等

这里我们就简单的实现以下登录的效果，什么是登录？就是我们加载一个网站去完成登录的操作，但是在此之前，我们需要打开我们的TomCat去写怎么一个html网页了，关于tomcat怎么去搭建和使用我就不说了，不会的可以看下我的这篇博文：

Android服务器——TomCat服务器的搭建

然后我们就开始编写了

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>login</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">

    </head>

    <body>
        <form name="form1" action="" method="POST">
            <center>
                <table border="1" bordercolor="#CCCCCC" cellpadding="1" cellspacing="1">
                    <tr>
                        <td align="right">name:</td>
                        <td><input type="text" name="username" value=""></td>
                    </tr>

                    <tr>
                        <td align="right">password:</td>
                        <td><input type="password" name="pswd" value=""></td>
                    </tr>

                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit" name="submit" value="login">
                            &nbsp;&nbsp;
                            <input type="reset" name="reset" value="cancel">
                        </td>
                    </tr>
                </table>
            </center>
    </body>
</html>

显示效果

HTML写的挫不是我的错哈，我们现在的地址是：

http://localhost:8080/lgl/login.html

模拟器的话IP要改一下，不然是访问不了TomCat的

http://10.0.2.2:8080/lgl/login.html

行，我们加载试试

到这里，看上去就想这么一回事了，而在这里你还可以发现，他不会跳转到本地浏览器了，如何加载百度也不跳到本地浏览器，我们可以加个监听

 //本地显示
 mWebView.setWebViewClient(new android.webkit.WebViewClient(){
       @Override
       public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

这样也是OK的

好的，到这里我们仍然还没看到高级的用法，我们继续

二.加载JavaScript

既然要执行，那我们的html要修改一下了，对了，这里要说一点的就是，所操作的一些数据响应都是在服务端的，其实就是web端，而我忘记写了，所以尽量避免吧，这么久了谁还记得那挫代码，哈，我们现在给html加上一些点击事件。也就是写上我们JavaScript的方法

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>login</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">

        <script type="text/javascript">
        function show(){
            var th = document.form1;
            if(th.username.value==""){
                alert("your username is null");
                return;
            }

            if(th.password.value==""){
                alert("your password is null");
                return;
            }

            th.action = "/myweb/servlet/Login";
            th.submit();
        }
        </script>
    </head>

    <body>
        <form name="form1" action="" method="POST">
            <center>
                <table border="1" bordercolor="#CCCCCC" cellpadding="1" cellspacing="1">
                    <tr>
                        <td align="right">name:</td>
                        <td><input type="text" name="username" value=""></td>
                    </tr>

                    <tr>
                        <td align="right">password:</td>
                        <td><input type="password" name="pswd" value=""></td>
                    </tr>

                    <tr>
                        <td colspan="2" align="center">
                            <input type="button" name="submit" value="login" onclick="show()">
                            &nbsp;&nbsp;
                            <input type="reset" name="reset" value="cancel">
                        </td>
                    </tr>
                </table>
            </center>
    </body>
</html>

好的，JavaScript方法加上去了，然后，我们就可以看下效果了

我们不用去管成功了之后是什么，我们只要知道输入框为空的话我们就弹出提示框，那我们现在放到项目里面去

但是这个时候你会发现，点击是没有什么效果的，如果细心的朋友看过android api文档就会发现，webview默认是不支持JavaScript的，需要我们去打开，打开还不够，还需要我们去拦截他的动作，我们这里只有对话框，所以我们就先拦截他的对话框

//支持JavaScript
mWebView.getSettings().setJavaScriptEnabled(true);
//本地客户端
mWebView.setWebChromeClient(new WebChromeClient(){
   //提示框
   @Override
   public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
        });

对的，把属性打开就好了，我们运行一下

现在提示框就出来了，哈哈，但是这个对话框实在是太烂了，这里我们拦截到了对话框，可以对他进行包装，还是在onJsAlert方法里

    //本地客户端
    mWebView.setWebChromeClient(new WebChromeClient(){
            //提示框
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                //本地对话框
                AlertDialog.Builder builder = new AlertDialog.Builder(UrlActivity.this);
                builder.setTitle("温馨提示:");
                //服务器端
                builder.setMessage(message);
                //按钮
                builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        //确认操作
                        result.confirm();
                    }
                });

                builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        result.cancel();
                    }
                });
                builder.show();
                return true;
            }
        });

这里就比较清晰了，只是写了一个原生的提示框显示，我们看下效果

这个效果还是比较满意的

当然，要是只教这些的话，那只能说明在扯淡，这根本用不上开发，我们继续撸，现在撸什么？就是怎么把账号密码保存在本地，也就是应用里，这个要怎么做呢？跟着我一起去看

我们其实也是加一个属性

  //数据操作
  mWebView.addJavascriptInterface(new JSObjClass(),"JSObj");

这里的两个参数都是非常的有用的，第一个为一个接口回调，第二个是一个标识，我们服务端会用上，先看下我们的回调，写个类

    /**
     * 数据保存类
     */
    public class JSObjClass {
        //获取用户名和密码
        @JavascriptInterface
        public String getMessage(String name, String pass) {
            Log.i("TAG", "name:" + name + ":" + "pass:" + pass);
            return name + "," + pass;
        }
    }

这里要注意下声明@JavascriptInterface就好了，然后我们就去html那里改JavaScript了

<script type="text/javascript">
        function show(){
            var th = document.form1;
            var name = th.username.value;
            if(name==""){
                alert("your username is null");
                return;
            }
            var pass = th.pswd.value;
            if(pass==""){
                alert("your password is null");
                return;
            }
            //接口回传数据
            JSObj.getMessage(name,pass);
            th.action = "/myweb/servlet/Login";
            th.submit();
        }
        </script>

OK,这里的话，其实就是调用了一句话，大家应该能看出门道来吧！！！我们运行之后，点击登录，就可以拿到了

到这里，我们加载JavaScript也讲完了

三.加载进度条

这个实现其实是比较简单的，我们先再写个进度条，要在顶部哦

   <ProgressBar
        android:id="@+id/pb"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="4dip"
        android:indeterminateOnly="false"
        android:max="100"
        android:progressDrawable="@drawable/progress_bar_states"/>

他需要一个背景是因为我想实现他的渐变达到进度的效果

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  

    <item android:id="@android:id/background">  
        <shape>  
            <gradient  
                    android:startColor="#FFE4C4"
                    android:centerColor="#ccffff"
                    android:endColor="#ccffff"
            />
        </shape>  
    </item>  

    <item android:id="@android:id/secondaryProgress">  
        <clip>  
            <shape>  
                <gradient  
                        android:startColor="#234"  
                        android:centerColor="#234"  
                        android:endColor="#a24"  
                />  
            </shape>  
        </clip>  
    </item>  

    <item android:id="@android:id/progress">  
        <clip>  
            <shape>  
                <gradient  
                    android:startColor="#33000001"  
                    android:centerColor="#40000000"  
                    android:endColor="#44000000"  
                />  
            </shape>  
        </clip>  
    </item>  

</layer-list>

就是一个xml的渐变，然后，我们就可以去绑定进度了，首先初始化一下进度条

pb = (ProgressBar) findViewById(R.id.pb);
//设置最大值
pb.setMax(100);

然后直接监听就好了

 mWebView.setWebChromeClient(new WebViewClient());
     /**
     * 接口回调
     */
    public class WebViewClient extends WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            pb.setProgress(newProgress);
            if (newProgress == 100) {
                pb.setVisibility(View.GONE);
            }
            super.onProgressChanged(view, newProgress);
        }
    }

其实原理非常的简单，加载出来了就隐藏进度条，就是这样，效果如图

最后我还是想说一下我的观点，坚持下去，你不会的才叫难，你会了就不难了，所以学习，逆水行舟，不进则退

有兴趣的可以加群：555974449，氛围很不错的群哦！

Demo下载：正在上传

微信关注我们

原文链接：https://yq.aliyun.com/articles/316113

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

我发现：在StackOverflow上拯救歪果仁十分有意思！

菊长：火星特工们！今天是周五了，大家有什么提议？ BeJavaGod：报告菊长！我发现，在StackOverflow上拯救歪果仁十分有意思！噗哈哈，时不时遇到问题会使用到StackOverflow，上面汇聚了各路大神的各种精妙解答，不论是java，ios，android，js，.net，各种问题都有解答，当然遇到问题也能上StackOverflow来搜一下，很多问题都能迎刃而解但是有没有突发奇想来找一些问题来回答呢？个人觉得在上面写写英文还是不错的，一方面保持自己英文水平，虽然说不上提高（曾经在外企待过，不写英文实在不舒服斯基），如果帮助了老外，那么人家就会赞你，如果你误老外子弟了，那么也不要紧，噗哈哈，这个网站想必大家应该都知道，不知道的就推荐一下：http://stackoverflow.com 最后，祝大家周末愉快！

2016-08-13

604

前言在 iOS 开发中，一般情况下，简单的向某个 Web 站点简单的页面提交请求并获取服务器的响应，用 Xcode 自带的 NSURLConnection 是能胜任的。但是，在绝大部分下我们所需要访问的 Web 页面则是属于那种受到权限保护的页面，并不是有一个简单的 URL 可以访问的。这就涉及到了 Session 和 Cookie 的处理了，在此时使用 NSURLConnection 也是能够达到要求的，只是其中处理起来的复杂度和难度就提升了。为了更好的处理向 Web 站点的请求，包括处理 Session，Cookie 等细节问题，使用 AFNetworking 则是更好的选择。 1) Session：中文有译作时域的，就是指某个客户端从访问服务器起到停止访问这一段的时间间隔被称为时域。 2) Cookie：由服务器发送给客户端，把 Cookie 的 key：value 值储存在本地文件夹下，当下次请求的时候能够直接发送 Cookie 获得权限验证。 1、AFNetworking 1.1 AFNetworking 特点 AFNetworking 是一个讨人喜欢的网络库，适用于 iO...

2016-08-13

621

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。