解决 uni-app+vue3+vite web-view 使用 uni.webView.postMessage() 报错

已于 2023-05-15 09:16:59 修改
阅读量1.3k 收藏 1
点赞数 2
文章标签： 前端 uni-app webview javascript web app
于 2023-04-28 11:14:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1014156094/article/details/130422580
版权

报错

undefined is not an object (evaluating ‘uni.webbView.postMessage’)
或者
cant’t find xxx

解决

很坑，官方文档没有说明，并且相关帖子写的示例也太旧了，应该安装 @dcloudio/uni-webview-js 包，然后 import "@dcloudio/uni-webview-js" 才能正常使用

粤小七
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
uniapp?APP中内嵌webview的H5与APP相互通讯动态传参代码示例
菜鸟教程
05-08 1174
到此这篇关于uniapp APP中内嵌webview的H5与APP相互通讯动态传参的文章就介绍到这了,更多相关uniapp APP中H5与APP动态传参内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/茂名一技http://www.enechn.com/美文集http://www.tpyjn.cn/
uniapp内嵌h5向app，微信小程序执行postMessage发送参数或操作路由
JUEESSS的博客
04-28 4564
web-view组件的postmessage方法可以向外部发送参数 我们在index.html文件中（没有自己创建，在manifest.json的H5配置中设置）引入uni的 jssdk 然后在body外引入： <script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js"></script> 接着就可以执行uni.webView.post
vue3组件销毁
最新发布
wangzhen12138的博客
05-21 1812
在 Vue 3 中，组件的销毁通常涉及几个步骤和考虑因素。组件的销毁意味着从 DOM 中移除该组件，并清除与之相关的所有事件监听器和子组件。来控制组件的销毁与创建。这种方法能够确保组件在不再需要时被正确销毁，同时遵循 Vue 的生命周期管理。如果你需要更细粒度的控制，可以考虑使用 Vue 提供的生命周期钩子，如。方法，因为它会跳过组件的生命周期钩子，可能会导致一些难以追踪的 bug。时，Vue 会销毁该组件及其所有子组件，并从 DOM 中移除。如果你想在销毁组件之前保存其状态，并在之后恢复它，可以使用。
uniapp 使用 webview 触发uni.postMessage
qwe_aaaaa的博客
08-11 5532
记录一下遇到的小问题
window.postMessage - 前端跨域通信
陈坚泓的博客
08-08 3267
前端跨域通信
Vue H5项目，怎么引入uni.webview sdk，调用uni postMessage实现手机扫描功能
wocwin的博客
12-05 2747
Vue H5项目，怎么引入uni.webview sdk，调用uni postMessage实现手机扫描功能
uniapp项目webview页面给小程序传参 postMessage 接收不到参数
蒲公英芽的博客
08-16 2万+
一、项目背景： 使用uniapp框架开发的小程序，因业务需求，要在小程序的webview里嵌入第三方的h5页面。当用户点击小程序右上角的三个点进行分享的时候，要将h5页面传过来的参数作为分享数据。 二、小程序端 先来了解一下小程序的 web-view 组件： web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。 小程序的 web-view 页面和本身的内容不能共存，如果想在页面上悬浮内容，可以使用 uni.showToast()、**
uniapp使用webview嵌入vue页面及通信
热门推荐
m0_51431448的博客
03-09 2万+
最终方案就是在uniapp中获取那一大串儿json，然后传递到webview页面进行渲染，然后提交表单的时候再通知webview页面（Vue页面）将表单json再传递给uniapp进行提交。所以就涉及到了uniapp与webview之间的通信问题，接下来介绍：
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
基于Uni-app+Node.js音乐听歌系统的设计与实现
06-06
技术需求：前端采用Uni-app框架，框架语法为Vue + 小程序，基于组件、路由、状态管理、MVVM响应式数据等；后端采用Express + CSRF完成数据接口开发等。系统设计目标：可以方便的浏览音乐排行榜、搜索指定音乐；轻松...
uni-app + vue2.0 信息提示通用组件
03-09
标题 "uni-app + vue2.0 信息提示通用组件" 提到的是一个使用 uni-app 和 Vue.js 2.0 开发的跨平台信息提示组件。这个组件设计的目的是为了在不同平台上提供一致的用户体验，包括微信小程序、支付宝小程序、百度小...
uni-app+ts+vue3 头像创意工厂小程序源码
09-12
小程序采用 uni-app+ts+vue3 设计，已增加 隐私保护指引，拿来即用，是小程序 “头像创意工场” 前端的全部源码，需要说明的是，此源码只有前端，需要调用后端获取分类和头像框，如果无后端，可以直接前端JSON 也是...
Springboot3+uni-app+vue3的多门店点餐小程序
10-23
技术选型：选择适合开发小程序的技术框架，如微信小程序原生开发、uni-app、taro等。 数据库设计：设计合适的数据库结构，包括门店信息、菜单信息、用户信息、订单信息等。 页面设计：根据需求设计小程序的页面布局...
【web-view加载h5】小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案
qq_42961150的博客
09-16 4094
一、前言 小程序web-view访问一个非uniapp制作的h5页面的相互通信，这个我在之前的文章中已经写得很清楚了，也没有太多的坑，具体可查看：uniapp中使用web-view相互通信 小程序中web-view加载uni-app H5其实思路是一样的，只不过这里有一些坑，而且我在社区去搜相关问题，确实有好些人提问，但是下面回答的也不太靠谱，于是我在这里综合起来总结下： 二、解决方案 【坑1】怎么在uniapp H5中嵌入uni sdk？ 根据官方提供的，h5配置中有个index.html模板路径，
nuve使用web-view与h5页面双向通信，uni.postMessage is not a function
qq_38003260的博客
12-21 1129
2.如果纯内网无法用cdn可以把uni.webview.1.5.4.js下载到本地，但是建议放在static下，eg： ,建议使用相对路径，因为nginx放前端包不见得把h5前端包放在根目录下。
uniapp的webView与app双向通信问题
Firefly_xx0的博客
09-14 1227
uniapp的webView与app双向通信问题
uniapp纯h5的vue页面和上级webview通信 - window.postMessage方式 - 纯H5版vue页面中的webview无法捕捉html文件的uni.postMessage消息
Rudon滨海渔村的博客
04-03 1676
问题2：H5环境下的webview无法捕捉hybrid/html文件的uni.postMessage消息 - 一点反应都没有；问题1：纯H5版vue页面中的uni.postMessage报错未定义 - js文件引用、npm引用都不行；2.H5环境下的webview无法捕捉hybrid/html文件的uni.postMessage消息？webview中的vue页面先通过window.location.href。1.纯H5版vue页面中的uni.postMessage报错未定义，那就。
uniapp web-view与 H5、微信小程序传参
Autumn_yun的博客
11-14 1395
uniapp web-view 小程序 H5 发送消息 通讯
uniapp中webview和H5网页之间互相传参
sslyfnk的博客
02-22 8492
uniapp中webview和H5网页之间互相传参 1. uni-app 如何发送数据到 H5？ 1.在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中： <template> <div> <web-view :src="webViewUrl" @message="getMessage"></web-view> </div> </template> <script>
如何在uni-app+vue3中使用pdfh5
07-13
在 Uni-app 中使用 PDFH5，可以通过以下步骤实现： 1. 安装依赖：在你的 Uni-app 项目根目录下，打开终端并执行以下命令安装 pdfh5 插件： ```bash npm install pdfh5 --save ``` 2. 引入插件：在需要使用 PDFH5 的页面中，打开该页面的 vue 文件，添加以下代码： ```vue <template> <view> <pdfh5 :src="pdfUrl"></pdfh5> </view> </template> <script> import pdfh5 from 'pdfh5' export default { components: { pdfh5 }, data() { return { pdfUrl: 'your_pdf_url' } } } </script> ``` 上述代码中，通过 `<pdfh5>` 标签引入了 PDFH5 组件，并通过 `src` 属性绑定了一个 PDF 文件的 URL。 3. 配置页面样式：为了确保 PDFH5 组件正常显示，你需要在页面的样式文件中添加以下代码： ```css /* 页面样式文件（xxx.vue） */ <style> .pdf-container { width: 100%; height: 100%; overflow: auto; } .pdf-container iframe { width: 100%; height: 100%; border: none; } </style> ``` 上述代码中，我们为 PDFH5 组件的包裹容器 `.pdf-container` 设置了适当的宽度和高度，并移除了 iframe 的边框样式。 4. 替换 `pdfUrl` 的值：将上述代码中的 `pdfUrl` 替换为你实际的 PDF 文件的 URL。 5. 运行项目：保存文件后，通过运行 Uni-app 项目来查看 PDF 文件的显示效果。 通过以上步骤，你就可以在 Uni-app + Vue3 中使用 PDFH5 来展示 PDF 文件了。请确保你已经提前准备好了 PDF 文件，并将其链接或路径正确地赋值给 `pdfUrl` 属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值