小程序跳转外部地址
使用轮播图举例
代码如下
<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);