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>
相关推荐
敲代码的瓦龙3 分钟前
Java?泛型!!!
windows·python·microsoft
凤年徐5 分钟前
Linux常用命令详解
java·linux·服务器
SilentSamsara8 分钟前
Linux 管道与重定向:命令行精髓的结构性解析
linux·运维·服务器·c++·云原生
the sun348 分钟前
NFS 配置全指南 —— 从踩坑到手动挂载的完整落地
linux·运维·服务器·ubuntu
SilentSamsara10 分钟前
Shell 脚本进阶:从能跑到写得优雅
linux·运维·服务器·自动化·ssh·bash
xiaoshuaishuai811 分钟前
C# 实现“superpowers进化
运维·服务器·windows·c#
孙同学_1 小时前
【项目篇】高并发服务器 - 从 Buffer 到 TcpServer 构建高并发服务器引擎
运维·服务器
SilentSamsara1 小时前
Linux磁盘与存储管理:分区、LVM 与 IO 性能全栈分析
linux·运维·服务器·ssh·shell
lclin_20208 小时前
VS2010兼容|C++系统全能监控工具(彩色界面+日志带单位+完整版)
c++·windows·系统监控·vs2010·编程实战
IMPYLH9 小时前
Linux 的 pinky 命令
linux·运维·服务器·bash