uniapp跳转H5外部链接

不携带参数的跳转外部链接请求

<view class="yes" @click="goh5">{{'未完成':'已完成'}}</view>

this.content.contractUrl为后端传输的url地址

javascript 复制代码
 goh5() {
    if (this.content.signStatus == 1) {
   const url = this.content.contractUrl
   uni.navigateTo({
     url: '/pages/web/web?url=' + encodeURIComponent(JSON.stringify(url))
         })
   } else {
       const hurl = this.content.wxOfficialAccountUrl
      uni.navigateTo({
       url: '/pages/web/web?hurl=' + encodeURIComponent(JSON.stringify(hurl))
          })
          }
       }
javascript 复制代码
<template>
	<view class="box">
		<web-view v-if="URL" :src="URL"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				URL: undefined,
			}
		},
		onLoad(e) {
			// 传入需要跳转的链接 使用web-view标签进行跳转
				this.URL = JSON.parse(decodeURIComponent(e.url))
		},
		methods: {
			
			}
		},
	}
</script>

携带参数的跳转外部链接请求

若传递参数中含有=,?,&等特殊字符 无法正常传递参数 则需要进行编码解码 传递时使用encodeURIComponent()接收时使用decodeURIComponent()

javascript 复制代码
//传递处理
let url = 'https://xxxxx.xxxx.com/mini/api/?id=2222&key=kkkkk'
my.navigateTo({
	url: `/pages/Web/Web?url=${encodeURIComponent(JSON.stringify(url))}`
})
 
//页面接收
onLoad(options) {
	console.log('Url---', options, decodeURIComponent(JSON.parse(options.url)));
	this.setData({
		url: decodeURIComponent(JSON.parse(options.url))
	})
},
相关推荐
汉得数字平台13 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹19 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互