Hybrid App手艺剖析 -- 实战篇

弁言

上一篇道理篇,我们已细致地论述了 Hybrid App 的基本道理,了解了 Native端 和 H5端 是怎样通讯的,另有 bridge 的设想和接入。而本篇文章将最先把这些缘由进一步实践,用代码真正地去完成一套完整且稳固的 Hybrid 计划。假如对道理另有疑问的小伙伴,请移步Hybrid App手艺剖析 — 道理篇,只要在理解了理论的基本上,进一步与实践相结合,才真正地去深切一项手艺。

假如人人有什么更好的计划或提议,可以到 github.com/xd-tayde 上与我举行议论哈!

摩天大楼

说了那末一大堆理论知识,可以有小伙伴会说:“ 你是否是吹流弊啊。”。😅。那就先来简朴引见下我们已运用这套计划落地的项目之一。

《Hybrid App手艺剖析 -- 实战篇》

这是一个完整内置在 App 里的 Hybrid 模块,由 Native 与 H5 深度合作完成,总共有 4个页面,个中首页和制造页由 H5 制造,而相机页和保留页是复用Native页面。

项目上线一年积累运用次数已凌驾10亿次。这套计划禁受住了磨练,并在过程当中依然在不停的优化和拓展。

运用这套完成计划是基于以下几点斟酌:

  • 全部模块的作风多变,团体UI是与妆容所搭配的,而全部模块一向都在延续不停的迭代当中;
  • 项目逻辑流程的可变性大,须要H5壮大的热更新才能,及时应对数据的变化,疾速的试错和改正
  • 拍摄页与保留页是客户端已有的模块,可以稍微定制后直接复用
  • 须要由客户端辅佐接入多套SDK,比方运用算法SDK举行庞杂的图象处置惩罚。

简朴看完项目,我们接下来最先 bridge.js 的构建。由于本系列文章主要面向前端童鞋,因而我们主要睁开 H5 的部份,即会注入到每一个页面头部的 bridge.js 的完成,客户端中的 SDK 部份就不细致解构了,只会提到一些细节。

搭建地基 — bridge.js 架构

基于上篇文章论述的构造,我们进一步去完美细节部份,先整理成下面如许的流程构造图,人人先看下图,有个大抵的观点:

nativeCall postMessage 这两个主体 API 桥接了 Native端 和 H5端

《Hybrid App手艺剖析 -- 实战篇》

接下来我们会细看内里各个部份的代码完成。

(一) 营业方运用姿态

起首,我们先看下在这套计划中,营业方是怎样运用的,下面以猎取收集状况为例:

《Hybrid App手艺剖析 -- 实战篇》

(二) H5 –> Native

接下来直接来看 nativeCall 的内部完成:

《Hybrid App手艺剖析 -- 实战篇》

内里可以解组成下面4个步骤:

  1. 天生唯一 handler 标识,从 0 最先累加;
  2. 将参数按 handler 值的划定规矩存入参数池(_paramsStore)中;
  3. 以 handler 注册自定义事宜,绑定 callback,并将 callback也存入 _callbackStore 中,addEvent(),贮存的目标主要是为了事宜解绑时运用;
  4. 以 iframe 的情势发送协定,并照顾唯一标识 handler,send()

《Hybrid App手艺剖析 -- 实战篇》

Native:

  • 客户端接收到要求后,会运用 handler 挪用 getParam 从参数池中猎取对应的参数

《Hybrid App手艺剖析 -- 实战篇》

  • 实行协定对应的功用

如许即走通了 H5 –> Native 的这个流程,在客户端完成了对应的功用后,既最先回传实行效果。

(二) Native –> H5

Native:

  • Native 完成功用后,直接挪用 Bridge.postMessage(handler, data),将 实行效果 和 之前 nativeCall 传过来的 标识 回传给 H5;

《Hybrid App手艺剖析 -- 实战篇》

H5:

  • H5 在接收到唯一标识后初始化对应的自定义事宜,挂载数据后触发,这里触及的就是 fireEvent 这个函数:

《Hybrid App手艺剖析 -- 实战篇》

如许,我们就已完成了双端之间的双向交互机制了,梳理出了全部 bridge.js 的中间代码了,包括了:

  • 最主要的开放API: nativeCallpostMessage
  • 客户端猎取参数函数: getParam
  • 事宜回调体系中的 addEventfireEvent
  • 用于发送协定的 send

安卓兼容性:

假如看过上一篇道理篇的童鞋,这时候可以会有个疑问:在 Android 4.4以下时,运用的 loadUrl 举行 js 函数的挪用,而此时是没法猎取函数的返回值的,也就是说4.4- 时,安卓并没法经由过程 getParam 这个函数来猎取到协定的参数,这里须要做兼容性的处置惩罚,而我们这里可以运用一个曲线救国的骚操纵,运用到的道理就是上一篇文章中有提到的另一种 H5 -> Native 的计划:

