JsBridge的学习

最近做项目遇见了JsBridge，于是乎，去学习了下，发现了不少好东西，这里记录一下

JsBridge一般用于Hybrid模式，什么是Hybrid模式呢？

Hybrid是一种一半原生一半web的开发模式。

原生是指通过指定的开发语言和官方提供的API来对手机端进行开发，比如Android可以通过Java语言调用Google的提供的API进行开发，而iOS则可以通过OC语言调用Apple官方提供的API进行开发。

web是指用HTML5简称H5进行开发的页面。

如果只用原生开发页面，那么你得学习Android和iOS分别提供的两套指定语言，并且开发时你得用两套代码进行编码，学习和维护成本偏高。但由于是原生（语言和API对于Android和iOS是熟人，熟人见面一个眼神，什么都懂），因此原生开发的页面性能是很好的，你几乎不用等待便可以直接打开页面。

如果只用web开发页面，那么你的学习H5一门语言（一招鲜吃遍天），但是由于是web（web对于Android和iOS是陌生人，语言都不通，交流起来很困难），因此web开发的页面性能很差，你每个页面都要等一定时间。

为什么不把2种方式结合起来呢，于是，Hybrid孕育而生。

Hybrid中，原生容器通过某种方式提供底层API，然后H5实现业务逻辑，最终完成整个App。

这样一来，原生容器与H5之间便需要建立通信的方式，JsBridge由此而生。

什么是JsBridge？

JsBridge是原生与H5之间的一种通信方式，就像我们说中文外国人听不懂，外国人说洋文我们听不懂，但是如果我们画出来就都懂了一样。

JsBridge的原理

H5拼接数据成url，然后触发这个url，原生拦截到url后，进行分析，获取H5传达的数据，并完成H5的需求，最后将需要传递给H5的数据进行分装，并调用H5的JsBridge对象进行回调。

H5拼接的这个url，称为url scheme，JsBridge内部会通过创建iframe的方式来触发这个url scheme

JsBridge的H5用法如下：

初始化

function connectWebViewJavascriptBridge(callback){

if (window.WebViewJavascriptBridge){

callback(WebViewJavascriptBridge);

} else {

document.addEventListener('WebViewJavascriptBridgeReady', function(){

callback(WebViewJavascriptBridge);

}, false);

}

};

H5调用原生的funciton

connectWebViewJavascriptBridge(function (JSBridge) {

JSBridge.callHandler('functionName',{'param':str1},function(responseData)){

}

JSBridge.send('functionName', {'param': str1}, function(responseData) {

});

callHandler和send的区别在于：callHandler定义的方法都有回调

send定义的方法没有回调

H5设置function供原生调用

connectWebViewJavascriptBridge(function (JSBridge) {

JSBridge.registerHandler('functionName', function(response) {

});

JSBridge.setDefaultHandler(new DefaultHandler());

});

registerHandler和setDefaultHandler的区别在于：registerHandler需要写出Handler的名称，原生必须通过对应的Handler名称进行调用

setDefaultHandler不需要写出Handler的名称，原生可以通过默认Handler进行调用

JsBridge的学习相关推荐

React-Native学习指南
React-Native学习指南本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎提供给我们目录教程 React Native React.j ...
android 加载条封装,Android基于JsBridge封装的高效带加载进度的WebView
图片发自简书App 概述从去年4月项目就一直用起了JsBridge,前面也针对jsBridge使用姿势介绍过一篇入门篇,<Android JsBridge实战打造专属你的Hybrid APP ...
React Native学习速记
学习路线建议:ES5/6 -> React -> React Native -> Redux + React-Navigation等 ES5 :https://wangdoc.co ...
Android APP开发框架选择——JSBridge既个人心得和技巧
前言: 前几年公司要求做手机移动端APP开发,很多牛企也来我们这里推广自己的框架,比如IBM WorkLight,微软office365等等. 最近做个APP,个人谈谈框架的选择和自己心得. 首先,作 ...
别人那里看来的,先记着,学习下,以后也许就用到了
各种帮助类汇总:https://github.com/Blankj/AndroidUtilCode 常用的 ios 风格 dialog 和 meterial design 风格的 dialog:htt ...
安卓学习文档收集汇总
安卓学习文档收集汇总 https://www.jianshu.com/p/86aed183ce6c?utm_campaign=maleskine&utm_content=note&ut ...
HybridApp 概念与自定义JsBridge 框架
前言: HybridApp在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之巅呢?是选择学习原生开发,研究Java.Object-C.C#等语言,还是选择 ...
学习记录-微信小程序
一.设计要素 1.五大要点工具类小程序功能要专一应用类小程序交互要简单小程序裂变要及时反馈小程序开发要快小程序设计一定要自裂变 2.小程序集群搭建的六种方法以地域为维度策划小程序以时间为 ...
React Native学习提纲
React Native学习提纲当前版本最后修订日期: 2015年10月21日一. React.js入门基础 1.基础HTML/CSS与基础开发工具使用 - html基础 doctype.常用标签 ...

JsBridge的学习

JsBridge的学习相关推荐

最新文章

热门文章