CN109885314A - 小程序自动布局方法和装置 - Google Patents

Abstract

本公开提出一种小程序自动布局方法和装置，其中，方法包括：在获取到调用第一操作事件函数的第一请求时，从所述第一请求中获取当前操作发生的第一位置；根据所述第一位置和预先存储的位置信息列表，确定目标小程序图标；在获取到调用第二操作事件函数的第二请求时，根据所述第二请求中包含的第二位置，调整预先建立的初始数组中所述目标小程序图标的位置信息，生成预布局数组；在监测到结束事件函数被调用时，根据所述预布局数组进行渲染，展示重新布局的小程序列表页面。通过本方法，能够实现小程序图标的自动布局，解决现有技术中无法对小程序进行自动布局的技术问题。

Description

小程序自动布局方法和装置

技术领域

本公开涉及互联网用于技术领域，尤其涉及一种小程序自动布局方法和装置。

背景技术

随着互联网技术的发展，越来越多的互联网企业开始关注小程序的开发。小程序是一种无需下载安装即可使用的应用，受到广大用户的青睐。而伴随着小程序规模的壮大，小程序分发平台也逐渐增多，各小程序在小程序分发平台中以图标的形式展示。

然而，目前的小程序分发平台支持的功能有限，仅支持展示、分类、评论和评分功能，并不支持小程序的自动布局排列功能，用户无法对小程序进行布局。因此，如何实现小程序分发平台中小程序的自动布局，成为亟待解决的问题。

发明内容

本公开提供一种小程序自动布局方法和装置，解决现有技术中无法对小程序进行自动布局的技术问题。

为此，本公开第一方面提出了一种小程序自动布局方法，以实现小程序图标的自动布局，提升用户体验。

本公开第二方面提出了一种小程序自动布局装置。

本公开第三方面提出了一种电子设备。

本公开第四方面提出了一种非暂态计算机可读存储介质。

本公开第五方面提出了一种计算机程序产品。

本公开第一方面实施例提出了一种小程序自动布局方法，包括：

在获取到调用第一操作事件函数的第一请求时，从所述第一请求中获取当前操作发生的第一位置；

根据所述第一位置和预先存储的位置信息列表，确定目标小程序图标；

在获取到调用第二操作事件函数的第二请求时，根据所述第二请求中包含的第二位置，调整预先建立的初始数组中所述目标小程序图标的位置信息，生成预布局数组；

在监测到结束事件函数被调用时，根据所述预布局数组进行渲染，展示重新布局的小程序列表页面。

本公开实施例的小程序自动布局方法，通过在获取到调用第一操作事件函数的第一请求时，从第一请求中获取当前操作发生的第一位置，根据第一位置和预先存储的位置信息列表，确定目标小程序图标，在获取到调用第二操作事件函数的第二请求时，根据第二请求中包含的第二位置，调整预先建立的初始数组中目标小程序图标的位置信息，生成预布局数组，进而，在监测到结束事件函数被调用时，根据预布局数组进行渲染，展示重新布局的小程序列表页面。由此，通过根据移动事件函数中携带的位置信息调整被拖动目标小程序图标的位置信息，并渲染展示位置信息调整后的小程序列表页面，实现了小程序图标的自动布局，为用户调整小程序分发平台中小程序的排列顺序提供了便利，提升了用户体验。

本公开第二方面实施例提出了一种小程序自动布局装置，包括：

获取模块，用于在获取到调用第一操作事件函数的第一请求时，从所述第一请求中获取当前操作发生的第一位置；

确定模块，用于根据所述第一位置和预先存储的位置信息列表，确定目标小程序图标；

调整模块，用于在获取到调用第二操作事件函数的第二请求时，根据所述第二请求中包含的第二位置，调整预先建立的初始数组中所述目标小程序图标的位置信息，生成预布局数组；

渲染模块，用于在监测到结束事件函数被调用时，根据所述预布局数组进行渲染，展示重新布局的小程序列表页面。

本公开实施例的小程序自动布局装置，通过在获取到调用第一操作事件函数的第一请求时，从第一请求中获取当前操作发生的第一位置，根据第一位置和预先存储的位置信息列表，确定目标小程序图标，在获取到调用第二操作事件函数的第二请求时，根据第二请求中包含的第二位置，调整预先建立的初始数组中目标小程序图标的位置信息，生成预布局数组，进而，在监测到结束事件函数被调用时，根据预布局数组进行渲染，展示重新布局的小程序列表页面。由此，通过根据移动事件函数中携带的位置信息调整被拖动目标小程序图标的位置信息，并渲染展示位置信息调整后的小程序列表页面，实现了小程序图标的自动布局，为用户调整小程序分发平台中小程序的排列顺序提供了便利，提升了用户体验。

