Hybrid技术简介

admin1年前未命名63

1. H5 + 原生

这类框架主要原理就是将 App 中需要动态变动的内容通过HTML5(简称 H5)来实现,通过原生的网页加载控件WebView (Android)或 WKWebView(iOS)来加载(以后若无特殊说明,我们用WebView来统一指代 Android 和 iOS 中的网页加载控件)。这种方案中,H5 部分是可以随时改变而不用发版,动态化需求能满足;同时,由于 H5 代码只需要一次开发,就能同时在 Android 和 iOS 两个平台运行,这也可以减小开发成本,也就是说,H5 部分功能越多,开发成本就越小。我们称这种 H5 + 原生 的开发模式为混合开发 ,采用混合模式开发的App我们称之为混合应用或 HTMLybrid App ,如果一个应用的大多数功能都是 H5 实现的话,我们称其为 Web App 。

目前混合开发框架的典型代表有:Cordova、Ionic 。大多数 App 中都会有一些功能是 H5 开发的,至少目前为止,HTMLybrid App 仍然是最通用且最成熟的跨端解决方案。

在此,我们需要提一下小程序,目前国内各家公司小程序应用层的开发技术栈是 Web 技术栈,而底层渲染方式基本都是 WebView 和原生相结合的方式。

#2. 混合开发技术点

如之前所述,原生开发可以访问平台所有功能,而混合开发中,H5代码是运行在 WebView 中,而 WebView 实质上就是一个浏览器内核,其 JavaScript 依然运行在一个权限受限的沙箱中,所以对于大多数系统能力都没有访问权限,如无法访问文件系统、不能使用蓝牙等。所以,对于 H5 不能实现的功能,就需要原生去做了。

混合框架一般都会在原生代码中预先实现一些访问系统能力的 API , 然后暴露给 WebView 以供 JavaScript 调用。这样一来,WebView 中 JavaScript 与原生 API 之间就需要一个通信的桥梁,主要负责 JavaScript 与原生之间传递调用消息,而消息的传递必须遵守一个标准的协议,它规定了消息的格式与含义,我们把依赖于 WebView 的用于在 JavaScript 与原生之间通信并实现了某种消息传输协议的工具称之为 WebView JavaScript Bridge , 简称 JsBridge,它也是混合开发框架的核心。

#1) 示例:JavaScript调用原生API获取手机型号

下面我们以 Android 为例,实现一个获取手机型号的原生 API 供 JavaScript 调用。在这个示例中将展示 JavaScript 调用原生 API 的流程,读者可以直观的感受一下调用流程。我们选用笔者在Github上开源的 dsBridge作为 JsBridge 来进行通信。dsBridge 是笔者实现的一个跨平台的 JsBridge 库,此示例中只使用其同步调用功能。

  • 首先在原生中实现获取手机型号的API getPhoneModel

    class JSAPI {
     @JavascriptInterface
     public Object getPhoneModel(Object msg) {
       return Build.MODEL;
     }}
    1
    2
    3
    4
    5
    6
  • 将原生API通过WebView注册到JsBridge中

    import wendu.dsbridge.DWebView...//DWebView继承自WebView,由dsBridge提供  DWebView dwebView = (DWebView) findViewById(R.id.dwebview);//注册原生API到JsBridgedwebView.addJavascriptObject(new JsAPI(), null);
    1
    2
    3
    4
    5
    6
  • 在JavaScript中调用原生API

    var dsBridge = require("dsbridge")//直接调用原生API `getPhoneModel`var model = dsBridge.call("getPhoneModel");//打印机型console.log(model);
    1
    2
    3
    4
    5

上面示例演示了 JavaScript 调用原生 API 的过程,同样的,一般来说优秀的 JsBridge 也支持原生调用 JavaScript ,dsBridge 也是支持的,如果您感兴趣,可以去 Github dsBridge 项目主页查看。

现在,我们回头来看一下,混合应用无非就是在第一步中预先实现一系列 API 供 JavaScript 调用,让 JavaScript 有访问系统功能的能力,看到这里,我相信你也可以自己实现一个混合开发框架了。

#3. 小结

混合应用的优点是:动态内容可以用 H5开发,而H5是Web 技术栈,Web技术栈生态开放且社区资源丰富,整体开发效率高。缺点是性能体验不佳,对于复杂用户界面或动画,WebView 有时会不堪重任。


相关文章

原生开发与跨平台技术

1. 原生开发原生应用程序是指某一个移动平台(比如iOS或安卓)所特有的应用,使用相应平台支持的开发工具和语言,并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kot...

React Native、Weex

本篇主要介绍一下 JavaScript开发 + 原生渲染 的跨平台框架原理。React Native (简称 RN )是 Facebook 于 2015 年 4 月开源的跨平台移动...

Qt Mobile

在介绍 QT 之前我们先介绍一下 “自绘UI + 原生” 跨平台技术。#1. 自绘UI + 原生我们看看最后一种跨平台技术:自绘UI + 原生。这种技术的思路是:通过在不同平台实现一个统一接口的渲染引...

Flutter出世

“千呼万唤始出来”,铺垫这么久,现在终于等到本书的主角出场了!Flutter 是 Google 发布的一个用于创建跨平台、高性能移动应用的框架。Flutter 和 Qt mobile 一样,都没有使用...

搭建Flutter开发环境

搭建Flutter开发环境

由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Flutter时也需要安装相应平台的构建工具和SDK。下面我...

计数器应用示例

计数器应用示例

用 Android Studio 和 VS Code 创建的 Flutter 应用模板默认是一个简单的计数器示例。本节先仔细讲解一下这个计数器 Demo 的源码,让读者对 Flutter 应用程序结构...