混合开发(一)——WebView开发高级技巧之加载网页以及JavaScript,加载进度条

简介: 混合开发(一)——WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实话,这方面的需求目前来讲,还是只针对一个别的应用的,不过日后会发展成...

混合开发(一)——WebView开发高级技巧之加载网页以及JavaScript,加载进度条


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

  • WebView加载网页的技巧
  • WebView加载JavaScript的技巧
  • 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怎么去搭建和使用我就不说了,不会的可以看下我的这篇博文:

然后我们就开始编写了

<!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写的挫不是我的错哈,我们现在的地址是:

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

行,我们加载试试

这里写图片描述

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

 //本地显示
 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下载:正在上传

目录
相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
46 1
|
22天前
|
Web App开发 JavaScript 前端开发
Node.js开发
Node.js开发
37 13
|
29天前
|
存储 JavaScript 前端开发
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
26天前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
|
29天前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!
|
25天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。
|
28天前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
29天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带你走进Node.js的世界,从基础到进阶,逐步解析Node.js在后端开发中的应用。我们将通过实例来理解Node.js的异步特性、事件驱动模型以及如何利用它处理高并发请求。此外,文章还会介绍如何搭建一个基本的Node.js服务器,并探讨如何利用现代前端框架与Node.js进行交互,实现全栈式开发。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和深入的理解。
27 4
|
1月前
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。
|
1月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
39 2