CN109976831A - 一种JavaScript和原生APP之间数据交互方法 - Google Patents

一种JavaScript和原生APP之间数据交互方法 Download PDF

Info

Publication number
CN109976831A
CN109976831A CN201910242212.3A CN201910242212A CN109976831A CN 109976831 A CN109976831 A CN 109976831A CN 201910242212 A CN201910242212 A CN 201910242212A CN 109976831 A CN109976831 A CN 109976831A
Authority
CN
China
Prior art keywords
primary
javascript
data
function
app
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201910242212.3A
Other languages
English (en)
Inventor
宋伟伟
张兴康
张冬霞
邵辉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shandong Inspur Genersoft Information Technology Co Ltd
Original Assignee
Shandong Inspur Genersoft Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shandong Inspur Genersoft Information Technology Co Ltd filed Critical Shandong Inspur Genersoft Information Technology Co Ltd
Priority to CN201910242212.3A priority Critical patent/CN109976831A/zh
Publication of CN109976831A publication Critical patent/CN109976831A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44521Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Computer And Data Communications (AREA)

Abstract

本发明公开一种JavaScript和原生APP之间数据交互方法,涉及通信技术领域,该方法利用引入Android系统下原生APP的Webview组件、IOS系统下UIWebView组件进行原生APP加载Html网页,来实现JavaScript与原生APP两者之间的数据交互,从而使用原生功能。实现JavaScript与原生APP两者之间的数据交互,其具体操作包括:在业务层调用JavaScript API封装层提供的API函数;JavaScript API封装层通过交互桥接层提供的统一原生交互接口,与原生API封装层交互;原生API封装层,使用原生代码对移动端硬件的接口函数进行封装;利用封装的接口函数请求原生功能的数据。本发明数据交互方法于跨平台使用,节省开发费用的同时还缩短了开发周期。

Description

