一种微信小程序自定义下拉选择控件的生成方法及装置与流程

1.本技术实施例涉及小程序开发的技术领域，特别是涉及一种微信小程序自定义下拉选择控件的生成方法及装置、电子设备、计算机可读存储介质。


背景技术：

2.微信小程序，简称小程序，英文名mini program，是一种微信手机客户端提供的不需要下载安装即可使用的轻量级的应用程序。在智能手机全面普及的今天，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用，也正因它的便捷性以及所提供服务的广泛性，微信小程序已经成为现代人日常生活不可缺少的一部分。
3.微信小程序给开发者提供了很多在手机端通用的交互组件与一些可以访问手机硬件的api，总的来说，这些提供给开发者的交互组件的交互方式是比较大众化的并具有普遍性的，在实际的开发当中，往往会有一些交互是官方提供的组件所不能实现的或者与实际的需求并不匹配，这个时候就必须另外去开发。
4.如图1所示，微信小程序官方所提供的选择控件的交互需要滚动选择，这种交互对于选择项比较的多的情况比较合适，但对于选项比较少，需要直观展示的情况来说，则会增加操作复杂度，大大影响客户使用体验；而且小程序提供的选择控件需要在屏幕底部弹出的区域进行操作，用户在操作时手指的跨度会比较大，因此这种交互控件的交互方式对于喜欢单手操作手机的用户来说其实并不太方便，便捷性和舒适度一般。


技术实现要素：

