uniapp跳转H5外部链接

最新推荐文章于 2024-08-02 13:34:48 发布

一路向前的月光

最新推荐文章于 2024-08-02 13:34:48 发布

阅读量1.6k

点赞数

分类专栏： uniapp 文章标签： uni-app 前端

本文链接：https://blog.csdn.net/a99101/article/details/134416101

版权

uniapp 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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

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

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

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

//传递处理
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))
	})
},