CN116661938A - 页面与app交互的方法、系统、计算机和可读存储介质 - Google Patents

Abstract

本申请涉及计算机技术领域，尤其涉及一种页面与APP交互的方法、系统、计算机和可读存储介质，所述方法包括获取页面的触发信息；基于所述触发信息创建弹框信息并发送至APP浏览器内核，以指示所述APP浏览器内核根据所述弹框信息进行相应操作并产生返回信息；接收所述APP浏览器内核的返回信息，以形成交互。本申请方案可跨多种平台进行交互，以及可兼容多种操作系统和设备，并且还具有实时性和灵活性。

Description

页面与APP交互的方法、系统、计算机和可读存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面与APP交互的方法、系统、计算机和可读存储介质。

背景技术

在现有的客户端APP与WEB页面通信的领域中，一般都是通过在页面中注入JS脚本桥接或者自定义协议方式来完成两者之间的通讯。在这样的交互过程中，存在以下几个问题：

问题一，由于注入脚本和自定义协议可能会引入安全漏洞，而这些漏洞容易被用来执行恶意代码以窃取用户敏感信息和篡改页面内容等操作。

问题二，现有的浏览器和平台对注入脚本和自定义协议的支持程度不同，容易导致兼容性问题。部分浏览器可能不支持或限制对自定义的调用，从而导致部分功能在某些环境下无法正常工作。

问题三，使用注入脚本和自定义协议的交互方式可能会增加代码的复杂性和后期维护难度，这是由于在交互的过程中涉及到不同的技术栈和交互方式，需要维护和管理多个代码。

因此，亟需一种页面和APP交互方式来解决上述问题。

发明内容

鉴于上述问题，本申请提出一种页面与APP交互的方法、系统、计算机和可读存储介质。

本申请实施例提出一种页面与APP交互的方法，应用于页面前端，包括：

获取页面的触发信息；

基于所述触发信息创建弹框信息并发送至APP浏览器内核，以指示所述APP浏览器内核根据所述弹框信息进行相应操作并产生返回信息；

接收所述APP浏览器内核的返回信息，以形成页面与APP的交互。

进一步地，在上述的页面与APP交互的方法中，所述基于所述触发信息创建弹框信息包括：

提取所述触发信息中的参数信息；

根据所述参数信息、弹框信息模板和预设约定规则，创建弹框信息。

进一步地，在上述的页面与APP交互的方法中，所述弹框信息模板包括前缀信息和非前缀信息，所述非前缀信息包括事件类型、事件参数和回调方法。

进一步地，在上述的页面与APP交互的方法中，所述事件类型包括页面操作类、人机操作类和数据操作类。

本申请另一实施例还提出一种页面与APP交互的方法，应用于APP，包括：

获取页面的弹框信息；

基于所述弹框信息，产生返回信息并传输至所述页面，以形成交互。

进一步地，在上述的页面与APP交互的方法中，所述基于所述弹框信息，产生返回信息并传输至所述页面包括：

解析所述弹框信息，获得前缀信息和非前缀信息；

若前缀信息包括预设信息，则解析非前缀信息，其中，所述非前缀信息包括事件类型、事件参数和回调方法；

基于所述事件类型和所述事件参数，执行相应操作并产生返回信息；

基于所述回调方法将所述返回信息传输至所述页面。

进一步地，在上述的页面与APP交互的方法中，还包括：

若前缀信息不包括预设信息，则基于所述非前缀信息产生提示弹框并显示提示内容。

本申请另一实施例还提出一种页面与APP交互系统，包括页面和APP浏览器内核；

所述页面获取触发信息，并基于所述触发信息创建弹框信息并发送至APP浏览器内核；

所述APP浏览器内核基于所述弹框信息进行相应操作并将产生的返回信息传输至所述页面，以形成页面与APP的交互。

本申请另一实施例还提出一种计算机设备，包括存储单元和处理单元，所述存储单元中存储有计算机程序，所述处理单元通过调用所述存储单元中存储的所述计算机程序，执行上述的页面与APP交互的方法的步骤。

本申请另一实施例还提出一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序适于处理器进行加载，以执行上述的页面与APP交互的方法的步骤。

本申请的实施例具有以下的有益效果：

