小程序跳转外部链接

1 先在自己的uniapp项目的pages.json中建一个webview.vue页面

具体操作如下：

{
            "path": "pages/webview/webview",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
 }

2 webview.vue页面的配置

具体操作如下：

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

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const url = ref()
onLoad((e: any) => {
    // 传入需要跳转的链接，进行跳转
    url.value = decodeURIComponent(e.url)
    console.log(url.value)
})
</script>

如果链接过长会被截断，则可以使用Storage存储来获取链接

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

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const url = ref()
onLoad((e: any) => {
    // 获取缓存中的url参数，传入需要跳转的链接
    url.value = uni.getStorageSync('address')
    console.log(url.value)
})
</script>

3 在需要操作的页面，通过点击事件来实现跳转

具体操作如下：

<template>
    <view @click="click()">点击跳转</view>
</template>
 
<script lang="ts" setup>
 const url=ref()
 const click = (index: number) => {
    // 跳转
    uni.navigateTo({
         url: '/pages/webview/webview?url=' + url.value,
    })     
}
</script>

链接过长则需要存储在Storage中，实现如下：

<script lang="ts" setup>
 const url=ref()
 const click = (index: number) => {
    // 链接存入缓存
    uni.setStorageSync('address', url.value)
    // 跳转
    uni.navigateTo({
         url: '/pages/webview/webview' ,
    })     
}
</script>