Uni-App跨端开发实战：编译微信小程序跳转全平台终极指南（01）

前言

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

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

本文为主要说明uniapp编译后微信小程序的跳转。

1. 整体结构与说明

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

编译后微信小程序跳转各平台总览如下图所示：

微信小程序跳转主要有：

跳转H5: 通过小程序webview进行承载
跳转外部小程序: 分为两类
*
1. 跳转外部进行打开小程序
- 1. 在自身小程序内进行半屏打开，此方式需要在后台设置
跳转APP: 小程序有跳转APP的方式，比较麻烦，我们均跳转通用的H5页面，引导用户使用默认浏览器打开scheme进行跳转APP
跳转自身

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

下面我们针对微信小程序平台进行处理说明。

3. 小程序跳转

封装跳转方法之前，我们需要在跳转页面进行如下约定：

url以http开头，为跳转H5
url中query存在appid则进行跳转其他小程序
- query有isEmbedded跳转半屏小程序
- 没有则跳转外部小程序
url为特定H5页面路径，需要带urlScheme参数，使用webview打开，进行引导打开外部浏览器打开APP
其余情况默认跳转自身页面

跳转链接如下所示：

js 复制代码

[
  {
    value: '1',
    label: '跳转自身小程序',
    url: '/pagesA/theme/index'
  },
  {
    value: '2',
    label: '跳转第三方小程序',
    url: '/pages/mall/index?appid=appid&ghId=ghId'
  },
  {
    value: '3',
    label: '打开半屏小程序',
    url: '/pages/mall/index?appid=appid&isEmbedded=T&ghId=ghId'
  },
  {
    value: '4',
    label: '跳转H5',
    url: 'https://www.xxx.top/h5/commonJump'
  },
  {
    value: '5',
    label: '跳转APP',
    url: 'https://www.xxx.top/h5/commonJump?urlScheme=weixin://'
  },
]

3.1 跳转H5

在小程序中跳转H5，我们使用小程序组件webview进行跳转。

跳转链接为:https://xxx.xxx.com/xxx?name=jack&age=20

注意小程序下打开H5，必须配置业务域名白名单

小程序后台配置：

代码如下：

js 复制代码

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

3.2 跳转外部或半屏小程序

3.2.1 跳转外部小程序

使用uni.navigateToMiniProgram，跳转链接为：/pages/index/index?appid=小程序APPID&ghId=微信原始ID

参数如下：

3.2.2 跳转半屏小程序

打开半屏小程序，需要微信后台进行配置半屏小程序，使用uni.openEmbeddedMiniProgram进行打开，跳转链接为/pages/index/index?appid=小程序APPID&ghId=微信原始ID&isEmbedded=T

小程序跳转也可支持shortLink，如 #小程序://小程序名称/liZh6bFzcfXoReh，不作说明

参数如下：

通过参数isEmbedded进行控制是否打开半屏小程序，后台需要配置如下：

注意：如果微信小程序后台未配置，效果同跳转外部

代码如下：

js 复制代码

const appid = getQueryVariable(url, 'appid')
const ghId = getQueryVariable(url, 'ghId')
const isEmbedded = getQueryVariable(url, 'isEmbedded')

if (appid) {
    const params = {
      appId: appid,
      path: url,
    }
    if (isEmbedded === 'T') {
      uni.openEmbeddedMiniProgram(params)
    } else {
      uni.navigateToMiniProgram(params)
    }
}

3.3 跳转APP

小程序跳转APP，可以使用url Scheme方式，由于内嵌h5无法打开，引导用户通过外部浏览器打开小程序。定制一个特定的H5页面用于打开外部APP。

例如：微信为：weixin://，企业微信为：wxwork://

跳转链接为：https://xxx.xxx.com/commonJump?urlScheme=参数，其中参数是各个app的URL Scheme,

代码如下：

js 复制代码

uni.navigateTo({
  url: '/pages/webview/index?url=url'
})

代码同跳转H5,只不过是特定页面的H5链接,引导打开外部浏览器，再打开APP。

3.4 其余跳转

其余默认跳转自身页面，代码如下：

js 复制代码

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

3.5 总结微信小程序方法

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

js 复制代码

if (url.startsWith('http')) {
    uni.navigateTo({
      url: '/pages/webview/index?url=url'
    })
} else if (appid) {
    const params = {
      appId: appid,
      path: url,
    }
    if (isEmbedded === 'T') {
      uni.openEmbeddedMiniProgram(params)
    } else {
      uni.navigateToMiniProgram(params)
    }
} else {
  uni.navigateTo({
    url,
    fail() {
      uni.switchTab({
        url,
      })
    }
  })
}

4. 总结

最后总结一下微信小程序跨端跳转方式总结表：

微信小程序跨端跳转方式总结表

跳转目标	触发条件	使用API	关键配置/说明
跳转H5页面	`url`以`http`或`https`开头	`uni.navigateTo`跳转到web-view页面	必须在微信小程序后台配置业务域名白名单
跳转其他小程序	`url`的查询参数中包含`appid`
↳ 跳转外部小程序	有`appid`参数	`uni.navigateToMiniProgram`	无需特殊配置
↳ 半屏打开小程序	有`appid`且包含`isEmbedded=T`参数	`uni.openEmbeddedMiniProgram`	必须先在微信小程序后台配置"半屏小程序"规则
跳转App	需要跳转App	跳转至特定引导页H5	引导页路径如`/h5/commonJump`，需传入App的`URL Scheme`参数，引导用户在外部浏览器打开
跳转自身页面	不符合以上任何条件	`uni.navigateTo`，失败时尝试`uni.switchTab`	用于跳转小程序内部页面，`switchTab`针对Tab页面

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