让 H5 与小程序无缝握手
——「快缩短网址」优雅跳转指南
一、原理之翼
1. URL Link：微信官方长链，形如 https://wxaurl.cn/xxx。在微信内轻触即达，零摩擦。
2. URL Scheme：专用协议 weixin://dl/business/?t=xxx，可跨短信、邮件、浏览器，但需用户主动点击。
二、实战之径
方法 A｜URL Link（微信内，首推）
① 生成
登录 mp.weixin.qq.com → 开发 → 开发设置 → 生成 URL Link
页面路径：/pages/index/index
参数：可附加如 ?scene=123
复制所得链接：https://wxaurl.cn/xxx
② 织梦
新建极简 H5：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>瞬移中…</title>
<style>body{margin:0;display:flex;align-items:center;justify-content:center;height:100vh;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC";}</style>
<script>
(function(){
if (/micromessenger/i.test(navigator.userAgent)) {
location.replace('https://wxaurl.cn/xxx');
} else {
alert('请复制链接并在微信内打开');
}
})();
</script>
</head>
<body>正在为你打开小程序…</body>
</html>
③ 部署
将文件上传至云服务器，绑定域名。
④ 体验
用户微信内访问 H5 → 秒启小程序首页。
方法 B｜URL Scheme（跨端，需点击）
① 生成
同路径进入「生成 URL Scheme」，复制：weixin://dl/business/?t=xxx
② 缩短
打开 suo.run，一键生成短链：weixin.com/abc
③ 嵌入
<a href="https://weixin.com/abc" style="display:block;width:200px;margin:40vh auto;padding:12px 0;background:#07c160;color:#fff;border-radius:8px;text-align:center;">立即体验小程序</a>
④ 体验
用户点击 → 唤起微信 → 手动确认 → 抵达小程序。
三、细节之韵
• 合规：宣传与落地页须一致，勿诱导分享。
• 体验：H5 加载时加 300 ms 淡入动画，缓解等待。
• 兼容：URL Link 仅微信内生效；URL Scheme 部分安卓需「打开外部应用」权限。
• 追踪：在 suo.run 生成带参短链（?from=h5），实时查看来源、设备、地域。
四、一句总结
把长链交给「快缩短网址」，把复杂留给我们，把顺滑留给用户。