第六章总结

2024-04-02 22:05| 来源: 网络整理| 查看: 265

1.微信小程序表单组件 1.1button按钮组件

type的属性值有三种

primary 绿色default 白色warn 红色

除了这种方式可以设置按钮大小，还有其他的通过视图来控制按钮的方式，因为我们知道，微信小程序的按钮并不都是这三种颜色。其他方式比如把按钮放在一个view中。然后对这个view做修改，把可以圆形，方形等等，对应里边的按钮自然会占满整个view，形状也就被改变了

button按钮组件的属性属性类型默认值说明sizestringdefault按钮的大小，有效值为default、minitypestringdefault按钮的样式类型，有效值：基本类型为primary，默认类型为default，警告类型为warnplainbooleanfalse按钮是否镂空，背景色透明disabledbooleanfalse是否禁用loadingbooleanfalse名称前是否带loading图标form-typestring无有效值为submit、reset，用于组件，单击分别会触发submit/reset事件open-typestring否微信开放功能，详见表后关于open-type合法值的介绍hover-classstringbutton-hover指定按钮按下去的样式类。当 `hover-class="none"` 时，没有点击态效果 hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态 hover-start-timenumber20按住后多久出现点击态，单位毫秒 hover-stay-timenumber70手指松开后点击态保留时间，单位毫秒 langstringen指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。session-fromstring否会话来源，open-type="contact"时有效 send-message-title string否会话内消息卡片标题，open-type="contact"时有效 send-message-pathstring否会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 send-message-img string否会话内消息卡片图片，open-type="contact"时有效 app-parameterstring否打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 show-message-cardbooleanfalse是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 bindgetuserinfoeventhandle否用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 bindcontacteventhandle否客服消息回调，open-type="contact"时有效 bindgetphonenumbereventhandle否获取用户手机号回调，open-type=getPhoneNumber时有效 binderror eventhandle否当使用开放能力时，发生错误的回调，open-type=launchApp时有效 bindopensettingeventhandle否在打开授权设置页后回调，open-type=openSetting时有效 bindlaunchappeventhandle否打开 APP 成功的回调，open-type=launchApp时有效 bindchooseavatar eventhandle否获取用户头像回调，open-type=chooseAvatar时有效 2.checkbox多选项目组件属性说明属性类型默认值必填说明最低版本valuestring否checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value1.0.0disabledbooleanfalse否是否禁用1.0.0checkedbooleanfalse否当前是否选中，可用来设置默认选中1.0.0colorstring#09BB07否checkbox的颜色，同css的color1.0.0 3.checkbox-group 属性类型默认值必填说明最低版本bindchangeEventHandle否checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}1.0.0 4.radio单选项目组件属性说明属性类型默认值必填说明最低版本valuestring否radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value1.0.0checkedbooleanfalse否当前是否选中1.0.0disabledbooleanfalse否是否禁用1.0.0colorstring#09BB07否radio的颜色，同css的color1.0.0 5.input输入框组件属性类型默认值必填说明最低版本valuestring是输入框的初始内容1.0.0typestringtext否input 的类型1.0.0 合法值说明最低版本text文本输入键盘number数字输入键盘idcard身份证输入键盘digit带小数点的数字键盘safe-password密码安全输入键盘指引2.18.0nickname昵称输入键盘2.21.2passwordbooleanfalse否是否是密码类型1.0.0placeholderstring是输入框为空时占位符1.0.0placeholder-stylestring是指定 placeholder 的样式1.0.0placeholder-classstringinput-placeholder否指定 placeholder 的样式类1.0.0disabledbooleanfalse否是否禁用1.0.0maxlengthnumber140否最大输入长度，设置为 -1 的时候不限制最大长度1.0.0cursor-spacingnumber0否指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离1.0.0auto-focusbooleanfalse否(即将废弃，请直接使用 focus )自动聚焦，拉起键盘1.0.0focusbooleanfalse否获取焦点1.0.0confirm-typestringdone否设置键盘右下角按钮的文字，仅在type='text'时生效1.1.0 ys-embedbooleanfalse否强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)2.10.4confirm-holdbooleanfalse否点击键盘右下角按钮时是否保持键盘不收起1.1.0cursornumber是指定focus时的光标位置1.5.0selection-startnumber-1否光标起始位置，自动聚集时有效，需与selection-end搭配使用1.9.0selection-endnumber-1否光标结束位置，自动聚集时有效，需与selection-start搭配使用1.9.0adjust-positionbooleantrue否键盘弹起时，是否自动上推页面1.9.90hold-keyboardbooleanfalse否focus时，点击页面的时候不收起键盘2.8.2safe-password-cert-pathstring否安全键盘加密公钥的路径，只支持包内路径2.18.0safe-password-lengthnumber否安全键盘输入密码长度2.18.0safe-password-time-stampnumber否安全键盘加密时间戳2.18.0safe-password-noncestring否安全键盘加密盐值2.18.0safe-password-saltstring否安全键盘计算hash盐值，若指定custom-hash 则无效2.18.0safe-password-custom-hashstring否安全键盘计算hash的算法表达式，如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))`2.18.0bindinputeventhandle是键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。1.0.0bindfocuseventhandle是输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持1.0.0bindblureventhandle是输入框失去焦点时触发，event.detail = { value, encryptedValue, encryptError }1.0.0bindconfirmeventhandle是点击完成按钮时触发，event.detail = { value }1.0.0bindkeyboardheightchangeeventhandle是键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}2.7.0bindnicknamerevieweventhandle是用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效，event.detail = { pass, timeout }2.29. 6.textarea多行输入框组件属性类型默认值必填说明最低版本header-textstring否选择器的标题，仅安卓可用2.11.0modestringselector否选择器类型1.0.0 合法值说明selector普通选择器multiSelector多列选择器time时间选择器date日期选择器region省市区选择器 disabledbooleanfalse否是否禁用1.0.0bindcanceleventhandle否取消选择时触发1.9.90

