Uniapp開(kāi)發(fā)的App要與Uniapp開(kāi)發(fā)的H5進(jìn)行交互?

Uniapp進(jìn)行數(shù)據(jù)交互的話(huà)是使用了Unaipp官方文檔當(dāng)中的web-view，但是官方文檔當(dāng)中的說(shuō)明也不是很通俗易懂，之后就去網(wǎng)上找了好久，也試了很多次，終于實(shí)現(xiàn)了App與H5的交互。

web-view

首先呢web-view是一個(gè) web 瀏覽器組件，可以用來(lái)承載網(wǎng)頁(yè)的容器，會(huì)自動(dòng)鋪滿(mǎn)整個(gè)頁(yè)面，nvue 使用需要手動(dòng)指定寬高。在web-view中的src當(dāng)中放入H5頁(yè)面的鏈接即可。
各小程序平臺(tái)，web-view 加載的 url 需要在后臺(tái)配置域名白名單，包括內(nèi)部再次 iframe 內(nèi)嵌的其他 url 以下是官方文檔當(dāng)中的代碼片段，官網(wǎng)鏈接：(web-view | uni-app官網(wǎng) (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當(dāng)中呢，uni.postMessage是用來(lái)接收H5傳來(lái)的數(shù)據(jù)的，這個(gè)可以查看Uniapp官方文檔自行解決，而在交互當(dāng)中讓我們?yōu)殡y的無(wú)非就是H5如何向App傳遞數(shù)據(jù)和接受App傳來(lái)的數(shù)據(jù)以及App如何向H5傳遞數(shù)據(jù)

H5向App傳遞數(shù)據(jù)

在uniapp項(xiàng)目下的static中新建一個(gè)uni_webview.js然后將下面的代碼復(fù)制進(jìn)去

! 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當(dāng)中全局引入這個(gè)js文件

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

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

之后我們就可以在頁(yè)面當(dāng)中去使用它來(lái)實(shí)現(xiàn)數(shù)據(jù)交互了~

<template>
?? ?<view>
? ? ? ? ? ? <button @click="post">H5向App傳遞數(shù)據(jù)</button>
?? ?</view>
</template>

<script>
export default {
? ? data() {
? ? ? ? return {
?? ??? ??? ??? ?
? ? ? ? ? ? ? ?}
?? ? ? },
? ? ? ? ? ?onLoad(){
? ? ? ? ? ? ? ?this.get()
? ? ? ? ? ?}，
? ? ? ? ? methods:{
? ? ? ? ? ? ? ? post(){
? ? ? ? ? ? ? ? ? ? ?this.myUni.webView.postMessage({
? ? ? ? ? ? ? ? ? ? ? ? ? //data當(dāng)中是H5向App的傳遞數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? ? data: {},
?? ??? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? }，
? ? ? ? ? ? ? ? ? ? get(){
? ? ? ? ? ? ? ? ? ? ? ? 接收app傳遞來(lái)的數(shù)據(jù)
?? ??? ??? ??? ?window.postJS = function(msg) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //msg是App傳遞過(guò)來(lái)的數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(msg)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? }
}
</script>

<style>

</style>??文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-720607.html

到了這里，關(guān)于Uniapp中App與H5交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！