一种JavaScript和原生APP之间数据交互方法
技术领域
本发明涉及通信技术领域,具体的说是一种JavaScript和原生APP之间数据交互方法。
背景技术
在开发移动应用时,会用到webview控件(浏览器控件)进行加载网页展示进行交互,会出现javascript调用native code(原生功能)或者native code调用javascript的情况。通常做法是利用原生API进行操作。
在传统的移动设备APP中,大多需要对每个系统进行适配,此种开发方式成本高、周期长,Android、iOS以及Windows Phone都需要单独开发;在代码中频繁判断手机型号调用不通的API,代码冗余难维护。
发明内容
本发明针对目前技术发展的需求和不足之处,提供一种JavaScript和原生APP之间数据交互方法。
本发明的一种JavaScript和原生APP之间数据交互方法,解决上述技术问题采用的技术方案如下:
一种JavaScript和原生APP之间数据交互方法,利用引入Android系统下原生APP的Webview组件、IOS系统下UIWebView组件进行原生APP加载Html网页,来实现JavaScript与原生APP两者之间的数据交互,从而使用原生功能。
实现JavaScript与原生APP两者之间的数据交互,其具体操作包括:
在业务层调用JavaScript API封装层提供的API函数;
JavaScript API封装层通过交互桥接层提供的统一原生交互接口,与原生API封装层交互;
原生API封装层,使用原生代码对移动端硬件的接口函数进行封装;
利用封装的接口函数请求原生功能的数据。
JavaScript API封装层提供的API函数为:
cmApi.barcode.scan(‘mainModule.getScanQRcodeCallback’)。
统一原生交互接口为:
利用封装的接口函数请求原生功能的数据,该请求操作包括同步请求和异步请求两种请求方法;
同步请求的方法可以将处理数据完成后的结果直接返回给业务层;
异步请求的方法可以将处理数据完成后的结果返回给统一的回调函数,再由回调函数返回给业务层。
回调函数的格式为:
NSString*callback=[[@”cmApi.router.loadContent(‘”
stringByAppendingString:userInfo[@”custom_content”][@”funcPath”]]
stringByAppendingString:@“’)”];
[webView stringByEvaluatingJavaScriptFromString:callback];
通过上述回调函数将处理数据完成后的结果返回给业务层。
引入Webview组件后,配置Webview组件,进行网页页面加载,随后,在JavaScript设置一个NativeBridge,原生APP注入一个JSBridge,NativeBridge和JSBridge按照数据约定来进行双向通信和分发逻辑。
在JavaScript设置NativeBridge时,需要在NativeBridge接口中约定传递三个参数:字符串类型的原生实现类、字符串类型的实现方法、json类型的传递参数。
原生APP注入一个JSBridge时,需要在JSBridge接口中约定传递两个参数:字符串类型的回调函数、json类型的返回参数。
本发明的一种JavaScript和原生APP之间数据交互方法,与现有技术相比具有的有益效果是:
本发明利用引入Android系统下原生APP的Webview组件、IOS系统下UIWebView组件进行原生APP加载Html网页,来实现JavaScript与原生APP两者之间的数据交互,从而使用原生功能,以便于跨平台使用,节省开发费用的同时还缩短了开发周期。
具体实施方式
为使本发明的技术方案、解决的技术问题和技术效果更加清楚明白,以下结合具体实施例,对本发明的技术方案进行清楚、完整的描述,显然,所描述的实施例仅仅是本发明的一部分实施例,而不是全部的实施例。基于本发明的实施例,本领域技术人员在没有做出创造性劳动的前提下获得的所有实施例,都在本发明的保护范围之内。
本实施例提供一种JavaScript和原生APP之间数据交互方法,利用引入Android系统下原生APP的Webview组件、IOS系统下UIWebView组件进行原生APP加载Html网页,来实现JavaScript与原生APP两者之间的数据交互,从而使用原生功能。
实现JavaScript与原生APP两者之间的数据交互,其具体操作包括:
在业务层调用JavaScript API封装层提供的API函数;
JavaScript API封装层通过交互桥接层提供的统一原生交互接口,与原生API封装层交互;
原生API封装层,使用原生代码对移动端硬件的接口函数进行封装;
利用封装的接口函数请求原生功能的数据。
JavaScript API封装层提供的API函数为:
cmApi.barcode.scan(‘mainModule.getScanQRcodeCallback’)。
统一原生交互接口为:
利用封装的接口函数请求原生功能的数据,该请求操作包括同步请求和异步请求两种请求方法;
同步请求的方法可以将处理数据完成后的结果直接返回给业务层;
异步请求的方法可以将处理数据完成后的结果返回给统一的回调函数,再由回调函数返回给业务层。
回调函数的格式为:
NSString*callback=[[@”cmApi.router.loadContent(‘”
stringByAppendingString:userInfo[@”custom_content”][@”funcPath”]]
stringByAppendingString:@“’)”];
[webView stringByEvaluatingJavaScriptFromString:callback];
通过上述回调函数将处理数据完成后的结果返回给业务层。
引入Webview组件后,配置Webview组件,进行网页页面加载,随后,在JavaScript设置一个NativeBridge,原生APP注入一个JSBridge,NativeBridge和JSBridge按照数据约定来进行双向通信和分发逻辑。
在JavaScript设置NativeBridge时,需要在NativeBridge接口中约定传递三个参数:字符串类型的原生实现类、字符串类型的实现方法、json类型的传递参数。
原生APP注入一个JSBridge时,需要在JSBridge接口中约定传递两个参数:字符串类型的回调函数、json类型的返回参数。
基于Android系统:原生APP启动时,将NativeBridge接口初始化并进行注入:
通过注解的方式在原生APP启动时,维护实现类名称与实现类路径的关联关系,用于调用时通过java的反射机制调用实现类中的指定方法:
基于IOS:使用JavaScriptCore库,将JavaScript传入的回调函数在objective-c或者swift端持有,并回去回调这个回调函数。
JSExportAs是用来将objective-c的方法映射为JavaScript的函数:
JavaScript可以通过webBridge.login来进行调用原生端开放的API:

Claims (9)

