h5页面跳转关注微信公众号页面的方法步骤

在 H5 页面里放一个“关注公众号”入口，常见做法是先拿到目标公众号的 __biz 参数，再用它拼出一个微信内部链接。用户点击后，就能跳到公众号资料页或关注页。整体步骤不复杂，但测试时有几个细节容易被浏览器环境带偏。

开始之前，先确认两件事：一是公众号信息是否准确，尤其是 __biz 值；二是页面里用什么方式触发跳转。如果只是静态落地页或活动页，放一个链接或按钮就够；如果是单页应用，或者需要统计点击、先判断微信环境，用 JavaScript 控制会更灵活。



获取 __biz 值，比较稳妥的办法是登录微信公众平台，从后台找到已群发文章或素材，打开链接后查看浏览器地址栏。里面通常有 __biz=，后面跟着的一串字符就是需要的值，复制出来即可。也有人从开发者工具控制台读取 wx.commonData.data.uin_base64 之类的变量，这类方法早年可能有效，但不是官方公开接口，微信改版后容易失效，不建议作为长期方案。

拿到 __biz 后，链接可以按下面格式拼：

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=你的__biz值&scene=110#wechat_redirect

把“你的__biz值”替换成实际参数。action=home、scene=110 和 #wechat_redirect 一般不用动，它们是微信用来识别跳转场景并完成内部重定向的。

在 H5 里实现时，如果只是放一个明确的“关注公众号”按钮，用 <a> 标签最直接：

<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=你的__biz值&scene=110#wechat_redirect">点击关注公众号</a>

跳转前需要做判断，比如确认是否在微信内打开，或者记录点击数据，用 JavaScript 会更顺手：

var url = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=你的__biz值&scene=110#wechat_redirect';

window.location.href = url;

如果不想让用户返回时还能回到当前页面，可以改用 window.location.replace(url)，它会直接替换当前历史记录。

测试时特别容易出错。这个链接是为微信环境准备的，在电脑浏览器里直接打开，往往只会看到提示页，或者无法唤起微信。因此不要只看本地预览或 Chrome 的表现，要把 H5 页面发到手机，在微信里点开确认。确认跳转正常后再部署到线上。线上地址尽量使用 https，微信内打开会更稳定，也能减少被拦截或出现安全提示的概率。

另外，如果用户是在普通浏览器、支付宝或其他 App 里打开这个 H5，链接不一定能顺利跳转。最好在页面里做一下环境判断，非微信环境给出提示，引导用户用微信重新打开。跳转入口的文案也要清楚，直接写“关注公众号”，不要让用户猜。整个过程只要不采用诱导分享、强制关注这类容易踩线的方式，按微信公众平台规则来，一般不会给账号带来风险。