微信小程序云开发笔记(一):button组件的应用

button的简单介绍

button是微信小程序一个重要的组件，在页面跳转，触发事件，表单提交等有着重要的作用，本篇文章适合微信小程序易经入门但还不熟练地新手，本文章将从button样式，事件绑定实现弹窗，页面跳转等功能全面介绍button的应用。

type

type的属性值有三种

1. primary 绿色
2. default 白色
3. warn 红色
   除了这种方式可以设置按钮大小，还有其他的通过视图来控制按钮的方式，因为我们知道，微信小程序的按钮并不都是这三种颜色。其他方式比如把按钮放在一个view中。然后对这个view做修改，把可以圆形，方形等等，对应里边的按钮自然会占满整个view，形状也就被改变了。

size

size有default和mini两个值，size设置成mini则为小按钮样式

//button.wxml
<button bindtap="goto" type="primary" size="mini">
    <text style="font-size:100rpx">button</text>
</button>
//定义button，给button一个样式primary，中间用text给button命名

其他属性

• plain：plain就是简易的意思，在按钮这里实现镂空功能，当把这个属性设置为true的时候，按钮背景变为透明色。
• disabled来设置是否禁用，此属性设置为true，则按钮不能点击
• loading此属性来控制按钮名称前是否带 loading 图标
• form-type：这个功能比较重要，后边的表单提交需要用到form-type的功能，用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
• open-type：这个按钮也比较重要，是微信的开放能力
  1、contact：打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
  2、share：触发用户转发 getPhoneNumber 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
  3、getUserInfo ：获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
  4、launchApp：打开APP，可以通过app-parameter属性设定向APP传的参数
  5、openSetting：打开授权设置页
  6、feedback：打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

其他各种属性及功能可参考微信官方文档，里面就相当于一本小程序的电子词典，你想要的功能都可以在里边查询到，这里就不做一一阐述。

button是一个组件中比较常用的一个，学会button的熟练应用可以让自己对小程序的设计变得游刃有余。其次就是实现按钮的某些功能不一定是需要按钮的，比如页面跳转，比如添加绑定事件，不是只有button才能添加绑定事件，我们可以对图片等其他组件添加绑定事件，实现具体功能，小程序开发中要学会灵活运用button的功能。

下面给出微信小程序文档中的代码，作为参考，里面囊括了button组件的大部分属性的使用

//JS
const types = ['default', 'primary', 'warn']
const pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  onShareAppMessage() {
    return {
      title: 'button',
      path: 'page/component/pages/button/button'
    }
  },
  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)
  }
}
for (let i = 0; i < types.length; ++i) {
  (function (type) {
    pageObject[type] = function () {
      const key = type + 'Size'
      const changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  }(types[i]))
}
Page(pageObject)

//wxml
<view class="page-body">
  <view class="btn-area" id="buttonContainer">
    <button type="primary">页面主操作 Normal</button>
    <button type="primary" loading="true">页面主操作 Loading</button>
    <button type="primary" disabled="true">页面主操作 Disabled</button>

    <button type="default">页面次要操作 Normal</button>
    <button type="default" disabled="true">页面次要操作 Disabled</button>

    <button type="warn">警告类操作 Normal</button>
    <button type="warn" disabled="true">警告类操作 Disabled</button>

    <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>
  </view>
</view>

//wxss
button{
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}
.button-sp-area{
  margin: 0 auto;
  width: 60%;
}
.mini-btn{
  margin-right: 10rpx;
}

以上就是微信小程序中我对于button的个人总结，其中的不足之处还有待改进。希望能帮到你们，也希望志同道合的朋友找我交流探讨。