深入了解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 相关文章推荐
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
ini_set的用法介绍
2014/01/07 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
python基础教程之常用运算符
2014/08/29 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
办理信用卡工作证明
2014/01/11 职场文书
安全保证书范文
2014/04/29 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
大学生暑假实习总结
2015/07/13 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书