H5页面跳转到小程序的几种实现方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了H5页面跳转到小程序的几种实现方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一种：通过 URL Scheme

可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme

使用示例

服务端配置好接口，客户端调用接口传入目标小程序的path路径

location.href=‘接口返回的openlink’

第二种：在自定义H5页面嵌入微信标签

这种适用于运行在微信环境的自定义H5页面，将跳转按钮融合在自研H5应用，点击按钮后跳转指定小程序页面并且需要 js-sdk-1.6.0 以上才支持

			安装 js-sdk(最好是指定1.6.0版本)
npm install weixin-js-sdk@1.6.0

在wx.config中增加openTagList（开放标签列表），通常会在App文件中配置好

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: ["wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

openTagList（开放标签列表）目前支持配置

wx-open-launch-weapp - 指H5跳转小程序
wx-open-launch-app - 指H5跳转app
wx-open-subscribe - 服务号订阅通知按钮
wx-open-audio - 音频播放

使用示例,详细可参考微信官方文档。

<div class="module-wrap">
    <wx-open-launch-weapp
      username="gh_xxxxxxxx"
      path="pages/home/index?user=123&action=abc"
    >
      <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
      </script>
    </wx-open-launch-weapp>
</div>

username：必须是跳转目标小程序的原始id，gh_开头;
path：跳转小程序的页面路径;

注意要点

使用该功能必须是非个人主体认证的小程序。
只能跳已发布的【正式版】小程序，不能跳【体验版】或【开发版】。
path 属性，官方文档一般是 pages/home/index?user=123&action=abc 这种示例，但实际使用可能会报页面不存在，需要在所声明的页面路径后添加 .html 后缀，如 pages/home/index.html。

第三种：直接用微信的短链（URL Link）

这种一般适用于不需要额外开发H5页面，直接生成链接，用户通过打开链接即可跳转指定的小程序页面。

开链接后，会有微信默认的H5中转页（想要自定义H5中转页也是可以的），目前的版本已经支持默认自动跳转小程序，不需要用户确认，这点很不错。

获取 URL Link 的方式

通过服务端接口可以获取打开小程序任意页面的 URL Link

注意

调微信生成 URL Link 的接口中，参数 path 只认正式版，虽然有 env_version 这个环境变量，然而并没有用（也就是说设定的 path 必须是正式版已经存在的，否则会报：invalid weapp pagepath ）。
生成的 URL Link，也就是https://wxaurl.cn/pFawq35qbfd
这种短链在微信环境中打开只会跳【正式版】，即使你的 env_version 设定了【体验版】或【开发版】，需要在外部浏览器打开才能跳转指定的版本。文章来源地址https://www.toymoban.com/news/detail-609604.html

到了这里，关于H5页面跳转到小程序的几种实现方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！