WebView 中的 prompt 阻拦

计划以下:

  • 当安卓接受到协定,并拿到 handler 值;
  • 运用无兼容性题目的 loadUrl 实行 js:Bridge.getParam(handler) ,直接将返回值直接经由过程 js 中的 prompt 发出:

《Hybrid App手艺剖析 -- 实战篇》

  • 经由过程重写 onJsPrompt 这个要领,阻拦上一步发出的 prompt 的内容,并剖析出响应的参数;

《Hybrid App手艺剖析 -- 实战篇》

经由过程如许的体式格局,安卓全平台都可以完成参数的猎取,而且体式格局一致,不须要分平台兼容,这就异常的skrskr啦。~~🤘🏻🤘🏻

如今看下来,是否是以为炒鸡简朴?。分分钟能写100个。😂。没错!实在中间的道理就是这么的简朴,但这只是一个最基本的地基罢了,而基于地基之上,我们就可以够最先一层一层制作我们的大楼了!

制作大楼 — 协定的定制

在完成最基本的架构后,我们就可以够最先来进一步完成一些上层建筑了,制订一系列真正开放给营业方运用的协定 API,完美整套计划。

起首我们可以将这些协定分红 功用协定营业协定

功用协定

这类协定是指用于完美整套计划的基本功用的一些通用协定,以command://作为通用头,封装在 SDK 当中,可以在全线 App、全线 WebView 中运用:

1.初始化机制

上篇文章有提到由于 bridge.js 注入的异步性,我们须要由客户端在注入完成后关照 H5。

这里我们可以商定一个通用的初始化事宜,这里我们商定为 _init_,因而前端就可以够举行进口的监听, 相似于我们经常使用的 DOMContentLoaded:

《Hybrid App手艺剖析 -- 实战篇》

人人可以看到,这里用了个标记位用于防止事宜被反复触发,这是由于客户端中是经由过程监听 WebView 的生命周期钩子来触发的,而 iframe 之类的操纵会致使这些钩子的屡次触发,因而须要两边各做一层防御性步伐。

接下来,我们可以经由过程该事宜,直接初始化传给H5一些环境参数和体系信息等,下面是我们运用到的:

《Hybrid App手艺剖析 -- 实战篇》

一样的,我们可以商定更多的页面生命周期事宜,比方由于App很经常性的隐蔽到背景,因而在被激活时,我们可以设置个生命周期: _resume_,可以用于示知 H5 页面被激活。

Tips:
这里就可以体现出我们经由过程事宜机制来作为回调体系的上风了,我们可以以最习气的体式格局举行事宜的监听,而客户端可以直接运用 bridge.fireEvent('_init_', data)触发事宜,如许便可以文雅地完成 Native -> H5 的单方向交互

2.包更新机制

Hybrid模块 的个中一种体式格局是将前端代码打包后内置于 App 当地,以便具有最快的启动机能和离线接见才能。而这类体式格局最大的贫苦点,就是代码的更新,我们不可以每次有修改时就手动从新打包给客户端童鞋替代,而且如许也失去了我们的热更新机制。

因而这里就须要一套新的热更新机制,这套机制须要由客户端/前端/效劳端 三端的童鞋供应对应的资本,配合合作完成整套流程。

资本:

  • H5: 每一个代码包都有一个唯一且递增的版本号
  • Native: 供应包下载且解压到对应目次的效劳,前端可以由下面这个协定来挪用该功用。

《Hybrid App手艺剖析 -- 实战篇》

  • 效劳端: 供应一个接口,可以猎取线上最新代码包的版本号和下载地点

流程:

  • 前端更新代码打包后按版本号上传至指定的效劳器上
  • 每次翻开页面时,H5要求接口猎取线上最新代码包版本号,并与当地包举行版本号比对,当线上的版本号 大于 当地包版本号时,提议包下载协定
  • 客户端接受到协定后,直接去线上地点下载最新的代码包,并解压替代到当前目次文件

具有如许的机制后,H5在开辟后,就可以够直接打包将包上传到对应的效劳器上,如许在 App 中翻开页面后,即可以及时的热更新。

3.环境体系 和 多语言体系

一般,我们会将项目分红多个差异的环境,互相断绝。而由于 Hybrid 模块是置于 App 中的,因而环境须要与 App 举行婚配,这里就可以够直接运用上面第一点提到的,经由过程 _init_ 中照顾的数据data.env来婚配:

env: 0 – 正式环境; 1 – 测试环境; 2 – 开辟环境;

同理, 多语言也可以直接运用 e.data.language 直接举行婚配;

Tips:

