uni-app 中处理微信浏览器中授权微信登录后回退问题
在 uni-app 中使用微信登录功能时，我们经常会遇到一个问题：当用户在微信浏览器中授权成功后，无法正常回退到上一页。这个问题是由于微信浏览器的特殊性导致的。
微信浏览器中的授权流程
在微信浏览器中，授权流程如下：
1. 用户点击登录按钮，跳转到微信授权页面。
2. 微信授权页面会弹出一个授权窗口，用户需要同意授权。
3. 如果用户同意授权，则微信会返回一个 code 值给前台页面。
4. 前台页面接收到 code 值后，可以通过 code 换取 access_token。
uni-app 中的授权流程
在 uni-app 中，我们使用 `location.href` 获取微信授权信息的方式来实现授权登录。具体步骤如下：
1. 用户点击登录按钮，跳转到微信授权页面。
2. 微信授权页面会弹出一个授权窗口，用户需要同意授权。
3. 如果用户同意授权，则微信会返回一个 code 值给前台页面。
4. 前台页面接收到 code 值后，可以通过 code 换取 access_token。
回退问题
但是，当我们完成授权操作后，需要返回上一页时，就出现了回退问题。使用 `uni.navigateBack()` 回退到上一页时，发现无法正常回退。
原因分析
原因是微信浏览器的特殊性导致的。当用户在微信浏览器中授权成功后，微信会返回一个 code 值给前台页面，但是这个 code 值并不是一个标准的 URL 形式，而是一个特殊的值。因此，当我们使用 `uni.navigateBack()` 回退到上一页时，无法正常回退。
解决方案
为了解决这个问题，我们可以尝试以下几种方法：
1. 使用微信提供的 API：微信提供了一个 API，可以直接获取 access_token，而不需要通过 code 换取。我们可以使用这个 API 来实现授权登录。
2. 使用 uni-app 提供的插件：uni-app 提供了一个插件，可以帮助我们处理微信授权流程。我们可以使用这个插件来实现授权登录。
3. 手动处理 code 值：我们可以手动处理 code 值，通过 code 换取 access_token，然后再回退到上一页。
具体代码
以下是具体的代码示例：
```javascript// 使用微信提供的 APIwx.login({
success: function (res) {
if (res.code) {
// 获取 access_token wx.request({
url: ' data: {
appid: 'your_app_id',
secret: 'your_secret',
js_code: res.code,
grant_type: 'authorization_code'
},
success: function (res) {
// 获取 access_token var accessToken = res.data.access_token;
// 回退到上一页 uni.navigateBack({
delta:1 });
}
});
} else {
console.log('获取 code 失败');
}
},
fail: function (res) {
console.log('登录失败');
}
});
// 使用 uni-app 提供的插件import wxLogin from 'uni-weixin';
wxLogin.login({
success: function (res) {
if (res.code) {
// 获取 access_token wx.request({
url: ' data: {
appid: 'your_app_id',
secret: 'your_secret',
js_code: res.code,
grant_type: 'authorization_code'
},
success: function (res) {
// 获取 access_token var accessToken = res.data.access_token;
// 回退到上一页 uni.navigateBack({
delta:1 });
}
});
} else {
console.log('获取 code 失败');
}
},
fail: function (res) {
console.log('登录失败');
}
});
// 手动处理 code 值wx.login({
success: function (res) {
if (res.code) {
// 获取 access_token wx.request({
url: ' data: {
appid: 'your_app_id',
secret: 'your_secret',
js_code: res.code,
grant_type: 'authorization_code'
},
success: function (res) {
// 获取 access_token var accessToken = res.data.access_token;
// 回退到上一页 uni.navigateBack({
delta:1 });
}
});
} else {
console.log('获取 code 失败');
}
},
fail: function (res) {
console.log('登录失败');
}
});
```
以上是解决微信浏览器中授权微信登录后回退问题的具体代码示例。
