uniapp h5 和 小程序互相传值
小程序端
<template> <div> <web-view :webview-styles="webviewStyles" :src="webViewUrl" @message="getMessage"></web-view> </div> </template> <script> export default { data() { return { url: '44444', progress: { color: '#FF3333' } } }, created() { this.webViewUrl = `http://192.168.101.25:5173/?data=${encodeURIComponent(this.url)}` //pdf地址添加参数 }, onLoad() { }, methods: { getMessage(data) { uni.showToast({ title: "reciveMessage接收到消息:" + JSON.stringify(data.detail), duration: 2000, icon: 'none' }); console.log("接收到消息:" + JSON.stringify(data.detail)); }, }, } </script>
h5 端
npm i weixin-js-sdk //下载微信sdk
<template> <view class="content"> <view class="text-area"> <text class="title">{{title}}</text> </view> <view class=""> {{data}} </view> <button @click="chufa">点击</button> <button @click="tiaozhuan">点击</button> </view> </template> <script> import wx from 'weixin-js-sdk'; export default { data() { return { title: 'Hello', data:{} } }, onLoad(e) { this.data=e }, methods: { chufa(){ // 传参 wx.miniProgram.postMessage({ data: { action: '我要向微信端传递的数据', phoneNumber: '15314601234' } }); }, tiaozhuan(){ // 跳转小程序路由 const name = '天天' wx.miniProgram.navigateTo({ url: `/pages/user/user?name=${name}` , // 小程序地址 success () { console.log('question success') }, fail (error) { console.log(error) } }) } } } </script>