本公开第三方面实施例提出了一种电子设备，包括：处理器和存储器；其中，所述处理器通过读取所述存储器中存储的可执行程序代码来运行与所述可执行程序代码对应的程序，以用于实现如第一方面实施例所述的小程序自动布局方法。

本公开第四方面实施例提出了一种非暂态计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面实施例所述的小程序自动布局方法。

本公开第五方面实施例提出了一种计算机程序产品，当所述计算机程序产品中的指令由处理器执行时，执行如第一方面实施例所述的小程序自动布局方法。

本公开附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本公开的实践了解到。

附图说明

本公开上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：

图1为本公开一实施例提出的小程序自动布局方法的流程示意图；

图2为本公开另一实施例提出的小程序自动布局方法的流程示意图；

图3为本公开一实施例提出的小程序自动布局装置的结构示意图；

图4为用于实现本公开实施例的电子设备的结构示意图；以及

图5为图示根据本公开的实施例的计算机可读存储介质的示意图。

具体实施方式

下面详细描述本公开的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本公开，而不能理解为对本公开的限制。

下面参考附图描述本公开实施例的小程序自动布局方法和装置。

图1为本公开一实施例提出的小程序自动布局方法的流程示意图，该方法可以由本公开实施例提出的小程序自动布局装置执行，该小程序自动布局装置可以安装于台式电脑、笔记本电脑、智能手机、平板电脑等电子设备中。

如图1所示，该小程序自动布局方法包括以下步骤：

步骤101，在获取到调用第一操作事件函数的第一请求时，从第一请求中获取当前操作发生的第一位置。

其中，第一操作事件函数在用户点击或者按下小程序列表页面中的某个小程序图标时被调用，也就是当用户点击或按下某个小程序图标时，生成第一请求来调用第一操作事件函数，当前操作即指用户当前对小程序图标执行的点击或按下操作。第一操作事件函数比如可以是手指按下事件函数touchstart、鼠标按下事件函数onmousedown。

对于同一小程序分发平台中展示的小程序列表，不同用户对各个小程序的排列顺序要求不同，比如，有的用户希望将购物类的小程序排在小程序列表中靠前的位置，而有的用户希望将视频播放类的小程序排在小程序列表中靠前的位置。

对于已布局好的小程序列表页面，页面中所包含的各小程序图标的位置已确定。当用户想要对页面中的小程序图标进行重新布局，以得到符合自身需求的小程序列表页面时，用户可以选定需要移动的小程序图标。比如，用户可以将鼠标放置在需要移动的小程序图标上，并按下鼠标来选定该小程序图标；或者，用户可以利用手指对需要移动的小程序图标执行按下操作来选定该小程序图标。

以用户利用手指选定需要移动的小程序图标为例。当用户利用手指对小程序列表页面中的某个小程序图标执行按下操作时，会生成调用第一操作事件函数的第一请求，其中，第一请求中包含用户手指当前所触摸位置的位置信息。当小程序自动布局装置获取到调用第一操作事件函数的第一请求时，从第一请求中获取当前操作事件发生的第一位置，即获取用户手指当前所触摸位置的位置信息。

具体实现时，可以为小程序列表页面设置touchstart的回调函数，当用户的手指按住某个小程序图标时，调用touchstart函数，并向该函数里传入一个包含用户手指位置的TouchEvent对象，从该TouchEvent对象中可以获取到用户手指当前所按的位置，即第一位置。

步骤102，根据第一位置和预先存储的位置信息列表，确定目标小程序图标。

其中，位置信息列表可以预先存储在小程序自动布局装置中，位置信息列表中包括在获取到第一请求时，小程序列表界面中每个小程序图标的标识和对应的位置信息，小程序图标的标识可以根据小程序图标的信息在初始数组中的存储位置确定，比如，某个小程序图标的信息作为初始数组的第一个元素存储在初始数组中，则该小程序图标的标识为1。初始数组是预先建立的，初始数组的一个元素对应小程序列表页面中一个小程序图标的信息，小程序图标的信息包括但不限于小程序图标的位置信息、宽高信息、图标的图片资源来源链接等。也就是说，初始数组的长度代表了小程序列表页面中包含的小程序图标的个数，利用初始数组中每个元素的数据，可以渲染出对应的小程序图标，生成小程序列表页面，在渲染时，还可以根据各个元素在初始数组中的位置，为每个小程序图标设置对应的标识。

