小程序跳转外部地址

使用轮播图举例

代码如下

<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="item.picId">
        <view class="swiper-item" @click="jump(item.linkUrl)">
          <!-- 动态绑定图片的 src 属性 -->
          <image :src="item.picUrl"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 1. 轮播图的数据列表,默认为空数组
        swiperList: [],
      };
    },
    onLoad() {
      // 2. 在小程序页面刚加载的时候,调用获取轮播图数据的方法
      this.getSwiperList()
    },
    methods: {
      // 3. 获取轮播图数据的方法
      async getSwiperList() {
        // 3.1 发起请求
        const {
          data: res
        } = await uni.$http.get('/system/pic/list')
        // 3.2 请求失败
        if (res.code !== 200) {
          return uni.showToast({
            title: '数据请求失败!',
            duration: 1500,
            icon: 'none',
          })
        }
        // 3.3 请求成功,为 data 中的数据赋值
        this.swiperList = res.rows
      },
      jump(linkUrl) {
        console.log("发送跳转页面地址112:" + linkUrl)
        let linkUrlNew = encodeURIComponent(linkUrl)
        console.log("发送跳转页面地址111:" + linkUrlNew )
        uni.redirectTo({
          url: '/subpkg/link_url/link_url?linkUrl='+ linkUrlNew
        })
      },
    }
  }
</script>

<style lang="scss">
  swiper {
    height: 330rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }
</style>

跳转到新的页面

<template>
  <view>
    <web-view :src='linkUrl'></web-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        linkUrl:'',
      };
    },
    onLoad(object) {
      const linkUrlNew = decodeURIComponent(object.linkUrl);
      console.log("接收到页面的地址111:" + linkUrlNew)
      this.linkUrl = linkUrlNew
    }
  }
</script>

<style lang="scss">

</style>

主要是用到加密传输,之后再解密跳转

let linkUrlNew = encodeURIComponent(linkUrl)
const linkUrlNew = decodeURIComponent(object.linkUrl);
posted @ 2023-08-10 10:22  An-Optimistic-Person  阅读(53)  评论(0编辑  收藏  举报