CN110083407B - 小程序中步骤条的实现方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开提供了一种小程序中步骤条的实现方法、装置、电子设备及存储介质，其中，方法包括：显示所述小程序的第一页面，所述第一页面包括由至少两个步骤项构成的步骤条，所述步骤条的显示状态指示所述第一页面所对应的步骤项；响应于针对所述第一页面的第一操作指令，所述第一操作指令指示由所述第一页面跳转至第二页面，更新所述步骤条的显示状态，以提示所述步骤项发生变化；响应于接收到的第二操作指令，调用所述客户端的通信接口发送输入的数据，所述数据通过所述步骤条的各步骤项对应的页面输入。

Description

小程序中步骤条的实现方法、装置、电子设备及存储介质

技术领域

本公开涉及通信技术，尤其涉及一种小程序中步骤条的实现方法、电子设备、装置及存储介质。

背景技术

随着移动互联网的发展、社交客户端、视频分享客户端等在社交网络用户中的普及，开发者以客户端作为互联网中的工具，通过在客户端内运行各种不同的小程序为用户提供差异化的服务。

相关技术中，小程序具有信息录入、数据填充等功能(如电商下单、银行业务、政府业务等)，在小程序运行过程中，需要多次执行页面跳转，用户无法获知当前的操作进度，用户体验低。

发明内容

有鉴于此，本公开实施例提供一种小程序中步骤条的实现方法、装置、电子设备及存储介质。

第一方面，本公开实施例提供一种小程序中步骤条的实现方法，所述小程序运行于客户端，所述方法包括：

显示所述小程序的第一页面，所述第一页面包括由至少两个步骤项构成的步骤条，所述步骤条的显示状态指示所述第一页面所对应的步骤项；

响应于针对所述第一页面的第一操作指令，所述第一操作指令指示由所述第一页面跳转至第二页面，更新所述步骤条的显示状态，以提示所述步骤项发生变化；

响应于接收到的第二操作指令，调用所述客户端的通信接口发送输入的数据，所述数据通过所述步骤条的各步骤项对应的页面输入。

上述方案中，所述更新所述步骤条的显示状态，以提示所述步骤项发生变化，包括：

响应于所述第二页面对应的步骤项为所述第一页面所对应步骤项的相邻步骤项，且所述第二页面对应的步骤项不大于所述步骤条的最大步骤项，

获取所述步骤条的显示信息及所述第二页面的页面数据；

基于所述显示信息及所述页面数据进行页面渲染，使得所述小程序的页面跳转至所述第二页面，所述第二页面中步骤条的显示状态指示当前页面处于所述相邻步骤项。

上述方案中，所述显示信息包括：用于指示当前页面所对应步骤项的第一参数、所述步骤条包括的各步骤项的显示样式、所述各步骤项的启用状态，所述方法还包括：

调整所述第一参数的值，使得当前页面所对应步骤项为所述第二页面对应的步骤项；

更改所述第二页面对应的步骤项的启用状态，以触发依据所述第二页面对应的步骤项的显示样式进行页面渲染。

上述方案中，所述更新所述步骤条的显示状态，以提示所述步骤项发生变化，包括：

响应于所述第二页面对应的步骤项为所述第一页面所对应步骤项的非相邻步骤项，且所述第二页面对应的步骤项的值不大于所述步骤条的步骤项的最大值，

从所述步骤条的第一个步骤项开始，对所述第二页面对应的步骤项及之前的步骤项进行遍历，使得遍历完成后的步骤条的显示状态指示当前页面处于所述非相邻步骤项；

其中，在每次所述遍历中执行以下操作：

获取步骤条的显示信息及当前遍历的步骤项所对应页面的页面数据；

基于所述渲染信息及所述页面数据，渲染所述小程序的页面。

上述方案中，所述方法还包括：

确定所述第二页面对应的步骤项的值大于所述步骤条的步骤项的最大值时，呈现提示信息，所述提示信息用于提示所述第一操作指令的指示错误。