例如，以下代码初始化了一个长度为2的初始数组：

其中，left表示图标相对于小程序列表页面的左偏移量，top表示图标相对于小程序列表页面的上偏移量，图标的锚点(即自身的原点)是其左上角。根据图标的left值、top值、width值和height值，可以确定该图标在小程序列表页面中的位置，以上述代码定义的第一个图标为例，其该图标的四个顶点在小程序列表页面中的坐标为(100,100)、(300,100)、(100,300)和(300,300)。

对于给定的数组，利用以下代码进行渲染，即可在小程序列表页面中展示对应的小程序图标：

本实施例中，获取了按下操作发生的第一位置后，可以将获取的第一位置与预先存储的位置信息列表中记录的各个位置信息进行匹配，将位置信息列表中与第一位置匹配成功的位置信息所属的小程序图标，确定为目标小程序图标。

作为一种可能的实现方式，可以将第一位置与位置信息列表中的每个位置进行比较，以判断第一位置是否与位置信息列表中任一小程序图标的位置信息相匹配，若第一位置与位置信息列表中的某个位置信息匹配成功，则将与第一位置匹配的目标位置信息对应的小程序图标，确定为目标小程序图标。例如，当第一位置与位置信息列表中的某个位置信息匹配成功时，根据位置信息列表中记录的每个小程序图标的标识和对应的位置信息，可以确定目标位置信息(位置信息列表中与第一位置匹配成功的位置信息)对应的小程序图标的标识，将该标识对应的小程序图标确定为目标小程序图标。

能够理解的是，判断第一位置是否与任一小程序图标的位置信息匹配，可以判断第一位置是否落在小程序图标的位置信息确定的区域范围内。比如，某个小程序图标的位置信息确定的区域范围为(100,100)、(300,100)、(100,300)和(300,300)围成的矩形区域，第一位置为(100,100)，则确定第一位置与该小程序图标的位置信息匹配。

步骤103，在获取到调用第二操作事件函数的第二请求时，根据第二请求中包含的第二位置，调整预先建立的初始数组中目标小程序图标的位置信息，生成预布局数组。

其中，第二操作事件函数在用户拖动目标小程序图标时被调用，第二操作事件函数可以是移动函数，比如鼠标移动事件函数onmousemove、手指移动事件函数touchmove。

本实施例中，用户选定目标小程序图标之后，可以拖动鼠标或手指以使目标小程序图标移动。用户移动目标小程序图标时，小程序自动布局装置会获取到调用第二操作事件函数的第二请求，其中，第二请求中包括鼠标或用户手指当前移动至的第二位置。小程序自动布局装置从第二请求中获取第二位置，并根据第二位置调整初始数组中目标小程序图标的位置信息，得到预布局数组。

具体实现时，可以为小程序列表页面设置touchmove的回调函数，当用户移动按住目标小程序图标的手指时，touchmove函数被调用，并向该函数中传入一个包含用户移动后的手指位置的TouchEvent对象，从该TouchEvent对象中可以获取手指位置，即第二位置。随着用户手指的不断移动，TouchEvent对象中的手指位置随之改变。小程序自动布局装置持续获取第二位置，并根据新获取的第二位置调整目标小程序图标的位置信息。

作为一种可能的实现方式，根据第二位置调整初始数组中目标小程序图标的位置信息，可以通过改变初始数组中目标小程序图标的left值和top值实现。具体地，将初始数组中目标小程序图标的left值调整为第二位置中鼠标或手指相对于小程序列表页面的左偏移量，将初始数组中目标小程序图标的top值调整为第二位置中鼠标或手指相对于小程序列表页面的上偏移量，以使目标小程序图标跟随鼠标或者手指的移动而移动。

在本公开实施例一种可能的实现方式中，当获取到第二请求时，还可以调整目标小程序图标的z-index属性值，比如，各个小程序图标的z-index属性值的初始值均为2000，则可以将目标小程序图标的z-index属性值设置为2010等大于2000的值，以使目标小程序显示在其他小程序图标之上。当各小程序图标的z-index属性值不一致时，可以将目标小程序图标的z-index属性值设置为大于各小程序图标的z-index属性值中的最大值。

