小程序怎么和网站对接打印-H5页面跳转小程序的几种实现方案及陷阱

bendan520 网站程序

2023-08-28 0 3,053 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

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

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

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

实施计划

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

第一种：通过URLScheme

对于适合在外部浏览器中运行的H5页面，使用URLScheme的方法拉取Momo打开指定的小程序。

如果小程序的URLScheme用于云开发，则无需信令，直接调用即可获取。我不会在这里讨论太多细节。有兴趣的童鞋可以自行查看文档~

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

使用示例

右图是通过：【小程序管理后台-工具-生成URLScheme】页面

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

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

其他详情请参考Momo官方文档。

第二种方法：直接使用Momo的短链接（URLLink）

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

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

获取URLLink的方法

通过服务器socket可以获取打开小程序任意页面的URLLink

详情请参考Momo官方文档。

在踩坑记录并将陌生人调整为URLLink的socket中，参数path只识别即将发布的版本。即使有env_version的环境变量也是没有用的（也就是说设置的路径必须已经存在于即将发布的版本中，否则会报：invalidweapppagepath）。生成的URLLinks，也就是这些短链接只有在Momo环境中打开时才会跳转到【官方版本】。即使你的 env_version 设置为【试用版】或者【开发版】，你也需要在外部浏览器中打开才能跳转指定版本小程序怎么和网站对接打印，ref。在某些OPPO自带的浏览器中打开（如右图），会提示“请在手机上打开网页链接”。兼容性还需要努力...

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

这些适用于在 Momo 环境中运行的自定义 H5 页面。跳跃按钮集成在自主开发的H5应用程序中。点击按钮后，会跳转到指定的小程序页面。

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

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

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>