關於小程序登陸受權按鈕樣式

假設小程序的我的中心頁面，若是不登陸就獲取不到相關信息，而爲了獲取用戶信息則又要單獨新增一個頁面，又有一些得不償失，若是讀者家的產品願意的話，這時候讀者就能夠考慮下筆者這篇文章講的內容
前提： 強烈推薦使用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自己

重要的的樣式就是這樣。

以上。