步骤104，在监测到结束事件函数被调用时，根据预布局数组进行渲染，展示重新布局的小程序列表页面。

本实施例中，当监测到结束事件函数被调用时，小程序自动布局装置可以根据预布局数组进行渲染，以展示重新布局的小程序列表页面。比如，可以利用前述渲染代码对预布局数组进行渲染，实现小程序列表页面的重新布局。

具体实现时，可以为小程序列表页面设置touchend回调函数，当用户结束鼠标拖动操作或者结束手指触摸拖动操作时，小程序自动布局装置会获取到调用touchend回调函数的请求，并调用touchend回调函数，此时确定touchend回调函数被调用，进而对预布局数组进行渲染处理，实现小程序列表页面中小程序图标的重排。

在本公开实施例一种可能的实现方式中，对小程序列表页面进行重新布局后，还可以根据重新布局后的小程序列表页面中各个小程序图标的标识和位置信息，或者根据预布局数组中记录的各个小程序图标的信息，对预先存储的位置信息列表进行更新，以在后续再次重新布局小程序列表页面时，准确地确定目标小程序图标。

本实施例的小程序自动布局方法，通过在获取到调用第一操作事件函数的第一请求时，从第一请求中获取当前操作发生的第一位置，根据第一位置和预先存储的位置信息列表，确定目标小程序图标，在获取到调用第二操作事件函数的第二请求时，根据第二请求中包含的第二位置，调整预先建立的初始数组中目标小程序图标的位置信息，生成预布局数组进而，在监测到结束事件函数被调用时，根据预布局数组进行渲染，展示重新布局的小程序列表页面。由此，通过根据移动事件函数中携带的位置信息调整被拖动目标小程序图标的位置信息，并渲染展示位置信息调整后的小程序列表页面，实现了小程序图标的自动布局，为用户调整小程序分发平台中小程序的排列顺序提供了便利，提升了用户体验。

图2为本公开另一实施例提出的小程序自动布局方法的流程示意图。

如图2所示，该小程序自动布局方法，可以包括以下步骤：

步骤201，在获取到调用第一操作事件函数的第一请求时，从第一请求中获取当前操作发生的第一位置。

步骤202，根据第一位置和预先存储的位置信息列表，确定目标小程序图标。

本实施例中，对步骤201-步骤202的描述，参见前述实施例中对步骤101-步骤102的描述，此处不再赘述。

步骤203，在获取到调用第二操作事件函数的第二请求时，判断初始数组的状态变量的值是否为第一预设值。

其中，在获取到调用第一操作事件函数的第一请求时，初始数组的状态变量被设置为第一预设值。

具体实现时，可以为初始数组的状态变量设置初始值，其中，初始值不同于第一预设值，比如，初始值设置为0，当获取到第一请求时，将状态变量的值设为1。

本实施例中，在获取到调用第二操作事件函数的第二请求时，小程序自动布局装置判断初始数组的状态变量的值是否为第一预设值，若是，则执行步骤204，否则，跳转至步骤213，结束本地布局流程。

步骤204，根据第二请求中包含的第二位置，调整初始数组中目标小程序图标的位置信息。

本实施例中，对步骤204的描述，可以参见前述实施例中对步骤103的描述，此处不再赘述。

步骤205，将调整后的目标小程序图标的位置信息与位置信息列表中其他小程序图标的位置信息进行比较，其中，其他小程序图标是位置信息列表中除目标小程序图标外的小程序图标。

本实施例中，对目标小程序图标的位置信息进行调整后，可以将调整后的目标小程序图标的位置信息，与预先存储的位置信息列表中除目标小程序图标外的其他小程序图标的位置信息进行比较，以判断调整后的目标小程序图标的位置信息是否与其他小程序图标中某个小程序图标的位置信息匹配。

步骤206，若调整后的目标小程序图标的位置信息与其他小程序图标中任一小程序图标的位置信息匹配，则根据任一小程序图标的标识，确定任一小程序图标在初始数组中的目标位置。

本实施例中，若获知调整后的目标小程序图标的位置信息与其他小程序中任一小程序图标的位置信息匹配，则确定该匹配的任一小程序图标与目标小程序图标重合，进而根据被重合小程序图标的标识，确定被重合小程序图标在初始数组中的目标位置。

