写点什么

WebView 开源库终极学习方案,android 开发艺术探索 pdf

用户头像
Android架构
关注
发布于: 刚刚

02.如何使用

2.1 如何引入

implementation 'cn.yc:WebViewLib:1.2.0'

2.2 最简单使用

X5WebUtils.init(this);


<BridgeWebViewandroid:id="@+id/web_view"android:layout_width="match_parent"android:layout_height="match_parent"android:scrollbarSize="3dp" />


<X5WebViewandroid:id="@+id/web_view"android:layout_width="match_parent"android:layout_height="match_parent"android:scrollbarSize="3dp" />


<可以使用 ProgressWebViewandroid:id="@+id/web_view"android:layout_width="match_parent"android:layout_height="match_parent"android:scrollbarSize="3dp" />


//主要是在 X5WebViewClient 和 X5WebChromeClient 已经做了很多常见的逻辑处理,如果不满足你使用,可以如下这样写 MyX5WebViewClient webViewClient = new MyX5WebViewClient(webView, this);webView.setWebViewClient(webViewClient);MyX5WebChromeClient webChromeClient = new MyX5WebChromeClient(this);webView.setWebChromeClient(webChromeClient);


private class MyX5WebViewClient extends X5WebViewClient {public MyX5WebViewClient(BridgeWebView webView, Context context) {super(webView, context);}


//重写你需要的方法即可}


private class MyX5WebChromeClient extends X5WebChromeClient{public MyX5WebChromeClient(Activity activity) {super(activity);}


//重写你需要的方法即可}


  • 针对类似购物的商品详情页面的 webView

