button

按钮。

• 注1：button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
• 注2：在bindgetphonenumber 等返回加密信息的回调中调用 qq.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
• 注3：button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力size 有效值：

type 有效值：

form-type 有效值：

open-type 有效值：

值	说明	最低版本
share	触发用户转发，使用前建议先阅读使用指引
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明	暂时以邀请制开放申请，请留意后续通知
openSetting	打开授权设置页
feedback	呼起吐个槽反馈页面，开发者可以到官网查看反馈	基础库1.2.0版本开始支持
openGroupProfile	呼起群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时app.json中必须配置groupIdList（数量不超过10个），表明可以打开群资料卡的群号	基础库1.4.7版本开始支持

share-type 有效值：

字段值按字节bit位分配

bit低位到高位：

• 第1位bit0为分享到好友
• 第2位bit1为分享到空间
• 第3位bit2为快速分享到当前聊天窗口
• 第4位bit3为分享到微信好友
• 第5位bit4为分享到微信朋友圈bit2的优先级大于其他位，如果设置了bit2，则bit0、bit1、bit3、bit4都会失效。

比如share-type设置为7(二进制表示为111)，则分享到好友和分享到空间会被忽略。

示例代码：

/** qss **/
/** 修改button默认的点击态样式类**/
.button-hover {
  background-color: red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
  background-color: blue;
}

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
  disabled="{{disabled}}"
  bindtap="default"
  hover-class="other-button-hover"
>
  default
</button>
<button
  type="primary"
  size="{{primarySize}}"
  loading="{{loading}}"
  plain="{{plain}}"
  disabled="{{disabled}}"
  bindtap="primary"
>
  primary
</button>
<button
  type="warn"
  size="{{warnSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
  disabled="{{disabled}}"
  bindtap="warn"
>
  warn
</button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
<button open-type="contact">进入客服会话</button>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">
  获取用户信息
</button>
<button open-type="openSetting">打开授权设置页</button>
<button open-type="share" share-type="{{1}}">只能分享到好友</button>
<button open-type="share" share-type="{{2}}">只能分享到空间</button>
<button open-type="share" share-type="{{3}}">可以分享到好友和空间</button>
<botton open-type="share" share-type="{{4}}" entry-data-hash="xxxxxx">分享</botton>
<button open-type="openGroupProfile" group-id="123456">打开群资料卡</button>

const types = ['default', 'primary', 'warn']
const pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading(e) {
    this.setData({
      loading: !this.data.loading
    })
  },
  onGotUserInfo(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },
}
for (let i = 0; i < types.length; ++i) {
  (function (type) {
    pageObject[type] = function (e) {
      const key = type + 'Size'
      const changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  }(types[i]))
}
Page(pageObject)

/** app.json **/
/** 必须要配置groupIdList，且group-id必须在groupIdList中才能生效**/
{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": ["qqe5f52902cf4de896"],
  "groupIdList":["123456","34356576","457658769"]
}

Bug & Tip

• tip: 目前，设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 from 在自定义组件外，将会使这个 button 的 form-type 失效。