nuve使用web-view与h5页面双向通信，uni.postMessage is not a function

已于 2023-12-21 13:46:48 修改
阅读量1.8k 收藏 11
点赞数 8
文章标签： 前端
于 2023-12-21 11:16:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38003260/article/details/135126242
版权
本文讲述了作者在使用UniApp时遇到的问题，即UniApp的JSBridgeReady事件触发但uni.postMessage函数不可用。原因在于uni.postMessage在uni.webView对象中，而非全局uni。解决方案包括将uni.webview.1.5.4.js下载到本地并使用相对路径引用，以及针对内网环境的注意事项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

tip：

1.很多人发的博文感觉都差不多，但是我这面遇到一个问题UniAppJSBridgeReady事件监听到了，但是使用不了uni.postMessage,报错uni.postMessage is not a function,我用uni.webview.1.5.4.js,到h5页面打印了一下uni，发现方法没有挂载到uni下而是在uni.webView，所以使用时用uni.webView.postMessage方法。

2.如果纯内网无法用cdn可以把uni.webview.1.5.4.js下载到本地，但是建议放在static下，eg：    <script type="text/javascript" src="./static/js/uni.webview.js"></script>,建议使用相对路径，因为nginx放前端包不见得把h5前端包放在根目录下,或者如果h5项目也是使用uniapp开发的可以直接app.vue中import './static/js/uni.webview.js'

tbc....
 

nuve：

