uniapp vue3 点击跳转外部网页

需求

项目登录界面有隐私协议,用户点击对应的协议,跳转到对应的外部网页。

问题

使用uni.navigateTo跳转后,界面未加载上。

解决思路

跳转逻辑参考:

承载网页的容器:

代码

login.vue 登录页面

js 复制代码
<template>
	...
	<text class="text">我已阅读并同意<text class="agreement" @tap.stop="onUserAgreement">《用户协议》</text>
	...
</template>
<script setup>
	...
	const onUserAgreement = () => {
		const url = 'https://*****' // 对应的网址
		uni.navigateTo({
		    url: '/webview/webview?url=' + encodeURIComponent(url)
		})
	}
	...
</script >

webview.vue 承载网页的页面

js 复制代码
<template>
	<view class="container">
		<web-view :src="url"></web-view>
	</view>
</template>
<script setup>
	import { ref, getCurrentInstance } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const { proxy } = getCurrentInstance()
	onLoad((option) => {
		url.value = decodeURIComponent(option.url)
	})
	const url = ref('')
</script>

<style scoped lang='scss'>
	.container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding: 10px;
		box-sizing: border-box;
		background-color: #fff;
	}
</style>
相关推荐
用户500937683903928 分钟前
热敏小票 Web 打印:我在 58/80mm 上折腾的两周
前端·vue.js
2501_916007478 小时前
Flutter与游戏App加固避坑指南:如何为混合开发与高交互应用选对安全方案?
安全·flutter·游戏·ios·小程序·uni-app·iphone
PedroQue999 小时前
@meng-xi/create-uni-app v1.0.0 正式发布
前端·uni-app
肥仔哥哥19309 小时前
uniapp开发App一键登录:从技术选型到前后端落地实战--2秒登录,流失率减半:在uniapp里接入一键登录的全过程
uni-app·一键登录设计选型
snow@li9 小时前
服务器运维:Alibaba Cloud Linux 4 LTS・Vue前端 Java 后端 K3S 部署 CICD 目录规范清单
linux·前端·vue.js
honkun69 小时前
vue 表格组件 vxe-table 实实现专业记账凭证编辑表格与自动汇总
前端·javascript·vue.js
JackieDYH10 小时前
uniapp-幸运抽奖转盘组件-案例
uni-app
web打印社区18 小时前
网页静默打印热敏小票:从 HTML 到出纸的完整指南
前端·javascript·vue.js·electron·pdf·html
ModyQyW20 小时前
vite-plugin-uni-manifest 更新了什么
前端·typescript·uni-app
parade岁月1 天前
为了给表格加虚拟滚动而选了 vxe-table?也可以考虑下这个
前端·vue.js