上述方案中，所述方法还包括：

接收到针对第一步骤项的所述第一操作指令，所述第一步骤项为所述步骤条中区别于所述第一页面所对应的步骤项；

或者，接收到针对所述第一页面中独立于步骤条的切换键的所述第一操作指令，所述切换键用于引导执行所述第一页面的相邻页面的跳转。

上述方案中，所述方法还包括：

初始化所述步骤条，使得所述步骤条的显示状态指示当前页面对应所述步骤条中的第一个步骤项。

第二方面，本公开实施例还提供了一种小程序中步骤条的实现装置，所述小程序运行于客户端，所述装置包括：

显示单元，用于显示所述小程序的第一页面，所述第一页面包括由至少两个步骤项构成的步骤条，所述步骤条的显示状态指示所述第一页面所对应的步骤项；

更新单元，用于响应于针对所述第一页面的第一操作指令，所述第一操作指令指示由所述第一页面跳转至第二页面，更新所述步骤条的显示状态，以提示所述步骤项发生变化；

调用单元，用于响应于接收到的第二操作指令，调用所述客户端的通信接口发送输入的数据，所述数据通过所述步骤条的各步骤项对应的页面输入。

上述方案中，所述更新单元，具体用于响应于所述第二页面对应的步骤项为所述第一页面所对应步骤项的相邻步骤项，且所述第二页面对应的步骤项不大于所述步骤条的最大步骤项，

获取所述步骤条的显示信息及所述第二页面的页面数据；

基于所述显示信息及所述页面数据进行页面渲染，使得所述小程序的页面跳转至所述第二页面，所述第二页面中步骤条的显示状态指示当前页面处于所述相邻步骤项。

上述方案中，所述显示信息包括：用于指示当前页面所对应步骤项的第一参数、所述步骤条包括的各步骤项的显示样式、所述各步骤项的启用状态；

所述更新单元，还用于调整所述第一参数的值，使得当前页面所对应步骤项为所述第二页面对应的步骤项；

更改所述第二页面对应的步骤项的启用状态，以触发依据所述第二页面对应的步骤项的显示样式进行页面渲染。

上述方案中，所述更新单元，具体用于响应于所述第二页面对应的步骤项为所述第一页面所对应步骤项的非相邻步骤项，且所述第二页面对应的步骤项的值不大于所述步骤条的步骤项的最大值，

从所述步骤条的第一个步骤项开始，对所述第二页面对应的步骤项及之前的步骤项进行遍历，使得遍历完成后的步骤条的显示状态指示当前页面处于所述非相邻步骤项；

其中，在每次所述遍历中执行以下操作：

获取步骤条的显示信息及当前遍历的步骤项所对应页面的页面数据；

基于所述渲染信息及所述页面数据，渲染所述小程序的页面。

上述方案中，所述显示单元，还用于确定所述第二页面对应的步骤项的值大于所述步骤条的步骤项的最大值时，呈现提示信息，所述提示信息用于提示所述第一操作指令的指示错误。

上述方案中，所述装置还包括：

接收单元，用于接收到针对第一步骤项的所述第一操作指令，所述第一步骤项为所述步骤条中区别于所述第一页面所对应的步骤项；

或者，接收到针对所述第一页面中独立于步骤条的切换键的所述第一操作指令，所述切换键用于引导执行所述第一页面的相邻页面的跳转。

上述方案中，所述装置还包括：

初始化单元，用于初始化所述步骤条，使得所述步骤条的显示状态指示当前页面对应所述步骤条中的第一个步骤项。

第三方面，本公开实施例还提供一种电子设备，包括：

存储器，用于存储可执行指令；

处理器，用于执行所述存储器中存储的可执行指令时，实现本公开实施例提供的上述小程序中步骤条的实现方法。

