uniapp 小程序嵌套H5开发总结_uniapp嵌入h5页面

作者：凡人多烦事01 | 2024-03-20 14:17:27

踩

uniapp嵌入h5页面

项目需求是在uniapp小程序项目中嵌套H5页面，H5返回小程序需要传值给小程序进行通信。

好,百度一查确实可以实现用的uniapp提供的web-view（https://uniapp.dcloud.io/component/web-view.html#web-view经验证实，做功能之前先看官网，能少走很多弯路）就可以与外部链接通信。

那如何实现呢？

1.在uniapp小程序项目创建web-view页面

项目代码


<!-- 外链,webview -->
<template>
	<view><web-view  :src="webviewPath" @message="message"></web-view></view>
</template>
 
<script>
export default {
	data() {
		return {
			webviewPath: '',
			hackReset:false
		};
	},
	mounted(){
	},
	onLoad() {
		// console.log("来到自定义页面")
		console.log(this.$Route.query.webviewPath,"地址")
		this.webviewPath = this.$Route.query.webviewPath;
	},
	methods:{
		message(event) {
			console.log('接收从小程序传过来的id',event.detail.data)
		}
	}
};
</script>
 
<style></style>

2.创建一个html项目写H5页面

H5首页代码


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.2.1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/273954