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

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

Info

Publication number
CN114089998A
CN114089998A CN202111273893.3A CN202111273893A CN114089998A CN 114089998 A CN114089998 A CN 114089998A CN 202111273893 A CN202111273893 A CN 202111273893A CN 114089998 A CN114089998 A CN 114089998A
Authority
CN
China
Prior art keywords
file
pull
down selection
component
custom
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
Application number
CN202111273893.3A
Other languages
English (en)
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.)
Guangzhou Xuanwu Wireless Technology Co Ltd
Original Assignee
Guangzhou Xuanwu Wireless Technology Co Ltd
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 Guangzhou Xuanwu Wireless Technology Co Ltd filed Critical Guangzhou Xuanwu Wireless Technology Co Ltd
Priority to CN202111273893.3A priority Critical patent/CN114089998A/zh
Publication of CN114089998A publication Critical patent/CN114089998A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/31Programming languages or programming paradigms
    • G06F8/315Object-oriented languages

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请实施例涉及一种微信小程序自定义下拉选择控件的生成方法及装置、电子设备。获取预设的自定义下拉选择组件,自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件;将自定义下拉选择组件导入微信小程序的components目录,并在pages目录下的index页面中声明自定义下拉选择组件各文件的路径;获取在index页面中的index.js文件当中声明的选项的数据,以及与下拉选择控件的选中值进行双向绑定的变量;在index页面中的index.wxml文件中调用自定义下拉选择组件,并把在index.js文件中声明的选项的数据和双向绑定的变量传给自定义下拉选择组件。本发明用于在选择项少的情况下直观地展示选项,用户可以通过直接点击选择下拉框中展示的选项获取选项对应的数据信息,提高了交互效率。

Description

