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))
	})
},
相关推荐
专注API从业者18 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile21 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399724 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊29 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火29 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689978 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode