小程序的授權

自從小程序文檔更新后，自動授權已不存在啦

目前的授權都是通過button來實現的，具體知識點可參考小程序的官方文檔，以下是我做的一個小demo（進入首頁，跳出一個登錄彈出框，彈出框是自己寫的一個UI組件），廢話不多說，直接上代碼

UI組件部分（modal）

modal.wxml

<view class='modal-mask' wx:if='{{show}}' bindtap='clickMask'>
  <view class='modal-content'>
    <scroll-view scroll-y class='main-content'>
      <slot></slot>
    </scroll-view>
  </view>
</view>

modal.wxss

n: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}
/*遮罩內容*/
.modal-content{
  display: flex;
  flex-direction: column;
  width: 65%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  text-align: center;
}
/*中間內容*/
.main-content{
  flex: 1;
  height: 100%;
  overflow-y: hidden; 
  max-height: 80vh; /* 內容高度最高80vh 以免內容太多溢出*/
}
.bottom {
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
}

modal.js

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    //是否顯示modal彈窗
    show: {
      type: Boolean,
      value: false
    },
    //控制底部是一個按鈕還是兩個按鈕，默認兩個
    single: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    // 點擊modal的回調函數
    clickMask() {
      // 點擊modal背景關閉遮罩層，如果不需要注釋掉即可
      this.setData({ show: false })
    },
    // 點擊取消按鈕的回調函數
    cancel() {
      this.setData({ show: false })
      this.triggerEvent('cancel')  //triggerEvent觸發事件
    },
    // 點擊確定按鈕的回調函數
    confirm() {
      this.setData({ show: false })
      this.triggerEvent('confirm')
    }
  }
})

modal.json

{
  "component": true,
  "usingComponents": {}
}

pages頁面

home.wxml（這個是彈框，home頁面內容直接在下面加一個<view>這里寫home頁面的內容</view>）

<!-- modal彈窗-->
  <modalView show="{{showModal}}" bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{single}}'>
    <view class='modal-content'>
      <scroll-view scroll-y class='main-content'>
    <view wx:if="{{canIUse}}" >
    <view class='header'>
            <text>提示</text>
        </view>
        <view class='content'>
          <image src="/images/goods_img2.png"></image>
          <text>是否登錄並繼續使用該程序</text>
        </view>
        <view class="header_title">
          <text class="dian">•</text>
          <text>登錄程序需進行微信授權</text>
        </view>
        <view class="modal_footer">
        <view class="bottom">
          <button class='bottom_a'>
            拒絕
          </button>
          <button class='bottom_b' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
              去登錄
          </button>
        </view>
        </view>
</view>
      </scroll-view>
    </view>
  </modalView>

home.wxss

.header {
    text-align: start;
    height: 100rpx;
    line-height: 100rpx;
}
 
.header image {
    width: 200rpx;
    height: 200rpx;
}
 
.content {
  display: flex;
  margin-left: 50rpx;
  height: 100rpx;
  line-height: 100rpx;
}

.content image{
  width: 100rpx;
  height: 100rpx;
}
 
.content text {
  font-size: 24rpx;
  margin-left: 20rpx;
}
 
.header_title{
  margin-left: 50rpx;
  text-align: start;
  font-size: 24rpx;
  color: #ccc;
  line-height: 100rpx;
  display: flex;
}

.dian{
  margin-right: 6rpx;
  font-size: 36rpx;
}

.modal_footer{
    display: flex;
    justify-content: flex-end;
}
.bottom {
  display: flex;
   color: #ccc;
  font-size: 24rpx;
  width: 280rpx;
}

button::after {
  border: none;
}

.bottom button{
  background-color: #fff;
  height: 50rpx;
  line-height: 50rpx;
}

.bottom_a{
  font-size: 24rpx;
}
.bottom_b{
  font-size: 28rpx;
  color: #0db95a;
}

home.js

//home.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    showModal: true, 
    single: false
  },
  onLoad:function(){
    var that = this;
    // 查看是否授權
    wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: function (res) {
              wx.login({
                success: res => {
                  console.log("用戶的code:" + res.code);
                }
              });
            }
          });
        } else {
          that.setData({
            showModal: true
          });
        }
      }
    });
  },
  bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      //用戶按了允許授權按鈕
      var that = this;
      // 獲取到用戶的信息了，打印到控制台上看下
      console.log("用戶的信息如下：");
      console.log(e.detail.userInfo);
      //授權成功后,通過改變 showModal的值，讓實現頁面顯示出來，把授權頁面隱藏起來
      that.setData({
        showModal: false
      });
    } else {
      var that = this;
      //用戶按了拒絕按鈕
      wx.showModal({
        title: '警告',
        content: '您點擊了拒絕授權，將無法獲取你的信息!!!',
        showCancel: false,
        confirmText: '返回授權',
        success: function (res) {
          // 用戶沒有授權成功，不需要改變 isHide 的值
          if (res.confirm) {
            that.setData({
              showModal: true
            });
          }
        }
      });
    }
  }
})

home.json

{
  "usingComponents": {
    "modalView": "../../components/modal/modal"
  }
}

好啦~這是全部代碼，效果如下（點擊登錄可進行授權）