微信小程序3 常用标签之 button

Button

就是按钮，它最常用的属性就是type

　　type：指定按钮的样式，有如下四种

<button>我是按钮1</button>
<button type="default">我是按钮2</button>
<button type="primary">我是按钮3</button>
<button type="warn">我是按钮4</button>

按钮1 不设置type，就是白底黑字；

按钮2 默认，灰底绿字；

按钮3 用的是微信的基础设置，绿底白字；

按钮4 警告类型，灰底红字。

 

　　form-type：按钮针对表单的提交类型

<button form-type="submit">我是按钮1</button>
<button form-type="reset">我是按钮2</button>

顾名思义，一个是提交表单，一个是重置，它们其实分别会触发按钮所在表单的两个相应事件，以完成功能，这里先不讲，知道form-type的两个值就好。

 

一些常用的官方提供的方法

获取用户信息getUserInfo

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>

open-type 是微信官方的开放功能，getUserInfo 是指明要调用的官方提供的获取用户信息的接口方法

bindgetuserinfo 是回调，当open-type = "getUserInfo" 时才有效，回调方法中的detail.userInfo里存放的用户信息

  getUserInfo(e){
    console.log(e);
    console.log(e.detail.userInfo);
  }

可以通过控制台的输出看到userInfo的结构和内容。

获取手机号getPhoneNumber

和获取用户信息一样，也是成套的，bindgetphonenumber必须是在open-type="getPhoneNumber"时才有效

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>

js方法中可以看到，也是在detail中。

  getPhoneNumber(e){
    console.log(e);
  }

有个问题是，手机号这种属于私密信息，获取后是经过加密的，解密的方法我们后面说。

联系客服contact

<button open-type="contact" bindcontact="applyContact">contact</button>

需要注意的是，这个功能要彻底实现，需要去微信官方注册客服号，这里不多说。