首先，app的webview需要使用nvue，只有nvue的webview才能实时监听到postMessage。如果用vue的webview，只能在页面加载、回退等特殊时候将消息回传给app。

一、H5设置

使用模板，可点击截图中的参考按钮，复制下来用。

在 template.h5.html引入 uni.webview.js ，这里注意，（官方的某些版本有些问题，需要自己把js文件里面的uni换成webUni，文章后面我会贴上自己用的uni.webview.js）。

<div id="app"></div>
<!-- uni 的 SDK -->
<script type="text/javascript" src="<%= BASE_URL %>static/js/uni.webview.js"></script>
<script type="text/javascript">// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。document.addEventListener('UniAppJSBridgeReady', function() {        webUni.getEnv(function(res) {console.log('当前环境：' + JSON.stringify(res));})webUni.postMessage({data: {action:'getPhone'}})});window.getUniAppMessage = function(token){console.log("收到app的Phone:"+Phone);uni.setStorageSync('token',token)}
</script>

在manifest.js中的H5配置，把template.h5.html

二、APP中设置

nvue需要自定义一下宽高

<web-viewref="webview":style="{'width': '750rpx','height': height}":src="url"update-title="false"@onPostMessage="onPostMessage">
</web-view>

data(){return {height:uni.getSystemInfoSync().screenHeight - 44 -             uni.getSystemInfoSync().statusBarHeight}
}

定义接受消息的方法，其中 getUniAppMessage 是之前在H5中定义的方法。

通过evalJs通知到H5,H5触发getUniAppMessage 之后，执行相应的步骤。

methods:{onPostMessage(e){       if(e.detail.data[0].action == 'getPhone'){                                                               this.$refs.webview.evalJs(`getUniAppMessage('123456')`);}}
}

三、附录：uni.webview.js :

