H5 与 Native 互动之 JSBridge 技术性

  • 栏目:知识 时间:2021-01-11 11:58 分享新闻到:
<返回列表

原题目:H5 与 Native 互动之 JSBridge 技术性

做了混和开发设计的许多人都了解Ionic和PhoneGap这类的架构,这种架构在web基本上包了一层Native,随后根据Bridge技术性促使js能够启用视頻、部位、声频等作用。文中便是详细介绍这层Bridge的互动基本原理,根据阅读文章文中你可以以掌握到js与ios及android最底层的通信基本原理及JSBridge的封裝技术性及调节方式。

一、基本原理篇

下边各自详细介绍IOS和Android与Java的最底层互动基本原理

IOS

在解读基本原理以前,最先来啦解下iOS的UIWebView部件,先看来一下iPhone官方网的详细介绍:

You can use the UIWebView class to embed web content in your application. To do so, you simply create a UIWebView object, attach it to a window, and send it a request to load web content. You can also use this class to move back and forward in the history of webpages, and you can even set some web content properties programmatically.

上边的含意是说UIWebView是一个可载入网页页面的目标,它有访问纪录作用,且对载入的网页页面內容是可程序编写的。
东莞网购网站建设简言之UIWebView有相近访问器的作用,大家应用能够它来开启网页页面,并做一些订制化的作用,如可让js调某一方式能够取拿到机的GPS信息内容。

但必须留意的是,Safari访问器应用的访问器控制和UIwebView部件其实不是同一个,二者在特性上面有非常大的差别。好运的是,iPhone公布iOS8的情况下,增加了一个WKWebView部件,假如你的APP只考虑到适用iOS8及之上版本号,那麼你也就可使用这一新的访问器控制了。

原生态的UIWebView类出示了下边一些特性和方式

特性:

loading:是不是处在载入中

canGoBack:A Boolean value indicating whether the receiver can move backward. (写保护)

canGoForward:A Boolean value indicating whether the receiver can move forward. (写保护)

request:The URL request identifying the location of the content to load. (read-only)

方式:

loadData:Sets the main page contents, MIME type, content encoding, and base URL.

loadRequest:载入互联网內容

loadHTMLString:载入当地HTML文档

stopLoading:终止载入

goBack:倒退

goForward:前行

reload:再次载入

stringByEvaluatingJavaFromString:实行一段js脚本制作,而且回到实行結果

Native(Objective-C或Swift)启用Java方式

Native启用Java語言,是根据 UIWebView部件的 stringByEvaluatingJavaFromString方式来完成的,该方式回到js脚本制作的实行結果。

// Swift

webview.stringByEvaluatingJavaFromString("Math.random()")

// OC

[webView stringByEvaluatingJavaFromString:@"Math.random();"];

从上边编码能看出它实际上便是启用了 window下的一个目标,假如大家要让native来启用大家js写的方式,那这一方式就需要在 window下会浏览到。但从全局性考虑到,大家要是曝露一个目标如JSBridge对native启用就行了,因此在这里里能够对native的编码做一个简易的封裝:

//下边为伪编码

webview.setDataToJs(somedata);

webview.setDataToJs =function(data){

webview.stringByEvaluatingJavaFromString("JSBridge.trigger(event, data)")

}

Java启用Native(Objective-C或Swift)方式

相反,Java启用Native,并沒有现有的API能够立即用来用,只是必须间接性地根据一些方式来完成。UIWebView有一个特点:在UIWebView内进行的全部互联网恳求,都可以以根据delegate涵数在Native层获得通告。那样,大家便可以在UIWebView内进行一个自定的互联网恳求,一般是那样的文件格式:jsbridge://methodName?param1=value1 param2=value2

因此在UIWebView的delegate涵数中,大家要是发觉是jsbridge://开始的详细地址,也不开展內容的载入,继而实行相对的启用逻辑性。

进行那样一个互联网恳求有二种方法:1. 根据localtion.href;2. 根据iframe方法;根据location.href有一个难题,便是假如大家持续数次改动window.location.href的值,在Native层只有接受到最终一次恳求,前边的恳求都是被忽视掉。

应用iframe方法,以勾起Native APP的共享部件为例子,简易的封闭式以下:

varurl ='jsbridge://doAction?title=共享题目 desc=共享叙述 link=http%3A%2F%2Fbaidu';

