微信小程序组件button

button：按钮，如图1为button的相应属性

button属性

注1：button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

注2：bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。

注3：在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login刷新登录态。

注4：从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力

---

接下来，我们一一详细了解一下每个属性对应的含义及用法

---

size有效值：（default 默认大小） （mini 小尺寸）

type 有效值： （primary 绿色）（default白色）（warn红色）

form-type 有效值： （submit 提交表单）（reset 重置表单）

open-type 有效值：

open-type属性值

示范代码：

示范代码

按钮点击事件：

index.wxml页面代码：

<view class="container">

   <view class="button-sp-area">

       <button>default类型按钮</button>

       <button>primary类型按钮</button>

       <button>warn类型按钮</button>

       提示：{{text}}

   </view>

</view>

index.js页面代码：

 Page({

    data:{

      // text:"这是一个页面"   

      text:'' 

 },

  btn_default:function(){

    this.setData({

      text:'您单击了default按钮'    })

  },

  btn_primary:function(){

    this.setData({

      text:'您单击了primary按钮'    })

  },

  btn_warn:function(){

    this.setData({

      text:'您单击了warn按钮'    })

  }

})

小结：

---

按钮的点击方法用bindtap来实现 ，

.wxml文件中：bindtap="btnclick"

.js文件中：btnclick:function(){

console.log("要打印输入的内容！")

}