【微信小程序】Button(90/100)
UI布局:
<!--pages/button/button.wxml-->
<view class="btn-area" id="buttonContainer">
<button style="width: 100%;" type="primary">页面主操作 Normal</button>
<button style="width: 100%;" type="primary" loading="true">页面主操作 Loading</button>
<button style="width: 100%;" type="primary" disabled="true">页面主操作 Disabled</button>
<button style="width: 100%;" type="default">页面次要操作 Normal</button>
<button style="width: 100%;" type="default" disabled="true">页面次要操作 Disabled</button>
<button style="width: 100%;" type="warn">警告类操作 Normal</button>
<button style="width: 100%;" type="warn" disabled="true">警告类操作 Disabled</button>
</view>
<view class="button-sp-area">
<button type="primary" plain="true">按钮</button>
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
<button type="default" plain="true">按钮</button>
<button type="default" disabled="true" plain="true">按钮</button>
<button class="mini-btn" type="primary" size="mini">按钮</button>
<button class="mini-btn" type="default" size="mini">按钮</button>
<button class="mini-btn" type="warn" size="mini">按钮</button>
</view>
样式如下:
/* pages/button/button.wxss */
button{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.btn-area{
margin: 0 auto;
width: 100%;
}
.button-sp-area{
margin: 0 auto;
width: 60%;
}
数据与控制没怎么用到(可忽略不计)
// pages/button/button.js
const types = ['default', 'primary', 'warn']
Page({
/**
* 页面的初始数据
*/
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false
},
setDisabled() {
this.setData({
disabled: !this.data.disabled
})
},
setPlain() {
this.setData({
plain: !this.data.plain
})
},
setLoading() {
this.setData({
loading: !this.data.loading
})
},
handleContact(e) {
console.log(e.detail)
},
handleGetPhoneNumber(e) {
console.log(e.detail)
},
handleGetUserInfo(e) {
console.log(e.detail)
},
handleOpenSetting(e) {
console.log(e.detail.authSetting)
},
handleGetUserInfo(e) {
console.log(e.detail.userInfo)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
功能描述
按钮。
属性说明
属性 类型 默认值 必填 说明 最低版本
size string default 否 按钮的大小 1.0.0
合法值 说明
default 默认大小
mini 小尺寸
type string default 否 按钮的样式类型 1.0.0
合法值 说明
primary 绿色
default 白色
warn 红色
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
合法值 说明
submit 提交表单
reset 重置表单
open-type string 否 微信开放能力 1.1.0
合法值 说明 最低版本
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
chooseAvatar 获取用户头像,可以从 bindchooseavatar 回调中获取到头像信息 2.21.2
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
合法值 说明
en 英文
zh_CN 简体中文
zh_TW 繁体中文
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
bindchooseavatar eventhandle 否 获取用户头像回调,open-type=chooseAvatar时有效 2.21.2
自研产品推荐
历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具,由于开发人力就作者一个所以人力有限,因此v1.0.0版本功能进行精简,大功能项有:
- api参数填写
- api请求响应数据展示
- PDF形式的分享文档
- Mock本地化解决方案
- api列表数据本地化处理
- 再加上UI方面的打磨
为了更好服务大家把之前的公众号和软件激活结合,如有疑问请大家反馈到公众号即可,下个版本30%以上的更新会来自公众号的反馈。
嗯!先解释不上服务端原因,API调试工具的绝大多数时候就是一个数据模型、数据处理、数据模型理解共识的问题解决工具,所以作者结合自己十多年开发使用的一些痛点来打造的,再加上服务端开发一般是面向企业的,作者目前没有精力和时间去打造企业服务。再加上没有资金投入所以服务端开发会滞后,至于什么时候会进行开发,这个要看募资情况和用户反馈综合考虑。虽然目前国内有些比较知名的api工具了,但作者使用后还是觉得和实际使用场景不符。如果有相关吐槽也可以在作者的公众号里反馈蛤!
下面是一段smartApi使用介绍: