导文
微信小程序登录怎么实现？ 微信h5登录怎么实现？ 用uniapp写同一个页面，怎么实现都通用呢？
微信小程序登录
先写一个样式
<button type="default" @click="handerdl">登陆</button>
在网页中创建一个可点击的按钮，创建一个回调函数handerdl。
代码实现
以下代码包含了登录逻辑和根据不同平台存储 token 的代码：
handerdl() {
wx.login({
success(res) {
if (res.code) {
// 如果登录成功，会执行以下代码块
// 打印登录获取的 code
console.log(res.code);
// 调用 Login 函数，传入 res.code，并且使用 Promise 对象处理返回结果
Login(res.code).then((res) => {
// 打印返回的数据
console.log(res.data);
console.log(res.data.access_token);
// 根据不同平台进行 token 存储处理
// 微信小程序平台处理
/*#ifdef MP-WEIXIN*/
wx.setStorageSync("token", res.data.access_token);
wx.setStorageSync("Bear", res.data.token_type);
/*#endif*/
});
} else {
// 登录失败时的处理
console.log("登录失败！" + res.errMsg);
}
},
});
}
详细解释：
-
wx.login({ ... })：这是一个微信小程序的 API 调用，用于获取用户登录凭证 code。wx是微信小程序提供的全局对象，wx.login方法获取用户登录凭证（code），然后执行success回调函数。 -
success(res) { ... }：登录成功后的回调函数，参数res包含了登录成功后的返回信息，其中res.code是用户登录凭证。 -
if (res.code) { ... } else { ... }：判断是否成功获取了登录凭证，如果成功则执行相应的操作，否则输出登录失败信息。 -
Login(res.code).then((res) => { ... });：调用名为Login的函数（假设是一个异步函数或者返回 Promise 的函数），将res.code作为参数传递给它。成功获取到返回结果后，使用.then()处理返回的数据。 -
console.log(res.data);和console.log(res.data.access_token);：打印登录成功后返回的数据，包括 access_token。 -
条件编译块：
/*#ifdef MP-WEIXIN*/和/*#endif*/：这部分是条件编译的语法，用于区分不同的平台。在微信小程序平台下执行wx.setStorageSync存储 token。
微信h5登录
先写一个样式
<button @click="getWeChatCode">微信授权登录</button>
在网页中创建一个可点击的按钮，创建一个回调函数getWeChatCode。
代码实现
主要分为两个函数：checkWeChatCode() 和 getWeChatCode()。来逐步解释这两个函数的作用和实现细节：
1. checkWeChatCode()
checkWeChatCode() {
let code = this.getUrlCode("code");
let http = this.getUrlCode("http");
console.log(22, code, http, encodeURIComponent(location.href));
if (code) {
// this.handleToLogin(code) //该方法如果回调页面是在本页面才使用 我这里的实例没有使用回调页面使用了
console.log(23);
}
},
- 作用：用于检查当前页面 URL 中是否包含名为
code的参数。 - 详细解释：
this.getUrlCode("code")：调用getUrlCode函数获取 URL 中名为code的参数值。this.getUrlCode("http")：获取 URL 中名为http的参数值。console.log(22, code, http, encodeURIComponent(location.href));：输出日志，显示code、http参数的值，以及当前页面的 URL。
2. getWeChatCode()
getWeChatCode() {
uni.setStorageSync("wechat_login_tag", "true");
const appID = "wxqweqweqwe123123"; // 公众号appID
const parsedUrl = new URL(window.location.href);
const basAAA = parsedUrl.origin;
const redirectUrl = basAAA;
const callBack = `${redirectUrl}/user/index`; // 回调地址 就是你的完整地址登录页
window.location.href =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
appID +
"&redirect_uri=" +
encodeURIComponent(callBack) +
"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
},
- 作用：用于发起微信授权登录请求，如果当前页面没有
code参数，则重定向到微信授权页面。 - 详细解释：
uni.setStorageSync("wechat_login_tag", "true");：在uni-app中设置一个本地存储标记，用于退出登录后不再自动触发登录。const appID = "wxqweqweqwe123123";：设置微信公众号的 AppID，确保请求授权时使用正确的应用标识。const parsedUrl = new URL(window.location.href);：解析当前页面的 URL。const basAAA = parsedUrl.origin;：获取当前页面的域名部分。const redirectUrl = basAAA;：设置重定向地址为当前页面的域名部分。const callBack =${redirectUrl}/user/index;：拼接完整的回调地址，这里将重定向到/user/index页面。window.location.href = ...：构建微信授权链接并进行页面重定向。"https://open.weixin.qq.com/connect/oauth2/authorize"：微信授权登录接口地址。appid=：传入公众号的 AppID。redirect_uri=：传入经过encodeURIComponent编码的回调地址。response_type=code：要求微信返回code类型的授权码。scope=snsapi_userinfo：获取用户的基本信息。state=1：状态参数，用于防止 CSRF。#wechat_redirect：微信要求的固定参数，表示重定向到微信授权页面。
页面获取登陆后的code
onLoad(parm) {
let code = this.getUrlCode("code");
console.log(code);
},
您好，我是肥晨。 欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