第四方面，本公开实施例还提供一种存储介质，存储有可执行指令，所述可执行指令被执行时，用于实现本公开实施例提供的上述小程序中步骤条的实现方法。

应用本公开上述实施例具有以下有益效果：

应用本公开上述实施例，小程序显示的第一页面中包括由多个步骤项构成的步骤条，当用户触发第一操作指令时，通过更新步骤条的显示状态提示用户当前页面所对应的步骤项发生变化，在接收到用户触发的第二操作指令时，通过调用客户端的通信接口实现用户输入的数据的提交；如此，通过在小程序中实现步骤条的功能，使得用户实时获知当前的操作进度，提高了用户体验。

附图说明

图1为实现本公开实施例提供的运行客户端的终端的一个结构示意图；

图2为本公开实施例提供的小程序的架构示意图；

图3为本公开实施例提供的小程序中步骤条的实现装置的结构示意图；

图4为本公开实施例提供的小程序中步骤条的实现方法的流程示意图；

图5为本公开实施例提供的小程序首页面包含步骤条的示意图；

图6为本公开实施例提供的小程序的页面包含步骤条的示意图；

图7为本公开实施例提供的小程序中步骤条的示意图；

图8为本公开实施例提供的小程序中操作步骤条的示意图；

图9为本公开实施例提供的小程序中操作切换键的示意图；

图10为本公开实施例提供的小程序中步骤条的实现方法的流程示意图；

图11为本公开实施例提供的小程序中步骤条的实现装置的结构示意图。

具体实施方式

为了使本公开的目的、技术方案和优点更加清楚，下面将结合附图对本公开作进一步地详细描述，所描述的实施例不应视为对本公开的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本公开保护的范围。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解,“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。

在以下的描述中，所涉及的术语“第一\第二”仅仅是是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本公开实施例能够以除了在这里图示或描述的以外的顺序实施。

除非另有定义，本文所使用的所有的技术和科学术语与属于本公开的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本公开实施例的目的，不是旨在限制本公开。

对本公开实施例进行进一步详细说明之前，对本公开实施例中涉及的名词和术语进行说明，本公开实施例中涉及的名词和术语适用于如下的解释。

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中的程序而执行各种适当的动作和处理。在RAM430中，还存储有所述装置操作所需的各种程序和数据。处理装置410、ROM 420以及RAM 430通过总线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 SpecificIntegrated Circuit)、DSP、可编程逻辑器件(PLD，Programmable Logic Device)、复杂可编程逻辑器件(CPLD，Complex Programmable Logic Device)、现场可编程门阵列(FPGA，Field-Programmable Gate Array)或其他电子元件实现，用于执行实现本公开实施例提供的方法。

接下来对小程序中步骤条的实现方法进行说明。图4为本公开实施例提供的小程序中步骤条的实现方法的流程示意图，参见图4，本公开实施例提供的小程序中步骤条的实现方法包括：

步骤501：在客户端中显示小程序的第一页面，第一页面包括由至少两个步骤项构成的步骤条，所述步骤条的显示状态指示第一页面所对应的步骤项。

在实际应用中，客户端获取小程序，并进行小程序的页面的显示，具体地，客户端通过发送小程序的请求以获取小程序的源代码，在本发明实施例中，客户端可以主动或根据用户在客户端中的搜索进行小程序的获取，如用户进入客户端的小程序的功能入口，提示用户安装小程序，或者根据用户以关键字的搜索，下载小程序；在客户端中显示小程序的入口，当接收到触发入口的操作时，触发小程序的请求的发送，以接收返回的小程序的源代码。

需要说明的是，仅在客户端首次运行小程序时需要下载小程序，即获取小程序的源代码，后续可直接应用。

