关于小程序登录授权按钮样式

假设小程序的个人中心页面，如果不登录就获取不到相关信息，而为了获取用户信息则又要单独新增一个页面，又有一些得不偿失，如果读者家的产品愿意的话，这时候读者就可以考虑下笔者这篇文章讲的内容
前提： 强烈推荐使用flex布局方式，float实在遭嫌

基本结构

<view class="con">
  <view class="box">
   <button class="btns" bindcontact='contact'    open-type='contact'></button>
    客服
 </view>
 <view class="box">
  <button class="btns" bindgetphonenumber='getPhoneNumber'    open-type='getPhoneNumber'></button>
  手机
</view>
<view class="box">
  <button class="btns" bindopensetting='getPhoneNumber'    open-type='openSetting'></button>
  授权
</view>
<view class="box">
  <button class="btns" bindgetuserinfo='bindgetuserinfo'    open-type='getUserInfo'></button>
  用户
</view>
</view>

1. 给要授权的位置包裹一个class为box的view标签，这个标签需要有宽高，且必须是相对定位/固定定位；

.con{
  width: 100%;
  height: 48px; 
  border: 1px solid blue;
  display: flex; 
}
.box{
  position: relative;
  width: 100rpx;
  height: 48px;
  border: 1px solid red;
  line-height: 48px;
  text-align: center;
}

2. 给内部的button按钮添加一个样式，重点在于需要给button绝对定位且必须宽高都是100%(这样的目的是为了防止溢出)且透明度必须为0

.btns{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 opacity: 0;   
}

如果不放心，可以加个z-index ，这样可以确保被点击的是button本身

重要的的样式就是这样。

以上。