CN116820626A - 动态调用原生js的方法及相关设备 - Google Patents
动态调用原生js的方法及相关设备 Download PDFInfo
- Publication number
- CN116820626A CN116820626A CN202310777132.4A CN202310777132A CN116820626A CN 116820626 A CN116820626 A CN 116820626A CN 202310777132 A CN202310777132 A CN 202310777132A CN 116820626 A CN116820626 A CN 116820626A
- Authority
- CN
- China
- Prior art keywords
- web
- bridging layer
- native
- original
- router
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 56
- 230000006854 communication Effects 0.000 claims abstract description 63
- 238000004891 communication Methods 0.000 claims abstract description 63
- 238000012545 processing Methods 0.000 claims abstract description 53
- 230000008569 process Effects 0.000 claims abstract description 18
- 230000006870 function Effects 0.000 claims description 84
- 238000004458 analytical method Methods 0.000 claims description 8
- 230000005540 biological transmission Effects 0.000 claims description 5
- 230000007246 mechanism Effects 0.000 claims description 5
- 238000011161 development Methods 0.000 abstract description 12
- 230000007175 bidirectional communication Effects 0.000 abstract description 2
- 230000003993 interaction Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 3
- 238000012546 transfer Methods 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 230000002457 bidirectional effect Effects 0.000 description 2
- 230000006835 compression Effects 0.000 description 2
- 238000007906 compression Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 239000008186 active pharmaceutical agent Substances 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Computer And Data Communications (AREA)
Abstract
本申请属于软件开发技术领域，涉及一种动态调用原生JS的方法，包括在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用第一桥接层将第一调用请求发送给原生JS，原生JS接收第一调用请求，采用第二桥接层处理第一调用请求，并将得到的处理结果反馈给Flutter web，其中，第二桥接层包含通信协议，并存在于原生JS中，在原生JS调用Flutter web时，原生JS采用第二桥接层访问调用第一桥接层的功能函数。本申请还提供一种动态调用原生JS的装置、计算机设备及存储介质。本申请通过桥阶层和通信协议，实现Flutter web和原生JS的便捷调用，实现双向通信，提高开发效率。
Description
技术领域
本申请涉及软件开发技术领域，尤其涉及一种动态调用原生JS的方法及相关设备。
背景技术
随着移动互联网技术的发展，移动APP和Web应用在现代软件开发中占据重要地位。Flutter是一种跨平台的移动应用开发框架，可以使用Dart编程语言构建高性能、美观的移动应用。然而，有时候需要在Flutter Web应用中使用原生JavaScript(简称原生JS)代码，以便访问Web浏览器的特定功能或库，但Flutter与原生JavaScript无法直接通信，导致难以实现互相调用。
发明内容
本申请的目的在于提出一种动态调用原生JS的方法、装置、计算机设备及存储介质，以实现Flutter Web与原生JS互相调用。
为了解决上述技术问题，本申请实施例提供一种动态调用原生JS的方法，采用了如下所述的技术方案：
在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用所述第一桥接层将所述第一调用请求发送给原生JS，其中，所述第一桥接层中包含用于Flutter web与原生JS进行通信的通信协议，所述第一桥接层存在于所述Flutter web中；
所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web，其中，所述第二桥接层包含所述通信协议，所述第二桥接层存在于所述原生JS中；
在所述原生JS调用Flutter web时，所述原生JS采用所述第二桥接层访问调用第一桥接层的功能函数，以使所述原生JS通过所述功能函数将web浏览器中的数据和事件传递给Flutter web。
进一步地，在所述Flutter web生成第一调用请求的步骤之前，还包括：
创建Flutter Web项目，作为所述Flutter web；
在所述Flutter web项目中创建所述第一桥接层，并在所述桥接层定义所述通信协议，所述通信协议包括消息格式、函数调用规范和错误处理机制，所述通信协议的结构采用类或者函数表示。
进一步地，所述在所述Flutter web项目中创建所述第一桥接层，并在所述桥接层定义所述通信协议的步骤之后，还包括：
在Flutter web项目的web包中新建JS文件夹；
在所述JS文件夹的index.html中引入每个待交互的原生JS。
进一步地，所述采用所述第一桥接层将所述第一调用请求发送给原生JS的步骤包括：
对所述第一调用请求中的参数进行参数序列化，得到序列化参数；
在所述第一桥接层中添加第一函数，并采用所述第一函数将所述序列化参数发送给原生JS。
进一步地，所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web的步骤包括：
所述原生JS接收所述序列化参数，并采用第二桥接层的第二函数对所述序列化参数进行解析；
根据解析结果生成处理结果；
对所述处理结果进行反序列化，得到反序列化数据；
将所述反序列化数据反馈给所述Flutter web。
进一步地，在所述所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web的步骤之前，还包括：
基于JavaScript函数和对象构建所述第二桥接层。
进一步地，在所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web的步骤之后，还包括：
若处理结果为调用成功，则采用所述第一桥接层、所述第二桥接层调用FlutterWeb和原生JS之间的函数进行消息传递。
为了解决上述技术问题，本申请实施例还提供一种动态调用原生JS的装置，采用了如下所述的技术方案：
请求发送模块，用于在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用所述第一桥接层将所述第一调用请求发送给原生JS，其中，所述第一桥接层中包含用于Flutter web与原生JS进行通信的通信协议，所述第一桥接层存在于所述Flutterweb中；
第一调用模块，用于所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web，其中，所述第二桥接层包含所述通信协议，所述第二桥接层存在于所述原生JS中；
第二调用模块，用于在所述原生JS调用Flutter web时，所述原生JS采用所述第二桥接层访问调用第一桥接层的功能函数，以使所述原生JS通过所述功能函数将web浏览器中的数据和事件传递给Flutter web。
进一步地，所述动态调用原生JS的装置还包括：
项目创建模块，用于创建Flutter Web项目，作为所述Flutter web；
协议生成模块，用于在所述Flutter web项目中创建所述第一桥接层，并在所述桥接层定义所述通信协议，所述通信协议包括消息格式、函数调用规范和错误处理机制，所述通信协议的结构采用类或者函数表示。
进一步地，所述动态调用原生JS的装置还包括：
JS文件夹创建模块，用于在Flutter web项目的web包中新建JS文件夹；
原生JS引入模块，用于在所述JS文件夹的index.html中引入每个待交互的原生JS。
进一步地，所述请求发送模块包括：
序列化单元，用于对所述第一调用请求中的参数进行参数序列化，得到序列化参数；
第一发送单元，用于在所述第一桥接层中添加第一函数，并采用所述第一函数将所述序列化参数发送给原生JS。
进一步地，所述第一调用模块包括：
解析单元，用于所述原生JS接收所述序列化参数，并采用第二桥接层的第二函数对所述序列化参数进行解析；
结果生成单元，用于根据解析结果生成处理结果；
反序列化单元，用于对所述处理结果进行反序列化，得到反序列化数据；
第二发送单元，用于将所述反序列化数据反馈给所述Flutter web。
进一步地，所述动态调用原生JS的装置还包括：
第二桥接层构建模块，用于基于JavaScript函数和对象构建所述第二桥接层。
进一步地，所述动态调用原生JS的装置还包括：
通信模块，用于若处理结果为调用成功，则采用所述第一桥接层、所述第二桥接层调用Flutter Web和原生JS之间的函数进行消息传递。
为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：
在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用所述第一桥接层将所述第一调用请求发送给原生JS，其中，所述第一桥接层中包含用于Flutter web与原生JS进行通信的通信协议，所述第一桥接层存在于所述Flutter web中；
所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web，其中，所述第二桥接层包含所述通信协议，所述第二桥接层存在于所述原生JS中；
在所述原生JS调用Flutter web时，所述原生JS采用所述第二桥接层访问调用第一桥接层的功能函数，以使所述原生JS通过所述功能函数将web浏览器中的数据和事件传递给Flutter web。
为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：
在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用所述第一桥接层将所述第一调用请求发送给原生JS，其中，所述第一桥接层中包含用于Flutter web与原生JS进行通信的通信协议，所述第一桥接层存在于所述Flutter web中；
所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web，其中，所述第二桥接层包含所述通信协议，所述第二桥接层存在于所述原生JS中；
在所述原生JS调用Flutter web时，所述原生JS采用所述第二桥接层访问调用第一桥接层的功能函数，以使所述原生JS通过所述功能函数将web浏览器中的数据和事件传递给Flutter web。
与现有技术相比，本申请主要有以下有益效果：在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用第一桥接层将第一调用请求发送给原生JS，原生JS接收第一调用请求，采用第二桥接层处理第一调用请求，并将得到的处理结果反馈给Flutter web，其中，第二桥接层包含通信协议，并存在于原生JS中，在原生JS调用Flutterweb时，原生JS采用第二桥接层访问调用第一桥接层的功能函数，本申请通过桥阶层和通信协议，实现Flutter web和原生JS的便捷调用，实现双向通信，提高开发效率。
附图说明
为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请可以应用于其中的示例性系统架构图；
图2根据本申请的动态调用原生JS的方法的一个实施例的流程图；
图3是根据本申请的动态调用原生JS的装置的一个实施例的结构示意图；
图4是根据本申请的计算机设备的一个实施例的结构示意图。
具体实施方式
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。
如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。
服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。
需要说明的是，本申请实施例所提供的动态调用原生JS的方法一般由服务器执行，相应地，动态调用原生JS的装置一般设置于服务器中。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
继续参考图2，示出了根据本申请的动态调用原生JS的方法的一个实施例的流程图。所述的动态调用原生JS的方法，包括以下步骤：
步骤S201，在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用第一桥接层将第一调用请求发送给原生JS，其中，第一桥接层中包含用于Flutter web与原生JS进行通信的通信协议，第一桥接层存在于Flutter web中。
在本实施例中，动态调用原生JS的方法运行于其上的电子设备(例如图1所示的服务器)可以通过有线连接方式或者无线连接方式将第一调用请求发送给原生JS。需要指出的是，上述无线连接方式可以包括但不限于3G/4G/5G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultra wideband)连接、以及其他现在已知或将来开发的无线连接方式。
具体地，桥接(Bridging)，是指依据OSI网络模型的链路层的地址，对网络数据包进行转发的过程，本实施例中的第一桥接层存在于Flutter web中，用于通过通信协议管理Flutter web与原生JS代码之间的通信，具体可以在创建Flutter web项目时，进行搭建和配置。
其中，第一调用请求是指Flutter web调用原生JS的请求，本实施例中，通过采用调用原生JS的方式，实现代码共享和重用，从而提高开发效率。
步骤S202，原生JS接收第一调用请求，采用第二桥接层处理第一调用请求，并将得到的处理结果反馈给Flutter web，其中，第二桥接层包含通信协议，第二桥接层存在于原生JS中。
其中，第二桥阶层为基于JavaScript函数和对象构建，采用JavaScript编写，采用这种方式可以充分利用JavaScript的灵活性和生态系统，实现复杂的通信逻辑和功能扩展。
步骤S203，在原生JS调用Flutter web时，原生JS采用第二桥接层访问调用第一桥接层的功能函数，以使原生JS通过功能函数将web浏览器中的数据和事件传递给Flutterweb。
其中，功能函数为第一桥接层自带的具有固定用途的函数，通过这些函数实现原生JS对Flutter web的访问和交互。功能函数常见的有回调函数、返回字符串函数、获取屏幕宽度函数和复制内容到剪粘板等，具体可以根据实际需要生成，例如，在一具体实施例中，需要读取到的文本复制到剪粘板，可以使用函数如下：
Static copyToClipboard(final String text){
if(text＝＝null)return；
Clipboard.setData(new ClipboardData(text:text))；}。
在本实施例中，在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用第一桥接层将第一调用请求发送给原生JS，原生JS接收第一调用请求，采用第二桥接层处理第一调用请求，并将得到的处理结果反馈给Flutter web，其中，第二桥接层包含通信协议，并存在于原生JS中，在原生JS调用Flutter web时，原生JS采用第二桥接层访问调用第一桥接层的功能函数，本实施例通过桥阶层和通信协议，实现Flutter web和原生JS的便捷调用，实现双向通信，提高开发效率。
需要说明的是，步骤S201至步骤S202，与步骤S203之间，并没有必然的先后执行顺序，此处不做具体限定，不应理解为对其执行的逻辑的限定。
在本实施例的一些可选的实现方式中，在步骤201之前，上述电子设备还可以执行以下步骤：
创建Flutter Web项目，作为Flutter web；
在Flutter web项目中创建第一桥接层，并在桥接层定义通信协议，通信协议包括消息格式、函数调用规范和错误处理机制，通信协议的结构采用类或者函数表示。
具体地，创建一个新的Flutter Web项目，并配置好所需的开发环境。Flutter提供了强大的UI框架和开发工具，可以快速构建跨平台的应用程序。本实施例中使用FlutterWeb创建应用程序可以实现代码共享和重用，减少开发工作量和维护成本。
其中，创建Flutter Web项目可以通过克隆(clone)的方式，也可以通过指令配置的方式，还可以采用Flutter SDK的方式快速搭建，优选地，本实施例使用Flutter SDK创建Flutter Web项目以提高创建效率。Flutter SDK是一款针对Flutter平台的软件开发工具包，集成了Flutter平台接入、环境搭建、兼容性测试、技术性注解、插件开发、调试和其他用途的实用工具。
其中，第一桥接层采用Dart编码实现。Dart是谷歌开发的计算机编程语言，后来被Ecma(ECMA-408)认定为标准。它被用于web、服务器、移动应用和物联网等领域的开发。它是宽松开源许可证(修改的BSD证书)下的开源软件。Dart是面向对象的、类定义的、单继承的语言。
进一步地，通信协议具体可以在bridge.dart中定义，具体包括消息格式、函数调用规范和错误处理机制，并采用类或者函数表示通信协议的格式。通过定义通信协议，可以规范Flutter Web和原生JS之间的通信方式和数据格式，确保双方的交互行为一致。通信协议的定义可以提高代码的可读性和可维护性。
在本实施例的一些可选的实现方式中，在步骤201之前，上述电子设备还可以执行以下步骤：
在Flutter web项目的web包中新建JS文件夹；
在JS文件夹的index.html中引入每个待交互的原生JS。
本实施例中，通过将每个待交互的原生JS引入到Flutter web项目的指定位置，确保后续可以快速稳定调用原生JS。
在一些可选的实现方式中，步骤201中，采用第一桥接层将第一调用请求发送给原生JS，包括以下步骤：
对第一调用请求中的参数进行参数序列化，得到序列化参数；
在第一桥接层中添加第一函数，并采用第一函数将序列化参数发送给原生JS。
具体地，根据通信协议的规定，在桥接层中对参数进行序列化和反序列化操作，以确保数据在Flutter Web和原生JS之间正确传递。本实施例中，在将第一调用请求发送给原生JS之前，需要先进行序列化，确保数据能准确传递和识别，并在在第一桥接层中添加第一函数，第一函数用于将序列化参数发送给原生JS。进而可以使用dart:js库来与原生JS进行交互。本实施例中通过桥接层实现Flutter Web调用原生JS的功能，可以借助原生JS的能力扩展应用程序的功能。原生JS可以访问浏览器的API和功能，例如地理位置、摄像头等，为应用程序提供更多的功能和交互性。
其中，dart:js库是Dart中提供了的JS-interop库，用于支持Dart使用现有的JavaScript库。Dart是谷歌开发的计算机编程语言，后来被Ecma(ECMA-408)认定为标准。它被用于web、服务器、移动应用和物联网等领域的开发。它是宽松开源许可证(修改的BSD证书)下的开源软件。Dart是面向对象的、类定义的、单继承的语言。
在一些可选的实现方式中，步骤202中，采用第二桥接层处理第一调用请求，并将得到的处理结果反馈给Flutter web，包括以下步骤：
原生JS接收序列化参数，并采用第二桥接层的第二函数对序列化参数进行解析；
根据解析结果生成处理结果；
对处理结果进行反序列化，得到反序列化数据；
将反序列化数据反馈给Flutter web。
具体地，原生JS接收序列化参数后，通过第二桥接层的第二函数对序列化参数进行解析，并根据解析结果生成处理结果，再对处理结果进行反序列化，确保数据在FlutterWeb和原生JS之间正确传递，进而将反序列化数据反馈给Flutter web，实现双向便捷通信，提高通信的稳定性和效率。
在本实施例的一些可选的实现方式中，在步骤203之后，上述电子设备还可以执行以下步骤：
若处理结果为调用成功，则采用第一桥接层、第二桥接层调用Flutter Web和原生JS之间的函数进行消息传递。
具体地，在调用成功后，采用第一桥接层、第二桥接层作为中间层，调用FlutterWeb和原生JS之间的函数进行消息传递，解耦Flutter Web和原生JS的具体实现，提高了系统的灵活性和可扩展性。
需要说明的是，此处可被调用的Flutter Web和原生JS之间的函数，包含FlutterWeb中可被调用的函数和原生JS可被调用的函数，其中，Flutter Web中可被调用的函数是指Flutter Web本身被配置的功能函数，JS可被调用的函数中可被调用的函数，是在Flutter web项目的web包中引入的每个待交互的原生JS中包含的函数。
进一步地，若处理结果为调用不成功，则提示调用失败，并将相应过程的执行日志存写入到错误日志中，以便后续查询。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
进一步参考图3，作为对上述图2所示方法的实现，本申请提供了一种动态调用原生JS的装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。
如图3所示，本实施例所述的动态调用原生JS的装置300包括：请求发送模块301、第一调用模块302以及第二调用模块303，其中：
请求发送模块301，用于在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用第一桥接层将第一调用请求发送给原生JS，其中，第一桥接层中包含用于Flutter web与原生JS进行通信的通信协议，第一桥接层存在于Flutter web中；
第一调用模块302，用于原生JS接收第一调用请求，采用第二桥接层处理第一调用请求，并将得到的处理结果反馈给Flutter web，其中，第二桥接层包含通信协议，所述第二桥接层存在于原生JS中；
第二调用模块303，用于在原生JS调用Flutter web时，原生JS采用第二桥接层访问调用第一桥接层的功能函数，以使原生JS通过所述功能函数将web浏览器中的数据和事件传递给Flutter web。
本实施例中，在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用第一桥接层将第一调用请求发送给原生JS，原生JS接收第一调用请求，采用第二桥接层处理第一调用请求，并将得到的处理结果反馈给Flutter web，其中，第二桥接层包含通信协议，第二桥接层存在于原生JS中，在原生JS调用Flutter web时，原生JS采用第二桥接层访问调用第一桥接层的功能函数，本实施例通过桥阶层和通信协议，实现Flutter web和原生JS的便捷调用，实现双向通信，提高开发效率。
在本实施例的一些可选的实现方式中，动态调用原生JS的装置还包括项目创建模块，其中：
项目创建模块，用于创建Flutter Web项目，作为Flutter web；
协议生成模块，用于在Flutter web项目中创建第一桥接层，并在桥接层定义通信协议，通信协议包括消息格式、函数调用规范和错误处理机制，通信协议的结构采用类或者函数表示。
本实施例中，使用Flutter Web创建应用程序可以实现代码共享和重用，减少开发工作量和维护成本。同时，通过定义通信协议，可以规范Flutter Web和原生JS之间的通信方式和数据格式，确保双方的交互行为一致。通信协议的定义可以提高代码的可读性和可维护性。
在本实施例的一些可选的实现方式中，动态调用原生JS的装置还包括JS文件夹创建模块和原生JS引入模块，其中：
JS文件夹创建模块，用于在Flutter web项目的web包中新建JS文件夹；
原生JS引入模块，用于在JS文件夹的index.html中引入每个待交互的原生JS。
本实施例中，通过将每个带交互的原生JS引入到Flutter web项目的指定位置，确保后续可以快速稳定调用原生JS。
在本实施例的一些可选的实现方式中，请求发送模块包括序列化单元和第一发送单元，其中：
序列化单元，用于对第一调用请求中的参数进行参数序列化，得到序列化参数；
第一发送单元，用于在第一桥接层中添加第一函数，并采用第一函数将序列化参数发送给原生JS。
本实施例中，通过将每个带交互的原生JS引入到Flutter web项目的指定位置，确保后续可以快速稳定调用原生JS。
在本实施例的一些可选的实现方式中，第一调用模块包括解析单元、结果生成单元、反序列化单元、第二发送单元，其中：
解析单元，用于原生JS接收序列化参数，并采用第二桥接层的第二函数对序列化参数进行解析；
结果生成单元，用于根据解析结果生成处理结果；
反序列化单元，用于对处理结果进行反序列化，得到反序列化数据；
第二发送单元，用于将反序列化数据反馈给Flutter web。
本实施例中，原生JS接收序列化参数后，通过第二桥接层的第二函数对序列化参数进行解析，并根据解析结果生成处理结果，再对处理结果进行反序列化，确保数据在Flutter Web和原生JS之间正确传递，进而将反序列化数据反馈给Flutter web，实现双向便捷通信，提高通信的稳定性和效率。
在本实施例的一些可选的实现方式中，动态调用原生JS的装置还包括：
第二桥接层构建模块，用于基于JavaScript函数和对象构建第二桥接层。
在本实施例的一些可选的实现方式中，动态调用原生JS的装置还包括通信模块，其中：
通信模块，用于若处理结果为调用成功，则采用第一桥接层、第二桥接层调用Flutter Web和原生JS之间的函数进行消息传递。
本实施例中，在调用成功后，采用第一桥接层、第二桥接层作为中间层，调用Flutter Web和原生JS之间的函数进行消息传递，解耦Flutter Web和原生JS的具体实现，提高了系统的灵活性和可扩展性。
为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。
所述计算机设备4包括通过系统总线相互通信连接存储器41、处理器42、网络接口43。需要指出的是，图中仅示出了具有组件41-43的计算机设备4，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。
所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
所述存储器41至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器41可以是所述计算机设备4的内部存储单元，例如该计算机设备4的硬盘或内存。在另一些实施例中，所述存储器41也可以是所述计算机设备4的外部存储设备，例如该计算机设备4上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器41还可以既包括所述计算机设备4的内部存储单元也包括其外部存储设备。本实施例中，所述存储器41通常用于存储安装于所述计算机设备4的操作系统和各类应用软件，例如动态调用原生JS的方法的计算机可读指令等。此外，所述存储器41还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器42在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器42通常用于控制所述计算机设备4的总体操作。本实施例中，所述处理器42用于运行所述存储器41中存储的计算机可读指令或者处理数据，例如运行所述动态调用原生JS的方法的计算机可读指令。
所述网络接口43可包括无线网络接口或有线网络接口，该网络接口43通常用于在所述计算机设备4与其他电子设备之间建立通信连接。
本实施例中提供的计算机设备可以执行上述动态调用原生JS的方法。此处动态调用原生JS的方法可以是上述各个实施例的动态调用原生JS的方法。
本实施例中，在本实施例中，在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用第一桥接层将第一调用请求发送给原生JS，原生JS接收第一调用请求，采用第二桥接层处理第一调用请求，并将得到的处理结果反馈给Flutter web，其中，第二桥接层包含通信协议，第一桥接层存在于原生JS中，在原生JS调用Flutter web时，原生JS采用第二桥接层访问调用第一桥接层的功能函数，本实施例通过桥阶层和通信协议，实现Flutter web和原生JS的便捷调用，实现双向通信，提高开发效率。
本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的动态调用原生JS的方法的步骤。
本实施例中，在本实施例中，在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用第一桥接层将第一调用请求发送给原生JS，原生JS接收第一调用请求，采用第二桥接层处理第一调用请求，并将得到的处理结果反馈给Flutter web，其中，第二桥接层包含通信协议，第二桥接层存在于原生JS中，在原生JS调用Flutter web时，原生JS采用第二桥接层访问调用第一桥接层的功能函数，本实施例通过桥阶层和通信协议，实现Flutter web和原生JS的便捷调用，实现双向通信，提高开发效率。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。
显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。
Claims (10)
1.一种动态调用原生JS的方法，其特征在于，包括下述步骤：
在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用第一桥接层将所述第一调用请求发送给原生JS，其中，所述第一桥接层中包含用于Flutter web与原生JS进行通信的通信协议，所述第一桥接层存在于所述Flutter web中；
所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web，其中，所述第二桥接层包含所述通信协议，所述第二桥接层存在于所述原生JS中；
在所述原生JS调用Flutter web时，所述原生JS采用所述第二桥接层访问调用第一桥接层的功能函数，以使所述原生JS通过所述功能函数将web浏览器中的数据和事件传递给Flutter web。
2.根据权利要求1所述的动态调用原生JS的方法，其特征在于，在所述Flutter web生成第一调用请求的步骤之前，还包括：
创建Flutter Web项目，作为所述Flutter web；
在所述Flutter web项目中创建所述第一桥接层，并在所述桥接层定义所述通信协议，所述通信协议包括消息格式、函数调用规范和错误处理机制，所述通信协议的结构采用类或者函数表示。
3.根据权利要求2所述的动态调用原生JS的方法，其特征在于，所述在所述Flutterweb项目中创建所述第一桥接层，并在所述桥接层定义所述通信协议的步骤之后，还包括：
在Flutter web项目的web包中新建JS文件夹；
在所述JS文件夹的index.html中引入每个待交互的原生JS。
4.根据权利要求1所述的动态调用原生JS的方法，其特征在于，所述采用所述第一桥接层将所述第一调用请求发送给原生JS的步骤包括：
对所述第一调用请求中的参数进行参数序列化，得到序列化参数；
在所述第一桥接层中添加第一函数，并采用所述第一函数将所述序列化参数发送给原生JS。
5.根据权利要求4所述的动态调用原生JS的方法，其特征在于，所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web的步骤包括：
所述原生JS接收所述序列化参数，并采用第二桥接层的第二函数对所述序列化参数进行解析；
根据解析结果生成处理结果；
对所述处理结果进行反序列化，得到反序列化数据；
将所述反序列化数据反馈给所述Flutter web。
6.根据权利要求1所述的动态调用原生JS的方法，其特征在于，在所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web的步骤之前，还包括：
基于JavaScript函数和对象构建所述第二桥接层。
7.根据权利要求1所述的动态调用原生JS的方法，其特征在于，在所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web的步骤之后，还包括：
若处理结果为调用成功，则采用所述第一桥接层、所述第二桥接层调用Flutter Web和原生JS之间的函数进行消息传递。
8.一种动态调用原生JS的装置，其特征在于，包括：
请求发送模块，用于在Flutter web调用原生JS时，Flutter web生成第一调用请求，并采用所述第一桥接层将所述第一调用请求发送给原生JS，其中，所述第一桥接层中包含用于Flutter web与原生JS进行通信的通信协议，所述第一桥接层存在于所述Flutter web中；
第一调用模块，用于所述原生JS接收所述第一调用请求，采用第二桥接层处理所述第一调用请求，并将得到的处理结果反馈给所述Flutter web，其中，所述第二桥接层包含所述通信协议，所述第二桥接层存在于所述原生JS中；
第二调用模块，用于在所述原生JS调用Flutter web时，所述原生JS采用所述第二桥接层访问调用第一桥接层的功能函数，以使所述原生JS通过所述功能函数将web浏览器中的数据和事件传递给Flutter web。
9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的动态调用原生JS的方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的动态调用原生JS的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310777132.4A CN116820626A (zh) | 2023-06-28 | 2023-06-28 | 动态调用原生js的方法及相关设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310777132.4A CN116820626A (zh) | 2023-06-28 | 2023-06-28 | 动态调用原生js的方法及相关设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116820626A true CN116820626A (zh) | 2023-09-29 |
Family
ID=88127053
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310777132.4A Pending CN116820626A (zh) | 2023-06-28 | 2023-06-28 | 动态调用原生js的方法及相关设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116820626A (zh) |
-
2023
- 2023-06-28 CN CN202310777132.4A patent/CN116820626A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111158818B (zh) | 一种页面渲染方法和装置 | |
| US10026041B2 (en) | Interoperable machine learning platform | |
| US20210216700A1 (en) | Information Processing Method and System | |
| US9619304B2 (en) | Automatic connections between application components | |
| WO2018072626A1 (zh) | 组件调用的方法和装置、组件数据处理的方法和装置 | |
| CN111639287A (zh) | 一种页面处理方法、装置、终端设备及可读存储介质 | |
| US9569292B2 (en) | Remotable contracts for the web | |
| CN110168496B (zh) | 用于应用呈现的方法和系统 | |
| CN104704468A (zh) | Web应用程序的跨系统安装 | |
| CN114996619A (zh) | 一种页面显示的方法、装置、计算机设备及存储介质 | |
| WO2023093016A1 (zh) | 云端代码开发系统、方法、装置、设备及存储介质 | |
| CN112084446A (zh) | 一种网页编辑方法、编辑器、电子设备和可读存储介质 | |
| CN114926141A (zh) | 联系人创建和利用 | |
| US20110321022A1 (en) | Code generation through metadata programming for mobile devices and web platforms to ease access to web services | |
| CN116974927A (zh) | 性能自动化测试方法、系统、计算机设备及存储介质 | |
| CN110633162B (zh) | 远程调用实现方法、装置、计算机设备及存储介质 | |
| CN116820626A (zh) | 动态调用原生js的方法及相关设备 | |
| CN105320499A (zh) | 一种应用程序的适配方法和相关装置 | |
| Gong et al. | Wwof: an energy efficient offloading framework for mobile webpage | |
| CN112162755A (zh) | 一种数据处理方法、装置、介质和电子设备 | |
| CN114185845A (zh) | 一种文件管理方法、装置、计算机设备及存储介质 | |
| CN112306337B (zh) | 一种会议同屏系统、方法、装置、计算机设备及存储介质 | |
| CN117076160B (zh) | 组件调用方法、装置、设备和存储介质 | |
| CN117290019A (zh) | 一种接口调用方法、装置、计算机设备和存储介质 | |
| CN117111957A (zh) | 代码生成方法、装置、计算机设备及存储介质 |
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 |