环境机制我们一般主要用于婚配后端的环境,正式环境和测试环境对应差异的接口。而这里另有一点迥殊的,就是须要注重代码包的更新,上述的包更新前提要包括三个方面: 版本号、环境和 App版本,在差异环境差异 App 版本下,也应当更新到响应的最新代码包。

4. 事宜中转站

由于页面是 H5 开辟,而 Native 可以须要掌握 H5 页面,比方最经常使用的场景:

当页面中有弹窗或许SPA切换页面时,安卓的返回实体键应当能完成对应的回退,而不是由于 WebView 没有 history 就直接封闭。

相似于这类需求,这里就可以够定制一个事宜中间(_eventListeners_ ),用于监听客户端的实体返回键:

《Hybrid App手艺剖析 -- 实战篇》

5. 数据通报机制

在营业中,许多场景须要做到 Native 与 H5 坚持数据的同步,此时就可以够运用相似上面的道理,制订一套数据通报协定:

《Hybrid App手艺剖析 -- 实战篇》

Tips:

Hybrid模块一般须要从对应的进口进入,因而这里有一种可以优化的体式格局:

由 App 在启动时先去猎取线上数据,在进入 WebView 后直接经由过程 _init_ 或许触发 getData 直接发送给 H5,如许能削减要求数目,优化用户体验。

6. 代办要求

H5中最经常使用的就是要求,一般我们可以直接运用ajax,然则这里有几个题目比较辣手:

  • 最常见的要求跨域
  • 数据算法加密
  • 用户登录校验

而客户端的要求便不会涌现这些题目,因而我们可以由客户端代办我们发出的要求,可以定制4个协定: getProxypostProxygetProxyLoginedpostProxyLogined,个中带有 Logined 的协定代表着在要求时会自动照顾已登录用户的 token 和 uid 等参数,运用在一些须要登录信息的接口上。如许做的优点是

  • H5 方就无需处置惩罚繁多的各项庞杂信息,不须要举行跨端传输;
  • 可以对 H5 与 Native 的要求出口举行一致,轻易加工处置惩罚。

《Hybrid App手艺剖析 -- 实战篇》

7.更多

除了这些主要的功用外,我们还可以异常自由地定制许多协定,让 H5 具有更多更壮大的功用,下面是我们所定制的一些功用:

  • getNetwork:猎取收集状况;
  • openApp:唤起别的 App;
  • setShareInfocallShare:分享内容到第三方平台;
  • link:运用新的 WebView 翻开页面;
  • closeWebview:封闭 WebView;
  • setStoragegetStorage:设置与猎取缓存数据;
  • loading:挪用客户端通用 Loading;
  • setWebviewTitle:设置 WebView 题目;
  • saveImage:保留图片到当地;

这里可以定义更多的通用性协定,这里有个准绳可以恪守,即这部份协定应当是基本性功用,应当是纯洁的,适用于一切的营业方。依据上篇文章提到的理念,这部份是当做通用 SDK 举行保护与晋级的,因而不应当耦合营业层的任何逻辑。

而偶然我们会碰到须要定制一些营业上的逻辑,比方上面提到的项目中,我们要将用户图片经由过程算法处置惩罚成卡通画。如许的需求就是异常的营业化,不适用于别的项目,因而我们应当定制成营业协定。

营业协定

这类协定辨别于功用协定,它们会杂合肯定水平的营业逻辑,而这些逻辑只是针关于特定的项目。实在关于 H5 的运用上,差异并不大,只是运用对应特别的协定头用于辨别,比方:

《Hybrid App手艺剖析 -- 实战篇》

这类协定一般不包括在 SDK 中,因而须要由客户端的童鞋针对项目标 WebView 举行定制,运用 bridge.js 供应的基本功用完成对应的庞杂功用。而在别的的项目进口中,就没法运用这些协定。

总结

看到总结两个字,有无长舒了一口气。。😅。经由过程这两篇文章,我们终究将 Hybrid 计划的前端部份完整的解构清晰了,是否是有种神清气爽的觉得,完整可以立时开启你们的 Hybrid 之旅了。拍手拍手!!👏👏👏!!

但这也远非尽头,或许说这永无尽头。~大楼建成后,离真正的摩天大楼照样差着一步 — 内部装修,实在接下来我们还须要做许多的优化步伐,来处理一些依然存在的题目,这部份实在我们也一向还在勤奋的阶段。

受篇幅所限,偶然间会将这部份再写一篇优化篇,主要来与人人讨论下我们所能想到的一些优化计划,异常期待大佬们也能给我们供应更多的提议和处理办法。戴德~~😇

更多文章 摸我 浏览。。😻😻😻

    原文作者:郭东东
    原文地址: https://segmentfault.com/a/1190000015812582
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注