  • 当 WebView 在最顶部或者最底部的时候,不消费事件,则可以使用 VerticalWebView

2.3 常用 api

mWebView.getX5WebChromeClient().setWebListener(interWebListener);private InterWebListener interWebListener = new InterWebListener() {@Overridepublic void hindProgressBar() {pb.setVisibility(View.GONE);}


@Overridepublic void showErrorView(@X5WebUtils.ErrorType int type) {//设置自定义异常错误页面}


@Overridepublic void startProgress(int newProgress) {//该方法是是监听进度条进度变化的逻辑 pb.setProgress(newProgress);}


@Overridepublic void showTitle(String title) {//该方法是监听 h5 中 title}};


x5WebChromeClient = x5WebView.getX5WebChromeClient();x5WebChromeClient.setVideoWebListener(new VideoWebListener() {@Overridepublic void showVideoFullView() {//视频全频播放时监听}


@Overridepublic void hindVideoFullView() {//隐藏全频播放,也就是正常播放视频}


@Overridepublic void showWebView() {//显示 webView}


@Overridepublic void hindWebView() {//隐藏 webView}});


//X5WebView 中//设置是否开启密码保存功能,不建议开启,默认已经做了处理,存在盗取密码的危险 mWebView.setSavePassword(false);//是否开启软硬件加速 mWebView.setOpenLayerType(false);//获取 x5WebChromeClient 对象 x5WebChromeClient = mWebView.getX5WebChromeClient();//获取 x5WebViewClient 对象 x5WebViewClient = mWebView.getX5WebViewClient();


  • 关于如何使用仿微信加载 H5 页面进度条

  • 前端页面时受到网路环境,页面内容大小的影响有时候会让用户等待很久。显示一个加载进度条可以说很大程度上提升用户的体验。


private WebProgress pb;//显示进度条 pb.show();//设置进度条过度颜色 pb.setColor(Color.BLUE,Color.RED);//设置单色进度条 pb.setColor(Color.BLUE);//为单独处理 WebView 进度条 pb.setWebProgress(newProgress);//进度完成后消失 pb.hide();


//同步 cookieX5WebUtils.syncCookie(this,"url",cookieList);//清除 cookieX5WebUtils.removeCookie(this);

2.4 使用建议

  • 优化一下相关的操作

  • 关于设置 js 支持的属性


@Overridepublic void onResume() {super.onResume();if (mWebView != null) {mWebView.getSettings().setJavaScriptEnabled(true);}}


@Overrideprotected void onStop() {super.onStop();if (mWebView != null) {mWebView.getSettings().setJavaScriptEnabled(false);}}


  • 关于 destroy 销毁逻辑


@Overrideprotected void onDestroy() {try {if (webView != null) {webView.stopLoading();webView.destroy();webView = null;}} catch (Exception e) {Log.e("X5WebViewActivity", e.getMessage());}super.onDestroy();}

2.5 关于 web 页面异常状态区分类型

@Overridepublic void showErrorView(@X5WebUtils.ErrorType int type) {switch (type){//没有网络 case X5WebUtils.ErrorMode.NO_NET:break;//404,网页无法打开 case X


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


5WebUtils.ErrorMode.STATE_404:break;//onReceivedError,请求网络出现 errorcase X5WebUtils.ErrorMode.RECEIVED_ERROR:break;//在加载资源时通知主机应用程序发生 SSL 错误 case X5WebUtils.ErrorMode.SSL_ERROR:break;default:break;}}

2.6 该库流程图

  • java 调用 js 的流程图

  • 第一步操作:mWebView.callHandler("functionInJs", "小杨逗比", new CallBackFunction() {//这里面是回调});

  • 第二步操作:将 handlerName,data,responseCallback,封装到 Message 对象中,然后开始分发数据,最后 webView 执行_handleMessageFromNative;

  • 第三步操作:去 WebViewJavascriptBridge.js 类中找到_handleMessageFromNative 方法,js 根据"functionInJs"找到对应的 js 方法并且执行;

  • 第四步操作:js 把运行结果保存到 message 对象中,然后添加到 js 消息队列中;

  • 第五步操作:在_dispatchMessageFromNative 方法中,可以看到,js 向 native 发送 "消息队列中有消息" 的通知;

  • 第六步操作:webView 执行 js 的_fetchQueue(WebViewJavascriptBridge.js 类)方法;

  • 第七步操作:js 把消息队列中的所有消息都一起回传给 webView;

  • 第八步操作:webView 收到所有的消息,一个一个串行处理,注意其中包括 "functionInJs"方法运行的结果的消息;

  • js 调用 Android 的流程图

  • 第一步操作:mWebView.registerHandler("toPhone", new BridgeHandler() { //回调});

  • 第二步操作:调用 messageHandlers.put(handlerName, handler),将名称和 BridgeHandler 对象放到 map 集合中

  • 第三步操作:在 shouldOverrideUrlLoading 方法中拦截 url,与网页约定好一个协议,匹配则执行相应操作,也就是利用 WebViewClient 接口回调方法拦截 url

  • 第四步操作:如果是 url.startsWith(BridgeUtil.YY_RETURN_DATA)则有数据返回;如果是 BridgeUtil.YY_OVERRIDE_SCHEMA 则刷新消息队列

  • 第五步操作:通过 BridgeHandler 对象,将 data 和 callBackFunction 返回交给开发者

03.js 交互操作

3.1 Java 调用 js 的使用方法

  • 代码如下所示,下面 updateAttentionStatus 代表 js 这边的方法名称

  • webView.callHandler(“updateAttentionStatus”, …, new CallBackFunction());这是 Java 层主动调用 Js 的”updateAttentionStatus”方法。


mWebView.callHandler("updateAttentionStatus", attention, new CallBackFunction() {@Overridepublic void onCallBack(String data) {


}});

3.2 js 调用 java 的使用方法

  • 代码如下所示,下面中的 toPhone 代表的是 Android 这边提供给 js 的方法名称

  • webView.registerHandler(“toPhone”, …);这是 Java 层注册了一个叫”toPhone”的接口方法,目的是提供给 Js 来调用。这个”toPhone”的接口方法的回调就是 BridgeHandler.handler()。


mWebView.registerHandler("toPhone", new BridgeHandler() {@Overridepublic void handler(String data, CallBackFunction function) {try {JSONObject jsonData = new JSONObject(data);String phone = jsonData.optString("phone");//todo 打电话} catch (JSONException e) {e.printStackTrace();}}});


//注意,这里回传数据目前只是支持 String 字符串类型 function.onCallBack("回调数据");

3.3 js 的调用时机分析

  • onPageFinished()或者 onPageStarted()方法中注入 js 代码

  • 做过 WebView 开发,并且需要和 js 交互,大部分都会认为 js 在 WebViewClient.onPageFinished()方法中注入最合适,此时 dom 树已经构建完成,页面已经完全展现出来。但如果做过页面加载速度的测试,会发现 WebViewClient.onPageFinished()方法通常需要等待很久才会回调(首次加载通常超过 3s),这是因为 WebView 需要加载完一个网页里主文档和所有的资源才会回调这个方法。

  • 能不能在 WebViewClient.onPageStarted()中注入呢?答案是不确定。经过测试,有些机型可以,有些机型不行。在 WebViewClient.onPageStarted()中注入还有一个致命的问题——这个方法可能会回调多次,会造成 js 代码的多次注入。

  • 从 7.0 开始,WebView 加载 js 方式发生了一些小改变,官方建议把 js 注入的时机放在页面开始加载之后

  • WebViewClient.onProgressChanged()方法中注入 js 代码

  • WebViewClient.onProgressChanged()这个方法在 dom 树渲染的过程中会回调多次,每次都会告诉我们当前加载的进度。

  • 在这个方法中,可以给 WebView 自定义进度条,类似微信加载网页时的那种进度条

  • 如果在此方法中注入 js 代码,则需要避免重复注入,需要增强逻辑。可以定义一个 boolean 值变量控制注入时机

  • 那么有人会问,加载到多少才需要处理 js 注入逻辑呢?

  • 正是因为这个原因,页面的进度加载到 80%的时候,实际上 dom 树已经渲染得差不多了,表明 WebView 已经解析了标签,这时候注入一定是成功的。在 WebViewClient.onProgressChanged()实现 js 注入有几个需要注意的地方:

  • 1 上文提到的多次注入控制,使用了 boolean 值变量控制

  • 2 重新加载一个 URL 之前,需要重置 boolean 值变量,让重新加载后的页面再次注入 js

  • 3 如果做过本地 js,css 等缓存,则先判断本地是否存在,若存在则加载本地,否则加载网络 js

  • 4 注入的进度阈值可以自由定制,理论上 10%-100%都是合理的,不过建议使用了 75%到 90%之间可以。

3.4 js交互原理分析

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
WebView开源库终极学习方案,android开发艺术探索pdf