uniapp webview和H5通信的三种方式
时间：2024-04-05 15:00:36 来源：网络cs 作者：峨乐 栏目：ERP系统 阅读：
uniapp可以打包成多个端，再和H5通信的方式中，涉及到uniapp和H5通信，APP和H5通信，小程序和H5通信。其中的h5端分为非uniapp打包的h5和uniapp打包的h5,这两者的区别其实就是uniapp的h5里面已经有了uni这个定义，所以不能再uniapp里面直接用官方提供的那个js需要重新定义js里面的定义
app和h5的通信
uniapp打包成的APP，h5向webview发送消息，按照官方的文档就可以webview,需要注意的就是如果H5是uniapp的，需要更换一下官方那个js里面的uni变量.
引入这个js，需要配置一个html模板页面，新建一个文件，然后再配置里面加上这个文件
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="facebook-domain-verification" content="ubjskcwra0ommj0ts7gldbkenw4bei" /> <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <script> var coverSupport = "CSS" in window && typeof CSS.supports === "function" && (CSS.supports("top: env(a)") || CSS.supports("top: constant(a)")); document.write( '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ", viewport-fit=cover" : "") + '" />' ); </script> <title></title> </head> <body> <div id="app"> <!--app-html--> </div> <!-- <script type="module" src="/main.js"></script> --> </body> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" ></script> <script type="text/javascript" src="<%= BASE_URL %>static/js/uni.webview.js" ></script> <script> wx.miniProgram.getEnv(function (res) { console.log("当前环境：" + JSON.stringify(res)); }); document.addEventListener("UniAppJSBridgeReady", function () { webUni.webView.getEnv(function (res) { console.log("当前环境：" + JSON.stringify(res)); }); // uni.webView.navigateTo(...) }); </script></html> webUni.postMessage({ data: { action: "fabuyuzhan", params: {}, }, });小程序和h5的通信
小程序和H5通信有限制，没有message那种实时的接收消息，小程序只有页面销毁的时候才会发送消息，这个感觉就没什么用处了，而且还需要引入微信的那个js,才能使用，我建议的处理方式是跳转页面吧
webUni.navigateTo({ url: "/mySubPages/pages/preview/previewIndexList", success: (res) => { console.log(res); // 页面跳转成功的回调函数 }, fail: (err) => { console.log(err); // 页面跳转失败的回调函数 }, });uniapp开发的APP，没用webview而是用的iframe嵌入。
客户端使用APP开发的，但是有一个h5是小游戏，使用webview的时候有个问题，就是无法很好的控制导航栏和状态栏，有时候在小游戏里面点击，进入全屏，但是退出的时候无法退出当前页面，而要先退出全屏然后再退出页面，经过测试，发现直接用iframe比较好控制，但是iframe通信没有webview通信方便，需要用的renderjs<template><view><iframe id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"ref="iframe"></iframe><!-- <web-view id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"ref="iframe"></web-view> --></view></template><script>export default {method:{receiveMessage(arg) {console.log("接收到renderjs回传的消息", arg);// const action = data.data.data.arg.action;// console.log('收到消息 arg', data.data.data.arg);const action = arg.action;console.log(" 收到消息action", action);},}}</script><script module="test" lang="renderjs">export default {mounted() {//注册消息方法window.addEventListener("message", this.receiveMsg, false);},methods: {receiveMsg(data) {console.log('收到renderjs消息', data);const arg = data.data.data.arg;console.log('收到消息 arg', data.data.data.arg);if (arg) {//通知方法，然后去做处理this.$ownerInstance.callMethod('receiveMessage', data.data.data.arg)}},}}</script>本文链接：https://www.kjpai.cn/news/2024-04-05/154460.html，文章来源：网络cs，作者：峨乐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
上一篇：解决错误：pip is configured with locations that require TLS/SSL,the ssl module in Python is not available
下一篇：返回列表