在一实施例中，第一页面为客户端中显示的小程序的首页面，也即小程序的首页面包含由多个步骤项构成的步骤条，首页面对应的是步骤条中的第一个步骤项，首页面中步骤条的显示状态指示了首页面所对应的步骤项；图5为本公开实施例提供的小程序首页面包含步骤条的示意图，参见图5，小程序在渲染首页面的同时对步骤条初始化，使得步骤条的显示状态指示首页面对应第一个步骤项。

在一实施例中，第一页面为小程序基于用户对小程序的页面操作(如点击操作)实现页面跳转后所显示的页面，该页面跳转后所显示的页面中包括由多个步骤项构成的步骤条，该页面中步骤条的显示状态指示该页面所对应的步骤项，在实际应用中，该页面所对应的步骤项可以为步骤条的任意一个步骤项。图6为本公开实施例提供的小程序的页面包含步骤条的示意图，参见图6，当前步骤条的显示状态指示当前页面对应步骤条的第二个步骤项。

这里，对步骤条的初始化进行说明，在小程序渲染对应步骤条中第一个步骤项的页面时对步骤条进行初始化，使得步骤条的显示状态指示当前页面对应第一个步骤项；具体地，初始化变量stepList用于储存步骤条的显示信息，其为一个数组，数组的每一项中，存放每个步骤项的信息，在一实施例中，步骤条的显示信息包括：用于指示当前页面所对应步骤项的第一参数，如第一参数为currentStep，当currentStep为2时表示当前页面对应步骤条的第二个步骤项、步骤条包括的各步骤项的显示样式、步骤条包括的各步骤项的启用状态、步骤项文本信息等。

其中，步骤项的显示样式包括启用样式及弃用样式，启用状态可以为真或假；当某步骤项的启用状态为真时，该步骤项对应的渲染样式为启用样式，当某步骤项的启用状态为假时，该步骤项对应的渲染样式为弃用样式。

在实际应用中，创建<view>标签，作为步骤条的容器标签，在步骤条容器标签中使用小程序的列表循环，对于stepList中的每一项，创建一个<view>标签，作为一个步骤项的容器，在该容器中，插入stepList该步骤项的步骤文本信息，步骤数等信息。同时，利用小程序的条件渲染，通过判断stepList该步骤项的启用状态，如果启用状态为真，则渲染该步骤项的显示样式为启用样式，如该步骤项的启用样式为背景颜色为红色(background属性为'red')；如果启用状态为假，渲染该步骤项的显示样式为弃用样式，如该步骤项的启用样式为背景颜色为灰色。在实际实施时，步骤项的显示样式可以依据实际需要进行设置。

图7为本公开实施例提供的小程序中步骤条的示意图，参见图7，步骤条当前的显示状态指示当前页面处于第二个步骤项，步骤条中第一个步骤项及第二个步骤项所对应的启用状态均为真，显示样式均为启用样式，第三个步骤项及第四个步骤项所对应的启用状态均为假，显示样式均为弃用样式。

步骤502：响应于针对第一页面的第一操作指令，第一操作指令指示由第一页面跳转至第二页面，更新步骤条的显示状态，以提示步骤项发生变化。

在实际应用中，小程序通过视图组件接收到用户触发的第一操作指令，在一实施例中，小程序接收到针对第一步骤项的第一操作指令，第一步骤项为步骤条中区别于第一页面所对应的步骤项；也就是说，用户可以通过直接操作步骤条中的步骤项实现小程序的页面跳转；图8为本公开实施例提供的小程序中操作步骤条的示意图，参见图8，第一页面对应的步骤项为步骤条的第二个步骤项，用户点击步骤条中的第四个步骤项，实现页面跳转至第二页面，第二页面对应步骤条中的第四个步骤项。

在一实施例中，小程序接收到针对第一页面中独立于步骤条的切换键的第一操作指令，所述切换键用于引导执行第一页面的相邻页面的跳转；也就是说，用户可以通过操作页面中显示的切换键，实现至上一页面或下一页面的跳转，图9为本公开实施例提供的小程序中操作切换键的示意图，参见图9，用户通过点击“下一步”实现页面跳转至当前页面的下一相邻页面。

