uniapp 小程序跳转外部链接 ios不行

引言

在开发uniapp小程序时，我们经常需要实现小程序跳转外部链接的功能，比如点击小程序内的某个按钮，跳转到浏览器打开一个网页。然而，我们发现在iOS设备上，使用uniapp提供的navigateTo或redirectTo等跳转方法跳转外部链接并不能正常工作。本文将对该问题进行深入探讨，并提供一种解决方案。

背景

uniapp是一种基于Vue.js的跨平台开发框架，可以实现一次开发，多端运行。它支持编写一套代码，生成小程序、H5、App等多个平台的应用程序。在小程序中，我们可以使用uniapp提供的跳转方法来实现页面之间的跳转操作。然而，uniapp的跳转方法并不能直接跳转到外部链接，这给开发者带来了一些困扰。

问题分析

iOS设备的限制

在iOS设备上，小程序内部使用的是WKWebView作为浏览器内核，相比于Android设备上的WebView，WKWebView更为安全，并且有更多的限制。其中之一就是不允许通过JavaScript代码打开外部链接。这个限制导致了在iOS设备上，使用uniapp提供的跳转方法跳转外部链接时，会出现跳转失败的情况。

解决方案

针对iOS设备上无法直接跳转到外部链接的问题，我们可以采用一种间接的方法来实现该功能。即在小程序内部创建一个隐藏的webview组件，然后通过该组件来加载外部链接。这样就可以绕过iOS设备的限制，实现跳转到外部链接的效果。

具体实现

创建隐藏的webview组件

首先，在uniapp的页面文件中创建一个隐藏的webview组件，代码如下：

<template>
  <view>
    <web-view ref="webview" src=""></web-view>
  </view>
</template>

跳转外部链接

在需要跳转到外部链接的地方，调用以下代码：

<template>
  <button @click="jumpToExternalLink">跳转外部链接</button>
</template>

<script>
export default {
  methods: {
    jumpToExternalLink() {
      uni.navigateTo({
        url: '/pages/webview/webview'
      })
    }
  }
}
</script>

加载外部链接

在webview页面的onLoad生命周期函数中，通过uni.getLaunchOptionsSync().query.url获取到跳转的外部链接，然后通过this.$refs.webview.src属性将外部链接加载到webview组件中：

<template>
  <view>
    <web-view ref="webview" :src="url"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: ''
    }
  },
  onLoad() {
    this.url = uni.getLaunchOptionsSync().query.url
  }
}
</script>

总结

本文介绍了uniapp小程序跳转外部链接在iOS设备上无法正常工作的问题，并提供了一种解决方案。通过创建隐藏的webview组件，并在其中加载外部链接，可以绕过iOS设备的限制，实现跳转到外部链接的功能。希望本文对大家在uniapp开发中遇到跳转外部链接问题有所帮助。

类图

classDiagram
  class uniapp {
    + navigateTo()
    + redirectTo()
  }
  class webview {
    - src
  }
  uniapp -> webview : 创建