H5跳转能力总结

前言

本篇文章是对 H5 跳转能力的一个总结，对开发实战中的一些技巧进行介绍，主要涉及H5跳转小程序和小程序内嵌H5跳转小程序这两个模块。

H5跳转小程序

开放标签跳转小程序

适用环境：微信浏览器

详细步骤可以参考此链接，这里仅介绍 wx-open-launch-weapp 的使用

以下示例使用 vue3。

写一个可扩展的生成 wx-open-launch-weapp 标签的方法

js 复制代码

const createWxOpenLaunchWeapp = ({
  btnWidth = '100%',
  btnHeight = '80px',
  btnText = '',
  path = 'pages/index/index',
  appid = '',
  btnStyle = '',
  openStyle = '',
}) => {
  return `<wx-open-launch-weapp id="launch-btn" appid="${appid}"  path="${path}" style="${openStyle}">
              <script type="text/wxtag-template">
                <style>
                  .btn { display: inline-block; width: ${btnWidth}; height: ${btnHeight};margin: auto; border: none; background-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none; }
                </style>
                <button class="btn" style="${btnStyle}">${btnText}</button>
              </script>
          </wx-open-launch-weapp>`
}

生成一个标签

js 复制代码

const wxJumpHtml = createWxOpenLaunchWeapp({appid:'****'})

使用

html 复制代码

<div v-html="wxJumpHtml"></div>

注意：由于这个跳转的按钮是独立于页面之外的，所以需要给按钮指定宽高，如果遇到需要按钮需要根据元素大小自适应的需求，可以参考以下思路：

示例场景：图片大小可能不固定，实现无论图片大小怎么变都可以点击跳转

图片元素外增加一个父元素 item，加入一个工具元素（不可见的专门用来跳转的item-jump 元素）
item-jump 元素相对定位，并充满父元素
将标签设置为块级元素，按钮的宽度设置为100%，高度设置的足够高，下面的示例以 1000px 作为示例

ps: 不用担心开放标签的按钮设置过高后点击区域过大的问题，按照以下方法，点击范围会控制在父元素区域内

js 复制代码

<template>
  <div class="item">
    <!-- 不可见的、仅用来跳转小程序的工具元素 -->
    <div class="item-jump" v-html="wxJumpHtml"></div>
    <!-- 动态变化的图片 -->
    <img class="item-img" :src="imgUrl" />
  </div>
</template>
<script setup>
  const wxJumpHtml = createWxOpenLaunchWeapp({ 
    openStyle: 'display: block;', 
    btnWidth: '100%', 
    btnHeight: "1000px",
    appid:'****' 
  })
