uniapp跳转到外部链接详解

一、常规跳转方式

1、使用a标签进行跳转：

    
<a href="https://www.baidu.com">跳转到百度</a>
    

2、使用window.location.href进行跳转:

    
<script>
window.location.href="https://www.baidu.com"
</script>
    

3、使用window.open进行跳转:

    
<script>
window.open("https://www.baidu.com")
</script>
    

二、uniapp中跳转方式

1、使用uni.navigateTo进行跳转：

    
uni.navigateTo({
    url: 'pages/about/about'
})
    

2、使用uni.reLaunch进行跳转:

    
uni.reLaunch({
    url: 'pages/about/about'
})
    

3、使用uni.switchTab进行跳转:

    
uni.switchTab({
    url: 'pages/about/about'
})
    

4、使用uni.redirectTo进行跳转:

    
uni.redirectTo({
    url: 'pages/about/about'
})
    

三、跳转到外部链接

1、使用uni-app外链跳转插件进行跳转：

    
async goToBaidu() {
    await uni.$throttle(async () => {
        await this.$link.goto('https://www.baidu.com/')
    })
}
    

2、使用uni-app支付宝小程序跳转插件进行跳转:

    
import jump from '@cygg/uni-jump-alipay-miniapp'
jump.jumpToMiniProgram({
    appId: 'xxxxx',
    url: 'pages/about/about'
}, {
    needLogin: true
})
    

四、自定义外部链接跳转

1、使用location.href自定义外部链接跳转：

    
async goToUrl(url) {
    if(url.indexOf('http') !== -1) {
        location.href = url
    } else {
        uni.navigateTo({
            url
        })
    }
}
    

2、使用uni.openUrl自定义外部链接跳转:

    
uni.openUrl({
    url: 'https://www.baidu.com'
})
    

五、注意事项

1、使用uni.navigateTo/uni.redirectTo/uni.switchTab跳转时，url路径必须为相对路径或绝对路径（服务器域名和小程序域名必须进行配置）；

2、使用uni.$link.goto跳转时，需要在manifest.json中进行相关配置；

3、使用uni-app支付宝小程序跳转插件时，需要在APP.vue中进行相关配置；

4、使用uni.openUrl自定义外部跳转时，需要在manifest.json中进行相关配置；

5、尽量避免浏览器钓鱼等恶意链接跳转。