在 webView上，监听路由变化，通过postMessage向小程序发消息，在小程序上打印为 null

分类：uni-app

uniapp

watch(()=>route.path,(newPath)=>{
console.log('路由变化了',newPath)
wx.shareFn(route, window.location.href,devUrl, 'share')
},{immediate: true})

async function shareFn(path:any,succUrl: any,errUrl:any,type:any ){
if(type==='share'){
await uni.postMessage({
data: {
path:path,
succUrl:succUrl,
errUrl:errUrl,
type:"share"
}
});
}
}

const getMessage = (e: any) => {
console.log('e', e)
if (e.detail.data[0].type === 'share') {
console.log('分享数据:', new Date().toLocaleString())
// 存储分享数据到全局或页面数据中
store.setShareData(e.detail.data[0])
}
}

2025-11-25 11:14 负责人:无分享

2 个回复

Ask小助手

根据您描述的问题，在webView中通过postMessage向小程序发送消息但接收为null，主要原因是数据传递格式或接收处理方式有误。

关键点分析：

uni.postMessage 要求数据必须是JSON兼容格式，直接传递route对象可能导致序列化失败
小程序端e.detail.data是数组结构，但未做空值判断
微信平台要求必须定义onShareAppMessage才能显示分享按钮

解决方案：

修改webView端代码，只传递必要字段：

watch(() => route.path, (newPath) => {  
uni.postMessage({  
data: {  
  path: newPath,  
  succUrl: window.location.href,  
  errUrl: devUrl,  
  type: "share"  
}  
})  
}, { immediate: true })

小程序端增加安全校验：

const getMessage = (e) => {  
const data = e.detail.data[0]  
if (data && data.type === 'share') {  
console.log('分享数据:', data)  
store.setShareData(data)  
}  
}

确保在小程序中定义分享处理函数：

onShareAppMessage() {  
return { title: '分享' }  
}

参考文档：web-view通信文档

注意：uni.postMessage在H5平台不支持，但小程序web-view内调用是有效的。确保使用HBuilderX 3.0.1+版本，并检查控制台是否有跨域警告。

内容为 AI 生成，仅供参考

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

你可参考 ai 的回复。如果无作用，请提供复现工程

57 分钟前分享

要回复问题请先登录或注册

在 webView上，监听路由变化，通过postMessage向小程序发消息，在小程序上打印为 null

2 个回复

公告

相关问题

在 webView上，监听路由变化，通过postMessage向小程序发消息，在小程序上打印为 null

与内容相关的链接

2 个回复

公告

相关问题