由于位置信息列表中记录的是小程序列表界面中每个小程序图标的标识和对应的位置信息，从而，本实施例中，当位置信息列表中某个小程序图标的位置信息与调整后的目标小程序图标的位置信息匹配时，可以根据位置信息与小程序图标的标识之间的对应关系，获取与目标小程序图标重合的小程序图标的标识，进而根据确定的标识，确定目标位置。比如，确定的标识为3，则确定初始数组中的第三个元素所在的位置为目标位置。

步骤207，在目标位置***预设图标的信息，生成预布局数组。

步骤208，根据预布局数组进行渲染，展示预布局的小程序列表页面。

本实施例中，确定了目标位置之后，可以在目标位置处***预设图标的信息，得到预布局数组。

其中，预设图标的信息至少包括但预设图标的高度和宽度，以及相对于小程序列表页面的左偏移量和上偏移量，还可以选择性地包括预设图标的图片资源来源链接、z-index属性值等。预设图标的高度、宽度、左偏移量和上偏移量可以预先设置，也可以将目标位置处原有小程序图标的高度、宽度、左偏移量和上偏移量，分别设置为预设图标的高度、宽度、左偏移量和上偏移量，本公开对此不作限制。

能够理解的是，在目标位置处***预设图标后，目标位置处原有小程序图标的位置信息及其之后的所有小程序图标的位置信息也随之改变。

进而，对生成的预布局数组进行渲染处理，以展示预布局的小程序列表页面。通过预布局，能够方便用户预先了解重新布局后小程序列表页面的展示样式，以便在用户不满意是即时更改布局。

步骤209，监测到结束事件函数被调用时，判断预布局数组的状态变量的值是否为第二预设值。

其中，第二预设值可以预先设定，第二预设值与状态变量的初始值和第一预设值均不同，可以在进入预布局阶段时，即获知调整后的目标小程序图标与其它小程序图标重合后，将状态变量的值设置为第二预设值。比如，初始数组的状态变量的初始值设置为0；当获取到第一请求时，将状态变量的值设为1(第一预设值)；在根据第二请求中包含的第二位置调整初始数组中目标小程序图标的位置信息之后，若获取调整后的目标小程序图标的位置信息与某个其他小程序图标的位置信息相匹配，则进入预布局阶段，并将初始数组的状态变量的值设置为2(第二预设值)。由于预布局数组是在预布局阶段中，在初始数组中添加了预设图标后生成的，因此，预布局数组的状态变量的值为2。

本实施例中，当监测到结束事件函数被调用时，可以判断预布局数组的状态变量的值是否为第二预设值，若状态变量的值为第二预设值，则执行步骤210，否则，执行步骤212。

步骤210，当预布局数组的状态变量的值为第二预设值时，将预布局数组中预设图标的信息，替换为目标小程序图标的信息，生成目标布局数组。

步骤211，根据目标布局数组进行渲染，展示重新布局的小程序列表页面。

本实施例中，当获知预布局数组的状态变量的值为第二预设值时，则将预布局数组中预设图标的信息，替换为目标小程序图标的信息，生成目标布局数组。

具体实现时，可以在确定目标小程序图标之后，根据目标小程序图标的标识，从初始数组中获取与标识对应的数组的元素，将该元素对应的目标小程序图标的信息，存储在预先定义的selectedID变量中。在每次根据第二位置调整初始数组中目标小程序图标的位置信息时，同时根据第二位置更新selectedID变量中目标小程序图标的位置信息；或者，可以在获知调整后的目标小程序图标的位置信息与某个小程序图标的位置信息匹配时，将selectedID变量中目标小程序图标的位置信息更新为当前调整后的位置信息。进而，当获知状态变量的值为第二预设值时，从selectedID变量中获取目标小程序图标的信息来替换预布局数组中预设图标的信息，得到目标布局数组。

进而，得到目标布局数组后，即可对目标布局数组进行渲染处理，以展示重新布局的小程序列表页面，完成布局。在进行渲染后，重新布局的小程序列表页面中各小程序图标的标识也被重新标记，还可以更新位置信息列表，以在下次布局时使用。

步骤212，当预布局数组的状态变量的值非第二预设值时，对预先缓存的初始数组进行渲染，展示初始布局的小程序列表页面。

本实施例中，可以在获取到第一请求时，对初始数组进行缓存以备用。当获知预布局数组的状态变量的值不是第二预设值时，对预先缓存的初始数组进行渲染处理，以展示初始布局的小程序列表页面，将小程序列表页面恢复为获取到第一请求时的状态。

