解耦——Hybrid H5跨平台性思考

跨平台，是HTML5最重要的能力之一。而Hybrid H5因强依赖于具体App，往往不具有跨平台性。这时，将强依赖关系解耦，即可恢复HTML5的跨平台能力。近期我负责手Q红包打赏项目的前端开发，因项目涉及到多App跨平台兼容，对Hybrid H5的跨平台性有了一定的感悟和思考。在这里做下总结分享，希望能对大家有所收获。

Hybrid H5跨平台性

进入正题之前，先解释下本文主题的两个名词。

  1. Hybrid H5，即混合了原生能力的HTML5。区别于纯粹Web端的HTML5，它可调用原生的能力，强依赖于具体原生App，与原生共同构建整个App的UI层，是App UI层很好的灵活性补充。微信和手Q上的HTML5业务一般都属于Hybrid H5的范畴。
  2. 跨平台性，即一个HTML5页面可同时运行在多个平台上。可运行平台越多，跨平台性就越强。在如今移动互联网的发展大潮中，HTML5能与体验更优的原生终端齐步并进，其跨平台性可谓功不可没。

因强依赖于具体App，Hybrid H5往往不具有跨平台性。

本文将从Hybrid H5与原生的通讯原理出发，逐步探讨如何通过解耦来恢复Hybrid H5的跨平台性。

Hybrid H5与原生的通讯原理

Hybrid H5页面与原生应用的通讯原理图

从原理图中，有四个关键点：一个通讯媒介——原生自定义的通讯协议，以及围绕着通讯媒介执行的三个通讯行为——触发、调用、回调。

关键点详解

1.通讯媒介——原生通讯协议：原生自定义的伪协议，一般会定义成与HTTP协议类似的格式：

协议名://接口路径?参数1=XXX&参数2=XXX&参数3=XXX#callback

其中：

（1）协议名：APP自定义的协议名，用于HTML5触发行为的监控捕获，如手Q使用的 jsbridge://；

（2）接口路径：原生具体能力路径，不同原生能力路径不同；

（3）参数1=XXX&参数2=XXX&参数3=XXX#callback：HTML5传参与回调方法标识；

根据通讯协议规范，即可针对不同的原生能力给HTML5提供不同的调用地址，如：

jsbridge://method?a=2&b=3#h5MethodTag

2.通讯行为——触发：能被原生监听并捕获截拦的HTML5行为，都可以作为原生通讯协议的触发行为。

Hybrid H5的这类行为有console.log、alert、confirm、prompt、location.href等。将原生协议内容通过其中的某一行为触发，即可被原生正确捕获并解析。如：

location.href =‘jsbridge://method?a=2&b=3#h5MethodTag‘

HTML5调用后，原生终端会捕获到内容：jsbridge://method?a=2&b=3#h5MethodTag。

3.通讯行为——调用：原生终端根据HTML5传过来的内容，解析匹配后会路由到具体处理方法，执行原生能力逻辑。以iOS 为例（Swift语言），“调用”逻辑如下：

func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) - Bool {
    let url = request.URL //url
    let scheme = url ? .scheme //协议名
    let method = url ? .host //接口路径
    let query = url ? .query //参数

    if url != nil && scheme == "jsbridge" {
        /*根据method路由*/
        switch method!{
            case "method":
                self.method()
            case "openTenpayView":
                self.openTenpayView()
            ...其他方法...
            default:
        }
        return false
    } else {
        return true
    }
}

原生终端根据捕获到的协议内容，进行解析获取，若伪协议为原生指定的伪协议（“jsbridge”），就会根据method内容和query参数进行路由操作，寻找具体的方法执行逻辑。否则，忽略处理，按照webview原有跳转逻辑处理。以第2步触发的伪协议内容为例，在本例“调用”代码中被原生捕获后，会路由执行逻辑：self.method();

4.通讯行为——回调：原生根据HTML5传过来的内容，捕获JavaScript回调函数方法名，在原生逻辑执行结束后，将执行结果带到回调函数中并执行JavaScript回调函数。通过在第3步“调用”执行完后，iOS会调用JavaScript回调函数H5MethodTag：

/*解析到H5的回调函数名为H5MethodTag(#号后内容)，回调执行js的方法*/
webview.stringByEvaluatingJavaScriptFromString("H5MethodTag(data)")

通过以上4个关键点，即可做到HTML5与原生终端的相互通讯，完成HTML5对原生能力的调用。