接下来对基于第一操作指令实现步骤条显示状态的更新进行说明。

在一实施例中，小程序可以通过如下方式更新步骤条的显示状态：响应于第二页面对应的步骤项为第一页面所对应步骤项的相邻步骤项，且第二页面对应的步骤项不大于步骤条的最大步骤项，获取步骤条的显示信息及第二页面的页面数据；基于显示信息及页面数据进行页面渲染，使得小程序的页面跳转至第二页面，第二页面中步骤条的显示状态指示当前页面处于所述相邻步骤项。

举例说明，第一页面对应的步骤项为步骤条的第一个步骤项，第二页面对应的步骤项为步骤条的第二个步骤项，小程序在接收到第一操作指令后，确定第一操作指令所指示跳转的第二页面的步骤项的值，判断所获取的步骤项的值是否大于步骤条的最大步骤项的值，如果不大于最大步骤项的值，如小程序包括四个步骤项，即最大步骤项的值为四，则根据步骤条的显示信息(如步骤项的显示样式、步骤项文本信息)及第二页面的页面数据进行页面渲染；如果所获取的步骤项的值大于步骤条的最大步骤项的值，则结束处理流程，或者呈现提示信息，以提示第一操作指令的指示错误。

在一实施例中，小程序的上述页面渲染，可通过如下操作触发：调整用于指示当前页面所对应步骤项的第一参数的值，使得当前页面所对应步骤项为第二页面对应的步骤项；更改第二页面对应的步骤项的启用状态为真，以触发依据第二页面对应的步骤项的显示样式进行页面渲染。

在一实施例中，小程序还可以通过如下方式更新步骤条的显示状态：响应于第二页面对应的步骤项为第一页面所对应步骤项的非相邻步骤项，且第二页面对应的步骤项的值不大于步骤条的步骤项的最大值，从步骤条的第一个步骤项开始，对第二页面对应的步骤项及之前的步骤项进行遍历，使得遍历完成后的步骤条的显示状态指示当前页面处于所述非相邻步骤项；

其中，在每次遍历中执行以下操作：获取步骤条的显示信息及当前遍历的步骤项所对应页面的页面数据；基于所获取的显示信息及页面数据，渲染小程序的页面。

举例说明，第一页面对应的步骤项为步骤条的第一个步骤项，第二页面对应的步骤项为步骤条的第三个步骤项，小程序在接收到第一操作指令后，确定第一操作指令所指示跳转的第二页面的步骤项的值，判断所获取的步骤项的值是否大于步骤条的最大步骤项的值，如果不大于最大步骤项的值，如小程序包括四个步骤项，即最大步骤项的值为四，则对第三个步骤项之前的步骤项(包括第三个步骤项)进行遍历，每次遍历执行一次页面渲染，直至完成对应第三个步骤项的页面的渲染，渲染完成后步骤条的显示状态指示当前页面所处的阶段为步骤条的第三个步骤项。

步骤503：响应于接收到的第二操作指令，调用客户端的通信接口发送输入的数据，所述数据通过步骤条的各步骤项对应的页面输入。

在一实施例中，客户端包括可供小程序调用的通信接口，第二操作指令用于指示提交用户输入的数据至后台服务器，当小程序通过视图组件接收到第二操作指令后，调用客户端的通信接口，发送用户在各步骤项所对应的页面中输入的数据至后台服务器。

应用本发明上述实施例，在客户端运行的小程序中实现步骤条的功能，用户可通过步骤条的显示状态获知当前的操作进度，提高用户体验。

图10为本公开实施例提供的小程序中步骤条的实现方法的流程示意图，参见图10，本公开实施例小程序中步骤条的实现方法包括：

步骤601：客户端获取小程序，显示小程序的首页面，首页面中包括步骤条。

