上一节:
下一节:

  小程序 Button

  • 按钮参数

    属性 类型 默认值 必填 说明
    size string default 否 按钮的大小
    type string default 否 按钮的样式类型
    plain boolean false 否 按钮是否镂空，背景色透明
    disabled boolean false 否 是否禁用
    loading boolean false 否 名称前是否带 loading 图标
    form-type string 否 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
    open-type string 否 微信开放能力
    hover-class string button-hover 否 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
    hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态
    hover-start-time number 20 否 按住后多久出现点击态，单位毫秒
    hover-stay-time number 70 否 手指松开后点击态保留时间，单位毫秒
    lang string en 否 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
    session-from string 否 会话来源，open-type="contact"时有效
    send-message-title string 当前标题 否 会话内消息卡片标题，open-type="contact"时有效
    send-message-path string 当前分享路径 否 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
    send-message-img string 截图 否 会话内消息卡片图片，open-type="contact"时有效
    app-parameter string 否 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
    show-message-card boolean false 否 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
    bindgetuserinfo eventhandle 否 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
    bindcontact eventhandle 否 客服消息回调，open-type="contact"时有效
    bindgetphonenumber eventhandle 否 获取用户手机号回调，open-type=getPhoneNumber时有效
    binderror eventhandle 否 当使用开放能力时，发生错误的回调，open-type=launchApp时有效
    bindopensetting eventhandle 否 在打开授权设置页后回调，open-type=openSetting时有效
    bindlaunchapp eventhandle 否 打开 APP 成功的回调，open-type=launchApp时有效

  • form-type 的合法值

    值 说明
    submit 提交表单
    reset 重置表单
    代码示例： 
    //index.wxml
<view class="container">
<view class="page-body">
<form catchsubmit="formSubmit" catchreset="formReset">
<view class="page-section page-section-gap">
<view class="page-section-title">switch</view>
<switch name="switch"/>
</view>

<view class="page-section page-section-gap">
<view class="page-section-title">radio</view>
<radio-group name="radio">
<label><radio value="radio1"/>选项一</label>
<label><radio value="radio2"/>选项二</label>
</radio-group>
</view>

<view class="page-section page-section-gap">
<view class="page-section-title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>选项一</label>
<label><checkbox value="checkbox2"/>选项二</label>
</checkbox-group>
</view>

<view class="page-section page-section-gap">
<view class="page-section-title">slider</view>
<slider value="50" name="slider" show-value ></slider>
</view>

<view class="page-section">
<view class="page-section-title">input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__bd" style="margin: 30rpx 0" >
<input class="weui-input" name="input" placeholder="这是一个输入框" />
</view>
</view>
</view>
</view>

<view class="btn-area">
<button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
<button style="margin: 30rpx 0" formType="reset">Reset</button>
</view>
</form>
</view>
</view>


    //index.js
Page({
    onShareAppMessage() {
      return {
        title: 'form',
        path: 'page/component/pages/form/form'
      }
    },
  
    data: {
      pickerHidden: true,
      chosen: ''
    },
  
    pickerConfirm(e) {
      this.setData({
        pickerHidden: true
      })
      this.setData({
        chosen: e.detail.value
      })
    },
  
    pickerCancel() {
      this.setData({
        pickerHidden: true
      })
    },
  
    pickerShow() {
      this.setData({
        pickerHidden: false
      })
    },
  
    formSubmit(e) {
      console.log('form发生了submit事件，携带数据为：', e.detail.value)
    },
  
    formReset(e) {
      console.log('form发生了reset事件，携带数据为：', e.detail.value)
      this.setData({
        chosen: ''
      })
    }
})

  • open-type 的合法值

    值 说明
    contact 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明
    share 触发用户转发，使用前建议先阅读使用指引
    getPhoneNumber 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息
    getUserInfo 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息
    launchApp 打开APP，可以通过 app-parameter 属性设定向APP传的参数具体说明
    openSetting 打开授权设置页
    feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

  • getPhoneNumber

    获取微信用户绑定的手机号，需先调用 wx.login 接口。
    因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 button 组件的点击来触发。
    注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。

    使用方法：

    需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据， 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。
    注意：在回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
    代码示例： 
    //index.wxml
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>


    //index.js
Page({
  getPhoneNumber (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e.detail.encryptedData)
  }
})
    例如唯品会点击获取手机号授权登录效果：
    获取手机号

  • wx.getUserInfo(Object object)

    获取用户信息参数：
    属性 类型 默认值 必填 说明
    withCredentials boolean 否 是否带上登录态信息。当 withCredentials 为 true 时，要求此前有调用过 wx.login 且登录态尚未过期，此时返回的数据会包含 encryptedData, iv 等敏感信息；当 withCredentials 为 false 时，不要求有登录态，返回的数据不包含 encryptedData, iv 等敏感信息。
    lang string en 否 显示用户信息的语言
    success function 否 接口调用成功的回调函数
    fail function 否 接口调用失败的回调函数
    complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

    object.success 回调成功后参数

    属性 类型 说明
    userInfo UserInfo 用户信息对象，不包含 openid 等敏感信息
    rawData string 不包括敏感信息的原始数据字符串，用于计算签名
    signature string 使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息
    encryptedData string 包括敏感数据在内的完整用户信息的加密数据
    iv string 加密算法的初始向量
    cloudID string 敏感数据对应的云 ID，开通云开发的小程序才会返回，可通过云调用直接获取开放数据，详细见云调用直接获取开放数据 
    // 必须是在用户已经授权的情况下调用
wx.getUserInfo({
  success: function(res) {
    var userInfo = res.userInfo
    var nickName = userInfo.nickName
    var avatarUrl = userInfo.avatarUrl
    var gender = userInfo.gender //性别 0：未知、1：男、2：女
    var province = userInfo.province
    var city = userInfo.city
    var country = userInfo.country
  }
})
    小程序用户信息组件示例代码: 
    // 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
//需要使用 button 来授权登录
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>


    Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授权
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
    console.log(e.detail.userInfo)
  }
})
上一节:
下一节: