uniapp怎么跳转到外部页面

1. uniapp跳转外部页面的方法

在uniapp中，我们可以使用几种方法跳转外部页面，这些方法包括使用<a>标签，使用uni.navigateToMiniProgram及使用uni.openUrl等。

1.1 使用<a>标签跳转外部页面

使用<a>标签是最简单的跳转外部页面的方法，只需要在<template>中写入<a>标签并设置href属性即可。下面的代码演示了如何使用<a>标签跳转到腾讯页面：

<template>
  <view>
    <a href="http://www.qq.com">跳转腾讯页面</a>
  </view>
</template>

1.2 使用uni.navigateToMiniProgram跳转外部小程序页面

如果我们需要跳转到其他小程序页面时，可以使用uni.navigateToMiniProgram方法。该方法可接受以下参数：

uni.navigateToMiniProgram({
  appId: 'wx1234567890',     //小程序 appId
  path: '/pages/index',      //跳转的页面路径
  extraData: {
     foo: 'bar'
  },
  success(res) {
     console.log('跳转成功');
  }
})

其中，appId为目标小程序的appId，path为目标页面的路径，extraData是需要传递给目标小程序的参数。

1.3 使用uni.openUrl跳转外部网页

如果我们需要跳转到外部网页，可以使用uni.openUrl方法。该方法可接受以下参数：

uni.openUrl({
  url: 'http://www.baidu.com',
  success(res) {
     console.log('跳转成功');
  }
})

其中，url为目标网页的地址。

2. uniapp跳转外部页面的注意事项

在使用uniapp跳转外部页面时，需要特别注意以下几点：

2.1 跳转路径必须是合法的

跳转外部页面时，需要确保跳转路径是合法的。如果路径不合法，将无法成功跳转。

2.2 必须开启跳转白名单

uniapp为了保障用户的安全，限制了跳转外部页面的权限。如果我们需要跳转外部页面，需要在manifest.json中开启跳转白名单。

我们可以在manifest.json的app-plus节点下，添加以下配置：

"app-plus": {
  "navigateToMiniProgramAppIdList": [
     "wx1234567890"
  ],
  "uniLibPermission": {
     "webview": true
  }
}

其中，navigateToMiniProgramAppIdList是小程序跳转白名单，只有在该白名单中的小程序才能进行跳转，网页跳转无需配置白名单。

2.3 不能在onLoad中跳转

在uniapp中，我们不能在onLoad中进行跳转。如果在onLoad中跳转，将会导致页面无法打开。

3. 代码示例

下面的代码演示了如何使用uni.navigateToMiniProgram跳转到其他小程序页面：

<template>
  <view>
    <button type="default" @click="navigateToMiniProgram">跳转小程序</button>
  </view>
</template>
<script>
export default {
  methods: {
     navigateToMiniProgram() {
        uni.navigateToMiniProgram({
           appId: 'wx1234567890',
           path: '/pages/index',
           success(res) {
              console.log('跳转成功');
           }
        });
     }
  }
}
</script>

以上代码中，当用户点击按钮时，将会跳转到目标小程序页面。这是一个非常简单的例子，我们可以根据实际需求进行扩展。