1.一种JavaScript和原生APP之间数据交互方法,其特征在于,利用引入Android系统下原生APP的Webview组件、IOS系统下UIWebView组件进行原生APP加载Html网页,来实现JavaScript与原生APP两者之间的数据交互,从而使用原生功能。
2.根据权利要求1所述的一种JavaScript和原生APP之间数据交互方法,其特征在于,实现JavaScript与原生APP两者之间的数据交互,其具体操作包括:
在业务层调用JavaScript API封装层提供的API函数;
JavaScript API封装层通过交互桥接层提供的统一原生交互接口,与原生API封装层交互;
原生API封装层,使用原生代码对移动端硬件的接口函数进行封装;
利用封装的接口函数请求原生功能的数据。
3.根据权利要求2所述的一种JavaScript和原生APP之间数据交互方法,其特征在于,JavaScript API封装层提供的API函数为:
cmApi.barcode.scan(‘mainModule.getScanQRcodeCallback’)。
4.根据权利要求2所述的一种JavaScript和原生APP之间数据交互方法,其特征在于,统一原生交互接口为:
5.根据权利要求2所述的一种JavaScript和原生APP之间数据交互方法,其特征在于,利用封装的接口函数请求原生功能的数据,该请求操作包括同步请求和异步请求两种请求方法;
同步请求的方法可以将处理数据完成后的结果直接返回给业务层;
异步请求的方法可以将处理数据完成后的结果返回给统一的回调函数,再由回调函数返回给业务层。
6.根据权利要求5所述的一种JavaScript和原生APP之间数据交互方法,其特征在于,所述回调函数的格式为:
NSString*callback=[[@”cmApi.router.loadContent(‘”
stringByAppendingString:userInfo[@”custom_content”][@”funcPath”]]
stringByAppendingString:@“’)”];
[webView stringByEvaluatingJavaScriptFromString:callback];
通过上述回调函数将处理数据完成后的结果返回给业务层。
7.根据权利要求1所述的一种JavaScript和原生APP之间数据交互方法,其特征在于,引入Webview组件后,配置Webview组件,进行网页页面加载,随后,在JavaScript设置一个NativeBridge,原生APP注入一个JSBridge,NativeBridge和JSBridge按照数据约定来进行双向通信和分发逻辑。
8.根据权利要求7所述的一种JavaScript和原生APP之间数据交互方法,其特征在于,在JavaScript设置NativeBridge时,需要在NativeBridge接口中约定传递三个参数:字符串类型的原生实现类、字符串类型的实现方法、json类型的传递参数。
9.根据权利要求7所述的一种JavaScript和原生APP之间数据交互方法,其特征在于,原生APP注入一个JSBridge时,需要在JSBridge接口中约定传递两个参数:字符串类型的回调函数、json类型的返回参数。
CN201910242212.3A 2019-03-28 2019-03-28 一种JavaScript和原生APP之间数据交互方法 Pending CN109976831A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910242212.3A CN109976831A (zh) 2019-03-28 2019-03-28 一种JavaScript和原生APP之间数据交互方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910242212.3A CN109976831A (zh) 2019-03-28 2019-03-28 一种JavaScript和原生APP之间数据交互方法

Publications (1)

Publication Number Publication Date
CN109976831A true CN109976831A (zh) 2019-07-05

Family

ID=67081143

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910242212.3A Pending CN109976831A (zh) 2019-03-28 2019-03-28 一种JavaScript和原生APP之间数据交互方法

Country Status (1)

Country Link
CN (1) CN109976831A (zh)

