安卓在微信浏览器中唤起在浏览器打开弹窗
效果:微信 h5 点击按钮后展示弹框'即将离开微信,在浏览器打开'。
原理:微信检测到下载链接时会拉起弹窗,此时可以选择在浏览器打开。
思路就是实现一个接口,如果是在微信环境,就下载文件,否则就重定向到业务页面。
参考文章:https://segmentfault.com/a/1190000044832622
express 版:
js
router.get("/jump", (req, res) => {
// 1. 获取用户代理字符串,并检查是否包含 MicroMessenger (忽略大小写更稳妥)
const userAgent = req.get("User-Agent") || "";
const isWeChat = /MicroMessenger/i.test(userAgent);
if (isWeChat) {
// 2. 如果是微信浏览器,强制下载文件
// 假设 jump.doc 和当前执行的 js 文件在同一个目录下
const filePath = path.join(__dirname, "jump.doc");
// Express 的 res.download 会自动帮你设置 Content-Type, Content-Disposition 等头信息
res.download(filePath, "jump.doc", (err) => {
if (err) {
// 如果文件不存在或下载过程中出错,进行错误处理
console.error("文件下载出错:", err);
if (!res.headersSent) {
res.status(404).send("文件未找到或下载失败");
}
}
});
} else {
// 3. 如果不是微信浏览器,输出 JS 进行重定向到业务页面
const alipayUrl = "http://192.168.8.7:5502/index.html";
// 等同于 PHP 的 echo
res.send(`<script>location.href="${alipayUrl}";</script>`);
/* * 💡 额外提示:
* 在 Node/Express 中,通常推荐使用原生 HTTP 重定向,即:
* res.redirect(alipayUrl);
* 但如果你明确需要像原 PHP 那样使用前端 JS 跳转(为了规避某些平台的拦截),
* 使用上面的 res.send('<script>...') 也是完全可以的。
*/
}
});
使用时直接跳转到这个路径即可:
js
window.location.href = "http://192.168.8.7:3000/jump";
安卓在微信浏览器中唤起跳转到app弹窗
使用协议链接跳转。
js
window.location.href = "com.greenpoint://android.mc10086.activity";
苹果在微信浏览器中唤起跳转到app弹窗
苹果可以使用 Universal Link,实现从微信浏览器中跳转到外部app,这里用的是这个方案,还有其他方法比如 wx-open-launch-app,从应用宝链接中转等。
js
window.location.href =
"https://client.app.coc.10086.cn/activity/transit/universalLink.html";
完整
此处为 http://192.168.8.7:5502/index.html 文件的 js。
js
const userAgent = navigator.userAgent;
const isWeChat = /MicroMessenger/i.test(userAgent);
const isIos = /iPhone|iPad|iPod/i.test(userAgent);
// 微信内按钮点击:在浏览器中打开
function wxBtnClick() {
if (isIos) {
window.location.href = `https://client.app.coc.10086.cn/activity/transit/universalLink.html`;
} else {
window.location.href = "http://192.168.8.7:3000/jump";
}
}
// 微信外打开:跳转到app
function normalBtnClick() {
if (isIos) {
window.location.href = `https://client.app.coc.10086.cn/activity/transit/universalLink.html`;
} else {
window.location.href = `com.greenpoint://android.mc10086.activity`;
}
}
if (!isWeChat) {
normalBtnClick();
}
document.querySelector("#wx-open-app-button").onclick = () => {
if (isWeChat) {
wxBtnClick();
} else {
normalBtnClick();
}
};