지금 로그인 做活动落地页、短信营销或者朋友圈H5时，经常会遇到同一个需求：用户在网页上点一下按钮，就能直接拉起微信小程序。这事听起来像一行代码就能搞定，真动手才发现，能不能跳、怎么跳，完全取决于网页运行在什么环境里。微信内置浏览器有一套玩法，微信外的普通浏览器是另一套，两套方案得分开准备。
先看微信内的情况，这也是最常见的场景：链接通过聊天会话、朋友圈传播，用户点开就是微信内置浏览器。这时候可以用微信JS-SDK提供的 navigateToMiniProgram 接口。
第一步，引入JS-SDK文件：
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
接下来是整个流程里最容易卡壳的环节：配置权限签名。signature 不能在前端计算，必须由后端先拿 access_token 换 jsapi_ticket，再按微信的规则拼接字符串、做 SHA1 加密，最后把 signature、timestamp、nonceStr 一起返回给前端。前端拿到之后，再调 wx.config 完成初始化：
wx.config({
debug: false, // 调试模式，排错时可以临时打开
appId: '你的小程序AppID',
timestamp: '后端生成的timestamp',
nonceStr: '后端生成的nonceStr',
signature: '后端生成的signature',
jsApiList: ['navigateToMiniProgram'] // 用到的接口必须声明
});
jsApiList 这一项千万别漏，不声明的话，后面接口调了也没反应。
初始化成功后，就可以绑定点击事件执行跳转了：
wx.ready(function() {
document.getElementById('btn').onclick = function() {
wx.navigateToMiniProgram({
appId: '目标小程序的AppID',
path: 'pages/index/index?id=123', // 小程序页面路径，可以带参数
extraData: { foo: 'bar' }, // 需要传递给小程序的数据
success(res) {
console.log('跳转成功');
},
fail(err) {
console.error('跳转失败:', err);
}
});
};
});
path 后面可以直接拼 query 参数，extraData 里的数据则能在小程序 App 的 onShow 生命周期里取到，做来源追踪、参数传递都靠它。
不过这套方案有几个硬性前提，缺一个都跑不通：公众号要完成微信认证，并且和要跳转的小程序建立了关联；网页域名要在小程序管理后台配置为业务域名；用户的微信版本也不能太旧。不少人照着文档写完代码还是跳不动，八成是卡在其中某个条件上，而不是代码本身有问题。
再看微信外的场景。如果用户是从短信、其他App或者手机自带浏览器里点开的链接，JS-SDK 直接失效，这时就得换成 URL Scheme 方案。
URL Scheme 是一条形如
weixin://dl/business/?t=xxx 的特殊链接，微信客户端能识别它并拉起对应的小程序。Scheme 没法自己拼，需要服务端调微信的接口生成，前提同样是小程序已发布：POST https://api.weixin.qq.com/wxa/generatescheme?access_token=TOKEN
{
"jump_wxa": {
"path": "pages/index/index",
"query": "id=123"
}
}
前端拿到 Scheme 之后，用普通链接或者按钮触发都可以：
<a href="weixin://dl/business/?t=生成的Scheme">跳转小程序</a>
<!-- 或者用JS触发 -->
<button onclick="window.location.href='weixin://dl/business/?t=生成的Scheme'">跳转</button>
这条路上也有几个坑。Scheme 的有效期最长只有30天，不能像静态资源一样写死在页面里，得由后端动态生成下发。iOS 对非用户主动触发的跳转限制很严，页面一加载就自动跳，基本都会被拦掉——系统这么做的初衷是防止网页未经同意就乱拉应用，但对开发者来说，实际影响就是：稳妥的做法只有放一个明显的按钮，让用户自己点。另外，部分浏览器会直接拦截非 http 协议的链接，这也是为什么"必须用户手动点一下"几乎成了通用解法。
还有一种比较省事的情况：如果网页本身就托管在微信云开发的静态网站服务上，可以借助云函数生成跳转链接，连自建签名服务这一步都能省掉，适合不想搭后端的轻量项目。
那如果用户既不在微信里，Scheme 又因为各种原因没生效呢？这时千万别让用户面对一个点了没反应的页面，至少给一个降级方案：展示小程序码，引导用户长按识别或扫码；或者干脆提示"请复制链接到微信中打开"。体验上多了一步，但总比走进死胡同强。
把 JS-SDK 方案完整串起来，一个可以直接跑的页面大概长这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳转小程序</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<button id="btn">跳转到小程序</button>
<script>
// 从后端获取配置（以下为示例数据，实际需动态获取）
const config = {
appId: '你的小程序AppID',
timestamp: '1234567890',
nonceStr: 'randomString',
signature: '后端生成的签名'
};
wx.config({
debug: false,
appId: config.appId,
timestamp: config.timestamp,
nonceStr: config.nonceStr,
signature: config.signature,
jsApiList: ['navigateToMiniProgram']
});
wx.ready(function() {
document.getElementById('btn').onclick = function() {
wx.navigateToMiniProgram({
appId: '目标小程序AppID',
path: 'pages/index/index',
success() {
console.log('跳转成功');
},
fail(err) {
alert('跳转失败，请确保在微信中打开');
}
});
};
});
wx.error(function(err) {
console.error('JS-SDK初始化失败:', err);
});
</script>
</body>
</html>
最后聊几个高频问题。
跳转失败怎么排查？先确认网页确实是在微信里打开的。这听起来像废话，但真有人用电脑浏览器测了半天。然后核对 wx.config 里的 appId、timestamp、nonceStr、signature 是否和后端生成时使用的完全一致——尤其是 timestamp，前后端对不上是最常见的低级错误。另外，目标小程序必须是已发布状态，体验版和开发版都跳不过去。
想跳支付宝小程序怎么办？思路类似，但接口完全是另一套。支付宝有自己的 alipay:// 协议和生活号关联能力，微信这套东西复用不了，得单独对接。
Scheme 在某些浏览器被拦截怎么办？前面已经说过，别依赖自动跳转，统一设计成用户点击触发，基本能覆盖绝大多数情况。
具体选哪套方案，主要看你的流量从哪来：纯微信生态内传播，JS-SDK 体验最顺滑；有短信、广告投放这类外部渠道引流，URL Scheme 是必选项；两边都占，那就两套都做，按当前环境判断走哪条路。实现细节以微信官方文档为准，平台规则偶尔会调整，动手前把 JS-SDK 文档和 URL Scheme 文档再过一遍最稳妥。