在本公开实施例一种可能的实现方式中，当获知预布局数组的状态变量的值不是第二预设值时，还可以将状态变量的值重置为初始状态。具体实现时，可以在获取到第一请求时，将初始数组的状态变量的值赋值给预先定义的initList变量，在获知状态变量的值不是第二预设值时，将状态变量的值设置为initList变量的值。

步骤213，结束。

本实施例中，当完成自动布局，或者恢复为初始布局，或者在获知初始数组的状态变量的值不是第一预设值时，结束本次布局流程。

本实施例的小程序自动布局方法，通过在确定初始数组的状态变量的值为第一预设值时，才根据第二位置信息调整初始数组中目标小程序图标的位置信息，能够避免在未移动目标小程序图标时调整目标小程序图标的位置信息带来的工作量，节省了处理流程；通过在获知调整后的目标小程序图标的位置信息与其他小程序图标中任一小程序图标的位置信息匹配时，根据任一小程序图标的标识，确定任一小程序图标在初始数组中的目标位置，进而在目标位置***预设图标的信息生成预布局数组，根据预布局数组进行渲染，以展示预布局的小程序列表页面，能够方便用户预先了解重新布局后小程序列表页面的展示样式，以便在用户不满意是即时更改布局；通过在状态变量为第二预设值时利用目标小程序图标的信息替换预设图标的信息生成目标布局数组，根据目标布局数组进行渲染，以展示重新布局的小程序列表页面，在状态变量的值不是第二预设值时，对预先缓存的初始数组进行渲染，以展示初始布局的小程序列表页面，不仅能够实现小程序图标的自动布局，还可以在未进入预布局状态时恢复为初始布局，保证了小程序列表页面的正常显示，提升了用户体验。

在本公开实施例一种可能的实现方式中，当监测到取消事件函数被调用时，则根据预先缓存的初始数组进行渲染，以展示初始布局的小程序列表页面。

具体实现时，可以为小程序列表页面设置一个touchtouchcancel回调函数，当手指的触摸操作或者鼠标的点击操作被中断时，调用该touchtouchcancel回调函数。比如，当来电或弹出弹窗时，调用该touchtouchcancel回调函数。当touchtouchcancel回调函数被调用时，对预先缓存的初始数组进行渲染处理，以恢复初始布局的小程序列表页面，并将状态变量的值重置为初始值。

在本公开实施例一种可能的实现方式中，可以为每个小程序图标设置transition(过渡)属性，在设置时，需设置transition属性所针对的样式(比如weight、height等)以及效果时长，以在各小程序图标从一种样式变化为另一种样式时，以效果时长逐渐变化。比如，将各小程序图标的所有样式的transition属性均设置为0.5秒，则任一小程序图标在任何改变其外观或位置的样式属性变化时，均产生0.5秒的过渡效果。

为了实现上述实施例，本公开还提出一种小程序自动布局装置。

图3为本公开一实施例提出的小程序自动布局装置的结构示意图。

如图3所示，该小程序自动布局装置40包括：获取模块410、确定模块420、调整模块430，以及渲染模块440。

其中，获取模块410，用于在获取到调用第一操作事件函数的第一请求时，从第一请求中获取当前操作发生的第一位置。

确定模块420，用于根据第一位置和预先存储的位置信息列表，确定目标小程序图标。

在本公开实施例一种可能的实现方式中，确定模块420用于判断第一位置是否与位置信息列表中任一小程序图标的位置信息匹配；若是，则将与第一位置匹配的目标位置信息对应的小程序图标，确定为目标小程序图标。

调整模块430，用于在获取到调用第二操作事件函数的第二请求时，根据第二请求中包含的第二位置，调整预先建立的初始数组中目标小程序图标的位置信息，生成预布局数组。

渲染模块440，用于在监测到结束事件函数被调用时，根据预布局数组进行渲染，展示重新布局的小程序列表页面。

在本公开实施例一种可能的实现方式中，调整模块430还用于在根据第二请求中包含的第二位置，调整预先建立的初始数组中目标小程序图标的位置信息之前，确定初始数组的状态变量的值为第一预设值。

