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))
	})
},
相关推荐
雯0609~20 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ23 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z29 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省1 小时前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript