Python-微信小程序(组件)
视图容器
基础内容
-
icon
-
progress
- 简介
- 参数
属性 类型 默认值 必填 说明 最低版本 percent number 否 百分比0~100 1.0.0 show-info boolean false 否 在进度条右侧显示百分比 1.0.0 border-radius number/string 0 否 圆角大小 2.3.1 font-size number/string 16 否 右侧百分比字体大小 2.3.1 stroke-width number/string 6 否 进度条线的宽度 1.0.0 color string #09BB07 否 进度条颜色(请使用activeColor) 1.0.0 activeColor string #09BB07 否 已选择的进度条的颜色 1.0.0 backgroundColor string #EBEBEB 否 未选择的进度条的颜色 1.0.0 active boolean false 否 进度条从左往右的动画 1.0.0 active-mode string backwards 否 backwards: 动画从头播;forwards:动画从上次结束点接着播 1.7.0 duration number 30 否 进度增加1%所需毫秒数 2.8.2 - 示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<view class="progress-box">
<progress percent="20" show-info stroke-width="3"/>
</view>
<view class="progress-box">
<progress percent="40" active stroke-width="3" />
<icon class="progress-cancel" type="cancel"></icon>
</view>
<view class="progress-box">
<progress percent="60" active stroke-width="3" />
</view>
<view class="progress-box">
<progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>
-
text
表单组件
-
button
- 简介
按钮。 - 参数
属性 类型 默认值 必填 说明 最低版本 size string default 否 按钮的大小 1.0.0 type string default 否 按钮的样式类型 1.0.0 plain boolean false 否 按钮是否镂空,背景色透明 1.0.0 disabled boolean false 否 是否禁用 1.0.0 loading boolean false 否 名称前是否带 loading 图标 1.0.0 form-type string 否 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 1.0.0 open-type string 否 微信开放能力 1.1.0 hover-class string button-hover 否 指定按钮按下去的样式类。当 hover-class="none"
时,没有点击态效果1.0.0 hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0 hover-start-time number 20 否 按住后多久出现点击态,单位毫秒 1.0.0 hover-stay-time number 70 否 手指松开后点击态保留时间,单位毫秒 1.0.0 lang string en 否 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 1.3.0 session-from string 否 会话来源,open-type=”contact” 时有效 1.4.0 send-message-title string 当前标题 否 会话内消息卡片标题,open-type=”contact” 时有效 1.5.0 send-message-path string 当前分享路径 否 会话内消息卡片点击跳转小程序路径,open-type=”contact” 时有效 1.5.0 send-message-img string 截图 否 会话内消息卡片图片,open-type=”contact” 时有效 1.5.0 app-parameter string 否 打开 APP 时,向 APP 传递的参数,open-type=launchApp 时有效 1.9.5 show-message-card boolean false 否 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示” 可能要发送的小程序” 提示,用户点击后可以快速发送小程序消息,open-type=”contact” 时有效 1.5.0 bindgetuserinfo eventhandle 否 用户点击该按钮时,会返回获取到的用户信息,回调的 detail 数据与 wx.getUserInfo返回的一致,open-type=”getUserInfo” 时有效 1.3.0 bindcontact eventhandle 否 客服消息回调,open-type=”contact” 时有效 1.5.0 bindgetphonenumber eventhandle 否 获取用户手机号回调,open-type=getPhoneNumber 时有效 1.2.0 binderror eventhandle 否 当使用开放能力时,发生错误的回调,open-type=launchApp 时有效 1.9.5 bindopensetting eventhandle 否 在打开授权设置页后回调,open-type=openSetting 时有效 2.0.7 bindlaunchapp eventhandle 否 打开 APP 成功的回调,open-type=launchApp 时有效 2.4.4 - size 参数
值 说明 default 默认大小 mini 小尺寸 - type 参数
| 值 | 说明 |
| ------- | ---- |
| primary | 绿色 |
| default | 白色 |
| warn | 红色 | - form-type 参数
| 值 | 说明 |
| ------ | -------- |
| submit | 提交表单 |
| reset | 重置表单 | - open-type 参数
| 值 | 说明 | 最低版本 |
| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| contact | 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明 (小程序插件中不能使用) | 1.1.0 |
| share | 触发用户转发,使用前建议先阅读使用指引 | 1.2.0 |
| getPhoneNumber | 获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息,具体说明 (小程序插件中不能使用) | 1.2.0 |
| getUserInfo | 获取用户信息,可以从 bindgetuserinfo 回调中获取到用户信息 (小程序插件中不能使用) | 1.3.0 |
| launchApp | 打开 APP,可以通过 app-parameter 属性设定向 APP 传的参数具体说明 | 1.9.5 |
| openSetting | 打开授权设置页 | 2.0.7 |
| feedback | 打开 “意见反馈” 页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单 “客服反馈” 页面获取到反馈内容 | 2.1.0 | - lang 参数
值 说明 en 英文 zh_CN 简体中文 zh_TW 繁体中文
- 简介
-
checkbox
-
editor
- 简介
- 富文本编辑器,可以对图片、文字进行编辑。
- 编辑器导出内容支持带标签的
html
和纯文本的text
,编辑器内部采用delta
格式进行存储。 - 通过
setContents
接口设置内容时,解析插入的html
可能会由于一些非法标签导致解析错误,建议开发者在小程序内使用时通过 delta 进行插入。 - 富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的 html 时,需要额外引入 [这段样式](data:application/zip;base64,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),并维护
<ql-container><ql-editor></ql-editor></ql-container>
的结构。 - 图片控件仅初始化时设置有效。
- 参数
属性 类型 默认值 必填 说明 最低版本 read-only boolean false 否 设置编辑器为只读 2.7.0 placeholder string 否 提示信息 2.7.0 show-img-size boolean false 否 点击图片时显示图片大小控件 2.7.0 show-img-toolbar boolean false 否 点击图片时显示工具栏控件 2.7.0 show-img-resize boolean false 否 点击图片时显示修改尺寸控件 2.7.0 bindready eventhandle 否 编辑器初始化完成时触发 2.7.0 bindfocus eventhandle 否 编辑器聚焦时触发,event.detail = {html, text, delta} 2.7.0 bindblur eventhandle 否 编辑器失去焦点时触发,detail = {html, text, delta} 2.7.0 bindinput eventhandle 否 编辑器内容改变时触发,detail = {html, text, delta} 2.7.0 bindstatuschange eventhandle 否 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 2.7.0
- 简介
-
form
- 简介
- 参数
属性 类型 默认值 必填 说明 最低版本 report-submit boolean false 否 是否返回 formId 用于发送模板消息 1.0.0 report-submit-timeout number 0 否 等待一段时间(毫秒数)以确认 formId 是否生效。如果未指定这个参数,formId 有很小的概率是无效的(如遇到网络失败的情况)。指定这个参数将可以检测 formId 是否有效,以这个参数的时间作为这项检测的超时时间。如果失败,将返回 requestFormId:fail 开头的 formId 2.6.2 bindsubmit eventhandle 否 携带 form 中的数据触发 submit 事件,event.detail = {value : {‘name’: ‘value’} , formId: ‘’} 1.0.0 bindreset eventhandle 否 表单重置时会触发 reset 事件 1.0.0
-
input
-
简介
输入框。该组件是原生组件,使用时请注意相关限制 -
参数
属性 类型 默认值 必填 说明 最低版本 value string 是 输入框的初始内容 1.0.0 type string text 否 input 的类型 1.0.0 password boolean false 否 是否是密码类型 1.0.0 placeholder string 是 输入框为空时占位符 1.0.0 placeholder-style string 是 指定 placeholder 的样式 1.0.0 placeholder-class string input-placeholder 否 指定 placeholder 的样式类 1.0.0 disabled boolean false 否 是否禁用 1.0.0 maxlength number 140 否 最大输入长度,设置为 -1 的时候不限制最大长度 1.0.0 cursor-spacing number 0 否 指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 1.0.0 auto-focus boolean false 否 (即将废弃,请直接使用 focus) 自动聚焦,拉起键盘 1.0.0 focus boolean false 否 获取焦点 1.0.0 confirm-type string done 否 设置键盘右下角按钮的文字,仅在 type=’text’时生效 1.1.0 always-embed boolean false 否 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) 2.10.4 confirm-hold boolean false 否 点击键盘右下角按钮时是否保持键盘不收起 1.1.0 cursor number 是 指定 focus 时的光标位置 1.5.0 selection-start number -1 否 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 1.9.0 selection-end number -1 否 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 1.9.0 adjust-position boolean true 否 键盘弹起时,是否自动上推页面 1.9.90 hold-keyboard boolean false 否 focus 时,点击页面的时候不收起键盘 2.8.2 safe-password-cert-path string 否 安全键盘加密公钥的路径,只支持包内路径 2.18.0 safe-password-length number 否 安全键盘输入密码长度 2.18.0 safe-password-time-stamp number 否 安全键盘加密时间戳 2.18.0 safe-password-nonce string 否 安全键盘加密盐值 2.18.0 safe-password-salt string 否 安全键盘计算 hash 盐值,若指定 custom-hash 则无效 2.18.0 safe-password-custom-hash string 否 安全键盘计算 hash 的算法表达式,如 md5(sha1('foo' + sha256(sm3(password + 'bar'))))
2.18.0 bindinput eventhandle 是 键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。 1.0.0 bindfocus eventhandle 是 输入框聚焦时触发,event.detail = {value, height},height 为键盘高度,在基础库 1.9.90 起支持 1.0.0 bindblur eventhandle 是 输入框失去焦点时触发,event.detail = {value, encryptedValue, encryptError} 1.0.0 bindconfirm eventhandle 是 点击完成按钮时触发,event.detail = {value} 1.0.0 bindkeyboardheightchange eventhandle 是 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} 2.7.0 -
type 参数
值 说明 最低版本 text 文本输入键盘 number 数字输入键盘 idcard 身份证输入键盘 digit 带小数点的数字键盘 safe-password 密码安全输入键盘 指引 2.18.0 -
confirm-type 参数
值 说明 send 右下角按钮为 “发送” search 右下角按钮为 “搜索” next 右下角按钮为 “下一个” go 右下角按钮为 “前往” done 右下角按钮为 “完成” -
双向绑定
1
2
3<!-- telephone.wxml -->
<view>新输入了:{{message}}</view>
<input value="{{message}}" bindinput="bindTxt"></input>1
2
3
4/* telephone.wxss */
input {
border: 1rpx solid darkorange;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14// telephone.js
Page({
......
data: {
message: ''
},
bindTxt: function (e) {
console.log(e.detail.value)
this.setData({
message: e.detail.value
})
},
)}
-
-
label
-
radio
-
slider
- 简介
滑动选择器。 - 参数
属性 类型 默认值 必填 说明 最低版本 min number 0 否 最小值 1.0.0 max number 100 否 最大值 1.0.0 step number 1 否 步长,取值必须大于 0,并且可被 (max - min) 整除 1.0.0 disabled boolean false 否 是否禁用 1.0.0 value number 0 否 当前取值 1.0.0 color color #e9e9e9 否 背景条的颜色(请使用 backgroundColor) 1.0.0 selected-color color #1aad19 否 已选择的颜色(请使用 activeColor) 1.0.0 activeColor color #1aad19 否 已选择的颜色 1.0.0 backgroundColor color #e9e9e9 否 背景条的颜色 1.0.0 block-size number 28 否 滑块的大小,取值范围为 12 - 28 1.9.0 block-color color #ffffff 否 滑块的颜色 1.9.0 show-value boolean false 否 是否显示当前 value 1.0.0 bindchange eventhandle 否 完成一次拖动后触发的事件,event.detail = {value} 1.0.0 bindchanging eventhandle 否 拖动过程中触发的事件,event.detail = {value} 1.7.0
- 简介
-
switch
-
textarea
- 简介
多行输入框。该组件是原生组件,使用时请注意相关限制。 - 参数
属性 类型 默认值 必填 说明 最低版本 value string 否 输入框的内容 1.0.0 placeholder string 否 输入框为空时占位符 1.0.0 placeholder-style string 否 指定 placeholder 的样式,目前仅支持 color,font-size 和 font-weight 1.0.0 placeholder-class string textarea-placeholder 否 指定 placeholder 的样式类 1.0.0 disabled boolean false 否 是否禁用 1.0.0 maxlength number 140 否 最大输入长度,设置为 -1 的时候不限制最大长度 1.0.0 auto-focus boolean false 否 自动聚焦,拉起键盘。 1.0.0 focus boolean false 否 获取焦点 1.0.0 auto-height boolean false 否 是否自动增高,设置 auto-height 时,style.height 不生效 1.0.0 fixed boolean false 否 如果 textarea 是在一个 position:fixed
的区域,需要显示指定属性 fixed 为 true1.0.0 cursor-spacing number 0 否 指定光标与键盘的距离。取 textarea
距离底部的距离和cursor-spacing
指定的距离的最小值作为光标与键盘的距离1.0.0 cursor number -1 否 指定 focus 时的光标位置 1.5.0 show-confirm-bar boolean true 否 是否显示键盘上方带有” 完成 “按钮那一栏 1.6.0 selection-start number -1 否 光标起始位置,自动聚集时有效,需与 selection-end
搭配使用1.9.0 selection-end number -1 否 光标结束位置,自动聚集时有效,需与 selection-start
搭配使用1.9.0 adjust-position boolean true 否 键盘弹起时,是否自动上推页面 1.9.90 hold-keyboard boolean false 否 focus 时,点击页面的时候不收起键盘 2.8.2 disable-default-padding boolean false 否 是否去掉 iOS 下的默认内边距 2.10.0 confirm-type string return 否 设置键盘右下角按钮的文字 2.13.0 confirm-hold boolean false 否 点击键盘右下角按钮时是否保持键盘不收起 2.16.0 bindfocus eventhandle 否 输入框聚焦时触发,event.detail = {value, height},height 为键盘高度,在基础库 1.9.90 起支持 1.0.0 bindblur eventhandle 否 输入框失去焦点时触发,event.detail = {value, cursor} 1.0.0 bindlinechange eventhandle 否 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} 1.0.0 bindinput eventhandle 否 当键盘输入时,触发 input 事件,event.detail = {value, cursor, keyCode},keyCode 为键值,目前工具还不支持返回 keyCode 参数。bindinput 处理函数的返回值并不会反映到 textarea 上 1.0.0 bindconfirm eventhandle 否 点击完成时, 触发 confirm 事件,event.detail = {value: value} 1.0.0 bindkeyboardheightchange eventhandle 否 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} 2.7.0 - confirm-type 参数
值 说明 send 右下角按钮为 “发送” search 右下角按钮为 “搜索” next 右下角按钮为 “下一个” go 右下角按钮为 “前往” done 右下角按钮为 “完成” return 右下角按钮为 “换行”
- 简介
导航
-
navigator
- 简介
页面链接。 - 参数
属性 类型 默认值 必填 说明 最低版本 target string self 否 在哪个目标上发生跳转,默认当前小程序 2.0.7 url string 否 当前小程序内的跳转链接 1.0.0 open-type string navigate 否 跳转方式 1.0.0 delta number 1 否 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 1.0.0 app-id string 否 当 target="miniProgram"
时有效,要打开的小程序 appId2.0.7 path string 否 当 target="miniProgram"
时有效,打开的页面路径,如果为空则打开首页2.0.7 extra-data object 否 当 target="miniProgram"
时有效,需要传递给目标小程序的数据,目标小程序可在App.onLaunch()
,App.onShow()
中获取到这份数据。详情2.0.7 version string release 否 当 target="miniProgram"
时有效,要打开的小程序版本2.0.7 short-link string 否 当 target="miniProgram"
时有效,当传递该参数后,可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。2.18.1 hover-class string navigator-hover 否 指定点击时的样式类,当 hover-class="none"
时,没有点击态效果1.0.0 hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0 hover-start-time number 50 否 按住后多久出现点击态,单位毫秒 1.0.0 hover-stay-time number 600 否 手指松开后点击态保留时间,单位毫秒 1.0.0 bindsuccess string 否 当 target="miniProgram"
时有效,跳转小程序成功2.0.7 bindfail string 否 当 target="miniProgram"
时有效,跳转小程序失败2.0.7 bindcomplete string 否 当 target="miniProgram"
时有效,跳转小程序完成2.0.7 - target参数
值 说明 self 当前小程序 miniProgram 其它小程序 - open-type参数
值 说明 最低版本 navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 redirect 对应 wx.redirectTo 的功能 switchTab 对应 wx.switchTab 的功能 reLaunch 对应 wx.reLaunch 的功能 1.1.0 navigateBack 对应 wx.navigateBack 的功能 1.1.0 exit 退出小程序, target="miniProgram"
时生效2.1.0 - version参数
值 说明 最低版本 develop 开发版 trial 体验版 release 正式版,仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。 - 示例
1
2<!-- index.wxml -->
<navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator>
- 简介
媒体组件
-
image
- 简介
图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式,2.3.0 起支持云文件 ID。 - 参数
名称 类型 默认值 必填 说明 最低版本 src string 否 图片资源地址 1.0.0 mode string scaleToFill 否 图片裁剪、缩放的模式 1.0.0 webp boolean false 否 默认不解析 webP 格式,只支持网络资源 2.9.0 lazy-load boolean false 否 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载 1.5.0 show-menu-by-longpress boolean false 否 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片 / 前往群聊 / 打开小程序(若图片中包含对应二维码或小程序码)的菜单 2.7.0 binderror eventhandle 否 当错误发生时触发,event.detail = {errMsg} 1.0.0 bindload eventhandle 否 当图片载入完毕时触发,event.detail = {height, width} 1.0.0 - mode 参数
值 说明 最低版本 scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 2.10.3 top 裁剪模式,不缩放图片,只显示图片的顶部区域 bottom 裁剪模式,不缩放图片,只显示图片的底部区域 center 裁剪模式,不缩放图片,只显示图片的中间区域 left 裁剪模式,不缩放图片,只显示图片的左边区域 right 裁剪模式,不缩放图片,只显示图片的右边区域 top left 裁剪模式,不缩放图片,只显示图片的左上边区域 top right 裁剪模式,不缩放图片,只显示图片的右上边区域 bottom left 裁剪模式,不缩放图片,只显示图片的左下边区域 bottom right 裁剪模式,不缩放图片,只显示图片的右下边区域
- 简介
导航栏
-
navigation-bar
- 简介
- 页面导航条配置节点,用于指定导航栏的一些属性。只能是 page-meta 组件内的第一个节点,需要配合它一同使用。
- 通过这个节点可以获得类似于调用
wx.setNavigationBarTitle
wx.setNavigationBarColor
等接口调用的效果。
- 参数
属性 类型 默认值 必填 说明 最低版本 title string 否 导航条标题 2.9.0 loading boolean false 否 是否在导航条显示 loading 加载提示 2.9.0 front-color string 否 导航条前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff
和#000000
2.9.0 background-color string 否 导航条背景颜色值,有效值为十六进制颜色 2.9.0 color-animation-duration number 0 否 改变导航栏颜色时的动画时长,默认为 0
(即没有动画效果)2.9.0 color-animation-timing-func string “linear” 否 改变导航栏颜色时的动画方式,支持 linear
、easeIn
、easeOut
和easeInOut
2.9.0
- 简介