微信小程序最新登录授权

1.wxml部分

<view class="content">
		<view class="login-m">
			<view class="login-item">
				<view class="logo">
					<!-- #ifndef MP-TOUTIAO -->
					<open-data type="userAvatarUrl"></open-data>
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<!-- <image class="toutiao-logo" :src="logoImage"></image> -->
					<!-- #endif -->
				</view>
			</view>
			<view class="login-tip">
				<view class="login-tip-big">
					申请获取以下权限
				</view>
				<view class="login-tip-small">
					获得你的公开信息 （昵称、头像等）
				</view>
			</view>
		</view>
		<view class="login-b flc">
			<!-- #ifdef MP-WEIXIN -->
      <button class="auth-btn refuse" bindtap="handleRefuse">拒绝</button>
			<button class="auth-btn " open-type="getUserInfo" bindtap="getUserProfile" hover-class="btn-hover">允许</button>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<!-- <button class="auth-btn " bindtap="getALICode" hover-class="btn-hover">授权登录</button> -->
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<!-- <text class="auth-btn " bindtap="ttLogin()" hover-class="btn-hover">授权登录</text> -->
			<!-- #endif -->
		</view>
	</view>

2.wxss

.content {
  background-color: #fff;
  height: 100vh;
  padding: 100rpx 60rpx 0;
}

.login-item {
  display: flex;
  justify-content: center;
  padding-bottom: 40rpx;
  border-bottom: 1rpx solid #dddddd;
}

.logo {
  display: block;
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.login-tip {
  padding: 60rpx 0;
}
  .login-tip-big {
    font-size: 28rpx;
    line-height: 80rpx;
  }
  .login-tip-small {
    font-size: 12px;
    color: #9e9e9e;
  }

.app-name {
  font-size: 28rpx;
  color: #999;
}

.login-b {
  display: flex;
}

.login-b .btn-g {
  margin-top: 40rpx;
}

.auth-btn {
  flex: 1;
  display: block;
  width: 100rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 12px;
  color: #FFF;
  background: #1aad19;
  border-radius: 40rpx;
}
.refuse {
  background: #999;
  margin-right: 40rpx;
}

.toutiao-logo {
  width: 100%;
  height: 100%;
}

3. js部分

// pages/login/login.js

var e = require("../../common/promise.js"),
  a = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {},

  onLoad: function (options) {

  },
  wxGetUserProfile: function () {
    return new Promise((resolve, reject) => {
      wx.getUserProfile({
        lang: 'zh_CN',
        desc: '用户登录',
        success: (res) => {
          resolve(res)
          console.log(res);
          // res.encryptedData,
          // res.iv
        },
        // 失败回调
        fail: (err) => {
          reject(err)
        }
      })
    })
  },
  wxSilentLogin: function () {
    return new Promise((resolve, reject) => {
      wx.login({
        success(res) {
          resolve(res.code)
          console.log(res.code);
        },
        fail(err) {
          reject(err)
        }
      })
    })
  },
  getUserProfile: function (e) {
    let p1 = this.wxSilentLogin()
    let p2 = this.wxGetUserProfile()
    Promise.all([p1, p2]).then((res) => {
      let code = res[0]
      let iv = res[1].iv
      let encryptedData = res[1].encryptedData
      // 保存用户头像和昵称到本地
      wx.setStorageSync('userName', res[1].userInfo.nickName)
      wx.setStorageSync('avatar', res[1].userInfo.avatarUrl)
      // wx.setStorageSync('userInfo', res[1].userInfo)
      // 请求服务器
      wx.request({
        url: 'https://viencoding.com/api/v1/wx/login',
        method: 'post',
        data: {
          code: code,
          encrypted_data: encryptedData,
          iv: iv
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          // console.log(res.data)
          wx.navigateBack({
            delta: 1,
          })
        }
      })
    }).catch((err) => {
      console.log(err)
      wx.navigateTo({
        url: '/pages/index/index',
      })
    })
  },
  // 拒绝
  handleRefuse() {
    wx.showToast({
      title: '未授权',
      icon: 'none',
      duration: 1000,
    })
    setTimeout(() => {
      wx.hideToast();
      wx.switchTab({
        url: '/pages/index/index',
      })
    }, 1000);
  },
})

只需要把wx.request那部分中的url换成自己后端给的地址

4.效果图

判断本地是否存在token,没有就弹出登录界面

 5.点击允许按钮后弹起微信的授权登录