CN115017020A - 一种小程序页面的录屏方法、介质及电子设备 - Google Patents

一种小程序页面的录屏方法、介质及电子设备 Download PDF

Info

Publication number
CN115017020A
CN115017020A CN202210487192.8A CN202210487192A CN115017020A CN 115017020 A CN115017020 A CN 115017020A CN 202210487192 A CN202210487192 A CN 202210487192A CN 115017020 A CN115017020 A CN 115017020A
Authority
CN
China
Prior art keywords
component
recording
page
data
screen recording
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.)
Granted
Application number
CN202210487192.8A
Other languages
English (en)
Other versions
CN115017020B (zh
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.)
eBaoTech Corp
Original Assignee
eBaoTech Corp
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 eBaoTech Corp filed Critical eBaoTech Corp
Priority to CN202210487192.8A priority Critical patent/CN115017020B/zh
Publication of CN115017020A publication Critical patent/CN115017020A/zh
Priority to PCT/CN2023/090050 priority patent/WO2023213203A1/zh
Application granted granted Critical
Publication of CN115017020B publication Critical patent/CN115017020B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/34—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
    • G06F11/3466—Performance evaluation by tracing or monitoring
    • G06F11/3476—Data logging
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • 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

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computer Hardware Design (AREA)
  • Quality & Reliability (AREA)
  • Stored Programmes (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请涉及互联网技术领域，特别涉及一种小程序页面的录屏方法、介质及电子设备，该方法包括：响应于录制小程序页面的触发操作，获取小程序页面中携带追踪标记的各组件的初始组件信息；调用录制接口，以使录制接口处于工作状态；确定所述录制接口监听到小程序页面中携带追踪标记的组件的组件类型、组件属性、组件样式中的任意一种或多种处在变动状态，记录处在变动状态的组件的组件信息的变动数据；根据各组件的初始组件信息以及处在变动状态的组件的组件信息的变动数据，生成小程序页面的录屏数据。如此，基于本申请技术方案，可以实现第三方应用录制小程序页面的功能，而且还可以减小录屏数据的存储成本以及传输录屏数据所消耗的流量成本。

Description

一种小程序页面的录屏方法、介质及电子设备
技术领域
本申请涉及互联网技术领域，特别涉及一种小程序页面的录屏方法、介质及电子设备。
背景技术
小程序是一种不需要下载安装即可使用的应用程序(下文中简称应用)。小程序的载体一般是电子设备中已经安装的第三方应用。例如，微信等通信类型的应用、支付宝等支付类型的应用以及今日头条等新闻类型的应用。
小程序的人机交互入口(如小程序的图标)位于电子设备中已经安装的第三应用载体中，例如位于微信的主界面的下拉用户界面(User Interface，UI)中。
当前已有的页面录屏方案中，第三方应用只能支持标准超文本标记语言(HyperText Markup Language，HTML)元素的记录，其中，HTML用于描述页面要显示的UI信息。而小程序页面的UI信息是一些非HLML的标记语言标记的，例如，非HLML的标记语言可以是爪哇脚本可扩展标记语言(JavaScript XML，JSX)。因此，由于标记语言类型不同，当前已有的页面录屏方案中，第三方应用无法录制小程序的页面。
发明内容
本申请实施例提供了一种小程序页面的录屏方法、介质及电子设备。
第一方面，本申请实施例提供了一种小程序页面的录屏方法，应用于电子设备，该方法包括：
响应于录制小程序页面的触发操作，获取所述小程序页面中携带追踪标记的各组件的初始组件信息；
调用录制接口，以使所述录制接口处于工作状态，其中，所述录制接口用于监听携带追踪标记的所述各组件的组件信息的变化情况；
确定所述录制接口监听到小程序页面中携带追踪标记的组件的组件类型、组件属性、组件样式中的任意一种或多种处在变动状态，记录处在变动状态的组件的组件信息的变动数据；
根据各组件的初始组件信息以及处在变动状态的组件的组件信息的变动数据，生成小程序页面的录屏数据。
如此，基于本申请技术方案，可以实现第三方应用录制小程序页面的功能。而且传统录屏对应的视频文件较大，例如，传统录制10秒的视频文件的大小可能有4兆(M)；本申请实施例中的录屏数据较小，例如，录制10秒的录屏数据的大小只需几百千字节(KB)。本申请相较于传统录屏，本申请中的录屏方案可以减小录屏数据的存储成本以及传输录屏数据所消耗的流量成本。
在上述第一方面的一种可能的实现中，所述电子设备的第三方应用中设置用于录制小程序页面的录制接口，其中，所述第三方应用是所述小程序的载体。
在上述第一方面的一种可能的实现中，所述第三方应用包括视图层、逻辑层和系统层，所述视图层中包括多个网页和所述录制接口；
所述视图层用于基于网页渲染页面，且在响应于录制小程序页面的操作的情况下，获取基于网页生成的小程序页面中各组件的初始组件信息，并且调用录制接口，以使所述录制接口处于工作状态，其中，所述录制接口用于监听携带追踪标记的所述各组件的组件信息的变化情况；确定所述录制接口监听到小程序页面中携带追踪标记的组件的组件类型、组件属性、组件样式中的任意一种或多种处在变动状态，记录处在变动状态的组件的组件信息的变动数据；
所述视图层用于通过所述系统层将所述录屏数据发送至所述逻辑层。
在上述第一方面的一种可能的实现中，所述组件包括画布，所述变动数据包括笔势的变动数据，其中，所述笔势的变动数据包括用户签字时笔划的粗细、笔划起点至终点的路径和笔划的顺序。
在上述第一方面的一种可能的实现中，所述追踪标记设置于所述小程序页面的各组件的标签中。
在上述第一方面的一种可能的实现中，所述追踪标记由字符集构成。
在上述第一方面的一种可能的实现中，所述生成小程序页面的录屏数据之后，还包括：基于所述录屏数据得到JavaScript对象简谱格式的录屏数据。
在上述第一方面的一种可能的实现中，所述生成小程序页面的录屏数据之后，还包括：基于所述录屏数据得到JavaScript对象简谱格式的录屏数据。
可以理解，由于JavaScript对象简谱(JavaScript Object Notation，JSON)格式的数据是轻量级的数据，便于设备间较快速高效的传输，因此，为了提高将数据从手机传输至服务器的传输速度，手机可以将录屏数据转化成JSON格式的数据，形成JSON格式的录屏数据。
在上述第一方面的一种可能的实现中，所述小程序页面中各组件的组件信息是由JSX标记的；以及所述生成小程序页面的录屏数据，包括：
将JSX格式的各组件的标签通过匹配，得到JSX格式的各组件的标签对应的构造函数；
将所述JSX格式的各组件的标签对应的构造函数转化为标准超文本标记语言格式的录屏数据；
将所述标准超文本标记语言格式的录屏数据转化为JavaScript对象简谱格式的数据。
在上述第一方面的一种可能的实现中，若所述小程序页面在录频状态，每隔预设时间基于所述录屏数据得到JavaScript对象简谱格式的录屏数据，并将所述JavaScript对象简谱格式的录屏数据存储至预设数组。
在上述第一方面的一种可能的实现中，所述JavaScript对象简谱格式的录屏数据用于所述小程序对应的服务器。
在上述第一方面的一种可能的实现中，所述录制接口包括wx.createselectorQuery().selectall。
第二方面，本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有指令，该指令在电子设备上执行时使电子设备执行上述第一方面以及其各种可能的实现方式中任一项所述的小程序页面的录屏方法。
第三方面，本申请实施例提供了一种计算机程序产品，计算机程序产品包括指令，指令用于实现上述第一方面以及其各种可能的实现方式中任一项所述的小程序页面的录屏方法。
第四方面，本申请实施例提供了一种电子设备，包括：
存储器，用于存储由电子设备的一个或多个处理器执行的指令，以及
处理器，当指令被一个或多个处理器执行时，处理器用于执行如上述第一方面以及其各种可能的实现方式中任一项所述的小程序页面的录屏方法。
附图说明
图1根据本申请的一些实施例，示出了一种小程序页面的录屏方法的应用场景示意图。；
图2A至图2D根据本申请的一些实施例，示出了一种用户在小程序的显示页面进行签字操作的界面变化示意图；
图3根据本申请的一些实施例，示出了一种用于渲染小程序页面的第三应用的软件框架示意图；
图4根据本申请的一些实施例，示出了一种小程序页面的录屏方法的流程示意图；
图5根据本申请的一些实施例，示出了一种对本申请技术方案适用的手机100的硬件结构示意图。
具体实施方式
本申请的说明性实施例包括但不限于小程序页面的录屏方法、介质及电子设备。
下面对本申请涉及到的术语进行解释。
(1)标记语言，标记语言(也称置标语言、标记语言、标志语言、标识语言)是一种将文本(Text)以及文本相关的其他信息(包括例如文本的结构和表示信息等)结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。标记语言可以是标准超文本标记语言(Hyper Text Markup Language，HTML)、爪哇脚本可扩展标记语言(JavaScript XML，JSX)等，但不限于此。
(2)组件，组件是用户界面(User Interface，UI)的基本组成单元，例如图片、文字、链接、控件、对话框等。
(3)组件分类，组件可以分为以下七大类，分别是：视图容器(View Container)，基础内容(Basic Content)，表单(Form)，导航(Navigation)，多媒体(Media)，地图(Map)，画布(Canvas)。组件就是写在如图3所示的wxml1011中的一系列标签。
组件分为以下七大类：
(a)视图容器
组件名 说明
view 视图容器
scroll-view 滚动视图容器
swiper 滑块视图容器
(b)基础内容
组件名 说明
icon 图标
text 文字
progress 进度条
(c)表单
组件名 说明
button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
picker-view 内嵌列表选择器
slider 滚动选择器
switch 开关选择器
label 标签
(d)导航
组件名 说明
navigator 导航
(e)多媒体
组件名 说明
audio 音频
image 图片
video 视频
(f)地图
Figure BDA0003629623110000041
Figure BDA0003629623110000051
(g)画布
组件名 说明
canvas 画布
(h)客服会话
组件名 说明
contact-button 进入客服会话按钮
(4)组件信息，组件信息包括以下至少一项：组件类型、组件属性、组件样式。
作为一种示例，组件类型可以包括图片、文字、链接、控件等，组件属性可以包括组件的显示尺寸(如显示高度和显示宽度等)和显示位置等，组件样式可以包括组件的显示形状、显示颜色和显示动态效果等，但不限于此。
(5)标签，标签是指标记语言文本(例如HTML文本)中，<XXXX>这类带尖括号的部分，标签起到描述各组件的组件信息的作用，例如，<p>标签表示其内部的文本是一个段落，<a>标签标识内部的文本是超链接；与此同时，通过标签的互相嵌套，表示了这个文档的结构。
在一些页面录屏的方案中，只能支持标准超文本标记语言(Hyper Text MarkupLanguage，HTML)元素的记录，其中，HTML用于描述页面要显示的UI信息。而小程序页面的UI信息是一些非HLML的标记语言标记的，例如，非HLML的标记语言可以是爪哇脚本可扩展标记语言(JavaScript XML，JSX)。因此，由于标记语言类型不同，当前已有的页面录屏方案无法录制小程序的页面。
为了解决该技术问题，本申请实施例提供了一种小程序页面的录屏方法。该方法包括：
电子设备的第三方应用中设置用于录制小程序页面的录制接口，以及小程序页面的各组件的标签中设置追踪标记，其中，录制接口用于监听携带追踪标记的各组件的组件信息的变化情况，追踪标记可以为各种字符集。
如此，在电子设备响应于录制小程序页面的触发操作的情况下，电子设备获取小程序页面中携带追踪标记的各组件的初始组件信息，并且调用录制接口，以使该录制接口处于工作状态，且若该录制接口监听到小程序页面中携带追踪标记的组件的组件信息处在变动状态，则记录处在变动状态的组件的组件信息的变动情况，根据各组件的初始组件信息以及处在变动状态的组件的组件信息的变动数据，生成小程序页面的录屏数据。
如此，基于本申请技术方案，可以实现第三方应用录制小程序页面的功能。而且传统录屏对应的视频文件较大，例如，传统录制10秒的视频文件的大小可能有4兆(M)；本申请实施例中的录屏数据较小，例如，录制10秒的录屏数据的大小只需几百千字节(KB)。本申请相较于传统录屏，本申请中的录屏方案可以减小录屏数据的存储成本以及传输录屏数据所消耗的流量成本。
下面将结合附图对本申请的实施例作进一步地示例性详细描述。
例如，图1根据本申请的一些实施例，示出了一种小程序页面的录屏方法的应用场景示意图。该应用场景包括手机100和服务器200。手机100中设置可以打开小程序页面的第三方应用。手机100的第三方应用中设置用于录制小程序页面的录制接口，以及小程序页面的各组件的标签中设置追踪标记，其中，录制接口用于监听携带追踪标记的各组件的组件信息的变化情况。
如此，第三方应用可以利用本申请提供的小程序页面的录屏方法，录制小程序页面中预设时长的页面变化视频，然后将录制的录屏文件发送至小程序对应的服务器200中进行保存。
下面以小程序为保险小程序为例说明本申请的技术方案。图2A至图2D根据本申请的一些实施例，示出了一种用户在小程序的显示页面进行签字操作的界面变化示意图。
如图2A所示，用户在社交应用程序的主界面下拉用户界面(User Interface，UI)，显示搜索小程序界面，例如，如图2B所示的搜索小程序界面，该搜索小程序界面包括保险小程序控件101。若用户想要打开保险小程序，则在保险小程序控件101上进行操作，例如点击操作。当用户在打开的保险小程序中进行投保相关的业务中需要用户签字的手续时，需要用户在签字区域进行亲笔签字。例如，在如图2C所示的签字区域102进行亲笔签字。用户打开签字页面的操作触发手机100响应于用户录制小程序签字过程的指令，手机100获取保险小程序控件101签字页面中各组件的初始组件信息，并且调用录制接口，以使该录制接口处于工作状态，且在用户签字的过程中，若该录制接口监听到签字区域102所对应的画布组件中的笔势处在变动状态，则记录笔势的变动数据，根据签字区域102所对应的画布组件的初始组件信息以及处在变动状态的画布组件的组件信息的变动数据，生成保险小程序的录屏数据。如图2C所示，用户点击确认按钮103后，录制过程结束。然后，手机100显示提交界面，在用户点击提交按钮104后，手机100将签字过程的录屏数据发送至保险小程序的后台服务器200中，如此，该保险小程序录制的录屏文件便可以作为证据留存。
可以理解的是，上述用户对小程序的图标的操作，均包括但不限于单击操作、双击操作、长按操作等。
图3根据本申请的一些实施例，示出了一种用于渲染小程序页面的第三应用的软件框架示意图。如图3所示，该软件框架包括视图层101、逻辑层102和系统层(Native)103。
其中，视图层101用于基于网页渲染页面结构，展示成用户看到的页面。视图层101包括多个网页(例如网页1011-1至网页1011-n)。网页(page)就是一个用超文本链接标记语言(HTML)符号标记的文档。它包括文字信息，以及当页面显示时，其中图像或者其它多媒体文档应该放置的位置进行了详细的说明。每个网页都有一个独立的带有自己网络地址(URL)的HTML文档。视图层101可以根据用户操作确定用户想要打开的网页的网页地址，基于该网页地址调用相应的HTML文档，显示相应的网页。例如，视图层101可以根据用户第一次打开某个网站的操作确定用户想要打开的网站主页的网页地址，基于该网页地址调用相应的HTML文档，显示相应的网站页面。
本申请实施例中，视图层101中设置用于录制小程序页面的录制接口。在视图层101响应于录制小程序页面的操作的情况下，视图层101获取基于网页生成的小程序页面中各组件的初始组件信息，并且调用录制接口，以使该录制接口处于工作状态，且若该录制接口监听到小程序页面中携带追踪标记的组件的组件信息处在变动状态，则记录处在变动状态的组件的组件信息的变动情况，根据各组件的初始组件信息以及处在变动状态的组件的组件信息的变动数据，生成小程序页面的录屏数据。
逻辑层102用于运行脚本。视图层101和逻辑层102是两个单独的执行线程，而这两个线程之间的通信则是通过系统层(Native)103。
本申请实施例中，视图层101的录制接口基于JSX格式录屏数据生成HTML格式的录屏数据，并将生成的HTML格式的录屏数据通过系统层(Native)103发送至逻辑层102。在一些实施例中，视图层101的录制接口每隔预设时间基于JSX格式录屏数据生成HTML格式的录屏数据，并将生成的HTML格式的录屏数据通过系统层(Native)103发送至逻辑层102。预设时间可以是10秒，但不限于此。
逻辑层102再将HTML格式的录屏数据转化为JSON格式的数据。可以理解，由于JSON格式的数据是轻量级的数据，便于传输，因此，为了将数据更快地从手机100传输至服务器200，手机100可以将录屏数据转化成JSON格式的数据对应组装，形成JSON格式的录屏数据。
视图层101的录制接口基于录屏数据生成HTML格式的代码，并将生成的HTML格式的代码通过系统层(Native)103发送至逻辑层102。在一些实施例中，视图层101的录制接口每隔预设时间基于录屏数据生成HTML格式的代码，并将生成的HTML格式的代码通过系统层(Native)103发送至逻辑层102。预设时间可以是10秒，但不限于此。
如此，基于本申请技术方案，可以实现第三方应用录制小程序页面的功能。而且传统录屏对应的视频文件较大，例如，传统录制10秒的视频文件的大小可能有4兆(M)；本申请实施例中的录屏数据较小，例如，录制10秒的录屏数据的大小只需几百千字节(KB)。本申请相较于传统录屏，本申请中的录屏方案可以减小录屏数据的存储成本以及传输录屏数据所消耗的流量成本。
图4根据本申请的一些实施例，示出了一种小程序页面的录屏方法的流程示意图。如图4所示，该流程包括如下步骤：
图4根据本申请的一些实施例，示出了一种小程序页面的录屏方法的流程示意图，该方法由手机100执行，该方法包括如下步骤：
401：响应于录制小程序页面的触发操作的情况下，获取小程序页面中携带追踪标记的各组件的初始组件信息。
可以理解，标签是指标记语言文本(例如HTML文本)中，<XXXX>这类带尖括号的部分，标签起到描述各组件的组件信息的作用，例如，<p>标签表示其内部的文本是一个段落，<a>标签标识内部的文本是超链接；与此同时，通过标签的互相嵌套，表示了这个文档的结构。在一些实施例中，可以在各组件对应的标签中设置追踪标记，以使得各组件携带追踪标记。追踪标记可以为各种字符集。例如，追踪标记可以设置为class＝glutton-record。
可以理解，在一些实施例中，组件信息包括以下至少一项：组件类型(data-type)、组件属性、组件样式(data-style)。作为一种示例，组件类型可以包括图片、文字、链接、控件等，组件属性可以包括组件的显示尺寸(如显示高度和显示宽度等)和显示位置等，组件样式可以包括组件的显示形状、显示颜色和显示动态效果等，但不限于此。
402：调用录制接口，以使该录制接口处于工作状态。
可以理解，在一些实施例中，录制接口可以是wx.createselectorQuery().selectall。
403：若该录制接口监听到小程序页面中携带追踪标记的组件的组件信息处在变动状态，则记录处在变动状态的组件的组件信息的变动情况，处在变动状态的组件的组件信息的变动情况数据即小程序页面的录屏数据。
可以理解，若小程序页面中的页面内容产生动态变化，则组件的组件信息也会随之变化。因此，若该录制接口监听到小程序页面中携带追踪标记的组件的组件信息处在变动状态，则记录处在变动状态的组件的组件信息的变动情况，以录制小程序页面中携带有追踪标记的各组件的页面内容产生动态变化的过程，达到录制视频的效果。
在一些实施例中，手机100确定录制接口监听到小程序页面中携带追踪标记的组件的组件类型、组件属性、组件样式中的任意一种或多种处在变动状态，记录处在变动状态的组件的组件信息的变动数据。
例如，如图2A所示，用户在社交应用程序的主界面下拉用户界面(UserInterface，UI)，显示搜索小程序界面，例如，如图2B所示的搜索小程序界面，该搜索小程序界面包括保险小程序控件101。若用户想要打开保险小程序，则在保险小程序控件101上进行操作，例如点击操作。当用户在打开的保险小程序控件101中进行投保时，需要在签字区域进行亲笔签字，例如，在如图2C所示的签字区域102进行亲笔签字。用户打开签字页面的操作触发手机100响应于用户录制小程序签字过程的指令，手机100获取保险小程序控件101签字页面中各组件的初始组件信息，并且调用录制接口，以使该录制接口处于工作状态，且在用户签字的过程中，若该录制接口监听到签字区域102所对应的画布组件中的笔势处在变动状态，则记录笔势的变动情况，笔势的变动情况数据即小程序页面的录屏数据。
例如，如图3所示，视图层101中设置用于录制小程序页面的录制接口。在视图层101响应于用户录制小程序页面的操作的情况下，视图层101获取基于网页生成的小程序页面中各组件的初始组件信息，并且调用录制接口，以使该录制接口处于工作状态，且若该录制接口监听到小程序页面中携带追踪标记的组件的组件信息处在变动状态，则记录笔势的变动数据，保险小程序控件101签字页面中各组件的初始组件信息以及笔势的变动数据构成小程序页面的录屏数据。
笔势的变动数据包括用户签字时笔划的粗细、笔划起点至终点的路径和笔划的顺序等数据，保险小程序控件101签字页面中各组件的初始组件信息以及笔势的变动数据构成小程序页面的录屏数据，如此，服务器200便可以基于录屏数据还原出用户的签字过程。
404：基于录屏数据得到JavaScript对象简谱(JavaScript Object Notation，JSON)格式的录屏数据。
可以理解，构造函数可以用来在显示小程序页面时，构造函数被手机100调用，以完成对小程序页面中的各组件的组件信息的初始化。小程序页面的UI信息是一些非HLML的标记语言标记的，例如，非HLML的标记语言可以是爪哇脚本可扩展标记语言(JavaScriptXML，JSX)。在一些实施例中，手机100可以将JSX格式的各组件的标签通过匹配，得到JSX格式的各组件的标签对应的构造函数，并将JSX格式的各组件的标签对应的构造函数转化为HTML格式的录屏数据，再将HTML格式的录屏数据转化为JSON格式的数据。
可以理解，由于JSON格式的数据是轻量级的数据，便于设备间较快速高效的传输，因此，为了提高将数据从手机100传输至服务器200的传输速度，手机100可以将录屏数据转化成JSON格式的数据，形成JSON格式的录屏数据。
例如，视图层101的录制接口基于JSX格式录屏数据生成HTML格式的录屏数据，并将生成的HTML格式的录屏数据通过系统层(Native)103发送至逻辑层102。在一些实施例中，视图层101的录制接口每隔预设时间基于JSX格式录屏数据生成HTML格式的录屏数据，并将生成的HTML格式的录屏数据通过系统层(Native)103发送至逻辑层102。预设时间可以是10秒，但不限于此。再将HTML格式的录屏数据转化为JSON格式的数据。
405：将得到的JSON格式的录屏数据放入数组，然后每隔预设时间自动执行一次步骤403，直至录屏结束。
可以理解，在一些实施例中，录屏结束后，手机100便可以将得到的录频数据发送至服务器200。例如，如图2C所示，用户点击确认按钮103后，录制过程结束。然后，手机100显示提交界面，在用户点击提交按钮104后，手机100将签字过程的JSON格式的录屏数据送至保险小程序的后台服务器200中，如此，该保险小程序录制的录屏文件便可以作为证据留存。
可以理解，预设时间即设置的执行频率，例如，默认0.5秒执行一次。
如此，基于本申请技术方案，可以实现第三方应用录制小程序页面的功能。而且传统录屏对应的视频文件较大，例如，传统录制10秒的视频文件的大小可能有4兆(M)；本申请实施例中的录屏数据较小，例如，录制10秒的录屏数据的大小只需几百千字节(KB)。本申请相较于传统录屏，本申请中的录屏方案可以减小录屏数据的存储成本以及传输录屏数据所消耗的流量成本。
图5根据本申请的一些实施例，示出了一种对本申请技术方案适用的手机100的硬件结构示意图。
如图5所示，手机100可以包括处理器110、电源模块140、存储器180、摄像头170、移动通信模块130、无线通信模块120、传感器模块190、音频模块150、接口模块160以及显示屏102等。
可以理解的是，本申请实施例示意的结构并不构成对手机100的具体限定。在本申请另一些实施例中，手机100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元，例如，可以包括中央处理器(CentralProcessing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)、数字信号处理器(Digital Signal Processor，DSP)、微处理器(Micro-programmed Control Unit，MCU)、人工智能(Artificial Intelligence，AI)处理器或可编程逻辑器件(Field ProgrammableGate Array，FPGA)等的处理模块或处理电路。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。例如，在本申请的一些实例中，处理器110在响应于录制小程序页面的触发操作的情况下，处理器110获取小程序页面中携带追踪标记的各组件的初始组件信息，并且调用录制接口，以使该录制接口处于工作状态，且若该录制接口监听到小程序页面中携带追踪标记的组件的组件信息处在变动状态，则记录处在变动状态的组件的组件信息的变动情况，根据各组件的初始组件信息以及处在变动状态的组件的组件信息的变动数据，生成小程序页面的录屏数据。
如此，基于本申请技术方案，可以实现第三方应用录制小程序页面的功能。而且传统录屏对应的视频文件较大，例如，传统录制10秒的视频文件的大小可能有4兆(M)；本申请实施例中的录屏数据较小，例如，录制10秒的录屏数据的大小只需几百千字节(KB)。本申请相较于传统录屏，本申请中的录屏方案可以减小录屏数据的存储成本以及传输录屏数据所消耗的流量成本。
存储器180可用于存储数据、软件程序以及模块，可以是易失性存储器(VolatileMemory)，例如随机存取存储器(Random-Access Memory，RAM)；或者非易失性存储器(Non-Volatile Memory)，例如只读存储器(Read-Only Memory，ROM)，快闪存储器(FlashMemory)，硬盘(Hard Disk Drive，HDD)或固态硬盘(Solid-State Drive，SSD)；或者上述种类的存储器的组合，或者也可以是可移动存储介质，例如安全数字(Secure Digital，SD)存储卡。具体的，存储器180可以包括程序存储区(未图示)和数据存储区(未图示)。程序存储区内可存储程序代码，该程序代码用于使处理器110通过执行该程序代码，执行本申请实施例提供的小程序页面的录屏方法。
移动通信模块130可以包括但不限于天线、功率放大器、滤波器、低噪声放大器(Low Noise Amplify，LNA)等。移动通信模块130可以提供应用在手机100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块130可以由天线接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块130还可以对经调制解调处理器调制后的信号放大，经天线转为电磁波辐射出去。在一些实施例中，移动通信模块130的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块130至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
无线通信模块120可以包括天线，并经由天线实现对电磁波的收发。无线通信模块120可以提供应用在手机100上的包括无线局域网络(Wireless Local Area Networks，WLAN)(如无线保真(Wireless Fidelity，Wi-Fi)网络)，蓝牙(Bluetooth，BT)，全球导航卫星系统(Global Navigation Satellite System，GNSS)，调频(Frequency Modulation，FM)，近距离无线通信技术(Near Field Communication，NFC)，红外技术(Infrared，IR)等无线通信的解决方案。手机100可以通过无线通信技术与网络以及其他设备进行通信。
在一些实施例中，手机100的移动通信模块130和无线通信模块120也可以位于同一模块中。
可以理解的是，以上图5所示的硬件结构并不构成对手机100的具体限定。在本申请另一些实施例中，手机100可以包括比图5所示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。
本申请公开的各实施例可以被实现在硬件、软件、固件或这些实现方法的组合中。本申请的实施例可实现为在可编程系统上执行的计算机程序或程序代码，该可编程系统包括至少一个处理器、存储系统(包括易失性和非易失性存储器和/或存储元件)、至少一个输入设备以及至少一个输出设备。
可将程序代码应用于输入指令，以执行本申请描述的各功能并生成输出信息。可以按已知方式将输出信息应用于一个或多个输出设备。为了本申请的目的，处理系统包括具有诸如例如数字信号处理器(DSP)、微控制器、专用集成电路(ASIC)或微处理器之类的处理器的任何系统。
程序代码可以用高级程序化语言或面向对象的编程语言来实现，以便与处理系统通信。在需要时，也可用汇编语言或机器语言来实现程序代码。事实上，本申请中描述的机制不限于任何特定编程语言的范围。在任一情形下，该语言可以是编译语言或解释语言。
在一些情况下，所公开的实施例可以以硬件、固件、软件或其任何组合来实现。所公开的实施例还可以被实现为由一个或多个暂时或非暂时性机器可读(例如，计算机可读)存储介质承载或存储在其上的指令，其可以由一个或多个处理器读取和执行。例如，指令可以通过网络或通过其他计算机可读介质分发。因此，机器可读介质可以包括用于以机器(例如，计算机)可读的形式存储或传输信息的任何机制，包括但不限于，软盘、光盘、光碟、只读存储器(CD-ROMs)、磁光盘、只读存储器(ROM)、随机存取存储器(RAM)、可擦除可编程只读存储器(EPROM)、电可擦除可编程只读存储器(EEPROM)、磁卡或光卡、闪存、或用于利用因特网以电、光、声或其他形式的传播信号来传输信息(例如，载波、红外信号数字信号等)的有形的机器可读存储器。因此，机器可读介质包括适合于以机器(例如，计算机)可读的形式存储或传输电子指令或信息的任何类型的机器可读介质。
在附图中，可以以特定布置和/或顺序示出一些结构或方法特征。然而，应该理解，可能不需要这样的特定布置和/或排序。而是，在一些实施例中，这些特征可以以不同于说明性附图中所示的方式和/或顺序来布置。另外，在特定图中包括结构或方法特征并不意味着暗示在所有实施例中都需要这样的特征，并且在一些实施例中，可以不包括这些特征或者可以与其他特征组合。
需要说明的是，本申请各设备实施例中提到的各单元/模块都是逻辑单元/模块，在物理上，一个逻辑单元/模块可以是一个物理单元/模块，也可以是一个物理单元/模块的一部分，还可以以多个物理单元/模块的组合实现，这些逻辑单元/模块本身的物理实现方式并不是最重要的，这些逻辑单元/模块所实现的功能的组合才是解决本申请所提出的技术问题的关键。此外，为了突出本申请的创新部分，本申请上述各设备实施例并没有将与解决本申请所提出的技术问题关系不太密切的单元/模块引入，这并不表明上述设备实施例并不存在其它的单元/模块。
需要说明的是，在本专利的示例和说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
虽然通过参照本申请的某些优选实施例，已经对本申请进行了图示和描述，但本领域的普通技术人员应该明白，可以在形式上和细节上对其作各种改变，而不偏离本申请的精神和范围。

Claims (14)

1.一种小程序页面的录屏方法，应用于电子设备，其特征在于，所述方法包括：
响应于录制小程序页面的触发操作，获取所述小程序页面中携带追踪标记的各组件的初始组件信息；
调用录制接口，以使所述录制接口处于工作状态，其中，所述录制接口用于监听携带追踪标记的所述各组件的组件信息的变化情况；
确定所述录制接口监听到小程序页面中携带追踪标记的组件的组件类型、组件属性、组件样式中的任意一种或多种处在变动状态，记录处在变动状态的组件的组件信息的变动数据；
根据各组件的初始组件信息以及处在变动状态的组件的组件信息的变动数据，生成小程序页面的录屏数据。
2.根据权利要求1所述的方法，其特征在于，所述电子设备的第三方应用中设置用于录制小程序页面的录制接口，其中，所述第三方应用是所述小程序的载体。
3.根据权利要求2所述的方法，其特征在于，所述第三方应用包括视图层、逻辑层和系统层，所述视图层中包括多个网页和所述录制接口；
所述视图层用于基于网页渲染页面，且在响应于录制小程序页面的操作的情况下，获取基于网页生成的小程序页面中各组件的初始组件信息，并且调用录制接口，以使所述录制接口处于工作状态，其中，所述录制接口用于监听携带追踪标记的所述各组件的组件信息的变化情况；确定所述录制接口监听到小程序页面中携带追踪标记的组件的组件类型、组件属性、组件样式中的任意一种或多种处在变动状态，记录处在变动状态的组件的组件信息的变动数据；
所述视图层用于通过所述系统层将所述录屏数据发送至所述逻辑层。
4.根据权利要求1所述的方法，其特征在于，所述组件包括画布，所述变动数据包括笔势的变动数据，其中，所述笔势的变动数据包括用户签字时笔划的粗细、笔划起点至终点的路径和笔划的顺序。
5.根据权利要求1所述的方法，其特征在于，所述追踪标记设置于所述小程序页面的各组件的标签中。
6.根据权利要求1至5中任一项所述的方法，其特征在于，所述追踪标记由字符集构成。
7.根据权利要求1所述的方法，其特征在于，所述生成小程序页面的录屏数据之后，还包括：基于所述录屏数据得到JavaScript对象简谱格式的录屏数据。
8.根据权利要求7所述的方法，其特征在于，所述小程序页面中各组件的组件信息是由JSX标记的；以及所述生成小程序页面的录屏数据，包括：
将JSX格式的各组件的标签通过匹配，得到JSX格式的各组件的标签对应的构造函数；
将所述JSX格式的各组件的标签对应的构造函数转化为标准超文本标记语言格式的录屏数据；
将所述标准超文本标记语言格式的录屏数据转化为JavaScript对象简谱格式的数据。
9.根据权利要求7所述的方法，其特征在于，若所述小程序页面在录频状态，每隔预设时间基于所述录屏数据得到JavaScript对象简谱格式的录屏数据，并将所述JavaScript对象简谱格式的录屏数据存储至预设数组。
10.根据权利要求7至9中任一项所述的方法，其特征在于，所述JavaScript对象简谱格式的录屏数据用于所述小程序对应的服务器。
11.根据权利要求1至10中任一项所述的方法，其特征在于，所述录制接口包括wx.createselectorQuery().selectall。
12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有指令，该指令在电子设备上执行时使电子设备执行权利要求1至11中任一项所述的小程序页面的录屏方法。
13.一种计算机程序产品，其特征在于，所述计算机程序产品包括指令，所述指令用于实现如权利要求1至11中任一项所述的小程序页面的录屏方法。
14.一种电子设备，其特征在于，包括：
存储器，用于存储由电子设备的一个或多个处理器执行的指令，以及
处理器，当所述指令被一个或多个处理器执行时，所述处理器用于执行如权利要求1至11中任一项所述的小程序页面的录屏方法。
CN202210487192.8A 2022-05-06 2022-05-06 一种小程序页面的录屏方法、介质及电子设备 Active CN115017020B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202210487192.8A CN115017020B (zh) 2022-05-06 2022-05-06 一种小程序页面的录屏方法、介质及电子设备
PCT/CN2023/090050 WO2023213203A1 (zh) 2022-05-06 2023-04-23 一种小程序页面的录屏方法、介质及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210487192.8A CN115017020B (zh) 2022-05-06 2022-05-06 一种小程序页面的录屏方法、介质及电子设备

Publications (2)

Publication Number Publication Date
CN115017020A true CN115017020A (zh) 2022-09-06
CN115017020B CN115017020B (zh) 2024-02-09

Family

ID=83069814

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210487192.8A Active CN115017020B (zh) 2022-05-06 2022-05-06 一种小程序页面的录屏方法、介质及电子设备

Country Status (2)

Country Link
CN (1) CN115017020B (zh)
WO (1) WO2023213203A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023213203A1 (zh) * 2022-05-06 2023-11-09 易保网络技术(上海)有限公司 一种小程序页面的录屏方法、介质及电子设备

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117240925B (zh) * 2023-11-13 2024-03-19 广州品唯软件有限公司 流量录制方法、装置、存储介质及计算机设备

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107491488A (zh) * 2017-07-18 2017-12-19 北京京东尚科信息技术有限公司 页面数据采集的方法和装置
CN108845918A (zh) * 2018-04-28 2018-11-20 努比亚技术有限公司 一种信息采集方法、终端及计算机可读存储介质
CN109582418A (zh) * 2018-11-21 2019-04-05 平安科技（深圳）有限公司 用户行为数据收集方法、装置、计算机装置、存储介质
CN110944047A (zh) * 2019-11-28 2020-03-31 中国银行股份有限公司 分布式应用监控方法及装置
CN111897694A (zh) * 2020-07-30 2020-11-06 北京百度网讯科技有限公司 小程序中消息处理方法及装置、设备、存储介质
CN112241506A (zh) * 2020-12-11 2021-01-19 支付宝(杭州)信息技术有限公司 用户行为的回溯方法、装置、设备及系统
CN112860347A (zh) * 2021-03-10 2021-05-28 深圳前海微众银行股份有限公司 一种小程序中存证文件的生成方法及装置
CN112905935A (zh) * 2021-02-10 2021-06-04 微民保险代理有限公司 页面录制方法、页面录制动画生成方法、设备和存储介质
CN113448817A (zh) * 2021-06-25 2021-09-28 未鲲(上海)科技服务有限公司 一种页面录屏方法、装置以及存储介质
CN114116388A (zh) * 2021-11-24 2022-03-01 天翼数字生活科技有限公司 一种小程序数据采集方法、装置、设备及可读存储介质
CN114385457A (zh) * 2022-01-18 2022-04-22 瀚云科技有限公司 应用程序数据采集方法、装置、设备及存储介质

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6826553B1 (en) * 1998-12-18 2004-11-30 Knowmadic, Inc. System for providing database functions for multiple internet sources
CN108829648A (zh) * 2018-05-30 2018-11-16 北京小度信息科技有限公司 网页标记语言的转换方法及装置
CN112015626A (zh) * 2020-08-26 2020-12-01 支付宝(杭州)信息技术有限公司 用户行为的记录方法、装置及设备
CN112199263A (zh) * 2020-09-30 2021-01-08 北京字节跳动网络技术有限公司 录制页面的方法、装置、设备以及介质
CN112256547A (zh) * 2020-11-04 2021-01-22 支付宝(杭州)信息技术有限公司 数据录制方法及装置
CN115017020B (zh) * 2022-05-06 2024-02-09 易保网络技术(上海)有限公司 一种小程序页面的录屏方法、介质及电子设备

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107491488A (zh) * 2017-07-18 2017-12-19 北京京东尚科信息技术有限公司 页面数据采集的方法和装置
CN108845918A (zh) * 2018-04-28 2018-11-20 努比亚技术有限公司 一种信息采集方法、终端及计算机可读存储介质
CN109582418A (zh) * 2018-11-21 2019-04-05 平安科技（深圳）有限公司 用户行为数据收集方法、装置、计算机装置、存储介质
CN110944047A (zh) * 2019-11-28 2020-03-31 中国银行股份有限公司 分布式应用监控方法及装置
CN111897694A (zh) * 2020-07-30 2020-11-06 北京百度网讯科技有限公司 小程序中消息处理方法及装置、设备、存储介质
CN112241506A (zh) * 2020-12-11 2021-01-19 支付宝(杭州)信息技术有限公司 用户行为的回溯方法、装置、设备及系统
CN112905935A (zh) * 2021-02-10 2021-06-04 微民保险代理有限公司 页面录制方法、页面录制动画生成方法、设备和存储介质
CN112860347A (zh) * 2021-03-10 2021-05-28 深圳前海微众银行股份有限公司 一种小程序中存证文件的生成方法及装置
CN113448817A (zh) * 2021-06-25 2021-09-28 未鲲(上海)科技服务有限公司 一种页面录屏方法、装置以及存储介质
CN114116388A (zh) * 2021-11-24 2022-03-01 天翼数字生活科技有限公司 一种小程序数据采集方法、装置、设备及可读存储介质
CN114385457A (zh) * 2022-01-18 2022-04-22 瀚云科技有限公司 应用程序数据采集方法、装置、设备及存储介质

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023213203A1 (zh) * 2022-05-06 2023-11-09 易保网络技术(上海)有限公司 一种小程序页面的录屏方法、介质及电子设备

Also Published As

Publication number Publication date
CN115017020B (zh) 2024-02-09
WO2023213203A1 (zh) 2023-11-09

Similar Documents

Publication Publication Date Title
CN115017020B (zh) 一种小程序页面的录屏方法、介质及电子设备
EP3005223B1 (en) Two-dimensional code recognition method and apparatus
US8403222B2 (en) Method of enabling the downloading of content
CN102123195A (zh) 在通信终端中提供书签服务的设备和方法
US9652680B2 (en) Techniques including URL recognition and applications
KR20150111221A (ko) 페이지 구성 방법 및 이를 지원하는 전자장치
US20110161880A1 (en) Browser based objects for copying and sending operations
EP3097470B1 (en) Electronic device and user interface display method for the same
CN112650714B (zh) 文档展示方法、装置、设备及计算机可读介质
CN108132945A (zh) 用于生成报表的方法和装置
CN109767257B (zh) 基于大数据分析的广告投放方法、系统及电子设备
CN108475182A (zh) 数据处理方法以及电子终端
CN110795180A (zh) 二维码管理方法、系统、电子设备及存储介质
CN111222069B (zh) 报表组件调整方法、装置及相关设备
CN106878151B (zh) 一种用于传输信息的方法、设备及系统
CN105446625A (zh) 基于浏览器的图片粘贴方法及装置
US20130080453A1 (en) Method and system for dynamically providing contextually relevant news on an article
CN105739717A (zh) 信息输入方法和装置
CN115311051A (zh) 用于房屋带看的页面展示方法、设备及存储介质
CN105320707B (zh) 基于即时通信的热词提示方法及装置
US20150087252A1 (en) Electronic device and method for performing a radio channel connection
CN110309454B (zh) 一种界面显示方法、装置、设备及存储介质
KR101497986B1 (ko) 단말로 템플릿의 소재 데이터를 제공하는 서버 및 방법, 그리고 단말
CN108460128B (zh) 文档管理方法及装置、电子装置及可读存储介质
KR100671697B1 (ko) 이동 통신 단말기에서 북마크 사용 방법 및 그 이동 통신단말기

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
GR01 Patent grant
GR01 Patent grant