基于WebView的Responsive Web Design技术跨平台应用设计与实现.pdf

SOFTWARE软 件2023第 44 卷 第 8 期2023 年Vol.44,No.8基金项目：四川省科技计划资助（2022JDRC0003）作者简介：龙辉（1989），女，四川成都人，硕士研究生，工程师，研究方向：计算机应用技术。通讯作者：陈磊（1982），男，四川成都人，本科，高级工程师，研究方向：计算机应用技术。基于 WebView 的 Responsive Web Design技术跨平台应用设计与实现龙辉 陈磊（四川省科学技术信息研究所，四川成都 610000）摘要：为解决同一移动应用 App 在不同移动终端因为显示性能的不同而带给用户过大的体验差异，在不影响应用开发效率的前提下，本文利用基于 WebView 组件的封装技术，结合自适应网页设计技术，既可以提高应用开发及维护升级的周期和效率，节约开发成本，同时又能自适应不同终端设备的参数差异，给用户提供良好的视觉体验。关键词：网页视图；响应式网页设计；自适应；跨平台中图分类号：TP311.52 文献标识码：A DOI：10.3969/j.issn.1003-6970.2023.08.007本文著录格式：龙辉,陈磊.基于WebView的Responsive Web Design技术跨平台应用设计与实现J.软件,2023,44(08):038-040Cross Platform Design and Implementation of Responsive Web Design Technology Based on WebViewLONG Hui,CHEN Lei(Sichuan Institute of Science and Technology Information,Chengdu Sichuan 610000)【Abstract】：In order to satisfy both the efficiency of development and the large difference in user experience brought by mobile terminals with different App of displaying-performances,this paper uses the encapsulation technology based on the WebView component,combined with the responsive web design,to improve the application the cycle and efficiency of development,maintenance and upgrading save development costs,and at the same time,it can adapt to the parameter differences of different terminal devices to provide users with a good visual experience.【Key words】：WebView;responsive web design;self-adaption;cross-platform基金项目论文0 引言随着 iOS、Android 和 Windows Phone 等手机移动平台的迅速发展，开发基于这些平台的手机应用 App成为程序开发的新热潮之一。与此同时，跨平台 Web技术的应用在移动互联网领域引起了极大的关注，Web技术所特有的“一次编写，到处运行”很大程度上缩短了跨平台开发时间，提高了应用开发的效率，但其缺点也是显而易见的，即对移动平台浏览器的依赖性太强1，仅能基于浏览器完成一些简单的基础功能，而无法直接调用手机本地操作系统提供的功能和接口。就目前的技术发展现状而言，基于 Web 技术实现的移动应用必须要有一个运行环境，而让终端设备上的移动应用 App 独立于运行环境，通过唤醒手机上的 Web 浏览器来实现其内的应用功能显然是不明智的。因此，在WebKit 框架下封装其派生组件 WebView2，将更多样式丰富的 Web 内容集成到应用程序的原生内容中，是基于 Web 技术的移动应用开发的大势所趋。为适应这一趋势，以 PhoneGap 为例的移动开发平台应运而生3。这类移动应用 App 的快速开发平台都是以 WebView 组件为基础，可以实现任何原生设备特性的扩展，开发者只需使用简单的 Web 技术(如 HTML、CSS 和 JavaScript）便可获得移动设备的原生特性，如摄像头、加速器、指南针等。之后再通过 PhoneGap 之类的工具打包 App，这样仅编写一次基础代码就可以将 39龙辉 陈磊：基于 WebView 的 Responsive Web Design 技术跨平台应用设计与实现App 部署到不同底层的多个移动平台上，极大地降低了移动应用的开发成本，提高了跨平台移动应用的开发、升级效率。1 WebView 技术及其组件WebView（网页视图）是一个用来显示 Web 网页的基本控件，使用的是开源浏览器排版、渲染引擎 WebKit，它主要包含WebCore排版引擎和JSCore引擎，能完美地完成对网页 HTML 和 CSS 解析和渲染，运行 JavaScript功能，同时，还对 HTML5 有较好的支持4。然而，WebView 仅限于解析渲染 Web 网页中的HTML、CSS 和 JavaScript，它不能直接访问或调用本息系统的功能，如 Web 网页中的 JavaScrip 脚本不具备调用某个接口去实现特定功能的能力。因此，App 开发人员需要在此基础上编写 Java 类，使其能实现该具体功能；然后通过调用 WebView 提供的 addJavaScriptInterface方法，将该 Java 类注册到派生组件中，通过这一方法实现 JS 调用 Java 的功能，从而达到与 Web 页面的动态交互的目的。2 Responsive Web Design 技术2.1 媒体查询技术（Media Query）简单来说，媒体查询就是在特定条件下触发样式，以达到响应式的效果：即在 Web 网页中通过 Media 属性来定义样式表的引入规则，使 CSS3 样式将页面内容在不经修改的情况下直接显示在特定尺寸的设备屏幕上：不仅能在不同设备显示不同的样式，也能在同一显示设备下的不同状态中显示出不同的样式。2.2 流动布局技术（Fluid Layout）流动布局是指 Web 网页上的各个区块均不是位置固定的，而是浮动变化的。其核心就是 CSS3 引入的MediaQuery 模块，自动探测设备屏幕宽度，然后加载相应的 CSS 文件。该模式下，网页中所有块元素都会在所处的包含元素内从左至右延伸分布；当行宽度太小，放不下两个元素时，后一个元素会自动“流动”到上一个元素的下方，不存在水平方向的 overflow（溢出）风险，避免了水平滚动条的出现。2.3 HTML5 技术HTML5 是超文本标记语言 HTML 第五次修改而成5，拥有良好的语义化标签，其最大的两个优势是：（1）丰富了 Web 网页的表现性能，赋予网页更好的意义和结构，能使浏览器减少对需要插件的丰富互联网程序RIA（Rich Internet Applications）的依赖6；（2）新增了 App Cache 和本地数据库等本地存储功能，使得基于 H5 开发的移动应用 App 能缩短启动时间，加速联网功能。2.4 CSS3 技术CSS3 是 CSS 层叠样式表技术的升级版本7，增加了大量的样式、动画、3D 特效和移动端特性等，使基于模块化的应用不仅能节约网页占比空间，还能自行调整尺寸和布局，从而实现移动终端的自适应。因此，使用该技术不仅有利于移动应用 App 的开发与维护，还能提高其可访问性、可用性，使之能在各跨平台设备屏幕上显示出优越的性能。3 设计思路及代码实现要调用 WebView 封装组件实现 Web 应用的网页内容，主要有两种方法：一种是在 Activity 中实例化WebView 组件，然后用其提供的方法加载指定 URL对应的网页，这种方法简洁易实现，但容易产生 OOM（Out of Memory 异常）崩溃等问题8；为避免这一异常，本文采取另一种做法，具体步骤如下：Step1：在布局文件中声明 WebView：public class MainActivity extends AppCompat Activity/不同于 Activity，AppCompatActivity 是自带标题栏的Overrideprivate WebView myView;/声明 WebView 对象private long initExitTime=2;/设置超时退出时间Step2：在 Activity 中实例化：myView=new WebView(this);/实例化 WebView对象myView.setWebViewClient(new WebViewClient()/调用 setWebViewClient 方法protect boolean shouldOverrideUrlLoading(WebView wView,String webUrl)/将 WebView 对象作为参数传给 Web 网页，使WebView 能响应超链接功能：wView.loadUrl(webUrl);return true;);myView.getSettings().setJavaScriptEnabled(true);/对 WebView 对象进行设置，使其可执行 js 脚本Step3：调用 loadUrl()方法，设置其要显示的 Web内容：myView.loadUrl(http:/ 件第 44 卷 第 8 期SOFTWAREStep4：重 写 Activity 类 的 onKeyDown()方 法，使 WebView 对象支持回退功能。（如果没有此步处理，当用户单击系统后退键时，浏览器会结束应用自身，即调用 finish()方法退出应用，而非回退到上一页面）：public void onBackPressed()/覆盖原方法if(myView.canGoBack()/判断当前网页是否能后退,可以则 goback()myView.goBack();else /如果不可以连续点击两次退出 App,否则弹出提示 Toast long applyTime=System.currentTimeMillis()initExitTime;/响应时间if(applyTime 2000)Toast.makeText(getApplicationContext(),再次点击后退键退出应用,Toast.LENGTH_SHORT).show();applyTime=System.currentTimeMillis();else if(applyTime=2000)super.onBackPressed();/退出应用 Step5：在信息描述文案文件 Manifest.xml 中添加网络权限，否则将会提示Web page not available 错误：/允许应用访问互联网/允许写入联系人,但不可读取/允许应用访问联系人通讯录信息为了适应跨平台的不同移动终端，利用 Responsive Web Design 技术使网页自适应不同条件的设备，具体步骤如下：（1）调查目标终端屏幕特性；（2）划分分辨率范围；（3）结合媒体查询技术设计 CSS 规则组9。WebSettings mySet=myView.getSettings();mySet.setLoadWithOverviewMode(true);/设置该应用支持屏幕自适应mySet.setDisplayZoomControls(false);mySet.setSupportZoom(true);/设置该应用支持缩放功能mySet.setUseWideViewPort(true);/设置该应用支持布局视口同时，对于 App 内如有视频资源需要播放，利用在本地视频文件上添加媒体查询规则的方法实现视频自动播放：当移动终端设备中的视频与添加的媒体查询规则相匹配时立即加载相应视频。除了这种媒体查询技术方法，还可以通过使用 CSS 指定视频文件流媒体尺寸的方法实现本地视频播放10。4 结语本文利用基于 WebView 组件的封装技术，结合自适应网页设计技术，既可以提高应用开发及维护升级的周期和效率、节约开发成本，同时又能自适应不同终端设备的参数差异，给用户提供良好的视觉体验，解决了同一移动应用 App 在不同移动终端因为显示性能的不同而带给用户过大的体验差异，同时还不影响应用开发效率。参考文献1 冯兴利,洪丹丹,罗军锋,等.视频自适应技术在网页设计中的实现J.现代电子技术,2016,39(24):18-21.2 张波,冯玉林,黄涛.基于对象视图模型WebView的Web应用框架J.软件学报,2002,13(10):1985-1990.3 罗圣美,王蔚,任文慧.两种移动应用开发框架的性能测试比较基于PhoneGap和TitaniumJ.中兴通讯技术,2013,19(3):44-47.4 赵光泽,李晖,孟杨.Android平台WebView组件安全及应用加固研究J.信息网络安全,2015(10):61-65.5 任平红,陈矗.Web编程基础:HTML5、CSS3、JavaScipt(第2版)M.北京:清华大学出版社,2019.6 Andy Rubin Android DevelopersEB/OL.2019-09-04.https:/D.7 GASSTON P.The Modern Web:Multi-device Web Development with HTML5,CSS3,and JavaScriptM.USA:s.n.,2013.8 MARCOTTE Ethan.Responsive Web DesignM.USA:s.n.,2010.9 鲁骏,邬春学,张松.自适应设计在电子医疗的应用研究J.信息技术,2014(7):125-128.10 王玥琳.基于响应式图书馆网站构建的探讨J.产业与科技论坛,2016,15(9):60-61.