Native与JS互相交互的系统技术方案

本申请涉及一种Native与JS互相交互的系统，包括：H5模块、原生模块和H5全局对象。其中，H5全局对象用于执行H5模块和原生模块之间的通信。实施时，H5模块通过H5全局对象向原生模块触发一个url scheme；原生模块捕获url scheme，对url scheme进行解析，得到解析结果，根据解析结果执行原生方法，在原生方法执行完毕后，根据解析结果通过H5全局对象向H5模块发送H5回调函数；或，通过H5全局对象主动调用H5方法；H5模块在接收到H5回调函数时执行回调；或，在检测到H5方法时判断是否需要执行回调。本申请中通过构建H5全局对象完成了H5模块、原生模块之间的互相交互，即Native与JS之间的互相交互。相交互。相交互。

【技术实现步骤摘要】
Native与JS互相交互的系统


[0001]本申请涉及软件开发
，尤其涉及一种Native与JS互相交互的系统。

技术介绍

[0002]Native App开发周期长，审核严格，同时更新较为繁琐，但用户体验较好；而Web App虽然开发周期比较短，版本更新迭代很快，但是用户体验较差。它们各自拥有不同的适用场景，现有技术中根据具体的业务场景，在App开发的过程中将二者结合起来，发挥各自的长处。如将Android App中都有的WebView嵌入到App页面中并像浏览器一样加载网页。如果将业务页面写成网页形式，通过WebView加载到App中，就可以将Web App和Native App混合起来。但是仅仅嵌入WebView并加载特定的页面并不能完全满足所有的业务场景，有些业务场景需要使用原生能力，比如获取定位、调用原生弹窗等，有时App也需要通知业务页面作出指定的行为，比如重定向、修改隔离配置等，但是现有技术中Native与JS之间的通信依然较为不便。

技术实现思路

[0003]为至少在一定程度上克服相关技术中Native与JS之间的通信较为不便的问题，本申请提供一种Native与JS互相交互的系统。
[0004]本申请的方案如下：
[0005]一种Native与JS互相交互的系统，包括：
[0006]H5模块、原生模块和H5全局对象；
[0007]所述H5全局对象用于执行所述H5模块和所述原生模块之间的通信；
[0008]所述H5模块用于通过所述H5全局对象向所述原生模块触发一个url scheme；
[0009]所述原生模块用于捕获所述url scheme，对所述url scheme进行解析，得到解析结果，根据所述解析结果执行原生方法，在所述原生方法执行完毕后，根据所述解析结果通过所述H5全局对象向所述H5模块发送H5回调函数；或，通过所述H5全局对象主动调用H5方法；
[0010]所述H5模块用于在接收到所述H5回调函数时执行回调；或，在检测到所述H5方法时判断是否需要执行回调。
[0011]优选的，在本申请一种可实现的方式中，所述分析结果至少包括：H5方法的方法名、H5回调函数的回调id和参数。
[0012]优选的，在本申请一种可实现的方式中，所述H5模块还用于通过所述H5全局对象注册本地方法，并添加到预先建立的H5本地注册方法集合。
[0013]优选的，在本申请一种可实现的方式中，所述H5模块还用于在调用原生方法时，将所述原生方法对应的回调函数添加到预先建立的H5本地回调函数集合。
[0014]优选的，在本申请一种可实现的方式中，所述H5模块还用于在执行回调时，传入回调标识；执行回调完毕后，将所述回调标识对应的回调函数对应的原生方法从所述H5本地
回调函数集合中删除。
[0015]本申请提供的技术方案可以包括以下有益效果：本申请中的Native与JS互相交互的系统，包括：H5模块、原生模块和H5全局对象。其中，H5全局对象用于执行H5模块和原生模块之间的通信。实施时，H5模块通过H5全局对象向原生模块触发一个url scheme；原生模块捕获url scheme，对url scheme进行解析，得到解析结果，根据解析结果执行原生方法，在原生方法执行完毕后，根据解析结果通过H5全局对象向H5模块发送H5回调函数；或，通过H5全局对象主动调用H5方法；H5模块在接收到H5回调函数时执行回调；或，在检测到H5方法时判断是否需要执行回调。本申请中通过构建H5全局对象完成了H5模块、原生模块之间的互相交互，即Native与JS之间的互相交互。
[0016]应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。
附图说明
[0017]此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。
[0018]图1是本申请一个实施例提供的一种Native与JS互相交互的系统的结构示意图；
[0019]图2是本申请一个实施例提供的一种Native与JS互相交互的系统执行时的流程示意图。
[0020]附图标记：H5模块
‑
1；原生模块
‑
2；H5全局对象
‑
3。
具体实施方式
[0021]这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
[0022]一种Native与JS互相交互的系统，参照图1
‑
图2，包括：
[0023]H5模块1、原生模块2和H5全局对象3；
[0024]H5全局对象3用于执行H5模块1和原生模块2之间的通信；
[0025]H5模块1用于通过H5全局对象3向原生模块2触发一个url scheme；
[0026]原生模块2用于捕获url scheme，对url scheme进行解析，得到解析结果，根据解析结果执行原生方法，在原生方法执行完毕后，根据解析结果通过H5全局对象3向H5模块1发送H5回调函数；或，通过H5全局对象3主动调用H5方法；
[0027]H5模块1用于在接收到H5回调函数时执行回调；或，在检测到H5方法时判断是否需要执行回调。
[0028]其中，分析结果至少包括：H5方法的方法名、H5回调函数的回调id和参数。
[0029]本实施例中的H5模块1可以为H5页面。
[0030]本实施例中的原生模块2可以为原生页面。
[0031]本实施例中的H5全局对象3可以为JSbridge，JSbridge是H5页面中全局对象window的一个属性。
[0032]url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的。具体为,可以用系统的Open URI打开一个类似于url的链接(可拼入参数),然后系统会进行判断,如果是系统的url scheme,则打开系统应用,否则查找是否有app注册这种scheme,再打开对应app。本实施例中，JSBridge中的url scheme则是仿照上述的形式的一种方式。具体的,app不会注册对应的scheme,而是由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行等。
[0033]本实施例中的Native与JS互相交互的系统，包括：H5模块1、原生模块2和H5全局对象3。其中，H5全局对象3用于执行H5模块1和原生模块2之间的通信。实施时，H5模块1通过H5本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种Native与JS互相交互的系统，其特征在于，包括：H5模块、原生模块和H5全局对象；所述H5全局对象用于执行所述H5模块和所述原生模块之间的通信；所述H5模块用于通过所述H5全局对象向所述原生模块触发一个url scheme；所述原生模块用于捕获所述url scheme，对所述url scheme进行解析，得到解析结果，根据所述解析结果执行原生方法，在所述原生方法执行完毕后，根据所述解析结果通过所述H5全局对象向所述H5模块发送H5回调函数；或，通过所述H5全局对象主动调用H5方法；所述H5模块用于在接收到所述H5回调函数时执行回调；或，在检测到所述H5方法时判断是否需要执...

【专利技术属性】
技术研发人员：周凯，
申请(专利权)人：上海中通吉网络技术有限公司，
类型：发明
国别省市：