uni-app 打包运行在微信H5网页中，使用location.href跳转公众号文章时安卓端无法正常返回上一页
uni-app 打包运行在微信H5网页中，使用location.href跳转公众号文章时安卓端无法正常返回上一页
我的h5项目在安卓端出现了这个问题，ios可以正常返回，安卓第一次返回正常，第二次返回直接返回首页了，请问各位有遇到过吗？
// 向 iframe 发送请求
window.frames[0].postMessage(JSON.stringify({ type: "GET", key: "userReads" }), "*");
console.log("iframe发送请求");
// 等待 iframe 响应
await waitForIframeResponse;
let url = "https://xxxxxxxxxxxxxxxxxxx";
let { data } = await uni.request({
url: `${url}/xxxxxxxxxx?key=a8a6900b6fa44366969c66efa069c246&backNumber=0`,
method: "POST",
data: userReads,
});
console.log("data", data);
if (data.link) {
// iframe设置key
window.frames[0].postMessage(
JSON.stringify({
type: "SET",
key: "userReads",
value: JSON.stringify(data.userReads),
}),
"*"
);
// 存储当前时间戳 用于文章阅读完成
uni.setStorageSync("hide_times", Math.floor(Date.now() / 1000));
//跳转指定链接
location.href = data.link;
} else {
// 链接为空，即没有文章可阅读
isRead.value = false;
}| 信息类型 | 信息 |
|---|---|
| 开发环境 | 未提及 |
| 版本号 | 未提及 |
| 项目创建方式 | 未提及 |
在 uni-app 中，使用 location.href 跳转到微信公众号文章时，安卓端无法正常返回上一页的问题，通常是因为微信浏览器对页面跳转的处理机制导致的。以下是一些可能的解决方案：
1. 使用 window.history.back()
在跳转到公众号文章后，尝试使用 window.history.back() 返回到上一页。你可以在页面加载时监听返回事件，并手动调用 window.history.back()。
// 在跳转前记录当前页面的URL
const currentUrl = window.location.href;
// 跳转到公众号文章
window.location.href = 'https://mp.weixin.qq.com/s/xxxxxx';
// 在公众号文章页面中监听返回事件
window.addEventListener('popstate', function() {
window.location.href = currentUrl;
});2. 使用 iframe 嵌入公众号文章
你可以尝试使用 iframe 嵌入公众号文章，而不是直接跳转。这样用户可以在当前页面内查看文章内容，而不需要离开当前页面。
<iframe src="https://mp.weixin.qq.com/s/xxxxxx" width="100%" height="100%"></iframe>3. 使用 uni.navigateBack
如果你在 uni-app 中使用 uni.navigateTo 或 uni.redirectTo 进行页面跳转，可以使用 uni.navigateBack 返回到上一页。
uni.navigateBack({
delta: 1
});4. 使用 uni-app 的 web-view 组件
uni-app 提供了 web-view 组件，可以在页面中嵌入网页内容。你可以使用 web-view 组件来加载公众号文章，这样用户可以在当前页面内查看文章内容。
<web-view src="https://mp.weixin.qq.com/s/xxxxxx"></web-view>5. 使用 window.open 打开新窗口
你可以使用 window.open 打开一个新窗口来加载公众号文章，这样用户可以在新窗口中查看文章内容，而不会影响当前页面的浏览体验。
window.open('https://mp.weixin.qq.com/s/xxxxxx', '_blank');6. 使用 uni-app 的 navigateToMiniProgram 跳转到小程序
如果你有对应的小程序，可以使用 uni.navigateToMiniProgram 跳转到小程序，而不是直接跳转到公众号文章。
uni.navigateToMiniProgram({
appId: 'xxxxxx',
path: 'pages/article/article?id=xxxxxx',
success(res) {
// 打开成功
}
});7. 使用 uni-app 的 redirectTo 或 reLaunch
如果你需要跳转到其他页面，可以使用 uni.redirectTo 或 uni.reLaunch 进行页面跳转，而不是使用 location.href。
uni.redirectTo({
url: '/pages/article/article?id=xxxxxx'
});8. 使用 uni-app 的 navigateBack 返回上一页
如果你需要返回到上一页，可以使用 uni.navigateBack 进行返回。
uni.navigateBack({
delta: 1
});9. 使用 uni-app 的 getCurrentPages 获取页面栈
你可以使用 uni.getCurrentPages 获取当前页面栈，然后根据页面栈进行页面跳转或返回。
const pages = uni.getCurrentPages();
const currentPage = pages[pages.length - 1];
// 根据 currentPage 进行页面跳转或返回10. 使用 uni-app 的 onUnload 生命周期
你可以在页面的 onUnload 生命周期中处理页面卸载时的逻辑，例如记录当前页面的状态或进行页面跳转。
onUnload() {
// 处理页面卸载时的逻辑
}