uni-app微信小程序跳转外部H5链接 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

uni-app微信小程序跳转外部H5链接

发表时间:2020-10-8

发布人:葵宇科技

浏览次数:141

可以先看一下官网链接web-view

这里可以看到web-view组件默认铺满全屏,这里新建了一个页面,只用于存放web-view,用于展示外部链接。

1.新建页面showhfive作为web-view跳转页面的承载

2.跳转H5需要个触发的点击事件,通过点击跳转

<template>
	<view>
		<button class="submit-btn" @click="toExecute">执行</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			url: ''
		};
	},
	methods: {
		toExecute(){
			uni.navigateTo({
			  url: '/pages/showhfive/showhfive?url='+ this.url
			})
		}
	}
}
</script>

3.showhfive.vue页面的内容

<template>
	<web-view :src="url" bindmessage="getMessage"></web-view>
</template>

<script>
	export default {
		data() {
			return {
				url: ''
			}
		},
		onLoad(options) {
			this.url = options.url;
		}
	}
</script>

<style>

</style>

实现完成后即可跳转。

现在这个只是添加了跳转,后续有其他问题,即时更新!

相关案例查看更多