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>