Cited By (19)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110543372A (zh) * 2019-09-10 2019-12-06 北京百度网讯科技有限公司 移动终端原生端与h5端交互的方法及装置
CN110908704A (zh) * 2019-11-14 2020-03-24 亚信科技(中国)有限公司 一种移动端跨平台原生功能的调用方法及装置
CN110908712A (zh) * 2019-12-04 2020-03-24 北京中启智源数字信息技术有限责任公司 移动端跨平台的数据处理方法和设备
CN111104098A (zh) * 2019-12-17 2020-05-05 山东健康医疗大数据有限公司 一种基于JSBridge开发混合App的方法
CN111104632A (zh) * 2019-12-06 2020-05-05 紫光云(南京)数字技术有限公司 一种移动端与js代码的交互机制
CN111124553A (zh) * 2019-12-06 2020-05-08 北京小米移动软件有限公司 一种程序执行方法、装置、终端及存储介质
CN111176629A (zh) * 2019-12-24 2020-05-19 中国建设银行股份有限公司 一种应用开发的方法和装置
CN111443946A (zh) * 2020-03-09 2020-07-24 深圳市伊欧乐科技有限公司 Ios系统与页面的交互方法、系统、服务器和存储介质
CN112035097A (zh) * 2020-08-25 2020-12-04 华东计算技术研究所(中国电子科技集团公司第三十二研究所) 基于银河锐华操作系统的c++适配层
CN112256450A (zh) * 2020-10-19 2021-01-22 天元大数据信用管理有限公司 一种基于JSBridge实现web端和移动端统一交互的方法及工具
CN112596824A (zh) * 2021-01-04 2021-04-02 天津中新智冠信息技术有限公司 信息交互方法、装置、电子设备以及存储介质
CN112600786A (zh) * 2020-11-12 2021-04-02 湖南快乐阳光互动娱乐传媒有限公司 数据交互方法及装置
CN113032167A (zh) * 2021-03-31 2021-06-25 完美世界(北京)软件科技发展有限公司 页面通信方法、装置及设备
WO2021169150A1 (zh) * 2020-02-28 2021-09-02 北京百度网讯科技有限公司 宿主平台层中的应用接口实现方法、装置、设备和介质
CN113703999A (zh) * 2021-08-26 2021-11-26 众安信息技术服务有限公司 一种Web端与iOS端的交互方法及工具
CN113791752A (zh) * 2021-09-16 2021-12-14 深圳市芯中芯科技有限公司 在安卓系统中通过js同步控制网页音乐播放状态的方法
CN114416202A (zh) * 2022-01-17 2022-04-29 赞同科技股份有限公司 一种移动端sdk调用方法及系统
WO2022213496A1 (zh) * 2021-04-09 2022-10-13 武汉天喻信息产业股份有限公司 一种web应用程序访问nfc智能卡的方法及中间件
US11698823B2 (en) 2020-02-28 2023-07-11 Beijing Baidu Netcom Science And Technology Co., Ltd. Application interface implementation method in a host platform layer, device, and medium

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104461575A (zh) * 2014-12-26 2015-03-25 北京华电万通科技有限公司 一种网页脚本语言跨移动操作系统平台原生接口调用的装置及方法
CN105468369A (zh) * 2015-11-19 2016-04-06 深圳联友科技有限公司 移动平台上JavaScript调用原生功能的方法以及系统
CN105760162A (zh) * 2016-02-04 2016-07-13 四川长虹电器股份有限公司 混合型app软件的开发方法
CN107870821A (zh) * 2016-09-26 2018-04-03 平安科技(深圳)有限公司 应用程序的跨平台调用方法及系统
KR20180058561A (ko) * 2016-11-24 2018-06-01 주식회사 이알솔루션 하이브리드 앱 개발 플랫폼 및 이를 이용한 개발방법

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104461575A (zh) * 2014-12-26 2015-03-25 北京华电万通科技有限公司 一种网页脚本语言跨移动操作系统平台原生接口调用的装置及方法
CN105468369A (zh) * 2015-11-19 2016-04-06 深圳联友科技有限公司 移动平台上JavaScript调用原生功能的方法以及系统
CN105760162A (zh) * 2016-02-04 2016-07-13 四川长虹电器股份有限公司 混合型app软件的开发方法
CN107870821A (zh) * 2016-09-26 2018-04-03 平安科技(深圳)有限公司 应用程序的跨平台调用方法及系统
KR20180058561A (ko) * 2016-11-24 2018-06-01 주식회사 이알솔루션 하이브리드 앱 개발 플랫폼 및 이를 이용한 개발방법

