深入了解Hybrid App技术的相关知识


Posted in Javascript onJuly 17, 2019

背景

随着Web技术的发展和移动互联网的发展,Hybrid技术已经成为一种前端开发的主流技术方案。那什么是Hybrid App呢?

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 "。

总的来说,就是既具有APP的体验和性能,又具有Web灵活的开发模式和跨平台开发能力。

现有的技术方案

1、H5 + JSBridge,通过JSBridge完成H5和Native的通信,赋予H5一定的端能力。是一种基于WebView UI的解决方案。

2、React-Native,进一步通过JSbridge将js解析为虚拟DOM传递到Native,并使用原生进行渲染。

3、小程序解决方案,采用双线程的渲染机制,将渲染层WebView和逻辑层JavaScriptCore形成独立的模块,通过Native进行通信(setData),逻辑层的网络请求也会由Native进行转发。在UI方面,采用的是WebView和原生相结合的方式。

技术原理

本文将从jsbridge的原理、实现、双向通信、接入方式和H5的嵌入方式进行详细阐述。

jsbridge的原理

客户端能对WebView中请求进行拦截,都有相应的API:

Android:

// Android: shouldoverrideurlloading 
public boolean shouldOverrideUrlLoading(WebView view, String url){
  //读取到url后自行进行分析处理
  
  //如果返回false,则WebView处理链接url,如果返回true,代表WebView根据程序来执行url
  return true;
}

IOS:

// IOS: shouldStartLoadWithRequest 
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
  NSURL *url = [request URL];
   
  NSString *requestString = [[request URL] absoluteString];
  //获取url scheme后自行进行处理

因此,在页面中可以通过iframe加载src的方式触发相应的捕获函数,在捕获函数中可以对url中的参数进行解析;此外,Android还可以通过重写OnJSPrompt方法,对调用Prompt进行拦截,同样能实现通信的目的。

示例:

调起ios端:

function iosInvoke(scheme) {
  var elem = document.createElement('iframe');
  var body = document.body || document.getElementsByTagName('body')[0];
  elem.style.display = 'none';
  elem.src = scheme;
  body.appendChild(elem);
  setTimeout(function () {
    body.removeChild(elem);
    elem = null;
  }, 0);
}

调起android端:

function androidInvoke(scheme) {
  var androidJsBridge = window.Bdbox_android_jsbridge;
  if (androidJsBridge && androidJsBridge.dispatch) {
    androidJsBridge.dispatch(scheme);
  } else {
    var re = window.prompt('BdboxApp:' + JSON.stringify({
      obj: 'Bdbox_android_jsbridge',
      func: 'dispatch',
      args: [scheme]
    }));
    return re;
  }
}

协议制定URL Scheme

URL Scheme是什么

由于苹果的app都是在沙盒中,相互是不能访问数据的。但是苹果还是给出了一个可以在app之间跳转的方法:URL Scheme。简单的说,URL Scheme就是一个可以让app相互之间可以跳转的协议。

每个app的URL Scheme都是不一样的,如果存在一样的URL Scheme,那么系统就会响应先安装那个app的URL Scheme,因为后安装的app的URL Scheme被覆盖掉了,是不能被调用的。

设置URL Scheme

xxxapp://communication?args=xx

如何进行双向通信

双向通信主要是H5和Native的双向通信过程以及参数传递、回调执行。

H5通知Native:

H5通知Native的方式主要有:

  • 调用prompt/console/alert,调用时进行参数传递,端进行拦截重写
  • URL Scheme跳转拦截,将参数放在请求URL上
  • API挂载,通过Navtive获取js执行环境,将相应的api挂载在js上,供h5调用

Native通知H5:

回调机制,在向Native传递信息时,将回调函数也传递,Native在调用完成后,使用js执行环境执行回调函数

接入方式

jsbridge的接入,端方面的jsbridge和h5方面的jsbridge

嵌入方式

h5的嵌入方式:

  • 直接代码,直接将H5代码css、html、js放入端目录下,以file协议的方式访问,优点是访问快速,缺点是迭代不方便。
  • 线上地址,以http协议访问,使用webview打开url形式,相较于代码嵌入的方式来说,速度比较慢,依赖网络传输速度;优点是迭代快速

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
Vue发布项目实例讲解
Jul 17 #Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 #Javascript
百度小程序自定义通用toast组件
Jul 17 #Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 #Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 #Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 #Javascript
微信小程序-API接口安全详解
Jul 16 #Javascript
You might like
PHP 日常开发小技巧
2009/09/23 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
js常用函数 不错
2006/09/08 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python文件写入实例分析
2015/04/08 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python切割图片的示例
2020/11/12 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
关于人生的感言
2014/01/17 职场文书
财政专业求职信范文
2014/02/19 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
班组建设经验交流材料
2014/05/12 职场文书
2014年学生会工作总结
2014/11/07 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
python基础之模块的导入
2021/10/24 Python
php去除deprecated的实例方法
2021/11/17 PHP
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js