uniapp 开发 h5 授权微信登录（静默和非静默）
具体流程：
进入 h5 ➡️ 静默登录 ➡️ 请求登录接口 ➡️ 必要时候调起登录组件 ➡️ 点击按钮进行非静默登录 ➡️ 再次请求登录接口 ➡️ 获取到所有用户数据
一、封装登录 function
authLogin: (callback) => {
const that = this;
// 判断是否是在微信环境下运行
if (utils.isWechat()) {
const token = window.localStorage.getItem('__token');
const unionid = window.localStorage.getItem('__unionid');
const loginType = window.localStorage.getItem('__loginType');
// 有token证明登录过，可直接进行回调
if (token) {
callback();
return;
}
if (!unionid) {
// 判断登录方式为静默或非静默， snsapi_base 静默，snsapi_userinfo 非静默
const snsapi = loginType == "snsapi_userinfo" ? "snsapi_userinfo" : "snsapi_base";
// 获取 code 方法，附文章最下边
let _code = utils.getUrlParam("code");
if (_code == null || _code === "") {
// 进行微信授权，附文章最下边
// 传当前页面的URL（微信授权完之后返回到的页面）和 登录方式
utils.getWXCode(window.location.href, snsapi);
} else {
uni.request({
url: '登录请求接口',
method: "GET",
data: {
code: _code,
snsapi: snsapi
},
success: (res) => {
// 静默登录获取到的 unionid 为假数据，我这里后端接口设置静默登录时候返回为 "" ，方便后面判断是否需要非静默登录
window.localStorage.setItem('__unionid', res.data.data.unionid);
window.localStorage.setItem('__token', res.data.data.token);
window.localStorage.setItem('__openid', res.data.data.openid);
window.localStorage.removeItem('__loginType');
// 登录成功后的回调，我这里的每个接口请求都需要在有token的前提下进行
callback();
},
fail: (err) => {
// alert("err");
uni.hideLoading();
uni.showToast({
title: '登录失败'
})
},
})
}
}
} else {
uni.showModal({
title: '错误提示',
content: '请在微信客户端打开链接',
showCancel: false,
success(res) {
if (res.confirm) {}
}
})
}
},
二、封装非静默登录组件
<template>
<view class="login-container">
<view class="login-close" @click="closeLogin">view>
<view class="login-main">
<view class="close-btn">
<image class="" src="../../static/icon/close3.png" mode="widthFix" @click="closeLogin">image>
view>
<view class="logo">
<image src="../../static/img/logo.png" mode="widthFix">image>
view>
<view class="txt">登陆后体验完整功能哦！view>
<button class="login-btn" @click="login">微信登录button>
view>
view>
template>
<script>
import utils from '../../utils/utils.js';
export default {
data() {
return {}
},
props: ['page'],
onLoad() {},
methods: {
login() {
// 非静默登录前先把token缓存清除，否则授权完之后跳转过去不会请求登录接口
window.localStorage.removeItem('__token');
// 设为非静默
window.localStorage.setItem('__loginType', 'snsapi_userinfo');
utils.getWXCode(this.page, 'snsapi_userinfo');
},
closeLogin() {
this.$emit('closeLogin', false);
}
}
}
script>
<style lang="less" scoped>
.login-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99;
.login-close {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 630rpx);
}
.login-main {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 630rpx;
background-color: #fff;
border-radius: 16rpx 16rpx 0 0;
.close-btn {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 30rpx 30rpx 0;
// position: absolute;
// top: 30rpx;
// right: 30rpx;
image {
width: 40rpx;
height: 40rpx;
}
}
.logo {
display: flex;
align-items: center;
justify-content: center;
image {
width: 170rpx;
height: 170rpx;
}
}
.txt {
margin-top: 40rpx;
font-weight: 500;
font-size: 36rpx;
color: #333333;
text-align: center;
}
.login-btn {
margin: 96rpx 30rpx 0;
color: #fff;
background-color: #49C265;
}
}
}
style>
三、使用组件
<template>
<view class="content">
<loginMask v-if="showLogin" :page="myPage" @closeLogin="closeLogin">loginMask>
view>
template>
<script>
import utils from '../../utils/utils.js';
import loginMask from '../../components/login/login.vue';
export default {
data() {
return {
showLogin: false,
myPage: '当前页面的链接，不能使用 window.location.href，防止携带code',
}
},
components: {
loginMask
},
onLoad() {
const that = this;
// 调用封装好的登录function
// 登录function封装好后可以放在 Vue.prototype 上，直接this.authLogin调用
// 也可以放在utils.js中，用utils.authLogin调用
that.authLogin(() => {
that.goodsList();
})
},
methods: {
goodsList() {
const that = this;
uni.request({
url:"请求接口"
})
},
closeLogin(e) {
this.showLogin = e;
},
// 在需要展示登录组件的时候让 this.showLogin = true
}
}
script>
<style lang="less" scoped>style>
四、utils/utils.js
export default {
// 判断是否为微信环境
isWechat: () => {
var ua = navigator.userAgent.toLowerCase();
var isWXWork = ua.match(/wxwork/i) == 'wxwork';
var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger';
return isWeixin;
},
// 获取code并登录
getWXCode: async (url, snsapi) => {
let appid = '' //公众号的唯一标识
let local = encodeURIComponent(url); //授权后重定向的回调链接地址
let time = +new Date(); //时间戳
window.location.href =
`https://open.weixin.qq.com/connect/oauth2/authorize?
appid=${appid}&
redirect_uri=${local}&
response_type=code&
scope=${snsapi}&
state=1&
time=${time}#wechat_redirect`;
},
// 截取code
getUrlParam: (name) => {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
},
}