本申请实施例提出一种页面与APP交互的方法，通过页面自带的confirm（）或alert（）函数构建的弹框来完成页面与APP的交互。不仅可以实时的将消息发送至客户端以获得客户端的即时响应外，还可以具有较好的兼容性，能够在不同的操作系统和设备上运行，实现跨平台兼容。

另外由于不需要自定义协议和注入脚本，因此可减少安全漏洞和降低交互代码的复杂度，提高系统的安全性和易可操作性。

附图说明

为了更清楚地说明本申请的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对本申请保护范围的限定。在各个附图中，类似的构成部分采用类似的编号。

图1示出了本申请一些实施方式的页面与APP交互的方法的结构示意图；

图2示出了本申请一些实施方式的页面与APP交互的方法的第一流程示意图；

图3示出了本申请一些实施方式的页面与APP交互的方法的第二流程示意图；

图4示出了本申请一些实施方式的页面与APP交互的方法的第三流程示意图；

图5示出了本申请一些实施方式的页面与APP交互的方法的第四流程示意图；

图6示出了本申请一些实施方式的页面与APP交互的方法的弹框示意图；

图7示出了本申请一些实施方式的页面与APP交互系统的结构示意图。

具体实施方式

下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。

通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

在下文中，可在本申请的各种实施例中使用的术语“包括”、“具有”及其同源词仅意在表示特定特征、数字、步骤、操作、元件、组件或前述项的组合，并且不应被理解为首先排除一个或更多个其它特征、数字、步骤、操作、元件、组件或前述项的组合的存在或增加一个或更多个特征、数字、步骤、操作、元件、组件或前述项的组合的可能性。

此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

除非另有限定，否则在这里使用的所有术语(包括技术术语和科学术语)具有与本申请的各种实施例所属领域普通技术人员通常理解的含义相同的含义。所述术语(诸如在一般使用的词典中限定的术语)将被解释为具有与在相关技术领域中的语境含义相同的含义并且将不被解释为具有理想化的含义或过于正式的含义，除非在本申请的各种实施例中被清楚地限定。

下面结合附图，对本申请的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互结合。

通常地，除了上述的三个问题外，还存在其它的问题，例如，在当页面调用桥接方法时，页面需要在调用相应的JS数据或CSS数据之后再调用JS脚本，由于调用相应的JS数据或CSS数据需要加载时间，若在加载之前调用，则会导致桥接方法并没有执行到，数据无法获取。若在加载之后调用则会使得发送至客户端APP消息的速度变慢。

因此，为了解决上述问题，本申请提出一种可运用在客户端和web页面的页面与APP交互的方法。

请参照图1，为本申请实施例提出的页面与APP交互的方法的一种结构示意图。示范性地，该页面与APP交互的方法应用于客户端APP和web页面中，例如，该客户端APP可以是金融APP等。

在一些实施方式中，如图2所示，一种页面与APP交互的方法，应用于页面前端，包括：

S110，获取页面的触发信息。

具体地，当用户进入APP后打开相应网页页面（例如H5页面）时，页面上显示有很多触发事件的按钮（虚拟按钮），当用户点击某一按钮时，则会触发对应的触发信息。例如，选择登录按钮、或者图片下载按钮、发起视频认证按钮等。其中，APP指原生APP，可进行开发。其中，页面可以为多个页面，因此，可以为多个页面与原生APP进行交互。

S210，基于触发信息创建弹框信息并发送至APP浏览器内核，以指示APP浏览器内核根据弹框信息进行相应操作并产生返回信息。

具体地，现有的页面以及绝大多数的应用都自带confirm（）或alert（）函数等函数。这些函数构建的弹框可用于显示一个带有指定消息的对话框，以提示用户或判断是否进行某一个操作。当使用为判断是否进行某一个操作时，则会显示弹框并在弹框中显示确定和/或否的按钮，用于提示用户是否进行接下来的操作。当使用为警告或提示时，则会直接显示弹框以及弹框中的提示信息内容。

页面根据触发信息利用confirm（）或alert（）函数构建弹框信息并发送至APP浏览器内核（即webkit）。其中，confirm（）或alert（）函数是页面自带的，并且现有的市面上的APP基本都自带confirm（）或alert（）函数以及相应的功能。利用这点，页面可以利用弹框来完成与APP的交互。这样无需另外插入JS脚本和调用自定义协议，直接利用绝大多数应用和页面自带的confirm（）或alert（）函数构建的弹框来完成信息的传递，以形成交互。