初次解耦：App内跨平台——创建JS API解耦通讯逻辑、封装平台差异

由上述通讯原理了解到，Hybrid H5直接调用定义好的原生通讯协议，即可完成通讯全过程。但这里有一个明显的问题，即Hybrid H5会强耦合于当前平台。不说跨App了，App内跨平台(Android、iOS、WP)都会显示吃力。这里面有很多原因，其中一个较明显的原因在于，不同平台App开发团队通讯协议规范定义存在不一致。再者，HTML5业务代码上满满的类似 JSONP的协议调用，也并不好维护。

要达到Hybrid H5在App内跨平台，业界常见做法是App对外提供JS API。通过JS API将各平台协议规范差异进行封装，解耦通讯逻辑，并以函数接口的方式提供给Hybrid H5调用。JS API接口一般会定义成如下格式：

ns.method({
    /*cfg参数对象*/
}, function(data) {
    /*回调*/
})

通过JS API实现Hybrid H5在App内跨平台的原理图

原理核心：HTML5与原生通讯之间增加一层JS API，JS API完成三大行为：API接口创建、协议URL组装、创建iframe发起伪协议请求。

因手Q的JS API相对比较成熟，下面会以手Q JS API中的核心源码进行分析。

1.API接口创建：JavaScript函数接口封装、平台差异处理，方便HTML5函数调用。

mqq.build(‘mqq.tenpay.openTenpayView‘, {
    iOS: function(options, callback) {
        var callbackName = callback ? mqq.callback(callback) : null;
        mqq.invokeClient(‘pay‘, ‘openTenpayView‘, {
            ‘params‘: options,
            ‘callback‘: callbackName
        });
    },
    android: function(params, callback) {
        mqq.invokeClient(‘pay‘, ‘openTenpayView‘, JSON.stringify(params), callback);
    },
    supportInvoke: true,
    support: {
        iOS: ‘4.6.1‘,
        android: ‘4.6.1‘
    }
});

mqq.build方法为API接口创建方法。通过传入待创建的JS API方法名（mqq.tenpay.openTenpayView）和不同平台(Android、iOS)的差异处理配置。最终会生成HTML5可调用方法：

mqq.tenpay.openTenpayView({
    /*data*/
},function(ret){
    /*callback*/
})

2.协议URL组装：从接口到URL协议的转换、回调处理，完成协议URL创建。

第1步中，不同平台差异处理都会调用mqq.invokeClient方法，该方法实际处理的就是原理图中与原生通讯的过程。我们先来看协议URL组装的过程。

/*生成回调索引*/
sn = storeCallback(callback);
/*协议路径组装*/
url = ‘jsbridge://‘ + encodeURIComponent(ns) + ‘/‘ + encodeURIComponent(method);
/*参数组装*/
argus.forEach(function(a, i) {
    if (exports.isObject(a)) {
    a = JSON.stringify(a);
    }
    if (i === 0) {
        url += ‘?p=‘;
    } else {
        url += ‘&p‘ + i + ‘=‘;
    }
    url += encodeURIComponent(String(a));
});
/*回调函数索引组装*/
url += ‘#‘ + sn;
/*链接调用*/
result = openURL(url, ns, method);

协议URL组装的过程实际上是对传入参数按协议规范进行拼串的过程，其中包括匿名回调函数的回调索引创建、协议名&协议路径拼串、传参循环遍历拼串。

3.创建iframe发起伪协议请求：请求触发。

/*创建隐藏iframe*/
var iframe = document.createElement(‘iframe‘);
iframe.style.cssText = ‘display:none;width:0px;height:0px;‘;

function failCallback() {
    /*错误处理*/
}
/*iframe协议调用*/
iframe.onload = failCallback;
iframe.src = url;
(document.body || document.documentElement).appendChild(iframe);

/*删除iframe*/
setTimeout(function() {
    iframe && iframe.parentNode && iframe.parentNode.removeChild(iframe);
}, 0);

通过创建iframe来完成协议调用，并在调用结束后将iframe删除，即可在不影响原HTML5流程的情况下完成调用全过程。

再次解耦：App间跨平台——JS API细化，封装App差异

通过上述的解耦处理，Hybrid H5已经可以在App内各平台运行了。但往往这种JS API是App级提供的JS API（下面简称App JS API），App JS API并不会去兼容别的App的差异。而实际情况具体到某一Hybrid H5，尤其是与App外部合作的Hybrid H5，则并不仅仅只运行在一个App上。比如信用卡还款业务，微信有，手Q 也有，功能都一样。这种情况就需要进一步的解耦，从业务侧再抽离一层JS API（下面简称 H5 JS API）来处理App间的差异，而非每个App各自一套HTML5。

