e-works数字化企业网  »  文章频道  »  基础信息化  »  移动应用

Hybird移动应用框架实现研究

2017/10/20    来源:海口经济学院    作者:陈显军  纪洲鹏  龙军  湛永松      
关键字:Hybird  移动应用  
Hybird(混合)移动应用开发模式随着现代Web标准的逐渐成熟化而得到越来越广泛的应用。
    1前言
 
    随着移动互联网技术的发展以及移动设备计算能力的提升和普及,移动互联网应用在人们生活中越来越不可或缺,人们使用移动APP查找需要的各种信息,如:新闻,购物,视频、娱乐以及工作事项等已成为现代社会的生活常态。移动应用市场的多样性要求开发者们及时获取用户需求,快速迭代出符合用户需求的移动应用。原生移动APP的开发过程中,大部分开发时间用于处理不同移动平台间的差异以及底层系统操作上,导致业务功能开发的时间不够充分。针对这种困境,基于HTML5的Hybrid App开发模式,即混合应用开发模式,兼具传统原生开发模式良好用户体验的优势以及Web开发模式跨平台以及快速迭代的优势,得到了快速的发展并被开始被开发者广泛用于解决移动应用快速开发以及跨平台的需求。
 
    2研究现状
 
    每个移动操作系统都有自己的SDK,用于创建移动应用。例如,对于IOS平台来说,开发者需使用Objective-C和Swift语言创建应用,而Android系统的应用编程语言是Java,使用这些语言和官方SDK创建的应用称为原生应用。但是为了实现跨平台,可以通过封装一个中间层代理原生SDK的调用,上层应用通过中间层代理原生SDK所提供的API,这也就是“跨平台”应用实现的基本原理。
 
    2.1HTML5 移动 Web 应用开发
 
    随着HTML5和CSS3逐渐兴起,基于HTML5的应用将对移动互联网领域起到巨大的影响。所谓的HTML5实际上是指包括HTML、CSS和JavaScript在内的一套技术组合,这些技术强化了Web网页的表现能力。目前支持HTML5的主流浏览器有Google Chrome、Firefox、Internet Explorer 9和10等。
 
    2.2Hybird 移动应用开发的类型
 
    无论是Android、IOS,还是Windows Phone,在它们的SDK中都包含了一个非常高级的WebView组件,借助这个组件,程序员能够使用标准的HTML5技术实现Hybird应用的设计和编码。Hybrid移动APP的混合主要包由两部分组成,底层是基于设备本地能力的Native应用,上层是基于浏览器Web应用,Web端可以通过接口调用Native端封装好的功能。无论是Native端还是Web端,都具有各自的UI和布局能力、数据交互能力和脚本调用能力等。Hybrid APP引擎和框架一般使用HTML5和Javascript作为编程语言,调用引擎封装的底层设备能力如照相机、通讯录、文件系统、传感器以及地图API等。HTML5和Javascript只是作为一种解析语言,真正调用的都是基于Native封装的底层API,这是和Web APP的最大区别。
 
    3Hybird APP引擎
 
    Hybrid App引擎技术开发的移动程序通过Hybrid App引擎的打包服务可以生成Android、iOS 等不同平台移动App,还可以生成供移动设备Web端访问的代码。
 
 
Hybird App通用框架
 
    图1 Hybird App通用框架
 
    3.1Hybird引擎架构设计
 
    Hybird APP引擎本质上是一个原生应用,使用平台相关语言编写,针对不同的移动平台都需要开发一个Hybird APP引擎,一般情况下如果需要同时支持Android平台以及IOS平台,则需要开发两个Hybird APP引擎,分别运行与这两个平台。Hybird APP引擎通过集成系统Webview浏览器内核组件,起到一个类似于虚拟机的作用,将原生应用和系统级应用对上层应用隔离起来,同时运行于不同移动平台的Hybird APP引擎对上层应用提供原生系统接口调用时使用统一的接口调用规范,从而使得上层应用具备基本的跨平台能力。
 
    3.2引擎通信机制
 
    通讯机制是Hybird APP引擎首先应该考虑和设计的一个关键的功能就是Webview和Native原生代码层之间的相互调用,比如调用摄像头以及本地存储系统等。Native原生代码和H5之间的通信有两个方向,分别是Native原生代码调用H5代码,以及H5代码调用Native原生代码。
 
    Native原生代码调用H5是通过调用Webview对象的“loadUrl”方法直接执行Javascript代码片段,这种调用方法类似于在浏览器地址栏输入一段Javascript代码来触发H5端代码的执行,具体的调用方式如下:
 
    webview.loadUrl("javascript:alert('hello world')");
 
 