本实施例中，调整模块430还用于在根据第二请求中包含的第二位置，调整预先建立的初始数组中目标小程序图标的位置信息之后，将调整后的目标小程序图标的位置信息与位置信息列表中其他小程序图标的位置信息进行比较，其中，其他小程序图标是所述位置信息列表中除目标小程序图标外的小程序图标；若调整后的目标小程序图标的位置信息与其他小程序图标中任一小程序图标的位置信息匹配，则根据任一小程序图标的标识，确定任一小程序图标在初始数组中的目标位置；在目标位置***预设图标的信息，生成预布局数组；根据预布局数组进行渲染，展示预布局的小程序列表页面。

本实施例中，渲染模块440还用于在监测到结束事件函数被调用之后，判断预布局数组的状态变量的值是否为第二预设值；当预布局数组的状态变量的值为第二预设值时，将预布局数组中所述预设图标的信息，替换为目标小程序图标的信息，生成目标布局数组；根据目标布局数组进行渲染，展示重新布局的小程序列表页面。

渲染模块440还用于当预布局数组的状态变量的值非第二预设值时，对预先缓存的初始数组进行渲染，展示初始布局的小程序列表页面。

在本公开实施例一种可能的实现方式中，渲染模块440还用于在监测到取消事件函数被调用时，根据预先缓存的初始数组进行渲染，展示初始布局的小程序列表页面。

需要说明的是，前述对小程序自动布局方法实施例的解释说明也适用于该实施例的小程序自动布局装置，其实现原理类似，此处不再赘述。

本公开实施例的小程序自动布局装置，通过在获取到调用第一操作事件函数的第一请求时，从第一请求中获取当前操作发生的第一位置，根据第一位置和预先存储的位置信息列表，确定目标小程序图标，在获取到调用第二操作事件函数的第二请求时，根据第二请求中包含的第二位置，调整预先建立的初始数组中目标小程序图标的位置信息，生成预布局数组，进而，在监测到结束事件函数被调用时，根据预布局数组进行渲染，展示重新布局的小程序列表页面。由此，通过根据移动事件函数中携带的位置信息调整被拖动目标小程序图标的位置信息，并渲染展示位置信息调整后的小程序列表页面，实现了小程序图标的自动布局，为用户调整小程序分发平台中小程序的排列顺序提供了便利，提升了用户体验。

为了实现上述实施例，本公开还提出一种电子设备，包括：处理器和存储器。其中，处理器通过读取存储器中存储的可执行程序代码来运行与可执行程序代码对应的程序，以用于实现如前述实施例所述的小程序自动布局方法。

下面参考图4，其示出了适于用来实现本公开实施例的电子设备800的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图4示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图4所示，电子设备800可以包括处理装置(例如中央处理器、图形处理器等)801，其可以根据存储在只读存储器(ROM)802中的程序或者从存储装置808加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。在RAM 803中，还存储有电子设备800操作所需的各种程序和数据。处理装置801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。

通常，以下装置可以连接至I/O接口805：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置806；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置807；包括例如磁带、硬盘等的存储装置808；以及通信装置809。通信装置809可以允许电子设备800与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的电子设备800，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置809从网络上被下载和安装，或者从存储装置808被安装，或者从ROM 802被安装。在该计算机程序被处理装置801执行时，执行本公开实施例的方法中限定的上述功能。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：在获取到调用第一操作事件函数的第一请求时，从所述第一请求中获取当前操作发生的第一位置；根据所述第一位置和预先存储的位置信息列表，确定目标小程序图标；在获取到调用第二操作事件函数的第二请求时，根据所述第二请求中包含的第二位置，调整预先建立的初始数组中所述目标小程序图标的位置信息，生成预布局数组；在监测到结束事件函数被调用时，根据所述预布局数组进行渲染，展示重新布局的小程序列表页面。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，模块的名称在某种情况下并不构成对该模块本身的限定，例如，确定模块还可以被描述为“根据所述第一位置和预先存储的位置信息列表，确定目标小程序图标的模块”。

为了实现上述实施例，本公开还提出一种非暂态计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如前述实施例所述的小程序自动布局方法。

图5为图示根据本公开的实施例的计算机可读存储介质的示意图。如图5所示，根据本公开实施例的计算机可读存储介质300，其上存储有非暂态计算机可读指令310。当该非暂态计算机可读指令310由处理器运行时，执行前述的本公开各实施例的文字输入方法的全部或部分步骤。

