微信支持 H5 跳转 App、跳转小程序

最新推荐文章于 2025-06-09 16:12:30 发布

LBJ辉

最新推荐文章于 2025-06-09 16:12:30 发布

阅读量765

点赞数

CC 4.0 BY-SA版权

分类专栏： work 文章标签：微信前端

本文链接：https://blog.csdn.net/qq_36081714/article/details/130242876

work 专栏收录该内容

2 篇文章

订阅专栏

微信开放了新的开放标签，如<wx-open-launch-weapp>和<wx-open-launch-app>，允许网页开发者安全地从H5页面跳转到小程序和App。这一功能需要已认证服务号，并要求特定的微信及系统版本。开发者需要配置安全域名、引入JS文件，并在微信开放平台进行关联设置。同时，文章提供了示例代码展示如何使用这些标签并处理回调事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信支持 H5 跳转 App、跳转小程序

新增开放标签

定义: 微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验

有哪些开放标签?

<wx-open-launch-weapp> 打开小程序
<wx-open-launch-app> 打开 app

接入要求

主体要求: 仅开放给已认证的服务号
系统要求：
微信版本要求为：7.0.12 及以上。系统版本要求为：iOS 10.3 及以上、Android 5.0 及以上

接入方法

打开小程序使用步骤与微信 JS-SDK 类似，需要绑定安全域名、引入 JS 文件等步骤

打开 app 需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的 App

示例:

配置最新 JSSDK

wx.config({
  // 其它配置不变， openTagList配置可使用的开放标签,
  openTagList: ['wx-open-launch-app, wx-open-launch-weapp'],
})

页面使用开放标签

打开小程序

<wx-open-launch-weapp
  id="launch-btn"
  // 小程序id
  username="gh_xxxxxxxx"
  // 小程序路径
  path="/a/b/c?d=1&e=2#fg"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序<button>
  </template>
</wx-open-launch-weapp>

打开 app

<wx-open-launch-app
  id="launch-btn"
  // 移动应用appid
  appid="your-appid"
  // 额外信息, 客户端自行解析
  extinfo="your-extinfo"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </template>
</wx-open-launch-app>

回调

<script>
var btn = document.getElementById('launch-btn')
// 调起成功回调
btn.addEventListener('launch', function (e) {
  console.log('success')
})
// 调起失败回调
btn.addEventListener('error', function (e) {
  console.log('fail', e.detail)
})
</script>