【uni-app系列】uni-app之nvue使用
邓邓子的博客
09-05 1万+
uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面，官网 hello uni-app 示例就是如此。虽然 nvue 也可以多端编译，输出 H5 和小程序，但 nvue 的 css 写法受限，所以如果不开发 App，不需要使用 nvue。
uni-app扫雷先锋之封装自己的poppup弹窗组件nvue
weixin_43139949的博客
12-06 1757
uni-app扫雷先锋封装自己的poppup弹窗组件实际需求组件注意事项 封装自己的poppup弹窗组件 先来个最终的效果图 插件地址：https://ext.dcloud.net.cn/plugin?id=3603 github地址：https://github.com/lifei5859/popup.git 实际需求 其实公司提的需求没有根据手指位置弹出弹窗，但是在封装的时候呢自己就抖了个机灵，把这个功能也封装到里面了，自己感觉写的还是不是很好。上次icon的篇文章就提到了nvue的问题，这个组件也支
uniapp项目webview页面给小程序传参 postMessage 接收不到参数
热门推荐
蒲公英芽的博客
08-16 2万+
一、项目背景： 使用uniapp框架开发的小程序，因业务需求，要在小程序的webview里嵌入第三方的h5页面。当用户点击小程序右上角的三个点进行分享的时候，要将h5页面传过来的参数作为分享数据。 二、小程序端 先来了解一下小程序的 web-view 组件： web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。 小程序的 web-view 页面和本身的内容不能共存，如果想在页面上悬浮内容，可以使用 uni.showToast()、**
项目启动报错：Uncaught TypeError: self.postMessage is not a function
xiaoheisboy的博客
04-08 4186
vue项目启动报错：Uncaught TypeError: self.postMessage is not a function 解决方法： 在依赖包（node_modules）中找到webpack-dev-server\client\index.js 将（一般在67行左右） if (typeof self !== 'undefined' && (typeof WorkerGlobalScope === 'undefined' || !(self instanceof WorkerGlo
uniapp 和 webview 之间的通信
最新发布
2301_76380626的博客
03-22 2034
这段代码会在webview的全局作用域中执行。在webview中我们可以使用当前webview实例的postMessage方法来触发webview组建的onPostMessage方法来传递数据，重点就需要放在了如何将uniapp的webview实例来加入到webview的h5项目当中。这个是在引入webview的SDK之后，当webview页面被加载完成之后会触发，该事件触发表示着uniapp和webview之间的桥成功搭建，uni对象被成功的注入到当前H5的上下文中。）之间安全地传递消息。
简记webpack运行报错 Uncaught TypeError: self.postMessage is not a function
OldStreet61的博客
04-14 2751
说好2017Fix的还是能重现，可能项目的版本比较旧了，简要记录解决办法 1.错误： index.js?bed3:67 Uncaught TypeError: self.postMessage is not a function at sendMsg (index.js?bed3:67) at Object.invalid (index.js?bed3:83) at SockJS.onmessag...
uniapp报$gwx is not a function错误
薛定喵君的博客
09-21 3176
最近在做uniapp应用时遇到一个错误,记录一下 运行到手机时的错误信息: [错误] ./pages/tabBar/do_diagnosis/do_diagnosis.wxml:1:4575: unexpected character `�` 12:27:14.960 [错误] ./pages/tabBar/do_diagnosis/do_diagnosis.wxml:1:4575: unexpe...
使用uniapp内置组件webview消息传递
qq_24567113的博客
01-07 2192
web-view是uni-app的一个内置组件，可以在应用里打开指定的网页，应用和网页之间可以收发消息。uni.postMessage is not a function。H5 暂不支持。
uni.shareAppMessage使用这个方法提示e.shareAppMessage is not a function是什么原因
weixin_42576804的博客
12-20 2097
这个问题的出现可能有多种原因，常见的原因有： 小程序没有正确地引入微信小程序的脚本，导致小程序中没有 uni 对象。 在执行 uni.shareAppMessage 方法之前，小程序还没有调用 uni.getProvider 方法或者 uni.getProvider 方法调用失败。 小程序正在运行的环境不支持分享功能，例如在浏览器中运行的小程序。 在执行 uni.shareAppMessa...
uniapp开发app中vue和nuve通讯web-view的区别
07-22
1. Vue与web-view通讯：在Vue组件中使用web-view时，可以通过postMessage方法进行通信。你可以在Vue组件中监听web-view的message事件，并通过window.postMessage方法向web-view发送消息。这种方式适用于在Vue组件和...
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
10-16
【基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能】 在现代互联网技术的推动下，直播已经成为了一种重要的社交和娱乐方式。本文将深入探讨如何使用vue和uni-app框架来构建一个类似抖音和陌陌的直播应用...
uni-app 蒙板滑动/滚动问题//双滑动
weixin_43734043的博客
08-15 3979
由于开发的是小说阅读器，蒙板之上需要有章节列表，如图 发现在蒙版上滑动时，下方正文区域也有时候会滑动，目录滑动到底/顶部时，再滑动就是下方正文滑动了， 网上找了很久办法，都没有相应解决，调试了很久，终于找到解决办法 蒙板加@touchmove.stop.prevent=“moveHandle” demo 标签使用 scroll-view <!-- 小说目录 --> <view ...
window.postMessage 传参无效
weixin_50572740的博客
07-18 1573
API地址https//developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage。需求：父window点击树节点信息的时候，向子iframe传递数据。更改后添加iframe.onload传参正常。
uniapp 组件引用 TypeError: this.$refs.xxx is not a function 解决方法（全）
u014538997的博客
08-20 2万+
因为自己的项目中，某些常用模块自己定义了组件，使用时 常出现TypeError: this.$refs.xxx is not a function （即没有xxx这个方法），结合网友和自身遇到的问题，得出三种方法
uniapp webview嵌套h5之间的通信
lixiaohua66的博客
05-09 924
nvue页面：@onPostMessage方法能实时通讯，必须要在nvue页面中，vue页面中@message只能在特定的时机才能触发；注意：无论是否是uniapp的h5页面 都要重新引入该文件，直接使用uni.postmessage无效；
uniapp 微信小程序webview 踩坑
Raccon_的博客
08-31 7574
微信小程序的存在许多功能上的限制和约束，有些情况不得不去使用webview进行开发实现需求，比如原生无法满足（例如某团队维护SDK 只提供了WEB端jsSDK，且不维护小程序SDK）H5可以同时适用多端（适用范围更广）H5可以弥补小程序部分欠缺微信生态有部分限制（包大小，设计规范等）由于最近做的需求小程序不支持播放带有透明通道的视频，所以转到了webview这里总结下完整的开发流程和现有的各种解决方案: 开发阶段需要将不校验合法域名勾选上。
uniapp中H5端和APP端与webview实现双向通讯
weixin_46331416的博客
07-07 4277
uniapp中H5端和APP端与webview实现双向通讯，用uniapp开发app和H5，另外起一个项目打包成模版单页(减少app更新)，在应用内用webview嵌入模版单页。
uniapp中 app与webview的通讯
weixin_48361736的博客
01-02 2598
webview使用uni.postMessage发送消息给app时报uni.postMessage is not a function。此处使用evalJS方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值