variframe =document.('iframe');

iframe.style.width ='1px';

iframe.style.height ='1px';

iframe.style.display ='none';

iframe.src =url;

document.body.(iframe);

setTimeout(function(){

iframe.remove();

},100);

随后Webview便可以阻拦这一恳求,而且分析出相对的方式和主要参数。以下编码所显示:

func webView(webView:UIWebView,shouldStartLoadWithRequest request:NSURLRequest,navigationType:UIWebViewNavigationType)- Bool{

print("shouldStartLoadWithRequest")

leturl =request.URL

letscheme =url?.scheme

letmethod =url?.host

letquery =url?.query

ifurl !=nil scheme =="jsbridge"{

print("scheme == (scheme)")

print("method == (method)")

print("query == (query)")

switchmethod!{

case"getData":

self.getData()

case"putData":

self.putData()

case"gotoWebview":

self.gotoWebview()

case"gotoNative":

self.gotoNative()

case"doAction":

self.doAction()

case"configNative":

self.configNative()

default:

print("default")

}

returnfalse

}else{

returntrue

}

}

Android

在android中,native与js的通信方法与ios相近,ios中的根据schema方法在android中也是适用的。

java启用native方法

现阶段在android中有三种启用native的方法:

1.根据schema方法,应用 shouldOverrideUrlLoading方式对url协议书开展分析。这类js的启用方法与ios的一样,应用iframe来启用native编码。2.根据在webview网页页面里立即引入原生态js编码方法,应用 addJavaInterface方式来完成。在android里完成以下:

classJSInterface{

@JavaInterface//留意这一编码一定得加上

publicStringgetUserData(){

return"UserData";

}

}

webView.addJavaInterface(newJSInterface(),"AndroidJS");

上边的编码便是在网页页面的window目标里引入了 AndroidJS目标。在js里能够立即启用

alert(AndroidJS.getUserData())//UserDate

3.应用prompt,console.log,alert方法,这三个方式对js里是特性原生态的,在android webview这一层是能够重新写过这三个方式的。一般大家应用prompt,由于这一在js里应用的很少,用于和native通信不良反应较为少。

classYouzanWebChromeClientextendsWebChromeClient{

@Override

publicbooleanonJsPrompt(WebViewview,Stringurl,Stringmessage,StringdefaultValue,JsPromptResultresult){

// 这儿便可以对js的prompt开展解决,根据result回到結果

}

@Override

publicbooleanonConsoleMessage(ConsoleMessageconsoleMessage){

}

@Override

publicbooleanonJsAlert(WebViewview,Stringurl,Stringmessage,JsResultresult){

}

}

Native启用java方法

在android里是应用webview的 loadUrl开展启用的,如:

// 启用js中的JSBridge.trigger方式

webView.loadUrl("java:JSBridge.trigger('webviewReady')");

二、库的封裝 js启用native的封裝

上边大家掌握了js与native通信的最底层基本原理,因此大家能够封裝一个基本的通信方式 doCall来屏蔽掉android与ios的差别。

YouzanJsBridge={

doCall:function(functionName,data,callback){

var_this =this;

// 处理持续启用难题

if(this.lastCallTime (Date.now()-this.lastCallTime) 100){

setTimeout(function(){

_this.doCall(functionName,data,callback);

},100);

return;

}

this.lastCallTime =Date.now();

data =data ||{};

if(callback){

$.extend(data,{callback:callback });

}

if(UA.isIOS()){

$.each(data,function(key,value){

if($.isPlainObject(value)||$.isArray(value)){

data[key]=JSON.stringify(value);

}

});

varurl =Args.addParameter('youzanjs://'+functionName,data);

variframe =document.('iframe');

iframe.style.width ='1px';

iframe.style.height ='1px';

iframe.style.display ='none';

iframe.src =url;

document.body.(iframe);

setTimeout(function(){

iframe.remove();

},100);

}elseif(UA.isAndroid()){

window.androidJS window.androidJS[functionName] window.androidJS[functionName](JSON.stringify(data));

}else{

console.error('没获取platform信息内容,读取api不成功');

}

}

}

上边android端大家应用了addJavaInterface方式来引入一个AndroidJS目标。

新项目通用性方式抽象性

在新项目的实践活动中,大家慢慢抽象性出一些通用性的方式,这种方式大部分全是能够考虑新项目的要求。以下所显示:

