使用微信 Urllink 在 H5 页面打开小程序功能

微信 Urllink 是一种通过 H5 页面直接跳转到微信小程序的链接方式。开发者可以通过生成 Urllink，实现从外部网页无缝引导用户进入小程序。

生成 Urllink

1. 获取生成权限
   开发者需在微信公众平台申请 Urllink 生成权限，确保小程序已关联公众号且通过企业认证。

2. 获取access_token
   去微信公众平台上获取 需要跳转小程序的 appid 和 对应的secret。

   const axios = require('axios');
   const generateUrlLink = async () => {
   const res = await axios.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET')
   return res.data.access_token;
   };
   
   

3. 调用生成接口
   根据上一步获取到access_token后，使用微信提供的 generateUrlLink 接口（服务端调用），传入小程序的 path、query 参数等配置。

   const axios = require('axios');
   const generateUrlLink = async () => {
     const res = await axios.post('https://api.weixin.qq.com/wxa/generate_urllink?access_token=YOUR_ACCESS_TOKEN', {
       path: 'pages/index/index',
       query: 'id=123',
       env_version: 'release',
       expire_time: 1606737600
     });
     return res.data.url_link;
   };
   

常用参数要点：

• path：目标小程序页面路径（不带 ?）。
• query：query 串，如 a=1&b=2。
• env_version：release（生产）/trial（体验）/develop（开发）。
• is_expire + expire_time/expire_interval：是否临时链接及过期时间（可选）

在 H5 页面中嵌入 Urllink

1. 直接跳转
   将生成的 Urllink 作为 H5 页面中的超链接或按钮跳转地址：

   <a href="https://wxaurl.cn/xxx">打开小程序</a>
   

2. 动态触发跳转
   通过 JavaScript 监听事件触发跳转，适合需要条件判断的场景：

   goPage(urlLink) {
      function openMiniProgramByUrlLink(urlLink) {
        // 建议用 assign/replace，避免被拦截
        window.location.assign(urlLink)
      }
      openMiniProgramByUrlLink(urlLink)
    }
   

配置注意事项

• 有效期控制
  Urllink 默认长期有效，但建议设置 expire_time 避免链接泄露风险。

• 参数传递
  通过 query 字段传递参数到小程序，小程序可通过 onLaunch 或 onLoad 接收：

  onLoad(options) {
    console.log(options.id); // 输出 '123'
  }
  

• 兼容性处理
  部分安卓机型需检测微信环境，非微信浏览器内需提示用户复制链接到微信打开。

调试与问题排查

• 链接校验工具
  使用微信提供的 Urllink 调试工具 检查链接是否有效。

• 常见错误

  • access_token 失效：需重新获取并更新。
  • path 格式错误：需以 pages/ 开头且存在于小程序配置中。