Uniapp中App与H5交互-Toy模板网

这篇具有很好参考价值的文章主要介绍了Uniapp中App与H5交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Uniapp开发的App要与Uniapp开发的H5进行交互

Uniapp进行数据交互的话是使用了Unaipp官方文档当中的web-view，但是官方文档当中的说明也不是很通俗易懂，之后就去网上找了好久，也试了很多次，终于实现了App与H5的交互。

web-view

首先呢web-view是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面，nvue 使用需要手动指定宽高。在web-view中的src当中放入H5页面的链接即可。
各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 以下是官方文档当中的代码片段，官网链接：(web-view | uni-app官网 (dcloud.net.cn))

<template>
   <view>
       <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
   </view>
</template>

<script>
   export default {
       data() {
           return {
               webviewStyles: {
                   progress: {
                       color: '#FF3333'
                   }
               }
           }
       }
   }
</script>

<style>

</style>

在Uniapp当中呢，uni.postMessage是用来接收H5传来的数据的，这个可以查看Uniapp官方文档自行解决，而在交互当中让我们为难的无非就是H5如何向App传递数据和接受App传来的数据以及App如何向H5传递数据

H5向App传递数据

在uniapp项目下的static中新建一个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).uni = 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 uni ? uni : {};
   if (!E.navigateTo)
       for (var b in l) t(l, b) && (E[b] = l[b]);
   return E.webView = l, E
}));

然后再在main.js当中全局引入这个js文件

import * as uni from '@/static/uni_webview.js'

document.addEventListener("UniAppJSBridgeReady", function(e) {
console.log(e)
Vue.prototype.myUni = uni
});

之后我们就可以在页面当中去使用它来实现数据交互了~

<template>
   <view>
<button @click="post">H5向App传递数据</button>
   </view>
</template>

<script>
export default {
data() {
return {

}
   },
onLoad(){
this.get()
}，
methods:{
post(){
this.myUni.webView.postMessage({
//data当中是H5向App的传递数据
data: {},
       });
}，
get(){
接收app传递来的数据
               window.postJS = function(msg) {
//msg是App传递过来的数据
console.log(msg)
}
}
}
}
</script>

<style>

</style>  文章来源地址https://www.toymoban.com/news/detail-720607.html