利用从业务侧抽离出的H5 JS API来处理App间的差异，原理示意图

原理核心：Hybrid H5业务上增加多一层自维护的 H5 JS API，H5 JS API完成两大行为：App JS API差异请求、App JS API差异封装。

1.App JS API差异请求：根据当前运行环境App请求具体的App JS API。

下面以Hybrid H5需同时运行在手Q和空间独立版的App JS API差异请求处理逻辑。

<script type="text/javascript" >
    (function() {
        var ua = navigator.userAgent || "",
            isQQ = ua.match(/QQ\/([\d\.]+)/),
            isQzone = ua.match("Qzone");
        if (isQQ) {
            document.write("<script src=‘https://open.mobile.qq.com/sdk/qqapi.js?_bid=152‘><\x2Fscript>");
        } else if (isQzone) {
            document.write("<script src=‘https://qzonestyle.gtimg.cn/qzone/phone/m/v4/widget/mobile/jsbridge.js‘><\x2Fscript>");
        } else {
            // 不是已兼容app，跳转到兼容app上运行
            var currentHref = window.location.href;
            /*跳转到手Q打开本页面*/
            window.location.href = ‘mqqapi://forward/url?url_prefix=‘ + btoa(currentHref) + ‘&version=1&src_type=web‘;
            /*该页面支持自定义弹层*/
            setTimeout(function() {
                var _tempBox = confirm(‘请在手机QQ中使用~‘);
                if (_tempBox == true) {
                    /*跳至手Q打开*/
                    window.location.href = ‘mqqapi://forward/url?url_prefix=‘ + btoa(currentHref) + ‘&version=1&src_type=web‘;
                }
            }, 0)
        }
    })()
</script>

除了对需兼容的App进行差异请求外，还应对在不兼容的App运行时做跳转到主兼容App打开当前页面的逻辑处理，并做引导性提示，保障页面的完整可用性。

2.App JS API差异封装：根据当前具体运行的平台调用相应的App JS API 接口。H5 JS API的接口形式尽量与主运行App的JS API保持一致

下面以打开QQ钱包原生页和原生页面跳转能力为例，做App JS API的差异封装。

var mod = {
    ...
    openTenpayView: function(param, callback) {
        if (isQQ) {
            var param = $.extend({
                userId: $.getCookie(‘uin‘).replace(/^o0*/, ‘‘)
            }, param);
            mqq.tenpay.openTenpayView(param, callback);
        } else {
               /*调起手Q打开中转页jump.html，由中转页打开原生功能页*/
            var targetHref = ‘http://testhost.com/jump.html?go=‘ + param.viewTag + ‘&_wv=‘ + (1 + 2 + 1024 + 2097152 + 33554432); //跳转url
            /*跳到手Q*/
            window.location.href = ‘mqqapi://forward/url?url_prefix=‘ + btoa(targetHref) + ‘&version=1&src_type=web‘;
        }
    },
    openUrl: function(paramObj) {
        if (isQQ) {
            mqq.ui.openUrl({
                url: paramObj.url,
                target: 1
            });
        } else if (isQzone) {
            mqq.invoke("ui", "openUrl", {
                url: paramObj.url,
                target: 1,
                style: 1
            });
        } else {
            /*兼容处理*/
            location.href = paramObj.url
        }
    },
    ...其他接口...
};
return mod;

调用openTenpayView，页面能在手Q中正常调用，而在非手Q时则跳转回手Q打开处理；

调用openUrl，对于手Q和空间独立版做相应的接口调用，而其他平台则直接使用HTML5的 location 跳转。

总结

HTML5本质是具有跨平台性的。Hybrid H5因混合了原生能力，强耦合于原生，不再具有跨平台性。要恢复其跨平台能力，关键在解耦，将其耦合于原生的部分解耦封装起来。

解耦是开发很重要的一项能力，Hybrid H5跨平台性的回归正得益于解耦的处理。

因耦合而导致某项能力减弱的情况还有很多，比如HTML5的灵活性等等。遇到这种情况大家不妨也试试解耦，或许会收到意想不到的惊喜。

时间： 2024-10-10 01:44:02

解耦——Hybrid H5跨平台性思考的相关文章

解耦---Hybrid H5跨平台性思考