为了实现上述实施例，本公开还提出一种计算机程序产品，当该计算机程序产品中的指令由处理器执行时，实现如前述实施例所述的小程序自动布局方法。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本公开的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本公开的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现定制逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本公开的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本公开的实施例所属技术领域的技术人员所理解。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行***、装置或设备(如基于计算机的***、包括处理器的***或其他可以从指令执行***、装置或设备取指令并执行指令的***)使用，或结合这些指令执行***、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行***、装置或设备或结合这些指令执行***、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本公开的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行***执行的软件或固件来实现。如，如果用硬件来实现和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本公开各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。尽管上面已经示出和描述了本公开的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本公开的限制，本领域的普通技术人员在本公开的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (10)

1.一种小程序自动布局方法，其特征在于，包括：

在获取到调用第一操作事件函数的第一请求时，从所述第一请求中获取当前操作发生的第一位置；

根据所述第一位置和预先存储的位置信息列表，确定目标小程序图标；

在获取到调用第二操作事件函数的第二请求时，根据所述第二请求中包含的第二位置，调整预先建立的初始数组中所述目标小程序图标的位置信息，生成预布局数组；

在监测到结束事件函数被调用时，根据所述预布局数组进行渲染，展示重新布局的小程序列表页面。

2.如权利要求1所述的方法，其特征在于，所述根据所述第一位置和预先存储的位置信息列表，确定目标小程序图标，包括：

判断所述第一位置是否与所述位置信息列表中任一小程序图标的位置信息匹配；

若是，则将与所述第一位置匹配的目标位置信息对应的小程序图标，确定为目标小程序图标。

3.如权利要求1所述的方法，其特征在于，在所述根据所述第二请求中包含的第二位置，调整预先建立的初始数组中所述目标小程序图标的位置信息之前，还包括：

确定所述初始数组的状态变量的值为第一预设值。

4.如权利要求1所述的方法，其特征在于，在所述根据所述第二请求中包含的第二位置，调整预先建立的初始数组中所述目标小程序图标的位置信息之后，还包括：

将调整后的所述目标小程序图标的位置信息与所述位置信息列表中其他小程序图标的位置信息进行比较，其中，所述其他小程序图标是所述位置信息列表中除所述目标小程序图标外的小程序图标；

若所述调整后的所述目标小程序图标的位置信息与所述其他小程序图标中任一小程序图标的位置信息匹配，则根据所述任一小程序图标的标识，确定所述任一小程序图标在所述初始数组中的目标位置；

所述生成预布局数组，包括：

在所述目标位置***预设图标的信息，生成预布局数组；

根据所述预布局数组进行渲染，展示预布局的小程序列表页面。

5.如权利要求4所述的方法，其特征在于，在所述监测到结束事件函数被调用之后，还包括：

判断所述预布局数组的状态变量的值是否为第二预设值；

所述根据所述预布局数组进行渲染，展示重新布局的小程序列表页面，包括：

当所述预布局数组的状态变量的值为第二预设值时，将所述预布局数组中所述预设图标的信息，替换为所述目标小程序图标的信息，生成目标布局数组；

根据所述目标布局数组进行渲染，展示重新布局的小程序列表页面。

6.如权利要求5所述的方法，其特征在于，在所述判断所述预布局数组的状态变量的值是否为第二预设值之后，还包括：

当所述预布局数组的状态变量的值非第二预设值时，对预先缓存的所述初始数组进行渲染，以展示初始布局的小程序列表页面。

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

若监测到取消事件函数被调用，则根据预先缓存的所述初始数组进行渲染，展示初始布局的小程序列表页面。

8.一种小程序自动布局装置，其特征在于，包括：

获取模块，用于在获取到调用第一操作事件函数的第一请求时，从所述第一请求中获取当前操作发生的第一位置；

确定模块，用于根据所述第一位置和预先存储的位置信息列表，确定目标小程序图标；

调整模块，用于在获取到调用第二操作事件函数的第二请求时，根据所述第二请求中包含的第二位置，调整预先建立的初始数组中所述目标小程序图标的位置信息，生成预布局数组；

渲染模块，用于在监测到结束事件函数被调用时，根据所述预布局数组进行渲染，展示重新布局的小程序列表页面。

9.一种电子设备，其特征在于，包括处理器和存储器；

其中，所述处理器通过读取所述存储器中存储的可执行程序代码来运行与所述可执行程序代码对应的程序，以用于实现如权利要求1-7中任一项所述的小程序自动布局方法。

10.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7中任一项所述的小程序自动布局方法。