uni-app跨端开发实现APP与H5之间的通讯和交互

#麻辣小龙虾#

已于 2023-04-17 16:19:41 修改

阅读量2.2k

点赞数 2

分类专栏： uni-app 文章标签： uni-app 前端 html5

于 2022-08-17 14:30:14 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/126385432

版权

uni-app 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

最近在研究uni-app跨端开发APP和H5的通讯和交互，比如H5调用APP的方法，APP往H5里面传参，H5往app外面传参。话不多说，上代码！

html文件放本地的话必须放在项目根目录下的static文件夹

H5调用APP的方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>H5页面和APP交互例子</title>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
    <!-- <script src="static/script/jquery.2.2.3.min.js"></script> -->
    <!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->  
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
    <!-- uni 的 SDK，必须引用。 -->  
    <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
    <!-- <script type="text/javascript" src="http://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script> -->
    <script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js"></script>
    
  </head>
  <body>
    <div id="app">
      <h1>H5页面和APP交互例子</h1>
      <h1 class="h5">H5页面和APP交互例子</h1>
      <button class="btn">发送消息</button>
    </div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    let num = 0;
    // app执行某个方法
    function changeNum (n) {
      alert('num=' + n);
      document.querySelector('.h5').innerHTML = 'APP触发改变H5方法' + n;
    }

    document.addEventListener('UniAppJSBridgeReady', function() { 
      uni.getEnv(function(res) {  
        console.log('当前环境：' + JSON.stringify(res));
        // alert(JSON.stringify(res))
      });
      setInterval(() => {
        uni.postMessage({
          data: {
            action: 'H5发送的消息',
            vlaue: num
          }
        });
      }, 15000);

      // H5向APP发送消息
      document.querySelector('.btn').onclick = function () {
        uni.postMessage({
          data: {
            action: 'H5发送的消息' + num++
          }
        });
      } 
    });
  </script>
</html>

uni-app和H5的交互uni-app文件中的代码

// app 触发H5的方法
		apph5 () {
			const num = 100;
			this.wv.evalJS(`window.changeNum(${num})`); // 执行某个方法
		},
		handlePostMessage: function(evt) {
			console.log("接收到消息：" + JSON.stringify(evt.detail));
			this.$refs.uToast.show({
				position: 'center',
				type: 'success',
				message: `接收到消息： = ${JSON.stringify(evt.detail.data)}`
			});
		},
		createWebview () {
			const vm = this;

			// const wv = plus.webview.create("","custom-webview",{
			// 	plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
			// 	'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
			// 	top:uni.getSystemInfoSync().statusBarHeight+44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
			// });
			// wv.loadURL("http://192.168.1.7:8000?a=1&b=2&c=[12,3,4]");

			const wv = plus.webview.create("/static/hybrid/index.html?a=1&b=2&c=[12,3,4]")  
			const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			currentWebview.append(wv);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
			vm.wv = wv;

			// 监听plusMessage 事件
			plus.globalEvent.addEventListener('plusMessage', function(msg){
				console.log('H5页面返回的数据为:'+ JSON.stringify(msg));
				if(msg.data.args.data.name == 'postMessage'){   
					console.log('H5页面返回的数据为:'+ JSON.stringify(msg.data.args.data.arg));
					vm.$refs.uToast.show({
						position: 'bottom',
						type: 'success',
						message: `接收到消息： = ${JSON.stringify(msg.data.args)}`
					});
				}
			});

			
			
			setTimeout(function() {
				wv.setStyle({
					height: 300,
					top: 400,
					position: 'dock',
					dock: 'top',
					zindex: 0
				});
				console.log(wv.getStyle())
			}, 1000);//如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
		},

需要参考H5 PLUS的API部分接口

H5 plus接口文档