一种微信小程序自定义下拉选择控件的生成方法及装置
技术领域
本申请实施例涉及小程序开发的技术领域,特别是涉及一种微信小程序自定义下拉选择控件的生成方法及装置、电子设备、计算机可读存储介质。
背景技术
微信小程序,简称小程序,英文名Mini Program,是一种微信手机客户端提供的不需要下载安装即可使用的轻量级的应用程序。在智能手机全面普及的今天,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用,也正因它的便捷性以及所提供服务的广泛性,微信小程序已经成为现代人日常生活不可缺少的一部分。
微信小程序给开发者提供了很多在手机端通用的交互组件与一些可以访问手机硬件的API,总的来说,这些提供给开发者的交互组件的交互方式是比较大众化的并具有普遍性的,在实际的开发当中,往往会有一些交互是官方提供的组件所不能实现的或者与实际的需求并不匹配,这个时候就必须另外去开发。
如图1所示,微信小程序官方所提供的选择控件的交互需要滚动选择,这种交互对于选择项比较的多的情况比较合适,但对于选项比较少,需要直观展示的情况来说,则会增加操作复杂度,大大影响客户使用体验;而且小程序提供的选择控件需要在屏幕底部弹出的区域进行操作,用户在操作时手指的跨度会比较大,因此这种交互控件的交互方式对于喜欢单手操作手机的用户来说其实并不太方便,便捷性和舒适度一般。
发明内容
针对背景技术中的技术问题,本申请实施例提供了一种微信小程序自定义下拉选择控件的生成方法及装置、电子设备、计算机可读存储介质,用于在选择项少的情况下直观地展示选项,用户可以通过直接点击选择下拉框中展示的选项获取选项对应的数据信息,提高了交互的便利性。
本申请实施例的第一方面提供了一种微信小程序自定义下拉选择控件的生成方法,所述方法包括:
获取预设的自定义下拉选择组件,所述自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件,其中,所述json文件中编写有所述微信小程序内置的配置项,所述js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法,所述wxml文件编写有页面或者组件的结构,所述wxss文件编写有页面或组件的样式;
将所述自定义下拉选择组件导入所述微信小程序的components目录,并在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径;
获取在所述index页面中的index.js文件当中声明的选项的数据,以及与所述下拉选择控件的选中值进行双向绑定的变量;
在所述index页面中的index.wxml文件中调用所述自定义下拉选择组件,并把在所述index.js文件中声明的选项的数据和所述双向绑定的变量传给所述自定义下拉选择组件。
进一步地,在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径,具体包括如下步骤:
在所述index页面中的index.js文件中声明选项的数据,所述声明过程发生在data属性中。
进一步地,通过所述微信小程序自定义组件的数据监听机制observers,指定需要监听的对外暴露的变量和变量发生变化后的处理函数。
进一步地,所述自定义下拉选择组件包括下拉框结构,对于生成所述下拉框结构,其特征在于,还包括如下步骤:
通过css属性当中的transition属性,在所述下拉框外包div层;
将所述div层的高度属性height和透明度属性opacity设置为过渡属性
进一步地,所述所述自定义下拉选择组件的结构包括:
下拉框,用于展示选项列表,并且响应用户的点击设置当前的选中项;
选择框,用于显示当前选项,并响应用户的点击展示或者隐藏所述下拉框;
透明全屏模态框,用于当用户点击了非选择框或者非下拉框的区域时,隐藏所述下拉框。
进一步地,所述透明全屏模态框还用于在获取到下拉组件外的区域的点击操作时,触发所述全屏模态框的点击操作事件并将下拉框隐藏。
本申请实施例的第二方面提供了一种微信小程序自定义下拉选择控件的生成装置,所述装置包括:
组件获取装置,用于获取预设的自定义下拉选择组件,所述自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件,其中,所述json文件中编写有所述微信小程序内置的配置项,所述js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法,所述wxml文件编写有页面或者组件的结构,所述wxss文件编写有页面或组件的样式;
导入声明装置,用于将所述自定义下拉选择组件导入所述微信小程序的components目录,并在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径;
选项及变量获取装置,用于获取在所述index页面中的index.js文件当中声明的选项的数据,以及与所述下拉选择控件的选中值进行双向绑定的变量;
组件调用装置,在所述index页面中的index.wxml文件中调用所述自定义下拉选择组件,并把在所述index.js文件中声明的选项的数据和所述双向绑定的变量传给所述自定义下拉选择组件。
进一步地,所述导入声明装置还包括声明选项数据单元;
所述声明选项数据单元用于在所述index页面中的index.js文件中声明选项的数据,所述声明过程发生在data属性中。
本申请实施例的第三方面提供了一种电子设备,包括:
至少一个存储器以及至少一个处理器;
所述存储器,用于存储一个或多个程序;
当所述一个或多个程序被所述至少一个处理器执行,使得所述至少一个处理器实现如本申请实施例的第一方面所述的微信小程序自定义下拉选择控件的生成方法的步骤。
本申请实施例的第四方面提供了一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,使得所述计算机程序被处理器执行时实现如本申请实施例的第一方面所述的微信小程序自定义下拉选择控件的生成方法的步骤。
本发明提供的一种微信小程序自定义下拉选择控件的生成方法,通过预设的自定义下拉选择组件,使得选择控件的选项数据可以作为参数在调用组件的时候传入,并且可以通过微信小程序提供的数据双向绑定的能力,使选择控件选中的值与调用控件的页面当中的某项数据实现同步,即当用户操作选中某个选项之后,该选项的值会自动赋值给双向绑定的变量;又或者当改变页面当中与自定义选中控件双向绑定的变量时,选择控件的当前的选项会变成当前值对应的选项。同时通过下拉框后面设置一个透明的全屏模态框,使得模态框在下拉框显示的时候会出现,当点击到下拉组件外的区域时就会出发该模态框的点击处理事件,将下拉框隐藏,增加了交互的便捷性和直观性,提高了交互效率。
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
附图说明
图1为现有技术中微信小程序所提供的选择控件的结构示意图;
图2为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件的生成方法的流程图;
图3为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件的生成方法的目录示意图;
图4为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件未选择时的效果示意图;
图5为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件点击后的效果示意图;
图6为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件点击下拉框中选项后的效果示意图;
图7为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件生成装置的结构示意图;
图8为在一个示例性的实施例中提供的一种电子设备的结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请实施例方式作进一步地详细描述。
应当明确,所描述的实施例仅仅是本申请实施例一部分实施例,而不是全部的实施例。基于本申请实施例中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例,都属于本申请实施例保护的范围。
在本申请实施例使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本申请实施例。在本申请实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义。还应当理解,本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反,它们仅是如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。在本申请的描述中,需要理解的是,术语“第一”、“第二”、“第三”等仅用于区别类似的对象,而不必用于描述特定的顺序或先后次序,也不能理解为指示或暗示相对重要性。对于本领域的普通技术人员而言,可以根据具体情况理解上述术语在本申请中的具体含义。
此外,在本申请的描述中,除非另有说明,“多个”是指两个或两个以上。“和/或”,描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
针对背景技术中的技术问题,本申请实施例提供了一种微信小程序自定义下拉选择控件的生成方法,用于在选择项少的情况下直观地展示选项,用户可以通过直接点击选择下拉框中展示的选项获取选项对应的数据信息,提高了交互的便利性。
如图2所示,图2为一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件的生成方法的流程图,具体包括如下步骤:
S201:获取预设的自定义下拉选择组件。
其中,该自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件。
具体的,json文件中编写有微信小程序内置的配置项;js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法;wxml文件编写有页面或者组件的结构具体包括组件的标签结构;wxss文件编写有页面或组件的样式。
S202:将自定义下拉选择组件导入小程序的components目录,并在pages目录下的index页面中声明自定义下拉选择组件各文件的路径。
如图3所示,图3为一个示例性实施例提供的一种微信小程序自定义下拉选择控件的生成方法的目录结构示意图。
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,也即包括微信小程序的页面。
S203:获取在index页面中的index.js文件当中声明的选项的数据,以及与下拉选择控件的选中值进行双向绑定的变量。
在一个具体的例子中,相关实现代码如下:
Figure BDA0003328740850000051
Figure BDA0003328740850000061
以上述代码为例,页面page当中的数据都需要声明在data属性当中,其中,options是下拉选择组件选择项的数据,options为对象数组,数组当中的对象分别包括有label属性和value属性,label属性包括选择项显示的文本,value则包括选择项被用户选中时,赋值给绑定变量的值;selectValue则是与选择控件选中值进行双向绑定的变量,例如当用户选中选项2,那么selectValue的值即为opt2。
S204:在index页面中的index.wxml文件中调用所述自定义下拉选择组件,并把在index.js文件中声明的选项的数据和双向绑定的变量传给自定义下拉选择组件。
在一个具体的例子中,相关实现代码如下:
<custom-select model:value="{{selectValue}}"options="{{options}}"></custom-select>
其中,value和options代表下拉选择组件的属性,model为实现数据双向绑定的语法。
调用组件的页面中的数据变量和组件内部的选项的数据变量分别是两个作用域,两部分的变量是相互独立,互不关联互不影响的;双向绑定将组件内外的某两个变量建立同步关系,当其中一个发生变化时,另外一个也跟着变化。由于在页面调用组件时不能直接获取组件内部的数据,而用户操作之后改变的又是组件内部数据,如需获取用户操作的结果,则需在调用组件的页面内设置一个变量与组件内部的变量实现同步;特别的,除了用户操作可以改变组件内部数据之外,在数据回显的时候,也需要通过改变控件对应的变量同时改变组件内部的显示。
在一个具体的例子中,当用户执行了选择操作改变了下拉组件内部当前选项变量currentOption时,在调用下拉组件的页面中的变量selectValue的值也会变为currentOption的value属性的值。其具体实现原理为:selectValue与下拉组件对外暴露的value属性进行了绑定,在进行数据双向绑定后,如果通过setData改变对外暴露的属性的值,就会同步改变与该属性绑定的组件外部变量,实现组件内部变量改变的同时改变组件外部的变量。
在一个优选实施例中,通过数据监听组件observers,实现当组件绑定的外部变量发生改变时,同步改变组件内部变量与显示,具体的,指定需要监听的对外暴露的变量和变量发生变化后处理函数,就可以实现变量的从外到内的改变,代码如下:
Figure BDA0003328740850000062
Figure BDA0003328740850000071
在一个优选的实施例中,所述wxml文件中的下拉选择控件结构包括选择框、下拉框和透明的全屏模态框。其中,选择框的作用是显示当前选项,并响应用户的点击展示或者隐藏下拉框;下拉框的作用是展示选项列表,并且响应用户的点击设置当前的选中项;透明的全屏模态框,作用是在获取到下拉组件外的区域的点击操作时,触发全屏模态框的点击操作事件并将下拉框隐藏,其具体实现代码如下:
Figure BDA0003328740850000072
Figure BDA0003328740850000081
在一个优选的实施例中,对于下拉框显示和隐藏的动画的实现方式使用css语言模块。css动画具有更高的性能,具体实现方式则是在wxss文件中,通过css属性当中的transition属性,在下拉框外包div层,然后将这div层的高度属性height和透明度属性opacity设置为过渡属性,其具体实现代码如下:
Figure BDA0003328740850000082
Figure BDA0003328740850000091
在一个优选的实施例中,自定义下拉选择组件的json文件中编写有所述小程序内置的配置项。在custom-select.json中设置components字段为true,用于表示这是一个组件。
在一个具体的例子中,相关实现代码如下:
{/*components/custom-select/custom-select.json*/
"component":true
}
在一个优选的实施例中,自定义下拉选择组件的js文件具体包括组件的属性、内部数据和方法。
其中,组件属性的相关实现代码为:
Figure BDA0003328740850000092
Figure BDA0003328740850000101
组件的初始数据的相关实现代码为:
Figure BDA0003328740850000102
组件的方法的相关实现代码为:
Figure BDA0003328740850000111
Figure BDA0003328740850000121
生成后的微信小程序自定义下拉选择控件效果图如图4-6所示,其中图4为在一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件未选择时的效果示意图,当用户点击控件之后,选择项将会以图5所示的下拉框的形式展现;当用户点击下拉框中的选项之后,如图6所示下拉框会隐藏,接着控件会显示选中项目的值。
本发明提供的一种微信小程序自定义下拉选择控件的生成方法,通过预设的自定义下拉选择组件,使得选择控件的选项数据可以作为参数在调用组件的时候传入,并且可以通过微信小程序提供的数据双向绑定的能力,使选择控件选中的值与调用控件的页面当中的某项数据实现同步,即当用户操作选中某个选项之后,该选项的值会自动赋值给双向绑定的变量;又或者当改变页面当中与自定义选中控件双向绑定的变量时,选择控件的当前的选项会变成当前值对应的选项。同时通过下拉框后面设置一个透明的全屏模态框,使得模态框在下拉框显示的时候会出现,当点击到下拉组件外的区域时就会出发该模态框的点击处理事件,将下拉框隐藏,增加了交互的便捷性和直观性。
本申请实施例还提供一种微信小程序自定义下拉选择控件的生成装置,如图7所示,图7为一个示例性的实施例中提供的一种微信小程序自定义下拉选择控件的生成装置的结构示意图。
该微信小程序自定义下拉选择控件的生成装置700包括:
组件获取装置701,用于获取预设的自定义下拉选择组件,所述自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件,其中,所述json文件中编写有所述微信小程序内置的配置项,所述js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法,所述wxml文件编写有页面或者组件的结构,所述wxss文件编写有页面或组件的样式;
导入声明装置702,用于将所述自定义下拉选择组件导入所述微信小程序的components目录,并在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径;
选项及变量获取装置703,用于获取在所述index页面中的index.js文件当中声明的选项的数据,以及与所述下拉选择控件的选中值进行双向绑定的变量;
组件调用装置704,用于在所述index页面中的index.wxml文件中调用所述自定义下拉选择组件,并把在所述index.js文件中声明的选项的数据和所述双向绑定的变量传给述自定义下拉选择组件。
在一个示例性的实施例中,导入声明装置702还包括声明选项数据单元,用于在所述index页面中的index.js文件中声明选项的数据,所述声明过程发生在data属性中。
在一个示例性的实施例中,组件获取装置701还包括获取监听机制单元,用于通过所述微信小程序自定义组件的数据监听机制observers,指定需要监听的对外暴露的变量和变量发生变化后的处理函数。
在一个示例性的实施例中,对于微信小程序自定义下拉选择控件的生成装置700,还包括下拉框结构生成单元,用于通过css属性当中的transition属性,在所述下拉框外包div层,将所述div层的高度属性height和透明度属性opacity设置为过渡属性
在一个示例性的实施例中,所述下拉框结构包括:
选择框、下拉框、透明全屏模态框。
在一个示例性的实施例中,所述透明全屏模态框用于在获取到下拉组件外的区域的点击操作时,触发所述全屏模态框的点击操作事件并将下拉框隐藏。
如图8所示,图8是本申请实施例根据一示例性实施例示出的一种电子设备的结构框图。
所述电子设备包括处理器810和存储器820。该主控芯片中处理器810的数量可以是一个或者多个,图8中以一个处理器810为例。该主控芯片中存储器820的数量可以是一个或者多个,图8中以一个存储器820为例。
存储器820作为一种计算机可读存储介质,可用于存储软件程序、计算机可执行程序以及模块,如本申请实施例任意实施例所述的数据仓库的数据模型生成方法程序,以及本申请实施例任意实施例所述的数据仓库的数据模型生成方法对应的程序指令/模块。存储器820可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序;存储数据区可存储根据设备的使用所创建的数据等。此外,存储器820可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中,存储器820可进一步包括相对于处理器810远程设置的存储器,这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
处理器810通过运行存储在存储器820中的软件程序、指令以及模块,从而执行设备的各种功能应用以及数据处理,即实现上述任一实施例所记载的微信小程序自定义下拉选择控件的生成方法。
本发明可采用在一个或多个其中包含有程序代码的存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。计算机可读储存介质包括永久性和非永久性、可移动和非可移动媒体,可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其它数据。计算机的存储介质的例子包括但不限于:相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其它类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其它内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其它光学存储、磁盒式磁带,磁带磁磁盘存储或其它磁性存储设备或任何其它非传输介质,可用于存储可以被计算设备访问的信息。
应当理解的是,本申请实施例并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本申请实施例的范围仅由所附的权利要求来限制。
以上所述实施例仅表达了本申请实施例的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请实施例构思的前提下,还可以做出若干变形和改进,这些都属于本申请实施例的保护范围。

