成都网站建设设计

将想法与焦点和您一起共享

通过Proxy如何实现JSBridge模块化封装-创新互联

今天就跟大家聊聊有关通过Proxy如何实现JSBridge模块化封装,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

站在用户的角度思考问题,与客户深入沟通,找到广德网站设计与广德网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网站空间、企业邮箱。业务覆盖广德地区。

由于是Hybrid APP的性质,所以web与Native的通信是无法避免的;而为什么我要封装jsBridge,主要在于下面两点:

公司APP的JSBridge提供了数据的序列化和全局函数的注入,而我们这次由于包大小考虑,这一块需要H5自己来实现;

原生提供的接口协议太多,记住麻烦;

回调的写法不太人性化,期望Promise;

由于本次项目只涉及到Andriod,所以没有关于ios的处理,但我自认为他们只是协议的不同,Web的处理可以相同。

原理浅谈

通过Proxy如何实现JSBridge模块化封装

看上图的通信实现(图片来源于文章开头的文章),简单说一下通信过程;

Webview加载时会将原生提供的JSBridge方法注入到window对象上,比如:window.JSBridge.getDeviceInfo就是原生提供的可以读取一些设备标识信息的接口;

H5通过window调用原生接口,基本都需要传参,比如这次处理成功或则处理失败的结果回调的,还有一些参数设置,拿上面给的方法来举例:

window.JSBridge.getDeviceInfo({
 token: '*&^%$$#*',
 onOk(data) {
  save(data);
 },
 onError(error) {
  console.log(error.message);
 }
});

本文标题:通过Proxy如何实现JSBridge模块化封装-创新互联
本文路径:http://chengdu.cdxwcx.cn/article/gpsod.html