Cited By (26)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110543372A (zh) * 2019-09-10 2019-12-06 北京百度网讯科技有限公司 移动终端原生端与h5端交互的方法及装置
CN110543372B (zh) * 2019-09-10 2023-03-28 北京百度网讯科技有限公司 移动终端原生端与h5端交互的方法及装置
CN110908704A (zh) * 2019-11-14 2020-03-24 亚信科技(中国)有限公司 一种移动端跨平台原生功能的调用方法及装置
CN110908712A (zh) * 2019-12-04 2020-03-24 北京中启智源数字信息技术有限责任公司 移动端跨平台的数据处理方法和设备
CN111124553B (zh) * 2019-12-06 2024-04-26 北京小米移动软件有限公司 一种程序执行方法、装置、终端及存储介质
CN111104632A (zh) * 2019-12-06 2020-05-05 紫光云(南京)数字技术有限公司 一种移动端与js代码的交互机制
CN111124553A (zh) * 2019-12-06 2020-05-08 北京小米移动软件有限公司 一种程序执行方法、装置、终端及存储介质
CN111104098A (zh) * 2019-12-17 2020-05-05 山东健康医疗大数据有限公司 一种基于JSBridge开发混合App的方法
CN111176629A (zh) * 2019-12-24 2020-05-19 中国建设银行股份有限公司 一种应用开发的方法和装置
US11698823B2 (en) 2020-02-28 2023-07-11 Beijing Baidu Netcom Science And Technology Co., Ltd. Application interface implementation method in a host platform layer, device, and medium
WO2021169150A1 (zh) * 2020-02-28 2021-09-02 北京百度网讯科技有限公司 宿主平台层中的应用接口实现方法、装置、设备和介质
CN111443946A (zh) * 2020-03-09 2020-07-24 深圳市伊欧乐科技有限公司 Ios系统与页面的交互方法、系统、服务器和存储介质
CN111443946B (zh) * 2020-03-09 2024-03-15 深圳市伊欧乐科技有限公司 Ios系统与页面的交互方法、系统、服务器和存储介质
CN112035097A (zh) * 2020-08-25 2020-12-04 华东计算技术研究所(中国电子科技集团公司第三十二研究所) 基于银河锐华操作系统的c++适配层
CN112035097B (zh) * 2020-08-25 2023-10-13 华东计算技术研究所(中国电子科技集团公司第三十二研究所) 基于银河锐华操作系统的c++适配层的装置
CN112256450B (zh) * 2020-10-19 2022-11-08 天元大数据信用管理有限公司 一种基于JSBridge实现web端和移动端统一交互的方法及工具
CN112256450A (zh) * 2020-10-19 2021-01-22 天元大数据信用管理有限公司 一种基于JSBridge实现web端和移动端统一交互的方法及工具
CN112600786A (zh) * 2020-11-12 2021-04-02 湖南快乐阳光互动娱乐传媒有限公司 数据交互方法及装置
CN112596824A (zh) * 2021-01-04 2021-04-02 天津中新智冠信息技术有限公司 信息交互方法、装置、电子设备以及存储介质
CN113032167A (zh) * 2021-03-31 2021-06-25 完美世界(北京)软件科技发展有限公司 页面通信方法、装置及设备
WO2022213496A1 (zh) * 2021-04-09 2022-10-13 武汉天喻信息产业股份有限公司 一种web应用程序访问nfc智能卡的方法及中间件
CN113703999A (zh) * 2021-08-26 2021-11-26 众安信息技术服务有限公司 一种Web端与iOS端的交互方法及工具
CN113791752A (zh) * 2021-09-16 2021-12-14 深圳市芯中芯科技有限公司 在安卓系统中通过js同步控制网页音乐播放状态的方法
CN113791752B (zh) * 2021-09-16 2024-06-11 深圳市芯中芯科技有限公司 在安卓系统中通过js同步控制网页音乐播放状态的方法
CN114416202A (zh) * 2022-01-17 2022-04-29 赞同科技股份有限公司 一种移动端sdk调用方法及系统
CN114416202B (zh) * 2022-01-17 2023-08-04 赞同科技股份有限公司 一种移动端sdk调用方法及系统

Similar Documents

Publication Publication Date Title
CN109976831A (zh) 一种JavaScript和原生APP之间数据交互方法
CN102902537B (zh) 基于FastCGI和HTML模板的嵌入式WEB MVC开发框架
CN107450928A (zh) 一种基于缓存技术的混合开发方法
CN108984174A (zh) 跨平台的应用创建方法、装置、服务器和存储介质
CN107526598B (zh) 一种网络页面跳转控制方法及系统
CN109857515A (zh) 桥接通信方法、装置、设备及计算机可读存储介质
CN107678778B (zh) 基于Hybrid的兼容方法、适配件、运行装置及系统
CN103970760B (zh) 一种网页请求处理方法及装置
CN103544059B (zh) 一种应用切换时等待缓冲效果的实现方法及系统
CN102819452B (zh) 一种从android系统获取数据的方法
CN106610837A (zh) 一种应用程序的开发方法及开发平台
CN104050212A (zh) 调用网络应用以利用本地设备性能的方法及系统
CN108804082A (zh) 一种插件化JSBridge的实现方法
CN107506430A (zh) 一种基于混合开发的路由控制方法及系统
CN110069247A (zh) 一种应用程序的开发方法及装置、使用方法及装置
CN102904925B (zh) 一种基于三屏互动的跨平台widget中间件系统
CN106775668A (zh) 跨操作系统的移动应用程序开发框架及实现方法
CN107818171A (zh) 一种基于iframe的页面加载方法及系统
CN107391135A (zh) 一种基于Objective‑C的视图转场方法
CN109918598B (zh) 一种基于Android电视浏览器的web页面渲染方法
CN102841803A (zh) 一种异步调用java线程中本地代码的方法及装置
WO2023083071A1 (zh) 视图交互方法、装置、电子设备及计算机可读介质
CN106550026A (zh) 一种网络通信装置及方法
CN108319420B (zh) 一种图片加载方法及装置
CN107239265A (zh) Java函数与C函数的绑定方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20190705

RJ01 Rejection of invention patent application after publication