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

前言

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

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

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

1. 整体结构与说明

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

编译后APP跳转各平台总览如下图所示：

APP跳转主要有：

• 跳转H5: 通过小程序webview进行承载
• 跳转外部H5：通过手机默认浏览器打开
• 跳转外部小程序: 分为两类
  *
  1. 跳转外部进行打开小程序
  • 2. 在自身小程序内进行半屏打开，此方式需要在后台设置
• 跳转APP:
  • 直接配置url scheme使用openURL打开APP
  • 也可以通过launchApplication进行打开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

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

3. APP跳转

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

1. url以http开头，为跳转H5
   • query中存在isOpenExternal跳转手机浏览器
   • 否则使用webview进行跳转承载
2. url中query存在appid则进行跳转其他小程序
   • query有isEmbedded跳转半屏小程序
   • 没有则跳转外部小程序
3. url需要带urlScheme参数，直接打开APP
4. 其余情况默认跳转自身页面

跳转链接如下所示：

{
    value: '1',
    label: '跳转自身页面',
    url: '/pagesA/theme/index'
  },
  {
    value: '2',
    label: '跳转第三方H5(内嵌)',
    url: 'https://www.xxx.top/h5/commonJump'
  },
  {
    value: '3',
    label: '跳转第三方H5(外部打开)',
    url: 'https://www.xxx.top/h5/commonJump?isOpenExternal=T'
  },
  {
    value: '5',
    label: '跳转小程序',
    url: '/pages/commonJump/index?ghId=ghId&path=pages/mall/index'
  },
  {
    value: '4',
    label: '跳转小程序(urlScheme)',
    url: '/pages/commonJump/index?urlScheme=weixin://dl/business/?appid=wxeda1e799ab5b9f57&path=pages/mall/index'
  },
  {
    value: '6',
    label: '跳转APP',
    url: '/pages/commonJump/index?urlScheme=weixin://'
  },
  {
    value: '7',
    label: '跳转APP(launchApplication)',
    url: '/pages/commonJump/index?pname=T'
  },

3.1 跳转H5(外部浏览器)

跳转外部，需要判断query是否存在isOpenExternal,则使用外部浏览器打开，uniapp中提供直接打开外部浏览器的方法。

代码如下：

// 跳转浏览器
plus.runtime.openURL(url, function (res) {
  console.log(res);
});

3.2 跳转H5(内嵌)

如果以http开头，直接跳转webview。

代码如下：

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

3.3 跳转小程序

uniapp中跳转小程序可以通过launchMiniProgram。

代码如下：

plus.share.getServices(function (res) {
    let sweixin = null
    for (let i = 0; i < res.length; i++) {
      const t = res[i]
      if (t.id == 'weixin') {
        sweixin = t
      }
    }
    if (sweixin) {
      sweixin.launchMiniProgram({
        id: ghId,
        type: 0,
        path
      })
    }
})

3.4 跳转外部APP

跳转外部浏览器有两种方式：

1. 直接打开外部浏览器使用url scheme跳转

plus.runtime.openURL(urlScheme, function (res) {
  console.log(res);
});

2. 使用launchApplication进行跳转

不同平台有所区别，这里简单介绍下。

uni-app 中如何打开外部应用

  const launchApp = () => {
    let _this = this;
    // 判断平台
    if (plus.os.name == 'Android') {
      plus.runtime.launchApplication(
        {
          pname: 'com.taobao.taobao'
        },
        function (e) {
          console.log('Open system default browser failed: ' + e.message);
        }
      );
    } else if (plus.os.name == 'iOS') {
      plus.runtime.launchApplication({ action: 'taobao://' }, function (e) {
        console.log('Open system default browser failed: ' + e.message);
      });
    }
}

3.5 其余跳转

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

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

3.6 总结APP跳转方法

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

if (url.startsWith('http')) {
    if (isOpenExtenal === 'T') {

      // 跳转浏览器
      plus.runtime.openURL(url, function (res) {
        console.log(res);
      });
    } else {

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

  } else if (urlScheme) {
    plus.runtime.openURL(urlScheme, function (res) {
      console.log(res);
    });
  } else if (ghId && path) {
    plus.share.getServices(function (res) {
      let sweixin = null
      for (let i = 0; i < res.length; i++) {
        const t = res[i]
        if (t.id == 'weixin') {
          sweixin = t
        }
      }
      if (sweixin) {
        sweixin.launchMiniProgram({
          id: ghId,
          type: 0,
          path
        })
      }
    })
  } else {
    uni.navigateTo({
      url,
      fail() {
        uni.switchTab({
          url,
        })
       }
    })
  }

4. 总结

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

​​跳转目标​​	​​实现方式​​	​​代码/API​​	​​关键参数/说明​​
​​跳转 H5 页面​​	url 以 http 或 https 开头。
↳ 内嵌打开	使用App内Webview承载	uni.navigateTo({ url: '/pages/webview/index?url=xxx' })	无特殊参数
↳ 外部浏览器打开	调用系统浏览器打开	plus.runtime.openURL(url)	URL需包含 isOpenExternal=T 参数
​​跳转其他小程序​​
↳ 通过ghId & path	调用微信服务跳转	plus.share.getServices -> service.launchMiniProgram()	ghId (小程序原始ID), path (页面路径)
↳ 通过URL Scheme	直接使用协议唤起	plus.runtime.openURL(urlScheme)	urlScheme (如: weixin://dl/business/?appid=xxx)
​​跳转其他App​​
↳ 通用方式 (URL Scheme)	使用通用协议唤起	plus.runtime.openURL(urlScheme)	urlScheme (如: weixin://, taobao://)
↳ 直接唤起 (Android)	通过包名启动应用	plus.runtime.launchApplication({ pname: 'com.xxx.xxx' })	pname (应用包名)
↳ 直接唤起 (iOS)	通过协议启动应用	plus.runtime.launchApplication({ action: 'xxx://' })	action (URL Scheme)
​​跳转自身页面​​	使用UniApp路由	uni.navigateTo({ url }) 失败则 uni.switchTab({ url })	不符合以上条件的内部路径

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