CN110069269A - 更新小程序页面的方法、装置、电子设备及存储介质 - Google Patents
更新小程序页面的方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN110069269A CN110069269A CN201910303231.2A CN201910303231A CN110069269A CN 110069269 A CN110069269 A CN 110069269A CN 201910303231 A CN201910303231 A CN 201910303231A CN 110069269 A CN110069269 A CN 110069269A
- Authority
- CN
- China
- Prior art keywords
- page
- interface
- view
- small routine
- update
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
Abstract
本公开提供了一种更新小程序页面的方法、装置、电子设备及存储介质,其中,方法包括:响应于针对运行于客户端的小程序的页面操作,获取与所述页面操作对应的事件;确定对应所述事件的事件逻辑,所述事件逻辑指示调用两个或两个以上的第一视图更新接口;合并所述两个或两个以上的第一视图更新接口的接口参数,以形成第二视图更新接口;调用所述第二视图更新接口,更新所述小程序的页面。
Description
技术领域
本公开涉及通信技术,尤其涉及一种更新小程序页面的方法、装置、电子设备及存储介质。
背景技术
随着移动互联网的发展、社交客户端、视频分享客户端等在社交网络用户中的普及,开发者以客户端作为互联网中的工具,通过在客户端内运行各种不同的小程序为用户提供差异化的服务。
小程序在运行过程中,若用户触发针对小程序的页面操作,如点击操作时,会引起小程序进行页面更新,相关技术中,小程序针对用户的一次操作,需要多次调用视图更新接口,进而引起多次的视图更新,小程序的页面更新效率低,且很容易引起小程序的卡顿。
发明内容
有鉴于此,本公开实施例提供一种更新小程序页面的方法、装置、电子设备及存储介质。
第一方面,本公开实施例提供一种更新小程序页面的方法,所述方法包括:
响应于针对运行于客户端的小程序的页面操作,获取与所述页面操作对应的事件;
确定对应所述事件的事件逻辑,所述事件逻辑指示调用两个或两个以上的第一视图更新接口;
合并所述两个或两个以上的第一视图更新接口的接口参数,以形成第二视图更新接口;
调用所述第二视图更新接口,更新所述小程序的页面。
上述方案中,所述合并所述两个或两个以上的第一视图更新接口的接口参数,包括:
执行第一控制逻辑,以判断所述事件逻辑是否通过所述事件触发;
确定所述事件逻辑通过所述事件触发时,合并所述两个或两个以上的第一视图更新接口的接口参数,得到全局参数;
执行第二控制逻辑,以调用所述第二视图更新接口,所述第二视图更新接口的接口参数为所述全局参数。
上述方案中,所述方法还包括:
响应于对第三视图更新接口的调用,执行所述第一控制逻辑,以判断所述第三视图更新接口的调用是否通过事件触发;
确定所述第三视图更新接口的调用并非通过事件触发时,调用所述第三视图更新接口,更新所述小程序的页面。
上述方案中,所述获取与所述页面操作对应的事件,包括:
接收到所述页面操作,所述页面操作对应视图层的组件;
获取所述组件所绑定的所述事件。
上述方案中,所述调用所述第二视图更新接口,更新所述小程序的页面,包括:
基于所述第二视图更新接口,得到用于更新所述小程序的页面的数据;
根据得到的所述数据进行页面渲染,实现所述小程序的页面在所述客户端中的更新。
上述方案中,所述方法还包括:
所述客户端包括可供调用的客户端接口;
调用所述客户端接口,以通过所述客户端接口发送数据。
上述方案中,所述第一视图更新接口为setData接口,所述两个或两个以上的第一视图更新接口中任意两个第一视图更新接口的接口参数不同。
第二方面,本公开实施例还提供一种更新小程序页面的装置,所述装置包括:
获取单元,用于响应于针对运行于客户端的小程序的页面操作,获取与所述页面操作对应的事件;
确定单元,用于确定对应所述事件的事件逻辑,所述事件逻辑指示调用两个或两个以上的第一视图更新接口;
合并单元,用于合并所述两个或两个以上的第一视图更新接口的接口参数,以形成第二视图更新接口;
更新单元,用于调用所述第二视图更新接口,更新所述小程序的页面。
上述方案中,所述合并单元,具体用于执行第一控制逻辑,以判断所述事件逻辑是否通过所述事件触发;
确定所述事件逻辑通过所述事件触发时,合并所述两个或两个以上的第一视图更新接口的接口参数,得到全局参数;
执行第二控制逻辑,以调用所述第二视图更新接口,所述第二视图更新接口的接口参数为所述全局参数。
上述方案中,所述合并单元,还用于响应于对第三视图更新接口的调用,执行所述第一控制逻辑,以判断所述第三视图更新接口的调用是否通过事件触发;
确定所述第三视图更新接口的调用并非通过事件触发时,调用所述第三视图更新接口,更新所述小程序的页面。
上述方案中,所述获取单元,具体用于接收到所述页面操作,所述页面操作对应视图层的组件;
获取所述组件所绑定的所述事件。
上述方案中,所述更新单元,具体用于基于所述第二视图更新接口,得到用于更新所述小程序的页面的数据;
根据得到的所述数据进行页面渲染,实现所述小程序的页面在所述客户端中的更新。
上述方案中,所述装置还包括:
调用单元,用于在所述客户端包括可供调用的客户端接口时,调用所述客户端接口,以通过所述客户端接口发送数据。
上述方案中,所述第一视图更新接口为setData接口,所述两个或两个以上的第一视图更新接口中任意两个第一视图更新接口的接口参数不同。
第三方面,本公开实施例还提供一种电子设备,包括:
存储器,用于存储可执行指令;
处理器,用于执行所述存储器中存储的可执行指令时,实现本公开实施例提供的上述更新小程序页面的方法。
第四方面,本公开实施例还提供一种存储介质,存储有可执行指令,所述可执行指令被执行时,用于实现本公开实施例提供的上述更新小程序页面的方法。
应用本公开上述实施例具有以下有益效果:
应用本公开上述实施例,小程序接收到用户触发的页面操作时,通过合并两个或两个以上的第一视图更新接口的接口参数,形成第二视图更新接口,进而调用第二视图更新接口更新小程序的页面,使得无需依据事件逻辑多次调用第一视图更新接口进行多次页面更新,提高了小程序的页面更新效率,避免由于连续多次页面更新导致的小程序卡顿。
附图说明
图1为实现本公开实施例提供的运行客户端的终端的一个结构示意图;
图2为本公开实施例提供的小程序的架构示意图;
图3为本公开实施例提供的更新小程序页面的装置的组成结构示意图;
图4为本公开实施例提供的相关技术中更新小程序页面的方法流程示意图;
图5为本公开实施例提供的更新小程序页面的方法流程示意图一;
图6为本发明实施例提供的事件逻辑封装的示意图;
图7为本发明实施例提供的合并多个视图更新接口的接口参数的示意图;
图8为本公开实施例提供的更新小程序页面的方法流程示意图二;
图9为本公开实施例提供的更新小程序页面的装置100的组成结构示意图。
具体实施方式
为了使本公开的目的、技术方案和优点更加清楚,下面将结合附图对本公开作进一步地详细描述,所描述的实施例不应视为对本公开的限制,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本公开保护的范围。
在以下的描述中,涉及到“一些实施例”,其描述了所有可能实施例的子集,但是可以理解,“一些实施例”可以是所有可能实施例的相同子集或不同子集,并且可以在不冲突的情况下相互结合。
在以下的描述中,所涉及的术语“第一\第二\第三”仅仅是是区别类似的对象,不代表针对对象的特定排序,可以理解地,“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序,以使这里描述的本公开实施例能够以除了在这里图示或描述的以外的顺序实施。
除非另有定义,本文所使用的所有的技术和科学术语与属于本公开的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本公开实施例的目的,不是旨在限制本公开。
对本公开实施例进行进一步详细说明之前,对本公开实施例中涉及的名词和术语进行说明,本公开实施例中涉及的名词和术语适用于如下的解释。
1)客户端,终端中运行的用于提供各种服务的应用程序,例如即时通信应用客户端、视频分享客户端。
2)小程序,基于面向前端的语言(例如JavaScript)开发的、并在超文本标记语言(HTML,Hyper Text Markup Language)页面中实现服务的程序,通过客户端下载后可以立即解释执行,不需要在客户端中执行安装的步骤。
3)视图(Web-View)组件,用于实现网页中如点击、滑动、下拉框、表格等网页中各种内容的容器,负责小程序的显示,能够自动铺满小程序的页面。
4)事件,小程序的视图层到逻辑层的通讯方式,视图组件中发生用户操作时所产生的数据以事件的形式传递到逻辑层,在逻辑层执行与事件绑定的事件处理函数,例如调用系统的各种能力接口。
5)响应于,用于表示所执行的操作所依赖的条件或者状态,当满足所依赖的条件或状态时,所执行的一个或多个操作可以是实时的,也可以具有设定的延迟;在没有特别说明的情况下,所执行的多个操作不存在执行先后顺序的限制。
基于上述对本公开实施例中涉及的名词和术语的解释,接下来参见图1,图1为本公开实施例提供的运行客户端的终端的一个结构示意图,参见图1,终端包括:硬件层21、驱动层22、操作系统层23和应用程序层24。然而,本领域的技术人员应当理解,图1示出的终端的结构仅为示例,并不构成对终端结构的限定。例如,终端可以根据实施需要设置较图1更多的组件,或者根据实施需要省略设置部分组件。
硬件层21包括处理器211、存储器212、输入/输出接口213以及通信接口214,组件可以经系统总线连接通信。其中,处理器211可以采用中央处理器(CPU,CentralProcessing Unit)、微处理器(MCU,Microcontroller Unit)、专用集成电路(ASIC,Application Specific Integrated Circuit)或逻辑可编程门阵列(FPGA,Field-Programmable Gate Array)实现。
输入/输出接口213可以采用如显示屏、触摸屏、扬声器等输入/输出器件实现。
存储器212中存储有存储介质,存储介质可以采用闪存、硬盘、光盘等非易失性存储介质实现,也可以采用双倍率(DDR,Double Data Rate)动态缓存等易失性存储介质实现,其中存储有用以执行上述小程序中的网页处理方法的可执行程序。示例性地,存储介质可以与终端的其他组件在同一位置设置,也可以相对于终端中的其他组件分布设置,存储介质中至少包括操作系统、网络通信程序。
通信接口214,向处理器提供外部数据如异地设置的存储介质的访问功能。
驱动层22,包括用于供操作系统识别硬件层并与硬件层各组件通信的中间件221,例如可以为针对硬件层的各组件的驱动程序的集合。
操作系统层23,用于提供面向用户的图形界面,示例性地,包括驱动程序231、图形库232、系统框架233、用户界面套件234、插件图标、桌面背景和应用图标,操作系统层支持用户经由图形界面对设备的控制本公开实施例对上述设备的软件如操作系统类型、版本不做限定,例如可以是Linux操作系统、UNIX操作系统或其他操作系统。
应用程序层24,包括小程序241及客户端242,当然,还可以包括用于实现其他常规功能的应用,如浏览器等。
接下来对本公开实施例中小程序241的架构进行说明,图2为本公开实施例提供的小程序的架构示意图,如图2所示,小程序框架的核心是一个响应的数据绑定系统,整个系统分为两块,分别为视图层(View)及逻辑层(APP Service)。系统层(Native层)为小程序的框架,框架里封装了UI层组件和逻辑层组件,通过小程序框架可以绑定视图层和逻辑层相应的参数,如参数名称,让数据和视图非常简单的保持同步,当进行数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。通过图2可知视图层和逻辑层分开在两个线程中运行,二者之间的信息交互通过系统层进行,即视图层与逻辑层通过系统层进行数据通信。当用户在小程序的页面进行操作(如点击操作),视图层的组件捕获用户操作后触发与该组件绑定的事件(如点击操作对应的点击事件),通过系统层将事件发送至逻辑层,逻辑层对事件进行解析,执行对应逻辑(如调用小程序接口)并把进行页面更新所需数据通过系统层传递给视图层,视图层基于接收的数据反应为视图。
接下来分别对小程序241的视图层和逻辑层分别进行说明。
视图层通过标签语言(TTML/WXML)与样式语言(TTSS/WXSS)编写,主要功能为将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层;其中,TTML/WXML用于描述页面的结构,TTSS/WXSS用于描述页面的样式。
组件是视图层的基本组成单元,自带一些功能与样式,一个组件通常包括“开始标签”和“结束标签”,“属性”用来修饰这个组件,“内容”在两个标签之内。其中,组件共有的属性包括:id(用于唯一的标识组件)、class(组件的样式类)、style(组件的内联样式)、hidden(组件是否显示)、data-*(自定义属性,可以对该组件的功能或样式进行修饰)、bind*/catch*(组件的事件)。基础组件分为以下八类:视图容器(View Container)、基础内容(如图标、文字、进度条)、表单(如按钮、输入框、标签等)、导航(Navigation)、媒体组件(如音频,图片,视频)、画布(Canvas)。
逻辑层对数据进行处理后发送给视图层,同时接收视图层的事件反馈,由JS(JavaScript)语言编写,在JS基础上,增加了APP(框架启动小程序的入口函数)和Page(进入某页面时执行的页面入口函数)方法,进行程序和页面的注册;提供了丰富的应用程序接口(API,Application Programming Interface),如播放音乐、预览图片等媒体API,上传文件、下载文件等网络API、保存文件、打开文件等文件API,获取本地数据缓存、清除本地数据缓存等数据API,获取当前位置、打开内置地图等位置API、获取系统信息、拨打电话等设备API,显示提示框、显示菜单列表等界面API,再如扫一扫、支付等。
事件是小程序的视图层到逻辑层的通信方式,可以将用户的页面操作反馈到逻辑层进行处理,可以绑定在视图层的组件上,当事件被触发,通过将事件传递到逻辑层,执行逻辑层中对应事件的事件处理函数,而事件对象(组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象)可以携带额外信息,如id,dataset,touches等。
至此,已经说明了实现本公开实施例的终端、客户端和小程序,继续说明实现本公开实施例的更新小程序页面的装置。参见图3,图3是实现本公开实施例的更新小程序页面的装置的组成结构示意图,本公开实施例提供的更新小程序页面的装置可通过电子设备来实施。在本公开实施例中,图3示出的装置仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图3所示,更新小程序页面的装置可以包括处理装置(例如中央处理器、图形处理器等)410,其可以根据存储在只读存储器(ROM,Read-Only Memory)420中的程序或者从存储装置480加载到随机访问存储器(RAM,Random Access Memory)430中的程序而执行各种适当的动作和处理。在RAM 430中,还存储有所述装置操作所需的各种程序和数据。处理装置410、ROM 420以及RAM430通过总线440彼此相连。输入/输出(I/O,Input/Output)接口450也连接至总线440。
通常,以下装置可以连接至I/O接口450:包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置460;包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置470;包括例如磁带、硬盘等的存储装置480;以及通信装置490。通信装置490可以允许所述装置与其他设备进行无线或有线通信以交换数据。虽然图3示出了具有各种组件的更新小程序页面的装置,但是应理解的是,并不要求实施或具备所有示出的组件。可以替代地实施或具备更多或更少的组件。
特别地,根据本公开的实施例,所提供的流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,计算机程序可以通过通信装置490从网络上被下载和安装,或者从存储装置480被安装,或者从ROM420被安装。在计算机程序被处理装置410执行时,执行本公开实施例的方法中限定的上述功能。
需要说明的是,本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
在本公开实施例中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开实施例中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、射频(RF)等等,或者上述的任意合适的组合。
上述计算机可读介质可以是上述服务器中所包含的;也可以是单独存在,而未装配入服务器中。
上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该服务器执行时,使得服务器执行本公开实施例提供的上述视频文件的处理方法。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码,上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络,包括局域网(LAN)和广域网(WAN),以连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
描述于本公开实施例中所涉及到的单元和/或模块可以通过软件的方式实现,也可以通过硬件的方式来实现。
对于硬件的方式来说,实现本公开实施例的更新小程序页面的装置的单元和/或模块可以被一个或多个应用专用集成电路(ASIC,Application Specific IntegratedCircuit)、DSP、可编程逻辑器件(PLD,Programmable Logic Device)、复杂可编程逻辑器件(CPLD,Complex Programmable Logic Device)、现场可编程门阵列(FPGA,Field-Programmable Gate Array)或其他电子元件实现,用于执行实现本公开实施例提供的方法。
接下来对更新小程序页面的方法进行说明。图4为相关技术中更新小程序页面的方法流程示意图,参见图4,当用户触发针对小程序的页面操作,如点击操作时,小程序捕获相应的点击事件,对应该点击事件,需要多次调用用于更新小程序的视图的接口(setData),进而引起多次的视图更新,小程序的页面更新效率低,且很容易引起小程序的卡顿。
图5为本公开实施例提供的更新小程序页面的方法流程示意图,参见图5,本公开实施例提供的更新小程序页面的方法包括:
步骤601:响应于针对运行于客户端的小程序的页面操作,获取与页面操作对应的事件。
这里,在实际实施时,客户端获取小程序,并进行小程序的页面的显示,具体地,客户端通过发送小程序的请求以获取小程序的源代码,在本发明实施例中,客户端可以主动或根据用户在客户端中的搜索进行小程序的获取,如用户进入客户端的小程序的功能入口,提示用户安装小程序,或者根据用户以关键字的搜索,下载小程序;在客户端中显示小程序的入口,当接收到触发入口的操作时,触发小程序的请求的发送,以接收返回的小程序的源代码。
需要说明的是,仅在客户端首次运行小程序时需要下载小程序,即获取小程序的源代码,后续可直接应用。
在实际应用中,客户端运行小程序,进行小程序的页面显示,当用户基于显示的页面进行用户操作,如点击操作,滑动操作等,小程序的视图层的视图组件接收到页面操作,视图层获取与该视图组件绑定的事件,以将捕获的事件传递给逻辑层进行处理。
步骤602:确定对应事件的事件逻辑,所述事件逻辑指示调用两个或两个以上的第一视图更新接口。
在实际实施时,逻辑层接收到视图层通过Native层传递的上述事件,获取与该事件对应的逻辑事件,在一实施例中,获取的逻辑事件指示调用两个或两个以上的第一视图更新接口,第一视图更新接口用于触发小程序的页面更新,在一实施例中,第一视图更新接口为setData接口,逻辑事件所指示调用的两个或两个以上的第一视图更新接口中,任意两个第一视图更新接口的接口参数不同,例如,逻辑事件指示调用第一视图更新接口setData({list:[]})、第一视图更新接口setData({name:'jack'}、以及第一视图更新接口setData({name:'kobe'})。
步骤603:合并所述两个或两个以上的第一视图更新接口的接口参数,以形成第二视图更新接口。
在一实施例中,小程序可通过如下方式实现对多个(两个或两个以上)第一视图更新接口的接口参数的合并:判断获取的事件逻辑是否通过事件触发;确定事件逻辑通过事件触发时,合并事件逻辑所指示调用的第一视图更新接口的接口参数,得到全局参数,所述全局参数用作所述第二视图更新接口的接口参数。
在实际应用中,存在非事件调用视图更新接口的情况,相应的,当小程序确定对视图更新接口的调用并非事件触发时,直接执行对视图接口的调用,以进行页面更新,如,小程序接收到对第三视图更新接口的调用,判断第三视图更新接口的调用是否通过事件触发;确定第三视图更新接口的调用并非通过事件触发时,调用第三视图更新接口,更新小程序的页面。
在实际实施时,可以将事件逻辑与预设的函数封装在一起,形成对应事件的事件控制逻辑,使得小程序每次捕获事件时,均执行预设的函数。在一实施例中,可以将before函数、after函数与事件逻辑进行封装,图6为本发明实施例提供的事件逻辑封装的示意图,参见图6,小程序每次捕获事件时,均会执行before函数及after函数。
这里以视图更新接口为setData为例,对实际实施时的before函数及after函数分别进行说明。before函数中涉及两个全局变量,分别为data及isRending,其中,data的初始化值为空对象,在执行before函数时,首先判断isRending的值是true还是false,若isRending=false,表明setData的调用并非事件触发,则直接调用setData更新小程序页面,若isRending=true,表明setData的调用为事件触发,执行对应事件的事件逻辑所指示调用的多个setData的接口参数的合并。
接下来对上述多个setData的接口参数的合并进行说明。图7为本发明实施例提供的合并多个视图更新接口的接口参数的示意图,参见图7,在一实施例中,接口参数的合并遵循JS中的浅合并,在一次用户点击事件中,data初始化值为一个空对象{},isRending值为true,执行setData({list:[]}),data中的{}与{list:[]}合并,data的值变为{list:[]},执行setData({name:'jack'}),然后d ata的值{list:[]}与{name:'jack'}合并,data的值变为{list:[],name:'jack'},执行setData({name:'kobe'}),data的值{list:[]}与{name:'kobe'}合并,data的值变为{list:[],name:'kobe'},该最后得到的data的值作为实际用于更新小程序页面的setData的接口参数。
步骤604:调用所述第二视图更新接口,更新小程序的页面。
这里,在实际实施时,小程序可通过如下方式实现页面的更新:基于第二视图更新接口,得到用于更新小程序的页面的数据;根据得到的数据进行页面渲染,实现小程序的页面在客户端中的更新。以合并多个视图更新接口的接口参数得到的全局参数(data)的值为{list:[],name:'kobe'}为例,该全局参数用作第二视图更新接口的接口参数,即第二视图更新接口为setData({list:[],name:'kobe'}),通过调用形成的该视图更新接口实现小程序页面的更新。
具体地,在实际实施时,在执行after函数时,执行isRending=false,即执行接口调用,以更新页面,获取全局参数data,此时值为{list:[],name:'kobe'},执行setData({list:[],name:'kobe'}),以实现小程序页面的更新,并初始化data值为{}。在实际应用中,实现小程序页面的更新以实现以下功能至少之一:扫码功能,支付功能,定位功能,网页跳转功能。
在一实施例中,运行小程序的客户端包括可供小程序调用的客户端接口,小程序调用客户端接口,以通过客户端接口发送数据。
应用本公开实施例,小程序接收到用户触发的页面操作时,通过合并两个或两个以上的第一视图更新接口的接口参数,形成第二视图更新接口,进而调用第二视图更新接口更新小程序的页面,使得无需依据事件逻辑多次调用第一视图更新接口进行多次页面更新,提高了小程序的页面更新效率,避免由于连续多次页面更新导致的小程序卡顿。
在一实施例中,图8为本公开实施例提供的更新小程序页面的方法流程示意图,参见图8,本公开实施例提供的更新小程序页面的方法包括:
步骤701:客户端获取小程序,并在小程序的页面框架中进行页面显示。
在实际应用中,在客户端中显示小程序的入口,当客户端接收到触发入口的操作时,向客户端的后台服务器发送小程序的请求,以接收小程序的源代码,运行小程序的源代码,以进行小程序的页面显示。
步骤702:小程序接收到用户触发的页面操作。
这里,当用户基于显示的小程序的页面进行页面操作时,如点击操作、滑动操作等,小程序的视图层的视图组件捕获用户的页面操作。
步骤703:小程序获取与页面操作对应的事件,以及与事件对应的事件逻辑,事件逻辑指示调用多次setData。
在实际应用中,事件与视图组件绑定,当视图组件捕获用户的页面操作后,进而可获取与视图组件所绑定的事件,事件与事件逻辑相绑定,当小程序捕获事件后,可进一步获取与事件对应的事件逻辑,在本发明实施例中,获取的对应事件的事件逻辑指示调用多次setData(第一视图更新接口),每次调用的setData的接口参数不同,例如,事件逻辑指示调用三次setData接口,分别为setData({list:[]})、setData({name:'jack'})、以及setData({name:'kobe'})。
步骤704:小程序合并事件逻辑指示调用的setData的接口参数,形成合成setData。
这里,小程序采用浅合并的方式将多个setData的接口参数合并,形成全局参数,将该全局参数用作合成setData的接口参数,例如,将setData({list:[]})、setData({name:'jack'})、以及setData({name:'kobe'})进行接口合并后得到全局参数data,data的值为{list:[],name:'kobe'},相应的,合成setData即为setData{list:[],name:'kobe'}(第二视图更新接口)。
步骤705:小程序调用合成setData,更新小程序的页面。
在实际实施时,当合成setData为setData{list:[],name:'kobe'}时,通过调用setData{list:[],name:'kobe'}实现小程序在客户端的页面更新。
应用本公开上述实施例,当用户的一次操作所触发的事件逻辑指示需要调用多次setData时,通过合并接口参数,使得仅执行一次视图更新接口、仅执行一次页面渲染即可,提升了小程序页面更新的效率,避免由于执行多次页面渲染造成的小程序的卡顿。
接下来继续对本公开实施例提供的更新小程序页面的装置进行说明,在一实施例中,更新小程序页面的装置可以通过软件单元/模块实施,图9为本公开实施例提供的更新小程序页面的装置100的组成结构示意图,参见图9,本公开实施例提供的更新小程序页面的装置100包括:
获取单元101,用于响应于针对运行于客户端的小程序的页面操作,获取与所述页面操作对应的事件;
确定单元102,用于确定对应所述事件的事件逻辑,所述事件逻辑指示调用两个或两个以上的第一视图更新接口;
合并单元103,用于合并所述两个或两个以上的第一视图更新接口的接口参数,以形成第二视图更新接口;
更新单元104,用于调用所述第二视图更新接口,更新所述小程序的页面。
在一实施例中,所述合并单元,具体用于判断所述事件逻辑是否通过所述事件触发;
确定所述事件逻辑通过所述事件触发时,合并所述两个或两个以上的第一视图更新接口的接口参数,得到全局参数,所述全局参数用作所述第二视图更新接口的接口参数。
在一实施例中,所述合并单元,还用于接收到对第三视图更新接口的调用;
确定所述第三视图更新接口的调用并非通过事件触发时,调用所述第三视图更新接口,更新所述小程序的页面。
在一实施例中,所述获取单元,具体用于接收到所述页面操作,所述页面操作对应视图层的视图组件;
获取所述视图组件所绑定的所述事件。
在一实施例中,所述更新单元,具体用于基于所述第二视图更新接口,得到用于更新所述小程序的页面的数据;
根据得到的所述数据进行页面渲染,实现所述小程序的页面在所述客户端中的更新。
在一实施例中,所述装置还包括:
调用单元,用于在所述客户端包括可供调用的客户端接口时,调用所述客户端接口,以通过所述客户端接口发送数据。
在一实施例中,所述第一视图更新接口为setData接口,所述两个或两个以上的第一视图更新接口中任意两个第一视图更新接口的接口参数不同。
这里需要指出的是:以上涉及更新小程序页面的装置的描述,与上述更新小程序页面的方法描述是类似的,同方法的有益效果描述,不做赘述。对于本公开所述更新小程序页面的实施例中未披露的技术细节,请参照本公开方法实施例的描述。
本公开实施例还提供了一种可读存储介质,存储介质可以包括:移动存储设备、随机存取存储器(RAM,Random Access Memory)、只读存储器(ROM,Read-Only Memory)、磁碟或者光盘等各种可以存储程序代码的介质。所述可读存储介质存储有可执行指令;
所述可执行指令,用于被处理器执行时实现本公开实施例提供的更新小程序页面的方法。
以上所述,仅为本公开的具体实施方式,但本公开的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本公开揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本公开的保护范围之内。因此,本公开的保护范围应以所述权利要求的保护范围为准。
Claims (10)
1.一种更新小程序页面的方法,其特征在于,所述方法包括:
响应于针对运行于客户端的小程序的页面操作,获取与所述页面操作对应的事件;
确定对应所述事件的事件逻辑,所述事件逻辑指示调用两个或两个以上的第一视图更新接口;
合并所述两个或两个以上的第一视图更新接口的接口参数,以形成第二视图更新接口;
调用所述第二视图更新接口,更新所述小程序的页面。
2.如权利要求1所述的方法,其特征在于,所述合并所述两个或两个以上的第一视图更新接口的接口参数,包括:
判断所述事件逻辑是否通过所述事件触发;
确定所述事件逻辑通过所述事件触发时,合并所述两个或两个以上的第一视图更新接口的接口参数,得到全局参数,所述全局参数用作所述第二视图更新接口的接口参数。
3.如权利要求1所述的方法,其特征在于,所述方法还包括:
接收到对第三视图更新接口的调用;
确定所述第三视图更新接口的调用并非通过事件触发时,调用所述第三视图更新接口,更新所述小程序的页面。
4.如权利要求1所述的方法,其特征在于,所述获取与所述页面操作对应的事件,包括:
接收到所述页面操作,所述页面操作对应视图层的视图组件;
获取所述视图组件所绑定的所述事件。
5.如权利要求1所述的方法,其特征在于,所述调用所述第二视图更新接口,更新所述小程序的页面,包括:
基于所述第二视图更新接口,得到用于更新所述小程序的页面的数据;
根据得到的所述数据进行页面渲染,实现所述小程序的页面在所述客户端中的更新。
6.如权利要求1所述的方法,其特征在于,所述方法还包括:
所述客户端包括可供调用的客户端接口;
调用所述客户端接口,以通过所述客户端接口发送数据。
7.如权利要求1至6任一项所述的方法,其特征在于,
所述第一视图更新接口为setData接口,所述两个或两个以上的第一视图更新接口中任意两个第一视图更新接口的接口参数不同。
8.一种更新小程序页面的装置,其特征在于,所述装置包括:
获取单元,用于响应于针对运行于客户端的小程序的页面操作,获取与所述页面操作对应的事件;
确定单元,用于确定对应所述事件的事件逻辑,所述事件逻辑指示调用两个或两个以上的第一视图更新接口;
合并单元,用于合并所述两个或两个以上的第一视图更新接口的接口参数,以形成第二视图更新接口;
更新单元,用于调用所述第二视图更新接口,更新所述小程序的页面。
9.一种电子设备,其特征在于,所述电子设备包括:
存储器,用于存储可执行指令;
处理器,用于执行所述存储器中存储的可执行指令时,实现如权利要求1至7任一项所述的更新小程序页面的方法。
10.一种存储介质,其特征在于,存储有可执行指令,所述可执行指令被执行时,用于实现权利要求1至7任一项所述的更新小程序页面的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910303231.2A CN110069269A (zh) | 2019-04-16 | 2019-04-16 | 更新小程序页面的方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910303231.2A CN110069269A (zh) | 2019-04-16 | 2019-04-16 | 更新小程序页面的方法、装置、电子设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN110069269A true CN110069269A (zh) | 2019-07-30 |
Family
ID=67367833
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910303231.2A Pending CN110069269A (zh) | 2019-04-16 | 2019-04-16 | 更新小程序页面的方法、装置、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110069269A (zh) |
Cited By (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110659098A (zh) * | 2019-09-23 | 2020-01-07 | 北京城市网邻信息技术有限公司 | 数据更新方法、装置、终端设备及存储介质 |
CN111008019A (zh) * | 2019-12-06 | 2020-04-14 | 北京百度网讯科技有限公司 | 小程序的Web化运行方法、装置、设备及介质 |
CN111045707A (zh) * | 2019-12-20 | 2020-04-21 | 深圳市珍爱捷云信息技术有限公司 | 小程序的更新方法、装置、计算机设备和存储介质 |
CN111625274A (zh) * | 2020-05-26 | 2020-09-04 | 北京达佳互联信息技术有限公司 | 页面依赖确定方法、装置、电子设备和存储介质 |
CN111782214A (zh) * | 2020-07-03 | 2020-10-16 | 携程商旅信息服务(上海)有限公司 | 客户端系统、运行方法、电子设备和存储介质 |
CN112148331A (zh) * | 2020-09-30 | 2020-12-29 | 亮风台(上海)信息科技有限公司 | 宿主程序的动态更新方法及终端设备 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108196832A (zh) * | 2018-01-09 | 2018-06-22 | 安徽小马创意科技股份有限公司 | 一种实现使微信小程序支持自定义组件式开发的方法 |
CN108446118A (zh) * | 2018-04-12 | 2018-08-24 | 珠海横琴盛达兆业科技投资有限公司 | 一种基于微信小程序平台添加到购物车抛物线动画的方法 |
CN108804164A (zh) * | 2018-05-22 | 2018-11-13 | 北京五八信息技术有限公司 | 小程序的数据渲染方法、装置、移动终端及存储介质 |
-
2019
- 2019-04-16 CN CN201910303231.2A patent/CN110069269A/zh active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108196832A (zh) * | 2018-01-09 | 2018-06-22 | 安徽小马创意科技股份有限公司 | 一种实现使微信小程序支持自定义组件式开发的方法 |
CN108446118A (zh) * | 2018-04-12 | 2018-08-24 | 珠海横琴盛达兆业科技投资有限公司 | 一种基于微信小程序平台添加到购物车抛物线动画的方法 |
CN108804164A (zh) * | 2018-05-22 | 2018-11-13 | 北京五八信息技术有限公司 | 小程序的数据渲染方法、装置、移动终端及存储介质 |
Non-Patent Citations (2)
Title |
---|
SMY: "聊天功能频繁刷新导致页面卡顿", 《HTTPS://DEVELOPERS.WEIXIN.QQ.COM/COMMUNITY/DEVELOP/DOC/00026AFB29CCD8509C87A838E56400》 * |
前端技术精髓: "小程序性能优化总结", 《HTTPS://SEGMENTFAULT.COM/A/1190000017833805?UTM_SOURCE=TAG-NEWEST》 * |
Cited By (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110659098A (zh) * | 2019-09-23 | 2020-01-07 | 北京城市网邻信息技术有限公司 | 数据更新方法、装置、终端设备及存储介质 |
CN111008019A (zh) * | 2019-12-06 | 2020-04-14 | 北京百度网讯科技有限公司 | 小程序的Web化运行方法、装置、设备及介质 |
CN111008019B (zh) * | 2019-12-06 | 2021-07-02 | 北京百度网讯科技有限公司 | 小程序的Web化运行方法、装置、设备及介质 |
CN111045707A (zh) * | 2019-12-20 | 2020-04-21 | 深圳市珍爱捷云信息技术有限公司 | 小程序的更新方法、装置、计算机设备和存储介质 |
CN111045707B (zh) * | 2019-12-20 | 2024-04-09 | 深圳市珍爱捷云信息技术有限公司 | 小程序的更新方法、装置、计算机设备和存储介质 |
CN111625274A (zh) * | 2020-05-26 | 2020-09-04 | 北京达佳互联信息技术有限公司 | 页面依赖确定方法、装置、电子设备和存储介质 |
CN111625274B (zh) * | 2020-05-26 | 2024-04-30 | 北京达佳互联信息技术有限公司 | 页面依赖确定方法、装置、电子设备和存储介质 |
CN111782214A (zh) * | 2020-07-03 | 2020-10-16 | 携程商旅信息服务(上海)有限公司 | 客户端系统、运行方法、电子设备和存储介质 |
CN111782214B (zh) * | 2020-07-03 | 2024-04-23 | 携程商旅信息服务(上海)有限公司 | 客户端系统、运行方法、电子设备和存储介质 |
CN112148331A (zh) * | 2020-09-30 | 2020-12-29 | 亮风台(上海)信息科技有限公司 | 宿主程序的动态更新方法及终端设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110069269A (zh) | 更新小程序页面的方法、装置、电子设备及存储介质 | |
US11348317B2 (en) | Interactive data explorer and 3-D dashboard environment | |
CN101866299B (zh) | 修改便携式电子设备上本地应用的执行的方法和系统 | |
US20180336027A1 (en) | Distributed versioning of applications using cloud-based systems | |
US8566732B2 (en) | Synchronization of widgets and dashboards | |
CN109074265B (zh) | 移动云服务的预先形成的指令 | |
US20170115968A1 (en) | Application builder with automated data objects creation | |
US10135940B2 (en) | Subscribing to event notifications using object instances | |
CN110109670B (zh) | 视图列表数据的处理方法、装置、电子设备及存储介质 | |
US11797273B2 (en) | System and method for enhancing component based development models with auto-wiring | |
US20160050512A1 (en) | Method and apparatus for developing, distributing and executing applications | |
CN102520841A (zh) | 收集用户接口 | |
WO2023093414A1 (zh) | 微应用的开发方法、装置、设备、存储介质及程序产品 | |
WO2023040443A1 (zh) | 用于绘制画布的方法和装置 | |
CN107463406A (zh) | 发布移动应用的方法和电子设备 | |
CN110070592A (zh) | 特效包的生成方法、装置和硬件装置 | |
Cardoso et al. | PuReWidgets: a programming toolkit for interactive public display applications | |
Helal et al. | Mobile platforms and development environments | |
WO2020221090A1 (zh) | 用于联合运行寄宿应用的方法和设备 | |
CN110083407A (zh) | 小程序中步骤条的实现方法、装置、电子设备及存储介质 | |
CN109491687A (zh) | 一种应用软件的热更新方法、装置、终端及可读介质 | |
CN109582580A (zh) | 用于调试页面的系统、方法和装置 | |
Jaygarl et al. | Professional Tizen Application Development | |
CN111222067B (zh) | 信息生成方法和装置 | |
CN112308657A (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 |