1.getData(datatype, callback, extra) H5从Native APP获得数据信息

应用情景:H5必须从Native APP获得一些数据信息的情况下,能够启用这一方式。

主要参数 种类 是不是务必 实例值 表明 datatype String 是 userInfo 数据信息种类 callback Function 是 回调函数涵数 extra Object 否 传送给Native APP的数据信息目标

实例编码:

JSBridge.getData('userInfo',function(data){

console.log(data);

});

2.putData(datatype, data) H5告知Native APP一些数据信息

应用情景:H5告知Native APP一些数据信息,能够启用这一方式。

主要参数 种类 是不是务必 实例值 表明 datatype String 是 userInfo 数据信息种类 data Object 是 { username: 'zhangsan', age: 20 } 传送给Native APP的数据信息目标

实例编码:

JSBridge.putData('userInfo',{

username:'zhangsan',

age:20

});

3.gotoWebview(url, page, data) Native APP新开业一个Webview对话框,并开启相对网页页面 主要参数 种类 是不是务必 实例值 表明 url String 是 http://youzan 网页页面连接详细地址,一般都要是传送URL主要参数便可以了 page String 否 web 网页页面page种类,默认设置为web data Object 否 附加主要参数目标

实例编码:

// 实例1:开启一个网页页面

JSBridge.gotoWebview('http://youzan');

// 实例2:开启一个网页页面,而且传送附加的主要参数给Native APP

JSBridge.gotoWebview('http://youzan','goodsDetail',{

goods_id:10000,

title:'它是产品的题目',

desc:'它是产品的叙述'

});

4.gotoNative(page, data) 从H5网页页面自动跳转到Native APP的某一原生态页面 主要参数 种类 是不是务必 实例值 表明 page String 是 loginPage Native网页页面标识符,比如loginPage data Object 否 { username: 'zhangsan', age: 20 } 附加主要参数目标

实例编码:

// 实例1:开启Native APP登陆网页页面

JSBridge.gotoNative('loginPage');

// 实例2:开启Native APP登陆网页页面,而且传送客户名给Native APP

JSBridge.gotoNative('loginPage',{

username:'张三'

});

5.doAction(action, data) 作用上的一些实际操作 主要参数 种类 是不是务必 实例值 表明 action String 是 copy 实际操作作用种类,比如共享、拷贝 data Object 否 { content: '它是要拷贝的內容' } 附加主要参数

实例编码:

// 实例1:启用Native APP拷贝一段文字到裁切板

JSBridge.doAction('copy',{

content:'它是要拷贝的內容'

});

// 实例2:启用Native APP的共享部件,共享当今网页页面到手机微信

JSBridge.doAction('share',{

title:'共享题目',

desc:'共享叙述',

link:'http://youzan',

imgs_url:'http://wap.koudaitong/v2/common/url/create?type=homepage index%2Findex= kdt_id=63077 alias=63077'

});

三、调节篇 应用Safari开展UIWebView的调节

(1)最先必须开启Safari的调节方式,在Safari的莱单中,挑选“Safari”→“Preference”→“Advanced”,启用上“Show Develop menu in menu bar”选择项,以下图所显示。

(2)开启真机或iPhone仿真模拟器的调节方式,在真机或iPhone仿真模拟器中开启设定页面,挑选“Safari”→“高級”→“Web查验器”,挑选打开就可以,以下图所显示。

(3)将真机根据USB连上电脑上,或是打开仿真模拟器,Safari的“Develop”莱单下便会空出相对的莱单项,如图所示所显示。

(4)Safari联接上UIWebView以后,大家便可以立即在Safari中立即改动HTML、CSS,及其调节Java。

四、参照连接

UIWebView Class Reference

WKWebView Class Reference

https://github/marcuswestin/WebViewJavaBridge

文中由 @kk @劲风 相互写作回到凡科,查询大量

分享新闻到:

更多阅读

H5 与 Native 互动之 JSBridge 技术性

知识 2021-01-11
原题目:H5 与 Native 互动之 JSBridge 技术性 做了混和开发设计的许多人都了解Ionic和PhoneGap这类的...
查看全文

三大数据信号传来,电动式车价钱战将要

知识 2021-01-11
模拟题目:三绝大多数据数据信号传出,电动式式车价格战即将大爆发!时间基本定了! 平均...
查看全文

