【解决方案】微信浏览器跳出到浏览器打开、跳转到app,安卓&ios

安卓在微信浏览器中唤起在浏览器打开弹窗

效果:微信 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();
  }
};
相关推荐
counterxing17 分钟前
我整理了一个免费开发资源目录,还做成了 CLI 和 MCP
前端·agent·ai编程
子兮曰7 小时前
Bun v1.3.14 深度解析:Image API、HTTP/3、全局虚拟存储与五十项变革
前端·后端·bun
kyriewen8 小时前
今天,百年巨头一次砍了9200人,而一个离职科学家的实话让全网睡不着觉
前端·openai·ai编程
问心无愧05138 小时前
ctf show web 入门42
android·前端·android studio
kyriewen9 小时前
老板逼我上AI,我偷偷在浏览器里跑LLaMA,省下20万API费
前端·react.js·llm
Beginner x_u9 小时前
前端八股整理(手写 02)|数组转树、数组扁平化、随机打乱一个数组
前端·数组·数组转树·数组扁平化
KaMeidebaby9 小时前
卡梅德生物技术快报|禽类成纤维细胞 FISH 实验:鸟类性别染色体基因定位技术实现与数据验证
前端·数据库·其他·百度·新浪微博
天若有情6739 小时前
前端高阶性能优化:跳出传统懒加载与预加载,基于用户行为做轻量预判加载
前端·性能优化
小小小小宇9 小时前
前端转后端:SQL 是什么
前端
张元清10 小时前
React Observer Hooks:7 种监听 DOM 而不写样板代码的方式
前端·javascript·面试