SCI论文（www.lunwensci.com）
摘 要：为解决同一移动应用 App 在不同移动终端因为显示性能的不同而带给用户过大的体验差异,在不影响应用开发 效率的前提下, 本文利用基于 WebView 组件的封装技术, 结合自适应网页设计技术, 既可以提高应用开发及维护升级的周期 和效率,节约开发成本,同时又能自适应不同终端设备的参数差异,给用户提供良好的视觉体验。
Cross Platform Design and Implementation of Responsive Web Design Technology Based on WebView
LONG 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 框架下封装其派生组件 WebView[2],将更多样 式丰富的 Web 内容集成到应用程序的原生内容中,是 基于 Web 技术的移动应用开发的大势所趋。
为适应这一趋势,以 PhoneGap 为例的移动开发平 台应运而生 [3]。这类移动应用 App 的快速开发平台都是 以 WebView 组件为基础,可以实现任何原生设备特性 的扩展, 开发者只需使用简单的 Web 技术 ( 如 HTML、 CSS 和JavaScript)便可获得移动设备的原生特性,如 摄像头、加速器、指南针等。之后再通过 PhoneGap 之 类的工具打包 App,这样仅编写一次基础代码就可以将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 是 自 带标题栏的
@Override
private WebView myView; // 声明 WebView 对象 private long initExitTime = 2; // 设置超时退出时间
…
Step2 ：在 Activity 中实例化 ：
myView= new WebView(this); // 实例化 WebView 对象
myView.setWebViewClient(new WebViewClient () {// 调用 setWebViewClient 方法
protect boolean shouldOverrideUrlLoading(W ebView wView, String webUrl) {
// 将 WebView 对象作为参数传给 Web 网页,使 WebView 能响应超链接功能 ：
wView.loadUrl(webUrl);
return true;
}
});
myView.getSettings().setJavaScriptEnabled(true); // 对 WebView 对象进行设置,使其可执行js 脚本
Step3 ：调用 loadUrl() 方法,设置其要显示的 Web 内容 ：
myView.loadUrl("http://loan.istisc.cn/"); setContentView(myView);
Step4 ：重 写 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 中添加 网络权限,否则将会提示 "Webpagenotavailable" 错误 ：
// 允许应用访问互联网
// 允许写入联系人 , 但不可读取
// 允许应用访问联系人通讯录信息
为了适应跨平台的不同移动终端,利用 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和Titanium[J].中兴通讯技术,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 Developers[EB/OL].2019-09-04.
https://Developer.android.google.cn.
[7] GASSTON P. The Modern Web:Multi-device Web Development with HTML5.CSS3.and JavaScript[M].USA: [s.n.],2013.
[8] MARCOTTE Ethan.Responsive Web Design[M].USA: [s.n.],2010.
[9] 鲁骏,邬春学,张松. 自适应设计在电子医疗的应用研究[J].信 息技术,2014(7):125-128.
[10] 王玥琳.基于响应式图书馆网站构建的探讨[J].产业与科技 论坛,2016.15(9):60-61.
关注SCI论文创作发表，寻求SCI论文修改润色、SCI论文代发表等服务支撑，请锁定SCI论文网！
文章出自SCI论文网转载请注明出处：https://www.lunwensci.com/jisuanjilunwen/64932.html
