uniapp 跳转内部链接/外部链接(思路:webview)

文章介绍了如何在uniapp项目中创建内部webview页面,并通过页面跳转至指定URL。首先在pages.json配置webview页面路径,然后在webview.vue中设置web-view组件加载URL。在需要跳转的页面调用uni.navigateTo方法,传递URL参数。此外,还提到了直接使用window.location.href进行外部链接跳转的方法。
摘要由CSDN通过智能技术生成

1、先在自己uniapp项目pages.json建一个内部页面webview.vue

在page.json里面指向我们跳转的这个内部路径:代码如下

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

2、在pages/webview文件夹下建一个内部页面webview.vue

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

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

3、在需要操作的页面引用这个方法=>点击触发跳转

<template>
    <view class="uni-form-right" @tap="getApp">平台跳转</view>
</template>

<script>
    // 点击功能模块-触发跳转
    getApp() {
      let url = 'https://www.baidu.com' 
      // 以百度url为例子,具体填写你自己要跳转的链接 
      uni.navigateTo({
        url: '/pages/webview/webview?url=' + url
        // page.json定义的路径 传url到webview界面去接收-实现跳转
      })
    }
</script>

4、补充:uniapp跳转外部链接

<template>
    <view class="uni-form-right" @tap="getApp">平台跳转</view>
</template>

<script>
    getApp() {
      window.location.href = 'https://www.baidu.com' 
    }
</script>
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值