组件--button详解

一、wxss尺寸单位rpx

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

二、icon 图标组件

class="container">
     
     
  "success" size="30" color='pink'>
  

三、表单组件---button

class="container">
  "primary">这是一个按钮

  "warn" size="mini">
    这是一个按钮

  "primary" plain='true'>
    这是一个按钮


  "primary" disabled='true'>
    这是一个按钮

  'true'>
    这是一个按钮

  class='btn-bg'>
    这是一个按钮
  

    "password">
    'reset'>提交
  

  "getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录
  "getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息

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

  <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
   >
  客服

  "launchApp" 
  app-parameter="wechat" 
  binderror="launchAppError"
  >打开APP

  

　　

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