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>
相关推荐
liqingdi4371 小时前
WSL+Ubuntu+miniconda环境配置
linux·windows·ubuntu
@泽栖2 小时前
下载HBuilder X,使用uniapp编写微信小程序
微信小程序·小程序·uni-app
极客先躯4 小时前
高级java每日一道面试题-2025年4月13日-微服务篇[Nacos篇]-Nacos如何处理网络分区情况下的服务可用性问题?
java·服务器·网络·微服务·nacos·高级面试
程序员王天5 小时前
Uniapp 自定义TabBar + 动态菜单实现教程(Vuex状态管理详解)
微信小程序·uni-app
soulermax5 小时前
数字ic后端设计从入门到精通2(含fusion compiler, tcl教学)
java·linux·服务器
黑心老人5 小时前
Mac OS系统下kernel_task占用大量CPU资源导致系统卡顿
linux·运维·服务器·macos
Thomas_YXQ5 小时前
Unity3D ILRuntime与Scripting Backend整合指南
服务器·开发语言·unity·unity3d
光算科技5 小时前
服务器在国外国内用户访问慢会影响谷歌排名吗?
运维·服务器·c++
sky.fly7 小时前
多路由器通过RIP动态路由实现通讯(单臂路由)
网络·windows·智能路由器
GalaxyPokemon7 小时前
Muduo网络库实现 [十六] - HttpServer模块
linux·运维·服务器·网络