button标签
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| size | string | default | 否 | 按钮的大小 | 1.0.0 |
| type | string | default | 否 | 按钮的样式类型 | 1.0.0 |
| plain | boolean | false | 否 | 按钮是否镂空，背景色透明 | 1.0.0 |
plain/type/size/disabled/loading属性
<view class="out">
<button class="btn1" type="primary" plain>绿色镂空按钮</button>
<button class="btn1" type="warn">警告按钮</button>
<button class="btn1" type="primary" size="mini">小按钮</button>
<button class="btn1" type="primary" disabled>禁用</button>
<button class="btn1" type="primary" loading>加载按钮</button>
</view>
open-type
用来联动其他功能，如微信授权，微信登录。
测试号暂时无法使用，需要额外配置
| open-type | string | 否 | 微信开放能力 | 1.1.0 |
|---|
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 |
contact
打开对象聊天功能。
wxml:
<button type="primary" open-type="contact">联系客服</button>
form-type
form/input标签
form文档:https://developers.weixin.qq.com/miniprogram/dev/component/form.html
input文档:https://developers.weixin.qq.com/miniprogram/dev/component/input.html
input
confirm-type
| confirm-type | string | done | 否 | 设置键盘右下角按钮的文字，仅在type='text'时生效 | 1.1.0 |
|---|
confirm-type 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| send | 右下角按钮为“发送” | |
| search | 右下角按钮为“搜索” | |
| next | 右下角按钮为“下一个” | |
| go | 右下角按钮为“前往” | |
| done | 右下角按钮为“完成” |
用来设置键盘右下角的确定按钮名称。
实践
<form bindsubmit="onSubmit">
<input class="ipt"
placeholder="请输入用户信息"
placeholder-class="iptPlace"
auto-focus
cursor-spacing="100"
></input>
<button form-type="submit">提交</button>
</form>cursor-spacing
- 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
switch标签
https://developers.weixin.qq.com/miniprogram/dev/component/switch.html
其他组件
icon标签
https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
wxml:
<view style="padding:50px; text-align:center">
<icon type="success" size="100"></icon>
<view>提交成功</view>
</view>
progress标签
进度条
https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
实践
<view style="padding:50px">
<progress
percent="60"
show-info
font-size="15"
border-radius="10"
activeColor="pink"
active
></progress>
</view>
此处评论已关闭