uniApp跳转外链

创建一个新的页面,在该页面中使用web-view组件加载外部URL:pages/web-view/web-view

javascript 复制代码
<template>
  <view>
    <uni-list>
      <uni-list-item
        title="打开外部链接"
        @click="openExternalLink"
      ></uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  methods: {
    openExternalLink() {
      window.open('https://super.xiaoxilao.com/', '_blank');
    }
  }
}
</script>

<style>
/* 你的样式 */
</style>

在我们当前需要点击跳转的页面,增加点击事件,跳转到你创建的web-view页面,并传递URL参数:例如:/pages/index/index

javascript 复制代码
<template>
  <view>
    <uni-list>
      <uni-list-item
        title="打开外部链接"
        @click="openExternalUrl('https://super.xiaoxilao.com/')"
      ></uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  methods: {
    openExternalUrl(url) {
      uni.navigateTo({
        url: `/pages/web-view/web-view?url=${encodeURIComponent(url)}`
      });
    }
  }
}
</script>

<style>
/* 你的样式 */
</style>
相关推荐
遇印记1 小时前
数据通信初步
运维·服务器·网络·windows·学习
学linux的QQ蛋1 小时前
图解 Linux 驱动编译进内核的完整工作流程
linux·运维·服务器
print_Hyon1 小时前
【ENSP】DHCP 基础实验(路由器作为 DHCP 服务器,接口地址池模式)
运维·服务器·智能路由器
weixin_448119941 小时前
Datawhale Easy Data × AI:构建知识与记忆驱动的 Agent笔记3
人工智能·windows·笔记
程序员-Benothing1 小时前
正则表达式详解:BRE、ERE、PCRE语法与实战案例
linux·运维·服务器
软件架构师-叶秋1 小时前
V853方案之ubuntu开发环境搭建
linux·运维·服务器·全志·v853
Nebula_g3 小时前
JavaSE加强:IO流
java·开发语言·windows·stream·javase
不会就选b12 小时前
Linux之TCP理论<1>
linux·运维·服务器
小π军13 小时前
操作系统面试题
java·linux·服务器
Android系统攻城狮14 小时前
Linux Gstreamer深度解析之gst_audio_encoder_get_frame_samples_min调用流程与实战(六十)
linux·运维·服务器·音视频·gstreamer音视频·音视频进阶·gstreamer音视频进阶