在一些实施方式的页面与APP交互的方法中，如图3所示，基于触发信息创建弹框信息，包括：

S211，提取触发信息中的参数信息。

具体地，每个按钮都对应有触发信息，每当任意一个按钮被触发时，都会产生一个对应的触发信息，并发送至页面，页面获取到该触发信息后，从触发信息中提取相应的参数信息。

示范性地，登录按钮对应登录触发信息、图片下载按钮对应图片下载触发信息、视频认证对应视频认证触发信息。

S212，根据参数信息、弹框信息模板和预设约定规则，创建弹框信息。

具体地，提取触发信息中的参数信息，根据参数信息对比预设参数表以获取参数信息对应的参数字符（例如KCBBank、CCCBBank）。其中，每个参数信息都对应有一个参数字符，参数字符是预先设定好并且约定好的，可以自定义，客户端APP接收到弹框信息后根据参数字符来实施对应的操作。其中，该预设参数表是客户端APP和页面事先约定好的。弹框信息模板为弹框信息的一个模板，根据该模板可以填入对应的信息以组成一个完整的弹框信息。

示范性地，弹框信息模板可以包括前缀信息和非前缀信息，非前缀信息包括事件类型、事件参数和回调方法。弹框信息模板还可以包括事件类型、事件参数和回调方法。弹框信息模板可自定义，这里只是举例，还可以为其它任意种类的模板。

示范性地，事件类型可以包括页面操作类、人机操作类和数据操作类。其中，页面操作类指的是页面的切换、页面的调用等在对页面层次进行操作。人机操作类指的是需要APP调用客户端的其它软件与用户进行交互，例如调用摄像头进行摄像或拍照，调用麦克风进行录音等。数据操作类指的是进行数据的读取和存入，例如下载图片或上传图片，下载文件或上传文件等需要对数据进行读取和存入的操作。当然，事件类型还可以包括其它类型，这里不做限定。

示范性地，事件参数可以包括人脸识别参数、业务号、业务类型、客户号、区分相机相册的种类，例如，当为c时则代表相机；当为p时则代表相册；在type=c（为相机）时，则ID_0代表拍摄身份证正面人像面，ID_1代表拍摄身份证反面国徽面；LICENSE则代表拍摄营业执照。当然，时间参数还可以包括其它各种参数，这里不做限定。

首先调用包括同步调用、回调和异步调用。其中，同步调用为fun（A）调用fun（B），fun（A）等待fun（B）执行完后在进行下一步操作。异步调用为fun（A）调用fun（B），fun（A）不等待fun（B）执行完便进行下一步操作。而本申请中的回调方法包括类A的a（）方法调用类B的b（）方法、类B的b（）方法执行完毕后主动调用类A的callback（）方法。当然，还可以为其它的回调方式，这里不做限定。

预设约定规则包括怎样按照弹框信息模板产生对应的弹框信息、根据参数信息获取对应的事件类型、事件参数和回调方法，以及与APP进行交互时的各种规则。

示范性地，参数信息中包括触发事件的类型、事件所需的参数以及回调的方法。例如当参数信息中包括触发事件是“拍照”，则按照预设约定规则进行查表，根据触发事件表可以查到“拍照”对应的触发事件类型为“人机操作类RJ”，则将“RJ”填入弹框信息模板中的事件类型的地方。根据事件参数表可以查到“拍照”对应的事件参数为“相机C、ID_0和ID_1”则将“相机C、ID_0和ID_1”填入对应的事件参数位置。根据回调方法表可以查到“拍照”对应的回调方法为“callback”方法，则将“callback”填入对应的回调方式的位置。若拍照对应的前缀为KCBBank，最后形成的弹框信息为“KCBBank：//{fuction：RJ，param：“C，ID_0，ID_1”，callback}”。

S310，接收APP浏览器内核的返回信息，以形成交互。

具体地，APP浏览器内核会根据接受到的弹框信息进行相应的数据处理或者其他的操作，当数据处理完或操作完成后都会产生一个返回信息，并将返回信息传输至页面。

