Uni-App跨端开发实战：编译H5跳转全平台终极指南（03）

前言

在uniApp开发过程中，对于编译后平台，页面间的跳转是非常简单的。但是一个平台跳转其他平台是需要进行额外的处理判断。为了简化代码、提高复用性，下面将介绍如何在uniApp项目中封装一个灵活且易于使用的跳转方法。

之前整理的uniapp中微信小程序、App、h5相互跳转总结并不完善，准备针对APP、H5、微信小程序各出一个完整的跳转总结。由于每个平台的跳转需要详细说明，所以分开为三篇进行说明。

本文为主要说明uniapp编译后H5的跳转。

1. 整体结构与说明

我们要弄清楚各个平台的跳转方式，那就需要分别对每个编译后的平台进行处理，具体内容如下图所示：

编译后H5跳转各平台,需要进行额外的说明，可以分为内嵌的小程序中的，和非内嵌的两种。总览如下图所示：

H5跳转需要区分内嵌和非内嵌主要有：

内嵌
- 跳转H5: 需要使用webview跳转
- 跳转小程序: 可以使用微信提供的jssdk
- 跳转APP: 还是使用URL Scheme,引导打开外部浏览器方式
非内嵌
- 跳转H5: 使用location.href
- 跳转小程序: 使用小程序的URL Scheme
- 跳转APP: 还是使用URL Scheme,引导打开外部浏览器方式
跳转自身

2. URL Scheme说明

URL Scheme 是一种 自定义协议 ，在移动设备（iOS/Android）或 Web 环境中 直接唤起特定的 App 或功能 。类似于 http://或 https://，用于 App 间的跳转。

例如：微信是weixin://,在H5页面直接通过location.href打开，会打开APP。打开APP我们均使用，下面很多都是通过URL Scheme，均跳转通用的H5页面，引导用户使用默认浏览器打开，通过location.href进行跳转。

常用的URL Scheme

下面我们针对H5平台进行处理说明。

3. H5跳转

H5跳转也分为内嵌和非内嵌，我们默认两者都接入微信的jssdk，内嵌的在跳转小程序时，与非内嵌有所区分，这里我们做一下区分进行说明。

3.1 判断是否是内嵌

在此之前，我们需要说明下，如何判断H5是在微信小程序内嵌、微信打开、外部浏览器打开：

可以通过以下代码实现：

js 复制代码

const isMiniProgram = async () => {
  return new Promise((resolve, reject) => {
    if (/MicroMessenger/i.test(navigator.userAgent)) {
      wx.miniProgram.getEnv((res) => {
        if (res.miniprogram) {
          resolve(true)
          console.log('内嵌在小程序')
        } else {
          console.log('微信浏览器')
          resolve(false)
        }
      })
    }
    else {
      console.log('外部浏览器')
      resolve(false)
    }
  })
};

3.2 跳转约定

跳转页面可以进行如下约定：

url以http开头
- 如果内嵌，需要使用webview方式
- 非内嵌则直接location.href
url中query存在urlScheme,可能跳转小程序，可能跳转APP
- 如果内嵌，则均为引导
- 非内嵌则直接location.href打开
其余情况默认跳转自身页面

3.3 非内嵌H5

非内嵌H5除了跳转自身页面使用navigateTo等自带的方法，其余跳转可以使用location.href或者window.open，这里我们均用location.href进行跳转。

3.3.1 跳转外部H5

在H5中跳转H5，用location.href进行跳转，链接为https://xxx.xxx.com/wechat/#/xxx?name=jack&age=20

代码如下：

js 复制代码

window.location.href = https://xxx.xxx.com/wechat/#/xxx?name=jack&age=20

3.3.2 跳转小程序

在H5中跳转小程序，我们使用小程序的URL Scheme，可以跳转通用的跳转页面进行跳转，用location.href进行跳转，链接为通用跳转页面：https://xxx.xxx.com/commonJump?urlScheme=miniUrlScheme

小程序的URL Scheme分为加密和明文两种方式，官方文档，明文需要在后台进行手动配置，前端参数自行拼接。

