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 时，需要额外引入 这段样式，并维护
<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.setNavigationBarTitlewx.setNavigationBarColor等接口调用的效果。
- 参数
属性 类型 默认值 必填 说明 最低版本 title string 否 导航条标题 2.9.0 loading boolean false 否 是否在导航条显示 loading 加载提示 2.9.0 front-color string 否 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff和#0000002.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和easeInOut2.9.0
- 简介