示范性地，若需要做的操作是账号登录，当登录成功后则返回验证正确信息至页面。

本申请的另一实施例还提出一种页面与APP交互的方法，如图4所示，应用于APP，包括：

S410，获取页面的弹框信息。

具体地，原生APP的浏览器内核接拦截（接收）弹框信息，此时浏览器内核并不将该弹框信息直接显示出来。

S420，基于弹框信息，产生返回信息并传输至页面，以形成交互。

具体地，在接收到弹框信息后，提取弹框信息中的信息，根据提取的信息做相应的处理，并将根据处理结果产生返回信息，将返回信息传输至页面，以形成交互。

在一些实施方式的页面与APP交互的方法中，如图5所示，基于弹框信息，产生返回信息并传输至页面包括：

S421，解析弹框信息，获得前缀信息和非前缀信息。

具体地，首先需要解析弹框信息，从中提取出有用的前缀信息和非前缀信息。

S422，若前缀信息包括预设信息，则解析非前缀信息，其中，非前缀信息包括事件类型、事件参数和回调方法。

具体地，由于客户端APP接收到弹框信息后根据参数字符来实施对应的操作，若前缀信息中参数字符属于预设信息，则代表APP不会显示提示类的弹框，而是需要根据非前缀信息来做相应的操作（调用函数处理数据等）；相反地，若前缀信息中参数字符不属于预设信息，则代表APP需要显示提示类的弹框，而不是需要根据非前缀信息来做相应的操作，则此时需要基于非前缀信息中的内容得到提示弹框中需要显示的内容。因此，首先判断前缀信息中的参数字符，若前缀信息中的参数字符属于预设信息，则解析非前缀信息，从非前缀信息中提取出所需的事件类型、事件参数和回调方法，并根据事件类型、事件参数和回调方法来调用相应的函数以执行相应的操作。

示范性地，若预设信息包括KCBBank，若接收到的前缀信息中包括KCBBank，则代表该弹框信息是需要做调用函数、数据处理操作，则不会显示弹框。具体地处理过程根据非前缀信息中的事件类型和事件参数来处理，最后利用回调方法将返回信息进行返回。

S423，基于事件类型和事件参数，执行相应操作并产生返回信息。

示范性地，若接收到的弹框信息为“KCBBank：//{fuction：RJ，param：“C，ID_0，ID_1”，callback}”。则提取到的事件类型、事件参数和回调方法分别为：RJ、C，ID_0，ID_1和callback。因此，需要根据RJ和C选取相应调用的函数调用照相机进行拍照，并根据ID_0，ID_1识别拍摄的画面，识别画面是否为对应的身份证正面（人像面）和反面（国徽面），识别完后将对应的画面传输至网页。

S424，基于回调方法将返回信息传至页面。

示范性地，若接收到的弹框信息为“KCBBank：//{fuction：login，param：“123”，callback}”，则代表需要用户进行登录，而当用户输入对应的登录信息后，则执行callback方法将登录信息（即返回信息）回调至页面。

在一些实施方式中，页面与APP交互的方法还包括：

若前缀信息不包括预设信息，则基于非前缀信息产生提示弹框并显示提示内容。

示范性地，若预设信息包括KCBBank，若接收到的前缀信息中不包括KCBBank，或者为空，则代表该弹框信息不需要做操作，而是需要直接生成提示弹框，例如，请看图6，若非前缀信息为“是否进行取消操作”，则APP直接在提示弹框中显示“是否进行取消操作”并带有“是”和“否”的两个按钮，并等待用户确认，然后根据确认结果产生对应的返回信息，再将返回信息传输至页面。

本申请实施例提出一种页面与APP交互的方法，通过页面自带的confirm（）或alert（）函数构建的弹框来完成页面与APP的交互。

本申请实施例的有益效果为：

第一，跨平台兼容性较好。由于H5 confirm或者alert弹框基于Web技术实现，可以在各种操作系统和设备上运行，可实现跨平台兼容各种系统，例如IOS、安卓等。

第二，具有灵活性和易用性。开发人员可以自定义H5 confirm或者alert弹框的样式和交互行为，以满足特定需求，并提供用户友好的交互界面。

