记一次微信小程序与webviewH5通信的踩坑记录

<web-view :src="webViewUrl"></web-view>

import uni from "@/public/uni.webview.1.5.4.js";
//如果提示uni.postMessage 不是function，就在 uni.webview.1.5.4.js 里面将 uni 替换掉，如替换成 webUni(建议 查找 全选 替换)
import webUni from "@/public/uni.webview.1.5.4.js";

 webUni.getEnv(function(res) {
    console.log('当前环境：' + JSON.stringify(res));
});

const obj= {params: "传递参数"}

window.postMessage({
    data: obj
});

<template>
	<view class="">
		<web-view :src="webViewUrl" @message="handleMessage"></web-view>
	</view>
</template>
<script>
	export default {
		data() {
		  return {
		    webViewUrl: 'http://localhost:80',
		  }
		},
		methods: {
		  handleMessage(event){
		  	console.log(event.detail.data);
            //打印结果
            //data：{params: "参数示例"}
		  },
		  
		},
	}
</script>

const obj= {params: "传递参数"}

window.postMessage({
    data: obj
});

//后退
webUni.navigateBack({
    delta: 1
});

//组件销毁（也就是关闭页面）
uni.redirectTo({
	url: 'test?id=1'
});
uni.reLaunch({
	url: 'test?id=1'
});
uni.switchTab({
	url: '/pages/index/index'
});

//分享
uni.share()

//根据自身情况选其一

//在H5界面编写
//首先声明参数变量
const params = {data: "Are you ok?"}

//假如我们要跳转到小程序的login页面，我们可以这样做
webUni.navigateTo({
  url: `/pages/login/login?message=${params}`,
});

//在小程序编写
//login页面就可以在页面加载时接收路径参数
onLoad(){
	const routes = getCurrentPages()
	const curParam = routes[routes.length - 1]
    const jsonString = decodeURIComponent(curParam.options.message);
	const data = JSON.parse(jsonString);
	console.log(data);
    //打印结果
    //params:{data: "Are you ok?"}
},

<template>
	<view class="">
		<web-view :src="webViewUrl" @message="handleMessage"></web-view>
	</view>
</template>
<script>
	export default {
		data() {
		  return {
		    webViewUrl: 'http://localhot:3000',
		  }
		},
		onShow(options) {
            //声明要传递给H5的参数
            let params = {
                data: "这是要给H5的参数"
            }
			this.webViewUrl = `http://localhot:3000?${JSON.stringify(params)}`
		},
		methods: {
		  handleMessage(event){
		  	console.log(event.detail.data);
		  }
		},
	}
</script>

// 获取地址栏的查询字符串（不包括URL的域名和路径）
const queryString = new URLSearchParams(window.location.search).toString();

// 如果查询字符串不为空，则尝试解析它
if (queryString) {
      //首先，使用decodeURIComponent来解码这个字符串
      const decodedString: string = decodeURIComponent(queryString);

      // 注意，这里末尾有一个'='号，需要移除它
      const jsonString = decodedString.slice(0, -1);

      // 现在，使用JSON.parse来解析JSON字符串
      const jsonObject = JSON.parse(jsonString);
      console.log("已接收到小程序的参数",jsonObject);
}