webView向uniApp小程序发送数据并接收

uniApp提供了webView组件，并且给了相应的通讯方法：

但是@message方法只能在特定的时机才会触发，很多场景的需求满足不了，只能另外想办法。于是我又找到在webView的h5中，可以使用uni提供的webview.js插件跳转小程序的页面:

首先引入插件

可以找到webview.js的源码拷贝到本地直接引入或者引入uniapp提供的链接：
uni.webview.js最新地址：https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js
weixin-js-sdk地址：https://res.wx.qq.com/open/js/jweixin-1.4.0.js
或者使用npm安装：

npm i uni-webview-lib 或者 pnpm add uni-webview-lib 或者 yarn add uni-webview-lib

我这里是使用npm安装，然后在html中引入weixin.js（如果不是微信小程序则可以不引用）：

<script src="/src/utils/weixin.js"></script>

在vue项目的h5中使用

<script lang="ts" setup>
import uni from 'uni-webview-lib'

function backToMiniprogram() {
	uni.navigateTo({
		// 带上需要传递的参数
		const message = '这是h5传递给小程序的信息'
		url: `/page/home/message?message=${message}`
	})
}
</script>

在小程序中

在/page/home/message页面中添加onLoad方法，就可以获取到h5传递的参数：

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'

onLoad(() => {
	const routes = getCurrentPages()
	const curParam: any = routes[routes.length - 1]
	console.log(curParam.options.message) // 这是h5传递给小程序的信息
})
</script>