在实际应用中，在客户端中显示小程序的入口，当客户端接收到触发入口的操作时，向客户端的后台服务器发送小程序的请求，以接收小程序的源代码，运行小程序的源代码，以进行小程序的页面显示。

在小程序渲染首页面的同时，进行步骤条的初始化，使得步骤条的显示状态指示首页面对应步骤条中的第一个步骤项。

步骤602：小程序接收到用户触发的第一操作指令，第一操作指令指示跳转至步骤条的第三个步骤项对应的页面。

这里，以步骤条包括四个步骤项为例进行说明。当用户基于小程序的首页面显示的步骤条，点击步骤条中第三个步骤项的图标时，小程序通过视图组件接收到用户触发的指示跳转至第三个步骤项对应页面的操作指令。在实际应用中，如用户通过小程序进行信息录入时，某些步骤项所对应的页面中所需要输入的数据为可选输入，用户在实际进行数据输入时可跳过这些步骤项，通过触发针对需要操作步骤项的操作指令，直接实现页面跳转至相应步骤项的页面，用户无须依次完成每个步骤项，提高了数据输入效率以及用户体验。

步骤603：判断步骤条包括的步骤项的数量是否不小于三，如果是，执行步骤604；否则，执行步骤606。

步骤604：从步骤条的第一个步骤项开始，对第三个步骤项及之前的步骤项进行遍历，使得步骤条的显示状态指示当前页面处于第三个步骤项。

这里，在实际实施时，对于每一次遍历，执行以下操作，以实现页面更新：

获取步骤条的显示信息及当前遍历的步骤项所对应页面的页面数据；基于所获取的显示信息及页面数据，渲染小程序的页面。具体地，对于每一次的遍历，可通过调整用于指示当前页面所对应步骤项的第一参数的值，更改步骤项的启用状态，触发小程序的页面渲染。

步骤605：接收到用户触发的第二操作指令，第二操作指令指示提交用户在步骤条的各步骤项对应的页面输入的数据。

这里，用户在步骤条中各步骤项对应的页面输入数据后可进行数据提交至后台服务器，在一实施例中，步骤条的最后一个步骤项所对应的页面中包含有用于提交输入数据的第一提交键，当小程序的页面切换至步骤条的最后一个步骤项所对应的页面时，用户通过点击第一提交键，实现输入数据的发送；在一实施例中，步骤条的各步骤项所对应的页面中均包含有用于提交输入数据的第二提交键，用户无需等待页面切换至步骤条的最后一个步骤项所对应的页面，可在步骤条对应的任意一个页面进行输入数据的提交，例如，步骤条的显示状态指示当前页面处于第三个步骤项，用户根据自身情况无需在第四个步骤项对应的页面进行数据输入，则可点击第三个步骤项对应页面中的第二提交键实现数据提交。

步骤606：结束本次处理流程。

继续对本公开实施例提供的小程序中步骤条的实现装置进行说明，在实际应用中，小程序中步骤条的实现装置可通过软件模块的形式实施，图11为本公开实施例提供的小程序中步骤条的实现装置的结构示意图，参见图11，本公开实施例小程序中步骤条的实现装置120包括：

显示单元121，用于显示所述小程序的第一页面，所述第一页面包括由至少两个步骤项构成的步骤条，所述步骤条的显示状态指示所述第一页面所对应的步骤项；

更新单元122，用于响应于针对所述第一页面的第一操作指令，所述第一操作指令指示由所述第一页面跳转至第二页面，更新所述步骤条的显示状态，以提示所述步骤项发生变化；

调用单元123，用于响应于接收到的第二操作指令，调用所述客户端的通信接口发送输入的数据，所述数据通过所述步骤条的各步骤项对应的页面输入。

在一实施例中，所述更新单元，具体用于响应于所述第二页面对应的步骤项为所述第一页面所对应步骤项的相邻步骤项，且所述第二页面对应的步骤项不大于所述步骤条的最大步骤项，