Claims (10)

1.一种微信小程序自定义下拉选择控件的生成方法,其特征在于,所述方法包括如下步骤:
获取预设的自定义下拉选择组件,所述自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件,其中,所述json文件中编写有所述微信小程序内置的配置项,所述js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法,所述wxml文件编写有页面或者组件的结构,所述wxss文件编写有页面或组件的样式;
将所述自定义下拉选择组件导入所述微信小程序的components目录,并在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径;
获取在所述index页面中的index.js文件当中声明的选项的数据,以及与所述下拉选择控件的选中值进行双向绑定的变量;
在所述index页面中的index.wxml文件中调用所述自定义下拉选择组件,并把在所述index.js文件中声明的选项的数据和所述双向绑定的变量传给所述自定义下拉选择组件。
2.根据权利要求1所述的一种微信小程序自定义下拉选择控件的生成方法,其特征在于,在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径,具体包括如下步骤:
在所述index页面中的index.js文件中声明选项的数据,所述声明过程发生在data属性中。
3.根据权利要求1所述的一种微信小程序自定义下拉选择控件的生成方法,其特征在于,还包括如下步骤:
通过所述微信小程序自定义组件的数据监听机制observers,指定需要监听的对外暴露的变量和变量发生变化后的处理函数。
4.根据权利要求1所述的一种微信小程序自定义下拉选择控件的生成方法,所述自定义下拉选择组件包括下拉框结构,对于生成所述下拉框结构,其特征在于,还包括如下步骤:
通过css属性当中的transition属性,在所述下拉框外包div层;
将所述div层的高度属性height和透明度属性opacity设置为过渡属性。
5.根据权利要求4所述的一种微信小程序自定义下拉选择控件的生成方法,其特征在于:
所述所述自定义下拉选择组件的结构包括:
下拉框,用于展示选项列表,并且响应用户的点击设置当前的选中项;
选择框,用于显示当前选项,并响应用户的点击展示或者隐藏所述下拉框;
透明全屏模态框,用于当用户点击了非选择框或者非下拉框的区域时,隐藏所述下拉框。
6.根据权利要求5所述的一种微信小程序自定义下拉选择控件的生成方法,其特征在于:
所述透明全屏模态框还用于在获取到下拉组件外的区域的点击操作时,触发所述全屏模态框的点击操作事件并将下拉框隐藏。
7.一种微信小程序自定义下拉选择控件的生成装置,其特征在于,所述装置包括:
组件获取装置,用于获取预设的自定义下拉选择组件,所述自定义下拉选择组件包括json文件、js文件、wxml文件和wxss文件,其中,所述json文件中编写有所述微信小程序内置的配置项,所述js文件中编写有页面或组件渲染时需要数据或者绑定交互事件的事件处理方法,所述wxml文件编写有页面或者组件的结构,所述wxss文件编写有页面或组件的样式;
导入声明装置,用于将所述自定义下拉选择组件导入所述微信小程序的components目录,并在pages目录下的index页面中声明所述自定义下拉选择组件各文件的路径;
选项及变量获取装置,用于获取在所述index页面中的index.js文件当中声明的选项的数据,以及与所述下拉选择控件的选中值进行双向绑定的变量;
组件调用装置,用于在所述index页面中的index.wxml文件中调用所述自定义下拉选择组件,并把在所述index.js文件中声明的选项的数据和所述双向绑定的变量传给所述自定义下拉选择组件。
8.根据权利要求7所述的一种微信小程序自定义下拉选择控件的生成装置,其特征在于:
所述导入声明装置还包括声明选项数据单元;
所述声明选项数据单元用于在所述index页面中的index.js文件中声明选项的数据,所述声明过程发生在data属性中。
9.一种电子设备,其特征在于,包括:
至少一个存储器以及至少一个处理器;
所述存储器,用于存储一个或多个程序;
当所述一个或多个程序被所述至少一个处理器执行,使得所述至少一个处理器实现如权利要求1至6任一项所述的微信小程序自定义下拉选择控件的生成方法的步骤。
10.一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至6任一项所述的微信小程序自定义下拉选择控件的生成方法的步骤。
CN202111273893.3A 2021-10-29 2021-10-29 一种微信小程序自定义下拉选择控件的生成方法及装置 Pending CN114089998A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111273893.3A CN114089998A (zh) 2021-10-29 2021-10-29 一种微信小程序自定义下拉选择控件的生成方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111273893.3A CN114089998A (zh) 2021-10-29 2021-10-29 一种微信小程序自定义下拉选择控件的生成方法及装置