【商品宣传策划广告宣传片软件制作】

知识 2021-01-11
模拟题目:【产品宣传策划方案策划广告宣传宣传策划片手机软件制作】Focusky案例实例教程...
查看全文
返回全部新闻


区域站点: 南丰县微信h5小游戏   南宫市手机软件制作教程   囊谦县手机网站自助建站   南和县h5小游戏制作平台   南华县微信h5小游戏   南江县手机软件制作教程   南京市手机网站自助建站   南靖县h5小游戏制作平台   南康市微信h5小游戏   南乐县手机软件制作教程   南陵县手机网站自助建站   南宁市h5小游戏制作平台   南平市微信h5小游戏   南皮县手机软件制作教程   南市区手机网站自助建站   南通市h5小游戏制作平台   南投县微信h5小游戏   南雄市手机软件制作教程   南溪县手机网站自助建站   南阳市h5小游戏制作平台   南漳县微信h5小游戏   南召县手机软件制作教程   南郑县手机网站自助建站   那坡县h5小游戏制作平台   那曲县微信h5小游戏   纳雍县手机软件制作教程   讷河市手机网站自助建站   内黄县h5小游戏制作平台   内江市微信h5小游戏   内丘县手机软件制作教程   内乡县手机网站自助建站   嫩江市h5小游戏制作平台   聂荣县微信h5小游戏   尼玛县手机软件制作教程   尼木县手机网站自助建站   宁安市h5小游戏制作平台   宁波市微信h5小游戏   宁城县手机软件制作教程   宁德市手机网站自助建站   宁都县h5小游戏制作平台   宁国市微信h5小游戏   宁海县手机软件制作教程   宁化县手机网站自助建站   宁晋县h5小游戏制作平台   宁陵县微信h5小游戏   宁明县手机软件制作教程   宁南县手机网站自助建站   宁强县h5小游戏制作平台   宁陕县微信h5小游戏   宁武县手机软件制作教程   宁乡市手机网站自助建站   宁阳县h5小游戏制作平台   宁远县微信h5小游戏   农安县手机软件制作教程   磐安县手机网站自助建站   盘锦市h5小游戏制作平台   盘山县微信h5小游戏   磐石市手机软件制作教程   盘州市手机网站自助建站   蓬安县h5小游戏制作平台   澎湖县微信h5小游戏   蓬莱市手机软件制作教程   彭山县手机网站自助建站   蓬溪县h5小游戏制作平台   彭阳县微信h5小游戏   彭泽县手机软件制作教程   彭州市手机网站自助建站   偏关县h5小游戏制作平台   平安县微信h5小游戏   平昌县手机软件制作教程   平定县手机网站自助建站   屏东县h5小游戏制作平台   平度市微信h5小游戏   平果县手机软件制作教程   平和县手机网站自助建站   平湖市h5小游戏制作平台   平江县微信h5小游戏   平乐县手机软件制作教程   平凉市手机网站自助建站   平利县h5小游戏制作平台   平罗县微信h5小游戏   平陆县手机软件制作教程   屏南县手机网站自助建站   平泉市h5小游戏制作平台   屏山县微信h5小游戏   平顺县手机软件制作教程   平塘县手机网站自助建站   平潭县h5小游戏制作平台   平武县微信h5小游戏   萍乡市手机软件制作教程   平乡县手机网站自助建站   平阳县h5小游戏制作平台   平遥县微信h5小游戏   平阴县手机软件制作教程   平邑县手机网站自助建站   平远县h5小游戏制作平台   平舆县微信h5小游戏   皮山县手机软件制作教程   普安县手机网站自助建站   浦北县h5小游戏制作平台   浦城县微信h5小游戏   普洱市手机软件制作教程   普格县手机网站自助建站   浦江县h5小游戏制作平台   普兰县微信h5小游戏   普宁市手机软件制作教程   莆田市手机网站自助建站   迁安市h5小游戏制作平台   乾安县微信h5小游戏   潜江市手机软件制作教程   潜山市手机网站自助建站  

友情链接: 免费建站的平台 网页设计自我介绍 自助建站 搭建网站基本步骤 手机版

Copyright © 2002-2020 手机网站自助建站_h5小游戏制作平台_微信h5小游戏_手机软件制作教程_抽奖h5 版权所有 (网站地图) 备案号:粤ICP备10235580号