一种JavaScript交互调用方法与流程

一种javascript交互调用方法
技术领域
1.本发明涉及一种实现javascript和native之间交互调用的方法。


背景技术：

2.移动网页应用开发需要用到native的能力时，需要和native做交互，但 javascript不能直接调用native，且现在的移动网页不仅需要跨系统平台，有时也需要跨应用平台。
3.为解决前述问题，现有的解决方案是javascript通过iframe控件或当前页面加载特定的url，native监听拦截url变化并解析处理。前述方案的缺点主要有：1)url加载有最大长度限制，超出时无法交互；2)交互功能零散的实现，没有完善的私有协议，导致难以复用；3)不能支持应用平台的拓展。


技术实现要素：

4.本发明的目的是提供一种实现javascript和native之间交互调用的方法。
5.为了达到上述目的，本发明的技术方案是提供了一种javascript交互调用方法，其特征在于，包括以下步骤：
6.步骤1、在javascript层封装一个jssdk，在jssdk内部定义一个全局对象 wondersh5以及一个全局函数executejs，全局对象wondersh5及全局函数 executejs挂载在浏览器对象的window上，使其可以供全局访问，其中，全局对象wondersh5供jssdk外部的javascript层调用，全局函数executejs供native 层调用；
7.全局对象wondersh5内部定义一个方法字典，用于存储native层可调用的 javascript方法以及一个用于主动调用native层的方法callnative；javascript方法包括主动调用方法及回调方法，其中，将由native层主动调用的javascript 方法定义为主动调用方法，将当javascript层调用native方法时，native层响应 javascript层的调用所调用的javascript方法定义为回调方法；
8.若定义用于jssdk识别当前运行环境的专属字段，则在jssdk内部依据专属字段的不同值将所有native层可调用的javascript方法预先声明并实现以供外部javascript层调用；
9.若不定义专属字段，则在jssdk内部声明并实现目标应用平台的专属应用平台方法；
10.步骤2、native层在加载webview之前在useragent后拼接专属字段，并且 native层已经通过addjavascriptinterface或addscriptmessagehandler提前为 javascript引擎注入与专属字段唯一对应的对象并传入对象名，用于jssdk主动调用；若javascript层调用native方法，则进入步骤3，若native层主动调用 javascript方法时，则进入步骤4；
11.或者native层不在useragent后拼接专属字段，当javascript层调用native 方法或者当native层主动调用javascript方法时，直接采用专属应用平台方法；
12.步骤3、javascript层调用native方法，包括以下步骤：
13.步骤301、javascript层调用native方法时，使用全局对象wondersh5调用对应的javascript方法，传入详细参数及回调方法；
14.步骤302、将步骤301所传入的详细参数及回调方法的名称拼装为私有协议定义的格式获得最终参数，通过方法callnative实现最终参数的传递，其中：
15.私有协议定义的格式包括如下字段：
16.方法名字段，用于记载javascript方法的方法名称；
17.调用类别字段，用于记载javascript方法所对应的类别；
18.参数字段：用于记载不同方法名称所对应的详细参数；
19.回调方法名字段：用于记载回调方法的名称；将步骤301中传入的回调方法存储进步骤1中定义的方法字典中，键为随机生成的字符串，值为回调方法；键在调用native层时拼接进最终参数的回调方法名字段内；
20.在方法callnative中，先通过专属字段判断当前运行环境，然后调用步骤2 预先注入所对应的javascript引擎的对象，并通过对象向native层传入拼接好的最终参数；
21.步骤303、native层收到最终参数后，根据私有协议的格式解析出具体需要调用的native方法，回调javascript方法时，通过evaluatejavascript执行步骤3 中预先挂载在window上的全局函数executejs，并传入回调方法的名称及回调结果；
22.步骤304、jssdk通过native层所传入的键在方法字典中找到对应的 javascript方法并执行，执行完毕后从方法字典内删除此回调方法，避免内存的泄漏；
23.步骤4、native层主动调用javascript方法时，将javascript方法预先加入至步骤1中定义的方法字典中，并使用预先约定的协议规则为方法名的前缀。jssdk在执行完此类javascript方法后，判断方法名前缀符合预先约定的协议规则，则不删除此javascript方法。
24.优选地，将javascript方法分为四大类别：原生权限nativepermission、页面跳转topage、设置顶部底部导航setnavgation以及页面生命周期lifecycle。
25.本发明在javascript层封装一个jssdk，通过useragent判断当前环境调用不同的方法，并制定私有协议，native层按照协议解析调用内容并回调对应方法，移动网页应用开发者集成jssdk后不需要关心当前所处的系统或应用环境就可以用统一的接口实现对native能力的调用。采用本发明提供的方法可以减少调用流程，可复用性高，可拓展多个系统及应用平台，降低研发时间成本。
26.具体而言，相比于现有技术，本发明具有如下优点：
27.1)javascript调用简洁清晰，移动网页开发可以更多的专注业务本身，不用过多关注系统平台的差异；
28.2)各应用平台的差异可以在jssdk的内部实现里判断及适配，可复用性高，可拓展多个应用平台，降低研发时间成本；
29.3)与javascript引擎交互没有参数长度的限制，也解决了现有方案url过长时无法交互的问题；
30.4)私有协议的制定使javascript与native的交互调用始终使用同一方法，更易维护和拓展。
具体实施方式
31.下面结合具体实施例，进一步阐述本发明。应理解，这些实施例仅用于说明本发明而不用于限制本发明的范围。此外应理解，在阅读了本发明讲授的内容之后，本领域技术人员可以对本发明作各种改动或修改，这些等价形式同样落于本技术所附权利要求书所限定的范围。
32.本实施例公开的一种javascript交互调用方法具体包括以下步骤：
33.步骤1、在javascript层封装一个jssdk，在jssdk内部定义一个全局对象 wondersh5以及一个全局函数executejs，全局对象wondersh5及全局函数executejs挂载在浏览器对象的window上，使其可以供全局访问，其中，全局对象wondersh5供jssdk外部的javascript层调用，全局函数executejs供native 层调用。
34.全局对象wondersh5内部定义一个方法字典，用于存储native层可调用的 javascript方法以及一个用于主动调用native层的方法callnative。javascript方法包括主动调用方法及回调方法，其中，将由native层主动调用的javascript 方法定义为主动调用方法，将当javascript层调用native方法时，native层响应 javascript层的调用所调用的javascript方法定义为回调方法。
35.若在useragent后额外拼接用于jssdk识别当前运行环境的专属字段，则在 jssdk内部依据专属字段的不同值将所有native层可调用的javascript方法预先声明并实现以供外部javascript层调用。本发明中，native可以在加载webview 之前在useragent后拼接专属字段，其中，运行于移动终端的app访问任意功能模块的移动网页应用时，native加载webview。
36.若在useragent后不额外拼接专属字段时，则在jssdk内部声明并实现目标应用平台的专属应用平台方法。其中，目标应用平台的专属应用平台方法是指目标应用平台所提供的方法，而不是本发明所定义的javascript方法
37.步骤2、native层在加载webview之前在useragent后拼接专属字段，并且 native层已经通过addjavascriptinterface或addscriptmessagehandler提前为 javascript引擎注入与专属字段唯一对应的对象并传入对象名，用于jssdk主动调用。若javascript层调用native方法，则进入步骤3，若native层主动调用 javascript方法时，则进入步骤4。
38.或者native层不在useragent后拼接专属字段，当javascript层调用native 方法或者当native层主动调用javascript方法时，直接采用专属应用平台方法。
39.步骤3、javascript层调用native方法，包括以下步骤：
40.步骤301、javascript层调用native方法时，使用全局对象wondersh5调用对应的javascript方法，传入详细参数及回调方法。
41.本实施例中，所传入的详细参数及回调方法示例如下：
42.[0043][0044]
"coordinate"、"1"、res.code、res.msg、res.longitude以及res.latitude均为参数，其中，res.code、res.msg、res.longitude以及res.latitude为名称为res的回调方法所需的参数。
[0045]
步骤302、将步骤301所传入的详细参数及回调方法的名称拼装为私有协议定义的格式获得最终参数，通过方法callnative实现最终参数的传递。
[0046]
本发明中，私有协议定义的格式包括如下字段：
[0047]
方法名字段，用于记载javascript方法的方法名称；
[0048]
调用类别字段，用于记载方法所对应的类别，本发明中，将方法分为四大类别：原生权限nativepermission、页面跳转topage、设置顶部底部导航 setnavgation以及页面生命周期lifecycle；
[0049]
参数字段：用于记载不同javascript方法所对应的详细参数，例如：
[0050]
对于属于原生权限nativepermission的方法所对应的详细参数包括：扫码 qrcodescan，身份识别authentication，横竖屏切换rotate，获取经纬度 getlocation等等；
[0051]
对于属于页面跳转topage的方法所对应的详细参数包括：向前push，向后 pop等等；
[0052]
对于属于设置顶部底部导航setnavgation的方法所对应的详细参数包括：设置顶部导航header设置底部导航tabbar等等；
[0053]
对于属于页面生命周期lifecycle的方法所对应的详细参数包括：页面即将出现onvisible，页面即将隐藏oninvisible，页面即将销毁ondestory等等。
[0054]
回调方法名字段：用于记载回调方法的名称或者叫标识。通常javascript传入的都是匿名函数，因此需要生成一个唯一字符串作为回调方法的名称，具体而言：将步骤301中传入的回调方法存储进步骤1中定义的方法字典中，键为随机生成的字符串，值为回调方法；键在调用native层时拼接进最终参数的回调方法名字段内。本发明中，用“名称”代指映射，例如“回调方法的名称”是指回调方法的映射。
[0055]
本发明中，方法名字段、调用类别字段、参数字段及回调方法名字段共同构成了最终的私有协议，通过这套规则可以覆盖大部分常用交互，也容易拓展。将步骤301所传入的详细参数及回调方法的名称拼装为私有协议定义的格式如下所示：
[0056][0057]
在方法callnative中，先通过专属字段判断当前运行环境，然后调用步骤2 预先注入所对应的javascript引擎的对象，并通过对象向native层传入拼接好的最终参数。
[0058]
步骤303、native层收到最终参数后，根据私有协议的格式解析出具体需要调用的javascript方法，回调javascript方法时，通过evaluatejavascript执行步骤3中预先挂载在window上的全局函数executejs，并传入回调方法名及回调结果。
[0059]
步骤304、jssdk通过native层所传入的键在方法字典中找到对应的 javascript方法并执行，执行完毕后从方法字典内删除此回调方法，避免内存的泄漏。
[0060]
步骤4、native层主动调用javascript方法时，将javascript方法预先加入至步骤1中定义的方法字典中，并使用预先约定的协议规则为方法名的前缀。 jssdk在执行完此类javascript方法后，判断方法名前缀符合预先约定的协议规则，则不删除此javascript方法。