perl 复制代码

加密：weixin://dl/business/?t=HZ2gBmGKRzp

明文：weixin://dl/business/?appid=appid&path=pages/mall/index

代码如下：

js 复制代码

window.location.href = https://xxx.xxx.com/commonJump?urlScheme=weixin://dl/business/?t=HZ2gBmGKRzp

3.1.3 跳转APP

同跳转微信小程序，只是URL Scheme换成APP的，uniapp如何配置，需要在manifest.json中配置，注意本地测试可以使用HBuilderX自带标准真机运行基座的UrlSchemes为"hbuilder://" ，方便开发者调测。, 官方文档

链接为：https://xxx.xxx.com/commonJump?urlScheme=hbuilder://

代码为：

js 复制代码

window.location.href = https://xxx.xxx.com/commonJump?urlScheme=hbuilder://

3.1.4 其余跳转

默认跳转自身页面

代码如下：

js 复制代码

uni.navigateTo({
    url,
    fail() {
      uni.switchTab({
        url,
      })
    }
})

3.2 内嵌H5

对于小程序内嵌的H5, 需要进行授权，授权可参考之前的文章，这里不做说明，可以调用jssdk，进行跳转。

3.2.1 跳转H5

直接通过wx.navigateTo使用webview进行跳转

js 复制代码

if (url.startsWith('http')) {
  wx.navigateTo({
    url: '/pages/webview/index?url=url'
  })
}

3.2.2 跳转webview的微信小程序

可以使用wx.navigateTo进行跳转，或者使用开放标签，此处因为是通用方法不使用开放标签。

js 复制代码

if (url.indexOf('page') > -1) {
  wx.navigateTo({
    url
  })
}

那么可能会问，怎么能在内嵌的小程序中跳转第三方小程序呢？

那么请直接在小程序中进行跳转，O^O!

3.2.3 跳转APP

还是跳转公共跳转页面，引导外部浏览器打开H5,通过urlScheme进行打开APP。

3.2.4 其余跳转

默认跳转自身页面

代码如下：

js 复制代码

uni.navigateTo({
    url,
    fail() {
      uni.switchTab({
        url,
      })
    }
})

3.3 总结H5跳转方法

仅作参考，参考代码如下：

js 复制代码

const isMini = await isMiniProgram()
  if (isMini) {
    if (url.startsWith('http')) {
      wx.navigateTo({
        url: '/pages/webview/index?url=' + encodeURIComponent(url)
      })
    } else {
      wx.navigateTo({
        url
      })
    }
    return
  }
  if (url.indexOf('http') == 0 || urlScheme) {
    window.location.href = url
  } else {
    toPage(url)
  }

4. 总结

最后总结一下H5跨端跳转方式总结表：

跳转目标	非内嵌环境 (普通浏览器/微信浏览器)	内嵌小程序环境 (微信小程序web-view内)
跳转 H5 页面	使用 `window.location.href` 直接跳转。	使用 `wx.miniProgram.navigateTo` 跳转到小程序的 `web-view` 页面来承载目标H5。
跳转小程序	使用小程序的 URL Scheme (如 `weixin://dl/business/?t=xxx`)，通过 `window.location.href` 跳转。	使用 `wx.miniProgram.navigateTo` 仅可跳转自身小程序页面；无法直接跳转第三方小程序，需在小程序原生环境中处理。
跳转 App	统一使用 URL Scheme (如 `hbuilder://`) 跳转至通用引导页 H5，引导用户在外部浏览器中打开并唤起目标 App。注意 : 需在 `manifest.json` 中配置 App 的 URL Scheme，iOS 还需在工程中配置 `CFBundleURLTypes`。	同非内嵌环境逻辑，引导跳出至外部浏览器打开。
跳转自身页面	不符合上述条件时，默认使用 `uni.navigateTo` 或 `uni.switchTab`（针对 Tab 页）进行内部路由跳转。	同非内嵌环境逻辑，使用 UniApp 路由 API。

如有错误或补充，欢迎指正！ O^O!