微信小程序的授权登录功能

注意：首先微信小程序是不能一进入小程序就让用户授权登录的，一进入小程序就让用户授权登录，是审核不通过的；

图一的这个提示框是我自己写的；要想弹出微信的微信授权提示框，必须用一个按钮来触发，可用授权登录这个按钮来让微信授权这个弹窗显示，具体代码如下：

index.wxml

  <view class="tc" wx:if="{{isShow}}" bindtap="hidden">
    <view class="inner" wx:if="{{isShow}}">
      <view class='header'>
        <image src='../../image/logo.png'></image>
      </view>
      <view class='content'>
        <view>申请获取以下权限</view>
        <text>获得你的公开信息(昵称，头像等)</text>
      </view>
      <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">授权登录</button>
    </view>
  </view>

index.wcss

/* 授权提示框css,start */ 
.tc {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
} 
.inner {
  background: #fff;
  margin: 0rpx 30rpx 0 30rpx;
  padding: 0 30rpx;
  height: 630rpx;
  border-radius: 10rpx;
  position: relative;
  top: 18%;
  z-index: 1000;
} 
.header {
  border-bottom: 1px solid #ccc;
  text-align: center;
  height: 300rpx;
  margin: 0 auto;
  line-height: 450rpx;
} 
.header image {
  width: 200rpx;
  height: 200rpx;
} 
.content {
  margin-left: 50rpx;
  margin-bottom: 70rpx;
} 
.content>view {
  margin-top: 10rpx;
} 
.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 20rpx;
} 
.bottom {
  border-radius: 80rpx;
  font-size: 35rpx;
  padding: 25rpx 10rpx; 
} 
/* 授权提示框css,end */

index.js

  bindGetUserInfo(e) {
    if (e.detail.userInfo) {
//将e.detail.userInfo存入缓存
      wx.setStorage({
        key: "userInfo",
        data: e.detail.userInfo
      })
      this.logIn();
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告' ,
        content:  '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!' ,
        showCancel: false,
        confirmText: '返回授权' ,
        success: function(res) {
          // 用户没有授权成功，不需要改变 isHide 的值
          if (res.confirm) {
            console.log('用户点击了“返回授权”');
          }
        }
      });
    }
  },
 logIn() { 
    wx.login({
      success: res => {
// 请求后台地址，使用 code 换取 openid 和 session_key 等信息 
        call.request_post("/counseling/webUserProfile/loginByWeiXin", {
            code: res.code
          },
          res => {  
// 成功会掉函数
          },
          err => {
// 失败回调函数
            wx.showToast({
              title: err.message
            })
          }
        )
      }
    })
  },