获取所述步骤条的显示信息及所述第二页面的页面数据；

基于所述显示信息及所述页面数据进行页面渲染，使得所述小程序的页面跳转至所述第二页面，所述第二页面中步骤条的显示状态指示当前页面处于所述相邻步骤项。

在一实施例中，所述显示信息包括：用于指示当前页面所对应步骤项的第一参数、所述步骤条包括的各步骤项的显示样式、所述各步骤项的启用状态；

所述更新单元，还用于调整所述第一参数的值，使得当前页面所对应步骤项为所述第二页面对应的步骤项；

更改所述第二页面对应的步骤项的启用状态，以触发依据所述第二页面对应的步骤项的显示样式进行页面渲染。

在一实施例中，所述更新单元，具体用于响应于所述第二页面对应的步骤项为所述第一页面所对应步骤项的非相邻步骤项，且所述第二页面对应的步骤项的值不大于所述步骤条的步骤项的最大值，

从所述步骤条的第一个步骤项开始，对所述第二页面对应的步骤项及之前的步骤项进行遍历，使得遍历完成后的步骤条的显示状态指示当前页面处于所述非相邻步骤项；

其中，在每次所述遍历中执行以下操作：

获取步骤条的显示信息及当前遍历的步骤项所对应页面的页面数据；

基于所述渲染信息及所述页面数据，渲染所述小程序的页面。

在一实施例中，所述显示单元，还用于确定所述第二页面对应的步骤项的值大于所述步骤条的步骤项的最大值时，呈现提示信息，所述提示信息用于提示所述第一操作指令的指示错误。

在一实施例中，所述装置还包括：

接收单元，用于接收到针对第一步骤项的所述第一操作指令，所述第一步骤项为所述步骤条中区别于所述第一页面所对应的步骤项；

或者，接收到针对所述第一页面中独立于步骤条的切换键的所述第一操作指令，所述切换键用于引导执行所述第一页面的相邻页面的跳转。

在一实施例中，所述装置还包括：

初始化单元，用于初始化所述步骤条，使得所述步骤条的显示状态指示当前页面对应所述步骤条中的第一个步骤项。

这里需要指出的是：以上涉及小程序中步骤条的实现装置的描述，与上述小程序中步骤条的实现方法描述是类似的，同方法的有益效果描述，不做赘述。对于本公开所述小程序中步骤条的实现装置实施例中未披露的技术细节，请参照本公开方法实施例的描述。

本公开实施例还提供了一种可读存储介质，存储介质可以包括：移动存储设备、随机存取存储器(RAM，Random Access Memory)、只读存储器(ROM，Read-Only Memory)、磁碟或者光盘等各种可以存储程序代码的介质。所述可读存储介质存储有可执行指令；

所述可执行指令，用于被处理器执行时实现本公开实施例提供的小程序中步骤条的实现方法。

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

Claims (9)

1.一种小程序中步骤条的实现方法，其特征在于，所述小程序运行于客户端，所述方法包括：

显示所述小程序的第一页面，所述第一页面包括由至少两个步骤项构成的步骤条，所述步骤条的显示状态指示所述第一页面所对应的步骤项；

响应于针对所述第一页面的第一操作指令，所述第一操作指令指示由所述第一页面跳转至第二页面，更新所述步骤条的显示状态，以提示所述步骤项发生变化；

响应于接收到的第二操作指令，调用所述客户端的通信接口发送输入的数据，所述数据通过所述步骤条的各步骤项对应的页面输入；

其中，所述更新所述步骤条的显示状态，以提示所述步骤项发生变化，包括：

响应于所述第二页面对应的步骤项为所述第一页面所对应步骤项的非相邻步骤项，且所述第二页面对应的步骤项的值不大于所述步骤条的步骤项的最大值，从所述步骤条的第一个步骤项开始，对所述第二页面对应的步骤项及之前的步骤项进行遍历，基于步骤条的显示信息及当前遍历的步骤项所对应页面的页面数据，渲染所述小程序的页面，使得遍历完成后的步骤条的显示状态指示当前页面处于所述非相邻步骤项。

