发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

uniapp webview和H5通信的3种方式代码示例

谢雨峰

4

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
显示全部楼层
前言

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模板页面，新建一个文件，然后再配置里面加上这个文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta
  6.       name="facebook-domain-verification"
  7.       content="ubjskcwra0ommj0ts7gldbkenw4bei"
  8.     />
  9.     <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" rel="external nofollow"  />
  10.     <meta
  11.       name="viewport"
  12.       content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
  13.     />
  14.     <script>
  15.       var coverSupport =
  16.         "CSS" in window &&
  17.         typeof CSS.supports === "function" &&
  18.         (CSS.supports("top: env(a)") || CSS.supports("top: constant(a)"));
  19.       document.write(
  20.         '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
  21.           (coverSupport ? ", viewport-fit=cover" : "") +
  22.           '" />'
  23.       );
  24.     </script>

  26.     <title></title>
  27.   </head>

  29.   <body>
  30.     <div id="app">
  31.       <!--app-html-->
  32.     </div>
  33.     <!-- <script type="module" src="/main.js"></script> -->
  34.   </body>
  35.   <script
  36.     type="text/javascript"
  37.     src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"
  38.   ></script>
  39.        
  40.   <script
  41.     type="text/javascript"
  42.     src="<%= BASE_URL %>static/js/uni.webview.js"
  43.   ></script>

  45.   <script>
  46.     wx.miniProgram.getEnv(function (res) {
  47.       console.log("当前环境：" + JSON.stringify(res));
  48.     });
  49.     document.addEventListener("UniAppJSBridgeReady", function () {
  50.       webUni.webView.getEnv(function (res) {
  51.         console.log("当前环境：" + JSON.stringify(res));
  52.       });

  54.       // uni.webView.navigateTo(...)
  55.     });
  56.   </script>
  57. </html>
复制代码

  • 在需要的地方发送消息就可以了
  1.       webUni.postMessage({
  2.           data: {
  3.             action: "fabuyuzhan",
  4.             params: {},
  5.           },
  6.         });
复制代码
小程序和h5的通信

小程序和H5通信有限制，没有
  1. message
复制代码
那种实时的接收消息，小程序只有页面销毁的时候才会发送消息，这个感觉就没什么用处了，而且还需要引入微信的那个js,才能使用，我建议的处理方式是跳转页面吧
  1.          webUni.navigateTo({
  2.             url: "/mySubPages/pages/preview/previewIndexList",
  3.             success: (res) => {
  4.               console.log(res); // 页面跳转成功的回调函数
  5.             },
  6.             fail: (err) => {
  7.               console.log(err); // 页面跳转失败的回调函数
  8.             },
  9.           });
复制代码
uniapp开发的APP，没用webview而是用的iframe嵌入。

客户端使用APP开发的，但是有一个h5是小游戏，使用webview的时候有个问题，就是无法很好的控制导航栏和状态栏，有时候在小游戏里面点击，进入全屏，但是退出的时候无法退出当前页面，而要先退出全屏然后再退出页面，经过测试，发现直接用iframe比较好控制，但是iframe通信没有webview通信方便，需要用的renderjs
  1. <template>
  2.         <view>
  3.                 <iframe id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"
  4.                         ref="iframe">
  5.                 </iframe>
  6.                 <!--                 <web-view id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"
  7.                         ref="iframe">
  8.                 </web-view> -->
  9.         </view>
  10. </template>
  11. <script>
  12.         export default {
  13.         method:{
  14.                                 receiveMessage(arg) {
  15.                                 console.log("接收到renderjs回传的消息", arg);
  16.                                 // const action = data.data.data.arg.action;
  17.                                 // console.log('收到消息 arg', data.data.data.arg);
  18.                                 const action = arg.action;
  19.                                 console.log(" 收到消息action", action);
  20.                         },
  21.         }
  22. }
  23. </script>
  24. <script module="test" lang="renderjs">
  25.         export default {
  26.                 mounted() {
  27.                         //注册消息方法
  28.                         window.addEventListener("message", this.receiveMsg, false);
  29.                 },
  30.                 methods: {
  31.                         receiveMsg(data) {
  32.                                 console.log('收到renderjs消息', data);
  33.                                 const arg = data.data.data.arg;
  34.                                 console.log('收到消息 arg', data.data.data.arg);
  35.                                 if (arg) {
  36.                                         //通知方法，然后去做处理
  37.                                         this.$ownerInstance.callMethod('receiveMessage', data.data.data.arg)
  38.                                 }
  39.                         },
  40.                 }
  41.         }
  42. </script>
复制代码
附：uni-app向web-view发送消息


（1）通过url带参数传递

uni-app页面：
  1. <web-view @message="getMessage" :src="webViewUrl"></web-view>

  3. computed: {
  4.     webViewUrl() {
  5.       return `${config.indexUrl}?accessToken=${this.accessToken}`
  6.     }
  7. }
复制代码
web-view网页对url查询字符串进行解析即可得到数据：
  1. /**
  2. * 解析url传递的参数
  3. */
  4. getQuery(name) {
  5.   // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
  6.   const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
  7.   const value = window.location.hash.substr(3).match(reg)
  8.   // 内网服务
  9.   // const value = window.location.search.substr(1).match(reg)
  10.   if (value != null) {
  11.     // 对参数值进行解码
  12.     return decodeURIComponent(value[2])
  13.   }
  14.   return null
  15. }

  17. const accessToken = this.getQuery('accessToken')
复制代码
（2）evalJS方法

uni-app页面：
  1. <web-view @message="message" :src="webViewUrl"></web-view>

  3. methods: {
  4.      message(arg) {
  5.          console.log(JSON.stringify(arg))
  6.          const  _funName = 'msgFromUniapp',
  7.           _data = {
  8.               msg: 'click'
  9.           }
  10.          const currentWebview = this.$scope.$getAppWebview().children()[0]
  11.          currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`)
  12.      }
  13. }
复制代码
web-view页面：
  1. window.msgFromUniapp = function(arg) {
  2.    console.log(JSON.stringify(arg))
  3. }
复制代码
总结

到此这篇关于uniapp webview和H5通信的3种方式的文章就介绍到这了,更多相关uniapp webview和H5通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/319197uas.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: JavaScript如何将后端获取到的byte数组转为文件

下一篇: 深入理解Canvas模糊问题产生的原因与解决办法

发表于 2024-4-12 12:37:32 来自手机

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4