跨平台,是H5最重要的能力之一.而 Hybrid H5 因强依赖于具体 app,往往不具有跨平台性.这时,将强依赖关系解耦,即可恢复 H5 的跨平台能力.近期本人负责 手Q 红包打赏项目的前端开发,因项目涉及到多 app 跨平台兼容,对 hybrid H5 的跨平台性有了一定的感悟和思考.在这里做下总结分享,希望能对大家有所收获. Hybrid H5 跨平台性 进入正题之前,先解释下本文主题的两个名词: ①Hybrid H5,即混合了原生能力的 H5.区别于纯粹 web 端的 H5,它可调用原生

写在开始编写Java之前（1）——Java的跨平台性

Java语言之所以比C语言更加实用 是有原因的 Java的一个重要的特点——跨平台性 无论是哪个平台,如Windows.Linus还是Mac系统 Java的语法都是一样的 这个要比C语言用处要广 因为C语言只能在Windows系统下运行 所以人们在选择语言编辑程序或软件时一般会选择Java语言 但是对于不同系统还是有不同的地方 就是要用不同的Java虚拟机 Windows之所以可以运行C语言,是因为Windows里面有C语言的虚拟机 over

“H5跨平台APP开发”APICloud从入门到精通

"H5跨平台APP开发"APICloud从入门到精通 课程学习地址:http://www.xuetuwuyou.com/course/164 课程出自学途无忧网:http://www.xuetuwuyou.com 课程介绍:               一.课程使用到的软件 APICloud Studuio(或Sublime.WebStorm加上APICloud插件) Google Chrome浏览器 海马玩手机模拟器(或真机) 二.课程目的:     随着IOS.Android等原生

如何理解语言的跨平台性

英语是国际通用语言,但是我说的英语美国人就听不懂 很多人因为用了“跨平台的语言"写没有写的出跨平台的程序而盲目的认为该语言的跨平台性是子虚乌有. 本文以Java为例就来讨论一下”如何理解语言的跨平台性“. 从开发人员或编程语言的角度来理解,”平台“就是指语言的运行时环境,比如Java的平台就是JRE(Java Runtime Environment).是不是觉得很奇怪,难道平台不是指Windows.Linux这样的操作系统吗?没错,Windows和Linux也确实是平 台,但是这个平台对于Jav

java的跨平台性指的什么

java的跨平台,是指java运行时候凌驾于os之上,是在jvm中运行的,跟os没有直接联系. 如果有机会写数据导入导出,和服务器之间交互的应用,就会知道“跨平台”有什么意义了. 在java之前,跨平台是很痛苦的事情,主要是因为所有对于系统的调用,在不同的操作系统下结果都不一样,简单的来说,int的长度在不同操作系统里面就不一样,甚至于连字节排列的顺序都不同.调用同一个函数返回的格式也不同,因此,写程序的人自己要对不同的系统非常了解,如果真的需要对不同操作系统进行兼容,要在程序里面写很多if,编

H5跨平台能力调研

H5跨平台能力调研 各平台对H5的支持方式 目前主流的平台(iOS APP.Android APP.微信小程序.支付宝小程序.百度智能小程序.今日头条小程序等)对H5页面的支持是通过提供<web-view /> 组件的方式.<web-view /> 组件是一个可以用来承载H5网页的组件,会自动铺满整个小程序页面. 各平台能力比较   微信小程序 支付宝小程序 百度小程序 今日头条小程序 iOS APP Android APP 是否支持<web-view /> √基础库

编译性语言不如解释性语言跨平台性好

编译性语言例如c语言:用c语言开发了程序后,需要通过编译器把程序编译成机器语言(即计算机识别的二进制文件,因为不同的操作系统计算机识别的二进制文件是不同的),所以c语言程序进行移植后,要重新编译. 解释性语言,例如java语言,java程序首先通过编译器编译成class文件,如果在windows平台上运行,则通过windows平台上的java虚拟机(VM)进行解释.如果运行在linux平台上,则通过linux平台上的java虚拟机进行解释执行.所以说能跨平台,前提是平台上必须要有相匹配的java

H5 20-属性选择器上

20-属性选择器上 p[class="cc"] { color: blue } 我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20-属性选择器上</title> <style> /* p[id]{ color:

H5 21-属性选择器下

21-属性选择器下 img[alt~="abc"] { color: red } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-属性选择器下</title> <style> /* img[alt^=abc]{ color: red; } */ /* img[alt|