uni-app跨端开发实现APP与H5之间的通讯和交互
最近在研究uni-app跨端开发APP和H5的通讯和交互,比如H5调用APP的方法,APP往H5里面传参,H5往app外面传参。话不多说,上代码!
html文件放本地的话必须放在项目根目录下的static文件夹
H5调用APP的方法
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部分接口