uniapp 跳转外部链接

简介: uniapp 跳转外部链接

思路:uni.navigateTo跳转到我们定义的一个内部页面,内部页面接收需要跳转到外部的URL

一、先建一个内部页面webview.vue

<template>
  <web-view :src="url"></web-view>
</template>
<script>
export default {
  data() {
    return {
      url: ''
    }
  },
  onLoad(item) {
    this.url = decodeURIComponent(item.url)
    console.log(this.url)
    // 传入需要跳转的链接 使用web-view标签进行跳转
  }
}
</script>
<style lang="scss">
</style>

1.1、在page.json里面指向我们跳转的这个内部路径

{
            "path" : "pages/common/webview"
 }

二、点击触发跳转

界面:

<view class="uni-form-right" @click="hrefrouterApp()"> 平台跳转 </view>

js:

 // 触发跳转
    hrefrouterApp() {
      let url = 'http://xxxxxx/routerApp'  // URL是要跳转的外部地址 作为参数
      uni.navigateTo({
        url: '/pages/common/webview?url=' + url
        // page.json定义的路径 传url 到webview界面去接收 实现跳转
      })
    }
相关文章
|
7月前
|
JavaScript 数据安全/隐私保护 UED
UniApp 中的路由魔法:玩转页面导航与跳转
UniApp 中的路由魔法:玩转页面导航与跳转
1635 3
|
7月前
|
开发框架 网络协议 JavaScript
uniapp链接WebSocket 常用的api
uniapp链接WebSocket 常用的api
136 0
|
7月前
uniapp Vue3 日历 可签到 跳转
uniapp Vue3 日历 可签到 跳转
73 0
|
7月前
|
JavaScript
uniapp+vue3路由跳转传参
uniapp+vue3路由跳转传参
322 0
|
7月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
186 0
|
7月前
|
开发框架 移动开发 Android开发
uniapp的几种跳转方式
uniapp的几种跳转方式
|
7月前
uniapp的两个跳转方式
uniapp的两个跳转方式
|
3月前
|
API
uniapp使用路由名称跳转
【9月更文挑战第11天】在UniApp中,可通过定义路由名称实现页面跳转,需在`pages.json`中设置页面的`name`属性。使用`uni.navigateTo`等API并指定名称即可跳转,例如`name: &#39;detailPage&#39;`。目标页面可在`onLoad`函数中获取传递的参数,这种方式使代码更清晰且便于维护,尤其适合大型项目。
|
5月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
125 4
|
7月前
uniapp 实现带参数跳转页面
uniapp 实现带参数跳转页面
104 0