Publications (1)

Publication Number Publication Date
CN114089998A true CN114089998A (zh) 2022-02-25

Family

ID=80298355

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111273893.3A Pending CN114089998A (zh) 2021-10-29 2021-10-29 一种微信小程序自定义下拉选择控件的生成方法及装置

Country Status (1)

Country Link
CN (1) CN114089998A (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108196832A (zh) * 2018-01-09 2018-06-22 安徽小马创意科技股份有限公司 一种实现使微信小程序支持自定义组件式开发的方法
CN109710258A (zh) * 2018-12-28 2019-05-03 北京金山安全软件有限公司 微信小程序界面生成的方法及装置
CN109828756A (zh) * 2018-12-14 2019-05-31 深圳壹账通智能科技有限公司 基于微信小程序生成保险页面的代码的方法及电子装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108196832A (zh) * 2018-01-09 2018-06-22 安徽小马创意科技股份有限公司 一种实现使微信小程序支持自定义组件式开发的方法
CN109828756A (zh) * 2018-12-14 2019-05-31 深圳壹账通智能科技有限公司 基于微信小程序生成保险页面的代码的方法及电子装置
CN109710258A (zh) * 2018-12-28 2019-05-03 北京金山安全软件有限公司 微信小程序界面生成的方法及装置

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
一瓶小可乐_ZK: ""微信小程序一个简单的select下拉框"", 《HTTPS://BLOG.CSDN.NET/ZK_CSDN917/ARTICLE/DETAILS/109816223》 *
站住,别跑: ""微信小程序之自定义select下拉选项框组件"", 《HTTPS://WWW.CNBLOGS.COM/ZJJDAILY/P/9548433.HTML》 *
辣可乐少加冰: ""微信小程序:自定义组件,数据监听器的使用"", 《HTTPS://BLOG.CSDN.NET/GENGFUGUO/ARTICLE/DETAILS/115997328》 *

Similar Documents

Publication Publication Date Title
US8881055B1 (en) HTML pop-up control
US8904345B2 (en) System and method for orchestration of customization for a user experience
US9514553B2 (en) Personalized content layout
CN111062778A (zh) 产品浏览方法、装置、设备及存储介质
US20200293175A1 (en) Three-dimensional interactive user interface
US20190065440A1 (en) Adaptable user interface layout
CN109960491A (zh) 应用程序生成方法、生成装置、电子设备及存储介质
CN107122457A (zh) 记录网络用户行为数据的方法及其装置、计算机可读介质
CN110147505A (zh) 一种页面展示方法、服务器及存储介质
CN104021016A (zh) 加载浏览器插件图标的方法及浏览器
CN111737609A (zh) 一种web系统菜单栏的展示方法、终端及存储介质
CN104063484A (zh) 一种网页呈现方法、装置及电子设备
US11520473B2 (en) Switch control for animations
CN107391534B (zh) 页面显示、页面文件返回方法及装置、计算机存储介质
CN108319474B (zh) 一种页面信息生成方法、装置和设备
US20140272898A1 (en) System and method of providing compound answers to survey questions
KR20100124708A (ko) 그래픽 정보를 표시하기 위한 방법, 모듈 및 장치
CN102929953A (zh) 网页图片显示装置和方法
US9043464B1 (en) Automatically grouping resources accessed by a user
CN105630893A (zh) 一种组图标题的显示方法和装置
US9104573B1 (en) Providing relevant diagnostic information using ontology rules
CN114089998A (zh) 一种微信小程序自定义下拉选择控件的生成方法及装置
CN108268298B (zh) 桌面图标的生成方法、装置、存储介质及电子设备
CN106055688A (zh) 搜索结果的展现方法、装置和移动终端
US20190073118A1 (en) Semantic dimensions in a user interface

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20220225

RJ01 Rejection of invention patent application after publication