第三，具有实时性和即时反馈特点。由于H5 confirm或者alert弹框基于Web技术实现，能够实时发送信息到客户端，并获得客户端的即时响应，提供及时的交互和反馈体验。

第四，具有扩展性和可定制性。H5 confirm或者alert弹框与客户端实现双向交互，可根据业务需求自定义交互行为和处理逻辑，提供高度可定制的交互功能。

第五，能提高安全性。由于不需要自定义协议和注入脚本，因此可减少安全漏洞和降低交互代码的复杂度，提高系统的安全性和易可操作性。

本申请的另一实施例还提出一种页面与APP交互系统500，如图7所示，交互系统500包括页面510和APP浏览器内核520；

页面510获取触发信息，并基于触发信息创建弹框信息并发送至APP浏览器内核520。

APP浏览器内核520基于弹框信息进行相应操作并将产生的返回信息传输至页面510，以形成交互。

本申请的另一实施例还提出一种计算机设备，包括存储单元和处理单元，存储单元中存储有计算机程序，处理单元通过调用存储单元中存储的计算机程序，执行上述的页面与APP交互的方法的步骤。

本申请的另一实施例还提出一种计算机可读存储介质，计算机可读存储介质存储有计算机程序，计算机程序适于处理器进行加载，以执行上述的页面与APP交互的方法的步骤。

可以理解，本实施例的方法步骤对应于上述实施例中的页面与APP交互的方法，其中，上述页面与APP交互的方法的可选项同样适用于本实施例，这里不再重复描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和结构图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，结构图和/或流程图中的每个方框、以及结构图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块或单元可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或更多个模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是智能手机、个人计算机、服务器、或者网络设备等）执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。

Claims (10)

1.一种页面与APP交互的方法，其特征在于，应用于页面前端，包括：

获取页面的触发信息；

基于所述触发信息创建弹框信息并发送至APP浏览器内核，以指示所述APP浏览器内核根据所述弹框信息进行相应操作并产生返回信息；

接收所述APP浏览器内核的返回信息，以形成页面与APP的交互。

2.根据权利要求1所述的页面与APP交互的方法，其特征在于，所述基于所述触发信息创建弹框信息，包括：

提取所述触发信息中的参数信息；

根据所述参数信息、弹框信息模板和预设约定规则，创建所述弹框信息。

3.根据权利要求2所述的页面与APP交互的方法，其特征在于，所述弹框信息模板包括前缀信息和非前缀信息，所述非前缀信息包括事件类型、事件参数和回调方法。

4.根据权利要求3所述的页面与APP交互的方法，其特征在于，所述事件类型包括页面操作类、人机操作类和数据操作类。

5.一种页面与APP交互的方法，其特征在于，应用于APP，包括：

获取页面的弹框信息；

基于所述弹框信息，产生返回信息并传输至所述页面，以形成页面与APP的交互。

6.根据权利要求5所述的页面与APP交互的方法，其特征在于，所述基于所述弹框信息，产生返回信息并传输至所述页面，包括：

解析所述弹框信息，获得前缀信息和非前缀信息；

若所述前缀信息包括预设信息，则解析非前缀信息，其中，所述非前缀信息包括事件类型、事件参数和回调方法；

基于所述事件类型和所述事件参数，执行相应操作并产生返回信息；

基于所述回调方法将所述返回信息传输至所述页面。

7.根据权利要求6所述的页面与APP交互的方法，其特征在于，还包括：

若所述前缀信息不包括所述预设信息，则基于所述非前缀信息产生提示弹框并显示提示内容。

8.一种页面与APP交互系统，其特征在于，包括页面和APP浏览器内核；

所述页面获取触发信息，并基于所述触发信息创建弹框信息并发送至APP浏览器内核；

所述APP浏览器内核基于所述弹框信息进行相应操作并将产生的返回信息传输至所述页面，以形成交互。

9.一种计算机设备，其特征在于，包括存储单元和处理单元，所述存储单元中存储有计算机程序，所述处理单元通过调用所述存储单元中存储的所述计算机程序，执行如权利要求1至7任一项所述的页面与APP交互的方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序适于处理器进行加载，以执行如权利要求1至7任一项所述的页面与APP交互的方法的步骤。