组件--button详解

一、wxss尺寸单位rpx

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
• 严格按照XML语法。

二、icon 图标组件

<!--index.wxml-->
<view class="container">
    <!-- 
    icon的类型，有效值：
    success, 
    success_no_circle, 
    info,
    warn,
    waiting,
    cancel,
    download,
    search,
    clear 
    --> 
     
  <icon type="success" size="30" color='pink'></icon>
  <!-- 
  type:icon的类型
  size:图标的尺寸
  color：图标的颜色
   -->
</view>

三、表单组件---button

<!--index.wxml-->
<view class="container">
  <button type="primary">这是一个按钮</button>

  <button type="warn" size="mini">
    这是一个按钮</button>

  <button type="primary" plain='true'>
    这是一个按钮</button>


  <button type="primary" disabled='true'>
    这是一个按钮</button>

  <button loading='true'>
    这是一个按钮</button>

  <button hover-class='btn-bg'>
    这是一个按钮</button>
  <form>
    <input type="password"></input>
    <button form-type='reset'>提交</button>
  </form>

  <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
  <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>

  <button hover-class='btn-bg' hover-start-time="1120" hover-stay-time="1120">点击态效果</button>

  <button 
  send-message-title="分享标题" 
  send-message-img="分享的单个图片链接" 
  show-message-card="true" 
  send-message-path="../index/index?id={{id}}" 
  class='details_button'
   open-type='contact' 
   plain
   >
  客服</button>

  <button open-type="launchApp" 
  app-parameter="wechat" 
  binderror="launchAppError"
  >打开APP</button>

  <!-- 
      type:用力控制按钮的类型
          primary    绿色    
          default    白色    
          warn    红色
      size:按钮的大小
          default    默认大小    
          mini    小尺寸
      plain:按钮是否镂空，背景颜色透明
          true  是
          false  否（默认）
      disable:禁用按钮
                true  是
                false  否（默认）
      loading:名称前是否需要loading图标
                true  是
                false  否（默认）
      hover-class:绑定按钮按下去的样式
      from-type：用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
                submit:提交
                reset：重置

      open-type:微信开放能力
      hover-start-time：按住后多久出现点击态，单位毫秒
      hover-stay-time：手指松开后点击态保留时间，单位毫秒
      lang:指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。

      session-from:会话来源，open-type="contact"时有效
      send-message-title:会话内消息卡片标题，open-type="contact"时有效
      send-message-path：会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
      send-message-img：会话内消息卡片图片，open-type="contact"时有效
      show-message-card:是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的                         小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
      bindgetuserinfo:用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，                        open-type="getUserInfo"时有效
      bindcontact:客服消息回调，open-type="contact"时有效
      bindgetphonenumber:获取用户手机号回调，open-type=getPhoneNumber时有效
      binderror:当使用开放能力时，发生错误的回调，open-type=launchApp时有效
      bindopensetting:在打开授权设置页后回调，open-type=openSetting时有效
      bindlaunchapp:打开 APP 成功的回调，open-type=launchApp时有效
     -->
</view>

　　

//index.js
//获取应用实例
Page({
  data: {},
  bindGetUserInfo: function (e) {
    //此处授权得到userInfo
    console.log(e.detail.userInfo);
    //接下来写业务代码

    //最后，记得返回刚才的页面
    // wx.navigateBack({
    //   delta: 1
    // })
  },
  onGotUserInfo:function(e){
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },
  launchAppError:function(e){
    console.log(e.detail.errMsg)
  }

  //error 事件参数说明
  //invalid scene    调用场景不正确，即此时的小程序不具备打开 APP 的能力。
})

　　

/**index.wxss**/
button{margin-top:15rpx;}
.btn-bg{background-color: red;}
input{border:solid 1rpx}