H5页面跳转小程序的几种实现方案及陷阱

2024-01-21 05:02:43 阅读 0

最近我负责的一个需求涉及到H5页面跳转小程序的场景。具体应用场景为：

操作通过短信发送链接到达用户=>用户点击链接=>跳转到小程序指定的页面

我们来看看目前H5跳转小程序的实现方案~

实施计划

目前实现H5跳转小程序的方案有很多。您可以根据自己的实际场景进行选择。第二种场景更适合上面提到的场景。我们先来一一看看。

第一种：通过URL

适用于外部浏览器中运行的H5页面拉起微信并通过URL打开指定的小程序。

如果小程序的URL是借助云端开发的，则不需要认证，直接调用即可获取。这里我就不详细说了。有兴趣的话可以自行查看文档~

那么如何获取小程序的URL呢？打开小程序任意页面的URL可以通过服务器界面或小程序管理后台“工具”-“生成URL”入口获取。

使用示例

下图是页面经过：【小程序管理后台-工具-生成URL】

填写具体路径和参数，点击【生成】按钮，保存生成的URL，直接放置在按钮的点击事件中，如：

openWeapp() {
    location.href = 'weixin://dl/business/?t=xxxxxx'
}

其他详细信息请参考微信官方文档。

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

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

打开链接后，会出现微信默认的H5转账页面（也可以自定义H5转账页面）。目前版本已经支持默认自动跳转到小程序，无需用户确认，这一点非常好。

如何获取URL链接

通过服务器接口，您可以获得打开小程序任意页面的URL链接。

具体详情请参考微信官方文档。

在踩坑记录调整微信生成URL Link的界面中，参数path只识别官方版本。这个环境变量虽然存在，但是并没有什么用（也就是说设置的路径必须是正式版本中已经存在的，否则会报：weapp）。生成的URL链接，即这个短链接只有在微信环境下打开才会跳转到【官方版】。即使设置了【实验版本】或者【开发版本】，也需要在外部浏览器中打开才能跳转到指定版本。版本，参考。在部分OPPO自带浏览器中打开时（如下图），提示“请在手机上打开网页链接”。兼容性还需要改进...

第三种方法：在自定义H5页面中嵌入微信标签

适用于微信环境下运行的自定义H5页面。跳转按钮集成在自主开发的H5应用程序中。点击按钮会跳转到指定的小程序页面。

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

（打开标签列表）目前支持配置：

HTML 标签示例

<div class="module-wrap">
    <div class="module-A">
        ...
    div>
    <wx-open-launch-weapp
      id="launch-btn"
      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>