! function (e, n) {"object" == typeof exports && "undefined" != typeof module ? module.exports = n() : "function" == typeof define && define.amd ? define(n) : (e = e || self).webUni = n()
}(this, (function () {"use strict";try {var e = {};Object.defineProperty(e, "passive", {get: function () {!0}}), window.addEventListener("test-passive", null, e)} catch (e) {}var n = Object.prototype.hasOwnProperty;function t(e, t) {return n.call(e, t)}var i = [],a = function (e, n) {var t = {options: {timestamp: +new Date},name: e,arg: n};if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) {if ("postMessage" === e) {var a = {data: [n]};return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(a) : window.__dcloud_weex_.postMessage(JSON.stringify(a))}var o = {type: "WEB_INVOKE_APPSERVICE",args: {data: t,webviewIds: i}};window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(o) : window.__dcloud_weex_.postMessageToService(JSON.stringify(o))}if (!window.plus) return window.parent.postMessage({type: "WEB_INVOKE_APPSERVICE",data: t,pageId: ""}, "*");if (0 === i.length) {var r = plus.webview.currentWebview();if (!r) throw new Error("plus.webview.currentWebview() is undefined");var d = r.parent(),s = "";s = d ? d.id : r.id, i.push(s)}if (plus.webview.getWebviewById("__uniapp__service")) plus.webview.postMessageToUniNView({type: "WEB_INVOKE_APPSERVICE",args: {data: t,webviewIds: i}}, "__uniapp__service");else {var w = JSON.stringify(t);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE", '",').concat(w, ",").concat(JSON.stringify(i), ");"))}},o = {navigateTo: function () {var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},n = e.url;a("navigateTo", {url: encodeURI(n)})},navigateBack: function () {var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},n = e.delta;a("navigateBack", {delta: parseInt(n) || 1})},switchTab: function () {var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},n = e.url;a("switchTab", {url: encodeURI(n)})},reLaunch: function () {var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},n = e.url;a("reLaunch", {url: encodeURI(n)})},redirectTo: function () {var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},n = e.url;a("redirectTo", {url: encodeURI(n)})},getEnv: function (e) {window.plus ? e({plus: !0}) : e({h5: !0})},postMessage: function () {var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};a("postMessage", e.data || {})}},r = /uni-app/i.test(navigator.userAgent),d = /Html5Plus/i.test(navigator.userAgent),s = /complete|loaded|interactive/;var w = window.my && navigator.userAgent.indexOf("AlipayClient") > -1;var u = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);var c = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent);var g = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent);var v = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent);var p = window.qa && /quickapp/i.test(navigator.userAgent);for (var l, _ = function () {window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady", {bubbles: !0,cancelable: !0}))}, f = [function (e) {if (r || d) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document.addEventListener("DOMContentLoaded", e) : window.plus && s.test(document.readyState) ? setTimeout(e, 0) : document.addEventListener("plusready", e), o}, function (e) {if (v) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener("WeixinJSBridgeReady", e), window.wx.miniProgram}, function (e) {if (c) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener("QQJSBridgeReady", e), window.qq.miniProgram}, function (e) {if (w) {document.addEventListener("DOMContentLoaded", e);var n = window.my;return {navigateTo: n.navigateTo,navigateBack: n.navigateBack,switchTab: n.switchTab,reLaunch: n.reLaunch,redirectTo: n.redirectTo,postMessage: n.postMessage,getEnv: n.getEnv}}}, function (e) {if (u) return document.addEventListener("DOMContentLoaded", e), window.swan.webView}, function (e) {if (g) return document.addEventListener("DOMContentLoaded", e), window.tt.miniProgram}, function (e) {if (p) {window.QaJSBridge && window.QaJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener("QaJSBridgeReady", e);var n = window.qa;return {navigateTo: n.navigateTo,navigateBack: n.navigateBack,switchTab: n.switchTab,reLaunch: n.reLaunch,redirectTo: n.redirectTo,postMessage: n.postMessage,getEnv: n.getEnv}}}, function (e) {return document.addEventListener("DOMContentLoaded", e), o}], m = 0; m < f.length && !(l = f[m](_)); m++);l || (l = {});var E = "undefined" != typeof webUni ? webUni : {};if (!E.navigateTo)for (var b in l) t(l, b) && (E[b] = l[b]);return E.webView = l, E
}));

【uni-app】app与H5进行双向通讯相关推荐

uni-app跨端开发实现APP与H5之间的通讯和交互
最近在研究uni-app跨端开发APP和H5的通讯和交互,比如H5调用APP的方法,APP往H5里面传参,H5往app外面传参.话不多说,上代码! html文件放本地的话必须放在项目根目录下的stat ...
仿微信H5聊天系统即时通讯社交完整优化版搭建，IM聊天APP聊天交友客服，带安卓苹果端APP源码+视频教程
H5聊天系统即时通讯社交完整优化版,IM聊天APP聊天交友客服仿微信带安卓苹果端APP源码+教程
uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能
uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能官网提供的api进行的开发,自我感觉没啥问题,但是在不同的端上好像有的好使有的不好使,暂时不知道啥 ...
我的uni框架APP（共享充电投放）独立开发日记第一天
我的uni框架APP(共享充电投放)独立开发日记项目说明及介绍练习阶段 APP开发第一天(设计和功能归类) 首页物品我的项目说明及介绍在前不久写完了第一个微信小程序之后,开始补课VUE,就 ...
我的uni框架APP（共享充电投放）独立开发日记第二天
我的uni框架APP(共享充电投放)独立开发日记 APP开发第二天(UI实现到创作) Tap_Bar: 首页充电榜邀请赚钱项目说明物品我的会员资料下载APP 我的收益我要提现我的下级 ...
客户端相关知识学习（一）之混合开发，为什么要在App中使用H5页面以及应用场景、注意事项...
混合开发随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
微信不再提供小程序打开App？借助H5为App引流的方式你必须知道！
简介: 2021年5月14日App开发者领域发布了一条重要消息:微信开放平台为了提升用户体验,将于2021年5月20日(后来延期到2021年5月27日)起不再提供"小程序打开App技术服务& ...
app能不能跳转外部h5_利用条件编译在app端使用h5+（网页跳转实例）
利用条件编译在app端使用h5 在 uni-app 中可以使用条件编译发挥各自平台的特色能力,h5+ 对象为 plus,在js中我们可以通过条件编译调用它 ^_^ 语法格式 // #ifdef APP ...
app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...

【uni-app】app与H5进行双向通讯

一、H5设置

二、APP中设置

三、附录：uni.webview.js :

【uni-app】app与H5进行双向通讯相关推荐

最新文章

热门文章