uniapp app或小程序跳转h5链接

最新推荐文章于 2025-06-26 15:28:12 发布

原创最新推荐文章于 2025-06-26 15:28:12 发布 · 3.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文档展示了如何在uni-app中新建一个webview组件来展示H5页面，并实现页面跳转。通过在模板中定义web-view标签，并在onLoad生命周期钩子中动态设置url，实现了H5页面的加载。同时，提供了isNotEmpty方法用于判断值是否为空，以及setTitle方法用于设置页面标题。页面跳转的方法toExams()通过uni.navigateTo完成，传入目标页面url。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建一个webview页面，用来展示h5页面

<template>
	<view>
		<view>
			<!-- url为要跳转外链的地址-->
			<web-view :src="url">
			</web-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				url: ''
			}
		},
		onLoad(val) {
			this.url=val.url
			// 设置当前的title 如果外链中有的话将被覆盖
			if(this.isNotEmpty(val.title)){
				this.setTitle(val.title);
			}
		},
		methods: {
			isNotEmpty(obj) {
				if (typeof obj == undefined || obj == null || obj == "" || obj == "undefined" || obj.length == 0) {
					return false;
				} else {
					return true;
				}
			},
			// 设置title
			setTitle(title) {
				uni.setNavigationBarTitle({
					title: title
				})
			},
		}
	}
</script>

2.跳转页面

toExams(){
	uni.navigateTo({
    		url: '/pages/exam/webview?url=h5链接'
   })
},