文章目录
- 导文
- 微信小程序登录
- 先写一个样式
- 代码实现
- 详细解释：
- 微信h5登录
- 先写一个样式
- 代码实现
- 1. `checkWeChatCode()`
- 2. `getWeChatCode()`
- 页面获取登陆后的code
导文
微信小程序登录怎么实现？
微信h5登录怎么实现？
用uniapp写同一个页面，怎么实现都通用呢？
微信小程序登录
先写一个样式
<button type="default" @click="handerdl">登陆</button>
在网页中创建一个可点击的按钮，创建一个回调函数handerdl。
代码实现
以下代码包含了登录逻辑和根据不同平台存储 token 的代码：
handerdl() {wx.login({success(res) {if (res.code) {// 如果登录成功，会执行以下代码块// 打印登录获取的 codeconsole.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"; // 公众号appIDconst 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);},
您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