5.针对背景技术中的技术问题，本技术实施例提供了一种微信小程序自定义下拉选择控件的生成方法及装置、电子设备、计算机可读存储介质，用于在选择项少的情况下直观地展示选项，用户可以通过直接点击选择下拉框中展示的选项获取选项对应的数据信息，提高了交互的便利性。
6.本技术实施例的第一方面提供了一种微信小程序自定义下拉选择控件的生成方法，所述方法包括：
7.获取预设的自定义下拉选择组件，所述自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件，其中，所述json文件中编写有所述微信小程序内置的配置项，所述js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法，所述wxml文件编写有页面或者组件的结构，所述wxss文件编写有页面或组件的样式；
8.将所述自定义下拉选择组件导入所述微信小程序的components目录，并在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径；
9.获取在所述index页面中的index.js文件当中声明的选项的数据，以及与所述下拉选择控件的选中值进行双向绑定的变量；
10.在所述index页面中的index.wxml文件中调用所述自定义下拉选择组件，并把在所述index.js文件中声明的选项的数据和所述双向绑定的变量传给所述自定义下拉选择
组件。
11.进一步地，在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径，具体包括如下步骤：
12.在所述index页面中的index.js文件中声明选项的数据，所述声明过程发生在data属性中。
13.进一步地，通过所述微信小程序自定义组件的数据监听机制observers，指定需要监听的对外暴露的变量和变量发生变化后的处理函数。
14.进一步地，所述自定义下拉选择组件包括下拉框结构，对于生成所述下拉框结构，其特征在于，还包括如下步骤：
15.通过css属性当中的transition属性，在所述下拉框外包div层；
16.将所述div层的高度属性height和透明度属性opacity设置为过渡属性
17.进一步地，所述所述自定义下拉选择组件的结构包括：
18.下拉框，用于展示选项列表，并且响应用户的点击设置当前的选中项；
19.选择框，用于显示当前选项，并响应用户的点击展示或者隐藏所述下拉框；
20.透明全屏模态框，用于当用户点击了非选择框或者非下拉框的区域时，隐藏所述下拉框。
21.进一步地，所述透明全屏模态框还用于在获取到下拉组件外的区域的点击操作时，触发所述全屏模态框的点击操作事件并将下拉框隐藏。
22.本技术实施例的第二方面提供了一种微信小程序自定义下拉选择控件的生成装置，所述装置包括：
23.组件获取装置，用于获取预设的自定义下拉选择组件，所述自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件，其中，所述json文件中编写有所述微信小程序内置的配置项，所述js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法，所述wxml文件编写有页面或者组件的结构，所述wxss文件编写有页面或组件的样式；
24.导入声明装置，用于将所述自定义下拉选择组件导入所述微信小程序的components目录，并在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径；
25.选项及变量获取装置，用于获取在所述index页面中的index.js文件当中声明的选项的数据，以及与所述下拉选择控件的选中值进行双向绑定的变量；
26.组件调用装置，在所述index页面中的index.wxml文件中调用所述自定义下拉选择组件，并把在所述index.js文件中声明的选项的数据和所述双向绑定的变量传给所述自定义下拉选择组件。
27.进一步地，所述导入声明装置还包括声明选项数据单元；
28.所述声明选项数据单元用于在所述index页面中的index.js文件中声明选项的数据，所述声明过程发生在data属性中。
29.本技术实施例的第三方面提供了一种电子设备，包括：
30.至少一个存储器以及至少一个处理器；
31.所述存储器，用于存储一个或多个程序；
32.当所述一个或多个程序被所述至少一个处理器执行，使得所述至少一个处理器实现如本技术实施例的第一方面所述的微信小程序自定义下拉选择控件的生成方法的步骤。
33.本技术实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，使得所述计算机程序被处理器执行时实现如本技术实施例的第一方面所述的微信小程序自定义下拉选择控件的生成方法的步骤。
34.本发明提供的一种微信小程序自定义下拉选择控件的生成方法，通过预设的自定义下拉选择组件，使得选择控件的选项数据可以作为参数在调用组件的时候传入，并且可以通过微信小程序提供的数据双向绑定的能力，使选择控件选中的值与调用控件的页面当中的某项数据实现同步，即当用户操作选中某个选项之后，该选项的值会自动赋值给双向绑定的变量；又或者当改变页面当中与自定义选中控件双向绑定的变量时，选择控件的当前的选项会变成当前值对应的选项。同时通过下拉框后面设置一个透明的全屏模态框，使得模态框在下拉框显示的时候会出现，当点击到下拉组件外的区域时就会出发该模态框的点击处理事件，将下拉框隐藏，增加了交互的便捷性和直观性，提高了交互效率。
35.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
附图说明
36.图1为现有技术中微信小程序所提供的选择控件的结构示意图；
37.图2为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件的生成方法的流程图；
38.图3为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件的生成方法的目录示意图；
39.图4为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件未选择时的效果示意图；
40.图5为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件点击后的效果示意图；
41.图6为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件点击下拉框中选项后的效果示意图；
42.图7为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件生成装置的结构示意图；
43.图8为在一个示例性的实施例中提供的一种电子设备的结构示意图。
具体实施方式
44.为使本技术的目的、技术方案和优点更加清楚，下面将结合附图对本技术实施例方式作进一步地详细描述。
45.应当明确，所描述的实施例仅仅是本技术实施例一部分实施例，而不是全部的实施例。基于本技术实施例中的实施例，本领域普通技术人员在没有作出创造性劳动前提下
所获得的所有其它实施例，都属于本技术实施例保护的范围。
46.在本技术实施例使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本技术实施例。在本技术实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
47.下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本技术相一致的所有实施方式。相反，它们仅是如所附权利要求书中所详述的、本技术的一些方面相一致的装置和方法的例子。在本技术的描述中，需要理解的是，术语“第一”、“第二”、“第三”等仅用于区别类似的对象，而不必用于描述特定的顺序或先后次序，也不能理解为指示或暗示相对重要性。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本技术中的具体含义。
48.此外，在本技术的描述中，除非另有说明，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
49.针对背景技术中的技术问题，本技术实施例提供了一种微信小程序自定义下拉选择控件的生成方法，用于在选择项少的情况下直观地展示选项，用户可以通过直接点击选择下拉框中展示的选项获取选项对应的数据信息，提高了交互的便利性。
50.如图2所示，图2为一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件的生成方法的流程图，具体包括如下步骤：
51.s201：获取预设的自定义下拉选择组件。
52.其中，该自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件。
53.具体的，json文件中编写有微信小程序内置的配置项；js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法；wxml文件编写有页面或者组件的结构具体包括组件的标签结构；wxss文件编写有页面或组件的样式。
54.s202：将自定义下拉选择组件导入小程序的components目录，并在pages目录下的index页面中声明自定义下拉选择组件各文件的路径。
55.如图3所示，图3为一个示例性实施例提供的一种微信小程序自定义下拉选择控件的生成方法的目录结构示意图。
56.components目录下包括custom-select子目录，在该custom-select子目录下，具体包括custom-select.js、custom-select.json、custom-select.wxml和custom-select.wxss，也即包括本实施例所述的自定义下拉选择组件；pages目录包括index子目录，在该index子目录下，具体包括index.js、index.json、index.wxml和index.wxss，也即包括微信小程序的页面。
57.s203：获取在index页面中的index.js文件当中声明的选项的数据，以及与下拉选择控件的选中值进行双向绑定的变量。
58.在一个具体的例子中，相关实现代码如下：
[0059][0060][0061]
以上述代码为例，页面page当中的数据都需要声明在data属性当中，其中，options是下拉选择组件选择项的数据，options为对象数组，数组当中的对象分别包括有label属性和value属性，label属性包括选择项显示的文本，value则包括选择项被用户选中时，赋值给绑定变量的值；selectvalue则是与选择控件选中值进行双向绑定的变量，例如当用户选中选项2，那么selectvalue的值即为opt2。
[0062]
s204：在index页面中的index.wxml文件中调用所述自定义下拉选择组件，并把在index.js文件中声明的选项的数据和双向绑定的变量传给自定义下拉选择组件。
[0063]
在一个具体的例子中，相关实现代码如下：
[0064]
《custom-select model:value＝"{{selectvalue}}"options＝"{{options}}"》《/custom-select》
[0065]
其中，value和options代表下拉选择组件的属性，model为实现数据双向绑定的语法。
[0066]
调用组件的页面中的数据变量和组件内部的选项的数据变量分别是两个作用域，两部分的变量是相互独立，互不关联互不影响的；双向绑定将组件内外的某两个变量建立同步关系，当其中一个发生变化时，另外一个也跟着变化。由于在页面调用组件时不能直接获取组件内部的数据，而用户操作之后改变的又是组件内部数据，如需获取用户操作的结果，则需在调用组件的页面内设置一个变量与组件内部的变量实现同步；特别的，除了用户操作可以改变组件内部数据之外，在数据回显的时候，也需要通过改变控件对应的变量同时改变组件内部的显示。
[0067]
在一个具体的例子中，当用户执行了选择操作改变了下拉组件内部当前选项变量currentoption时，在调用下拉组件的页面中的变量selectvalue的值也会变为currentoption的value属性的值。其具体实现原理为：selectvalue与下拉组件对外暴露的value属性进行了绑定，在进行数据双向绑定后，如果通过setdata改变对外暴露的属性的值，就会同步改变与该属性绑定的组件外部变量，实现组件内部变量改变的同时改变组件外部的变量。
[0068]
在一个优选实施例中，通过数据监听组件observers，实现当组件绑定的外部变量发生改变时，同步改变组件内部变量与显示，具体的，指定需要监听的对外暴露的变量和变量发生变化后处理函数，就可以实现变量的从外到内的改变，代码如下：
[0069][0070][0071]
在一个优选的实施例中，所述wxml文件中的下拉选择控件结构包括选择框、下拉框和透明的全屏模态框。其中，选择框的作用是显示当前选项，并响应用户的点击展示或者隐藏下拉框；下拉框的作用是展示选项列表，并且响应用户的点击设置当前的选中项；透明的全屏模态框，作用是在获取到下拉组件外的区域的点击操作时，触发全屏模态框的点击操作事件并将下拉框隐藏，其具体实现代码如下：
[0072][0073][0074]
在一个优选的实施例中，对于下拉框显示和隐藏的动画的实现方式使用css语言模块。css动画具有更高的性能，具体实现方式则是在wxss文件中，通过css属性当中的transition属性，在下拉框外包div层，然后将这div层的高度属性height和透明度属性opacity设置为过渡属性，其具体实现代码如下：
[0075]
[0076][0077]
在一个优选的实施例中，自定义下拉选择组件的json文件中编写有所述小程序内置的配置项。在custom-select.json中设置components字段为true，用于表示这是一个组件。
[0078]
在一个具体的例子中，相关实现代码如下：
[0079]
{/*components/custom-select/custom-select.json*/
[0080]
"component":true
[0081]
}
[0082]
在一个优选的实施例中，自定义下拉选择组件的js文件具体包括组件的属性、内部数据和方法。
[0083]
其中，组件属性的相关实现代码为：
[0084]
[0085]
组件的初始数据的相关实现代码为：
[0086]
[0087]
组件的方法的相关实现代码为：
[0088]
[0089][0090]
生成后的微信小程序自定义下拉选择控件效果图如图4-6所示，其中图4为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件未选择时的效果示意图，当用户点击控件之后，选择项将会以图5所示的下拉框的形式展现；当用户点击下拉框中的选项之后，如图6所示下拉框会隐藏，接着控件会显示选中项目的值。
[0091]
本发明提供的一种微信小程序自定义下拉选择控件的生成方法，通过预设的自定义下拉选择组件，使得选择控件的选项数据可以作为参数在调用组件的时候传入，并且可以通过微信小程序提供的数据双向绑定的能力，使选择控件选中的值与调用控件的页面当中的某项数据实现同步，即当用户操作选中某个选项之后，该选项的值会自动赋值给双向绑定的变量；又或者当改变页面当中与自定义选中控件双向绑定的变量时，选择控件的当前的选项会变成当前值对应的选项。同时通过下拉框后面设置一个透明的全屏模态框，使得模态框在下拉框显示的时候会出现，当点击到下拉组件外的区域时就会出发该模态框的点击处理事件，将下拉框隐藏，增加了交互的便捷性和直观性。
[0092]
本技术实施例还提供一种微信小程序自定义下拉选择控件的生成装置，如图7所示，图7为一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件的生成装置的结构示意图。
[0093]
该微信小程序自定义下拉选择控件的生成装置700包括：
[0094]
组件获取装置701，用于获取预设的自定义下拉选择组件，所述自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件，其中，所述json文件中编写有所述微信小程序内置的配置项，所述js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法，所述wxml文件编写有页面或者组件的结构，所述wxss文件编写有页面或组件的样式；
[0095]
导入声明装置702，用于将所述自定义下拉选择组件导入所述微信小程序的components目录，并在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径；
[0096]
选项及变量获取装置703，用于获取在所述index页面中的index.js文件当中声明的选项的数据，以及与所述下拉选择控件的选中值进行双向绑定的变量；
[0097]
组件调用装置704，用于在所述index页面中的index.wxml文件中调用所述自定义下拉选择组件，并把在所述index.js文件中声明的选项的数据和所述双向绑定的变量传给述自定义下拉选择组件。
[0098]
在一个示例性的实施例中，导入声明装置702还包括声明选项数据单元，用于在所述index页面中的index.js文件中声明选项的数据，所述声明过程发生在data属性中。
[0099]
在一个示例性的实施例中，组件获取装置701还包括获取监听机制单元，用于通过所述微信小程序自定义组件的数据监听机制observers，指定需要监听的对外暴露的变量和变量发生变化后的处理函数。
[0100]
在一个示例性的实施例中，对于微信小程序自定义下拉选择控件的生成装置700，还包括下拉框结构生成单元，用于通过css属性当中的transition属性，在所述下拉框外包div层，将所述div层的高度属性height和透明度属性opacity设置为过渡属性
[0101]
在一个示例性的实施例中，所述下拉框结构包括：
[0102]
选择框、下拉框、透明全屏模态框。
[0103]
在一个示例性的实施例中，所述透明全屏模态框用于在获取到下拉组件外的区域的点击操作时，触发所述全屏模态框的点击操作事件并将下拉框隐藏。
[0104]
如图8所示，图8是本技术实施例根据一示例性实施例示出的一种电子设备的结构框图。
[0105]
所述电子设备包括处理器810和存储器820。该主控芯片中处理器810的数量可以是一个或者多个，图8中以一个处理器810为例。该主控芯片中存储器820的数量可以是一个或者多个，图8中以一个存储器820为例。
[0106]
存储器820作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本技术实施例任意实施例所述的数据仓库的数据模型生成方法程序，以及本技术实施例任意实施例所述的数据仓库的数据模型生成方法对应的程序指令/模块。存储器820可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据设备的使用所创建的数据等。此外，存储器820可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器820可进一步包括相对于处理器810远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
[0107]
处理器810通过运行存储在存储器820中的软件程序、指令以及模块，从而执行设备的各种功能应用以及数据处理，即实现上述任一实施例所记载的微信小程序自定义下拉选择控件的生成方法。
[0108]
本发明可采用在一个或多个其中包含有程序代码的存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。计算机可读储存介质包括永久性和非永久性、可移动和非可移动媒体，可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其它数据。计算机的存储介质的例子包括但不限于：相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其它类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其它内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其它光学存储、磁盒式磁带，磁带磁磁盘存储或其它磁性存储设备或任何其它非传输介质，可用于存储可以被计算设备访问的信息。
[0109]
应当理解的是，本技术实施例并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本技术实施例的范围仅由所附的权利要求来限制。
[0110]
以上所述实施例仅表达了本技术实施例的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术实施例构思的前提下，还可以做出若干变形和改进，这些都属于本技术实施例的保护范围。