【解决方案】微信浏览器跳出到浏览器打开、跳转到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();
  }
};
相关推荐
mldong12 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排13 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby606113 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角14 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!15 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰15 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi16 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen17 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马18 小时前
AI源码分析:拆解模型底层实现逻辑
前端
IT_陈寒18 小时前
React子组件莫名其妙重渲染?你可能漏了这个Hook
前端·人工智能·后端