除了上述通用的属性，对于不同的mode，picker拥有不同的属性。

普通选择器：mode = selector 属性名类型默认值说明最低版本rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容valuenumber0表示选择了 range 中的第几个（下标从 0 开始）bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value} 多列选择器：mode = multiSelector 属性名类型默认值说明最低版本rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容valuearray[]表示选择了 range 中的第几个（下标从 0 开始）bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value}bindcolumnchangeeventhandle列改变时触发时间选择器：mode = time 属性名类型默认值说明最低版本valuestring表示选中的时间，格式为"hh:mm"startstring表示有效时间范围的开始，字符串格式为"hh:mm"endstring表示有效时间范围的结束，字符串格式为"hh:mm"bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value} 日期选择器：mode = date 属性名类型默认值说明最低版本valuestring当天表示选中的日期，格式为"YYYY-MM-DD"startstring表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"endstring表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"fieldsstringday有效值 year,month,day，表示选择器的粒度bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value}

fields 有效值：

值说明year选择器粒度为年month选择器粒度为月份day选择器粒度为天省市区选择器：mode = region 1.4.0 属性名类型默认值说明最低版本valuearray[]表示选中的省市区，默认选中每一列的第一个值custom-itemstring可为每一列的顶部添加一个自定义的项1.5.0levelstringregion选择器层级2.21.1bindchangeeventhandlevalue 改变时触发 change 事件，event.detail = {value, code, postcode}，其中字段 code 是统计用区划代码，postcode 是邮政编码

level 的有效值

值说明province省级选择器city市级选择器region区级选择器sub-district街道选择器 7.slider滑动选择器组件属性说明属性类型默认值必填说明最低版本minnumber0否最小值1.0.0maxnumber100否最大值1.0.0stepnumber1否步长，取值必须大于 0，并且可被(max - min)整除1.0.0disabledbooleanfalse否是否禁用1.0.0valuenumber0否当前取值1.0.0colorcolor#e9e9e9否背景条的颜色（请使用 backgroundColor）1.0.0selected-colorcolor#1aad19否已选择的颜色（请使用 activeColor）1.0.0activeColorcolor#1aad19否已选择的颜色1.0.0backgroundColorcolor#e9e9e9否背景条的颜色1.0.0block-sizenumber28否滑块的大小，取值范围为 12 - 281.9.0block-colorcolor#ffffff否滑块的颜色1.9.0show-valuebooleanfalse否是否显示当前 value1.0.0bindchangeeventhandle否完成一次拖动后触发的事件，event.detail = {value}1.0.0bindchangingeventhandle否拖动过程中触发的事件，event.detail = {value}1.7.0 8.switch开关选择器属性说明属性类型默认值必填说明最低版本checkedbooleanfalse否是否选中1.0.0disabledbooleanfalse否是否禁用1.0.0typestringswitch否样式，有效值：switch, checkbox1.0.0colorstring#04BE02否switch 的颜色，同 css 的 color1.0.0bindchangeeventhandle否点击导致 checked 改变时会触发 change 事件，event.detail={ value}1.0.0 9.form表单组件属性说明属性类型默认值必填说明最低版本report-submitbooleanfalse否是否返回 formId 用于发送模板消息1.0.0report-submit-timeoutnumber0否等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId2.6.2bindsubmiteventhandle否携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}1.0.0bindreseteventhandle否表单重置时会触发 reset 事件1.0.0 2.微信小程序界面交互API 1.wx.showToast(Object object) 参数 Object object 属性类型默认值必填说明最低版本titlestring是提示的内容iconstringsuccess否图标合法值说明最低版本success显示成功图标，此时 title 文本最多显示 7 个汉字长度error显示失败图标，此时 title 文本最多显示 7 个汉字长度2.14.1loading显示加载图标，此时 title 文本最多显示 7 个汉字长度none不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持 imagestring否自定义图标的本地路径，image 的优先级高于 icon1.1.0durationnumber1500否提示的延迟时间maskbooleanfalse否是否显示透明蒙层，防止触摸穿透successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行） 2.wx.showModal显示模态框对话框API Object object 属性类型默认值必填说明最低版本titlestring否提示的标题contentstring否提示的内容showCancelbooleantrue否是否显示取消按钮cancelTextstring取消否取消按钮的文字，最多 4 个字符cancelColorstring#000000否取消按钮的文字颜色，必须是 16 进制格式的颜色字符串confirmTextstring确定否确认按钮的文字，最多 4 个字符confirmColorstring#576B95否确认按钮的文字颜色，必须是 16 进制格式的颜色字符串editablebooleanfalse否是否显示输入框2.17.1placeholderTextstring否显示输入框时的提示文本2.17.1successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性类型说明最低版本contentstringeditable 为 true 时，用户输入的文本confirmboolean为 true 时，表示用户点击了确定按钮cancelboolean为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）1.1.0 3.wx.showLoading(Object object)显示loading提示框 Object object 属性类型默认值必填说明titlestring是提示的内容maskbooleanfalse否是否显示透明蒙层，防止触摸穿透successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行） 4.wx.showActionSheet(Object object)显示操作菜单API 参数 Object object 属性类型默认值必填说明最低版本alertTextstring否警示文案2.14.0itemListArray.是按钮的文字数组，数组长度最大为 6itemColorstring#000000否按钮的文字颜色successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性类型说明tapIndexnumber用户点击的按钮序号，从上到下的顺序，从0开始

【本文地址】

公司简介

联系我们