美文网首页
uniapp内部跳转http地址

uniapp内部跳转http地址

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-07-19 19:24 被阅读0次

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

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

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

    1.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>
    

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

    <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>
    

    相关文章

      网友评论

          本文标题:uniapp内部跳转http地址

          本文链接:https://www.haomeiwen.com/subject/kvkaudtx.html