【微信小程序】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使用介绍：
在这里插入图片描述