H5桥接协议调用Android本地代码
 
图2 H5桥接协议调用Android本地代码
 
    H5调用Native原生代码的主要原理是通过Webview系统组件拦截H5代码发起的url请求,如果被拦截到的url符合H5调用Native原生代码的约定规范,即可实现H5端调用Native原生代码,这种方法本质上是一种通过注册私有协议实现系统调用的方法。以下代码通过一种名字为“jsbridge://”桥接协议,具体代码如下:
 
    var iframe = document.createElement('iframe');
 
    iframe.src = 'jsbridge://class.method?[...args]';
 
 
 H5桥接协议调用Android本地代码
 
图3 H5桥接协议调用Android本地代码
 
    3.3引擎插件机制
 
    Hybird APP应用都是有H5端和Native原生代码两个部分的程序组成的。本质上,H5端和Native原生代码都能完成界面开发。为了充分利用二者的优势,应该尽可能地将APP的UI展现部分使用H5来实现,而对于JavaScript解释性语言本身的性能缺陷,应该使用Native语言进行计算密集型、IO密集型以及安全保障等功能的实现,如转场动画、多线程作业、IO网络操作以及交易支付等场景。
 
    一般情况下在开发引擎扩展插件时除了需要使用Native原生代码完成插件所需的功能之外,还需要为扩展插件编写对应的JavaScript API,通过 H5 页面中调用插件暴露的 JavaScript API触发对应Native原生方法的调用,原生方法计算结束之后将结果通过JSBridge返回H5端。
 
    4Hybird应用调试
 
    任何应用程序在开发过程中,应用调试都是一个不可或缺的环节,通过调试能够帮助开发人员准确的定位程序出现问题的位置,以方便进行修复。而使用Hybird模式开发的APP其H5端的程序运行在系统Webview组件中,无法直接对其进行调试,于是我们引入Weinre作为调试工具。Weinre(WebInspector Remote)是一款基于 Web Inspector(Webkit)的远程调试工具,在PC上直接调试运行在移动设备上的远程页面,通过Weinre开发人员可以在PC上可以即时修改目标网页的HTML/CSS/JavaScript。Weinre 基于Web Inspector开发,兼容WebKit核心的浏览器,可以在Chrome/Safari浏览器打开Weinre客户端进行调试。
 
    5结论
 
    随着移动互联网技术的快速发展,越来越多开发者投入到移动端应用开发领域中。但是移动平台操作系统的多样性给APP开发者带来了很多困难,开发一款移动应用需要根据运行平台使用不同的开发语言,开发者需要掌握多种平台开发的技术,导致开发成本高和开发周期长。为了解决这些问题,兼具Native App和Web App优势的Hybrid App开发模式被开发者广泛采用。Hybrid开发模式的优点是显而易见的,但是这种开发模式在计算密集型应用场景上效率明显低于原生应用,所以未来混合开发模式的研究重点将是针对UI流畅性和转场动画等场景进行Hybrid APP引擎优化的工作。
 
责任编辑:李欢
本文为授权转载文章,任何人未经原授权方同意,不得复制、转载、摘编等任何方式进行使用,e-works不承担由此而产生的任何法律责任! 如有异议请及时告之,以便进行及时处理。联系方式:editor@e-works.net.cn tel:027-87592219/20/21。
e-works
官方微信
掌上
信息化
编辑推荐
新闻推荐
博客推荐
视频推荐