uniapp跳转到外部链接详解

发布时间:2023-05-23

一、常规跳转方式

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、尽量避免浏览器钓鱼等恶意链接跳转。