</script>
<style lang="scss" scoped>
  .item {
    position: relative;
    width: **px;
    &-jump {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    &-img {
      width: 100%;
      height: auto;
    }
  }
</style>

URL Scheme

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

适用环境：从短信、邮件、微信外网页等场景打开小程序

形如：

ini 复制代码

weixin://dl/business/?t= *TICKET*

可以通过 location.href 进行跳转

ini 复制代码

location.href = 'weixin://dl/business/?t= *TICKET*'

iOS支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。

Android系统不支持直接识别 URL Scheme，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，此时就可以通过location.href = 'weixin://dl/business/?t= TICKET'这种方式来实现

所以最好的方式是，建立一个H5中转页，检测是否为微信客户端内，如果是微信客户端，则使用免鉴权使用开放标签跳转，如检测到在外部浏览器或 App，则使用 URL Scheme 跳转小程序。

官方体验链接:postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.htm...

注意： 每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Scheme打开该小程序。

URLLink

和URL Scheme类似，需要通过服务端接口生成，详见链接

适用环境：从短信、邮件、网页、微信内等场景打开小程序，当用户在微信内访问 URL Link ，会调整为开放标签打开小程序

形如：

text 复制代码

https://wxaurl.cn/*TICKET* 或 https://wxmpurl.cn/*TICKET*

注意：每个独立的URL Link被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Link打开该小程序。

总结

方式	开放标签跳转小程序	URL Scheme	URLLink
形式	`<wx-open-launch-weapp>...</wx-open-launch-weapp>`	weixin://dl/business/?t= TICKET	wxaurl.cn/TICKET
适用环境	微信浏览器	从短信、邮件、微信外网页等场景	从短信、邮件、网页、微信内等场景打开小程序 (当用户在微信内访问 URL Link ，会调整为开放标签打开小程序)
是否有弹窗提示	有	无	无
生成方式	手动配置html标签	服务端接口	服务端接口
打开限制	暂无	每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Scheme打开该小程序。	每个独立的URL Link被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Link打开该小程序。
有效期	永久	最长30 天	最长 30 天

小程序内嵌H5跳转小程序

跳转小程序内页面

h5中直接使用 weixin-js-sdk 进行跳转

javascript 复制代码

import wx from 'weixin-js-sdk'
wx.miniProgram.navigateTo({
  url: `/pages/index/index`,
  success() {
    console.log('跳转小程序成功')
  },
  fail() {
    console.log('跳转小程序失败')
  }
})

跳转第三方小程序

目前sdk不支持直接用h5跳转到第三方小程序，需要建立一个原生的小程序页面，然后在小程序原生页面内进行第三方小程序的跳转，具体步骤如下

在小程序内建立一个专门用来中转跳转第三方小程序的页面
h5 跳转到原生的中转页中，并携带页面路径及 appid参数
中转页代码实现如下，通过在 onload 中跳出一个跳转弹窗，引导用户手动跳转

js 复制代码

Page({
  onLoad(options) {
    wx.showModal({
      title: '温馨提示',
      content: '即将打开新的页面',
      showCancel: true, //是否显示取消按钮
      cancelText: '取消', //默认是"取消"
      cancelColor: '#000000', //取消文字的颜色
      confirmText: '确定', //默认是"确定"
      confirmColor: '#3cc51f', //确定文字的颜色
      success: function (res) {
        if (res.cancel) {
          //点击取消，wx.navigateBack
          wx.navigateBack();
        } else {
          // 使用wx.navigateToMiniProgram跳转到小程序
          wx.navigateToMiniProgram({
            appId: option.appid,
            path: `${decodeURIComponent(options.path)}`,
            success(res) {
              // 打开成功
            }
          });
        }
      },
      fail: function (res) {
        //接口调用失败的回调函数，wx.navigateBack
      },
      complete: function (res) {
        //接口调用结束的回调函数（调用成功、失败都会执行）
      }
    });
  }
});

H5唤起APP

可以参考本篇文章，这里不做介绍

【彩蛋】页面返回回到顶部小技巧

不知道你有没有遇到过一个场景：在页面跳转之后操作页面返回，页面还会停留在原来滚动到的位置，即使刷新页面，依旧不会回到顶部。

我们在遇到这个问题的时候，很可能会尝试在页面每次加载的时候，去使用 js 去手动操作回到顶部。

但是，我想介绍一种更为优雅的处理方式：

我们可以使用 history 的滚动恢复属性：scrollRestoration

它有两个可选项：auto 和 manual

MDN文档developer.mozilla.org/zh-CN/docs/...

manual (不记住滚动位置)

ini 复制代码

window.history.scrollRestoration = "manual"

如下图，我们将 history 的 scrollRestoration 属性设置为 manual。当我们将A页面滑动到底部，点击跳转到B页面，返回之后，页面是可以重新回到顶部的。

auto（记住上一次滚动位置，一般浏览器默认是 auto）

ini 复制代码

window.history.scrollRestoration = "auto"

如下图，我们将 history 的 scrollRestoration 属性设置为 auto。当我们将A页面滑动到底部，点击跳转到B页面，返回之后，页面依然停留在跳转前的位置。

如上所述，你可以通过设置 history 的滚动恢复属性 scrollRestoration 去设置浏览器是否记住当前的滚动位置。

后记

以上就是本篇文章的全部内容，感谢观看，欢迎留言讨论。