2.如权利要求1所述的方法，其特征在于，所述更新所述步骤条的显示状态，以提示所述步骤项发生变化，包括：

响应于所述第二页面对应的步骤项为所述第一页面所对应步骤项的相邻步骤项，且所述第二页面对应的步骤项不大于所述步骤条的最大步骤项，

获取所述步骤条的显示信息及所述第二页面的页面数据；

基于所述显示信息及所述页面数据进行页面渲染，使得所述小程序的页面跳转至所述第二页面，所述第二页面中步骤条的显示状态指示当前页面处于所述相邻步骤项。

3.如权利要求2所述的方法，其特征在于，所述显示信息包括：用于指示当前页面所对应步骤项的第一参数、所述步骤条包括的各步骤项的显示样式、所述各步骤项的启用状态，所述方法还包括：

调整所述第一参数的值，使得当前页面所对应步骤项为所述第二页面对应的步骤项；

更改所述第二页面对应的步骤项的启用状态，以触发依据所述第二页面对应的步骤项的显示样式进行页面渲染。

4.如权利要求1所述的方法，其特征在于，所述方法还包括：

确定所述第二页面对应的步骤项的值大于所述步骤条的步骤项的最大值时，呈现提示信息，所述提示信息用于提示所述第一操作指令的指示错误。

5.如权利要求1所述的方法，其特征在于，所述方法还包括：

接收到针对第一步骤项的所述第一操作指令，所述第一步骤项为所述步骤条中区别于所述第一页面所对应的步骤项；

或者，接收到针对所述第一页面中独立于步骤条的切换键的所述第一操作指令，所述切换键用于引导执行所述第一页面的相邻页面的跳转。

6.如权利要求1所述的方法，其特征在于，所述方法还包括：

初始化所述步骤条，使得所述步骤条的显示状态指示当前页面对应所述步骤条中的第一个步骤项。

7.一种小程序中步骤条的实现装置，其特征在于，所述小程序运行于客户端，所述装置包括：

显示单元，用于显示所述小程序的第一页面，所述第一页面包括由至少两个步骤项构成的步骤条，所述步骤条的显示状态指示所述第一页面所对应的步骤项；

更新单元，用于响应于针对所述第一页面的第一操作指令，所述第一操作指令指示由所述第一页面跳转至第二页面，更新所述步骤条的显示状态，以提示所述步骤项发生变化；其中，所述第二页面对应的步骤项为所述第一页面所对应步骤项的非相邻步骤项，更新后的所述显示状态指示当前页面处于所述非相邻步骤项；

调用单元，用于响应于接收到的第二操作指令，调用所述客户端的通信接口发送输入的数据，所述数据通过所述步骤条的各步骤项对应的页面输入；

其中，所述更新单元具体用于：

响应于所述第二页面对应的步骤项为所述第一页面所对应步骤项的非相邻步骤项，且所述第二页面对应的步骤项的值不大于所述步骤条的步骤项的最大值，从所述步骤条的第一个步骤项开始，对所述第二页面对应的步骤项及之前的步骤项进行遍历，基于步骤条的显示信息及当前遍历的步骤项所对应页面的页面数据，渲染所述小程序的页面，使得遍历完成后的步骤条的显示状态指示当前页面处于所述非相邻步骤项。

8.一种电子设备，其特征在于，所述设备包括：

存储器，用于存储可执行指令；

处理器，用于执行所述存储器中存储的可执行指令时，实现如权利要求1至6任一项所述的小程序中步骤条的实现方法。

9.一种存储介质，其特征在于，存储有可执行指令，所述可执行指令被执行时，用于实现权利要求1至6任一项所述的小程序中步骤条的实现方法。