1. uniapp 用web-view 嵌套uniapp
uniapp开发的APP要嵌套uniapp开发的h5,并且APP后面还要打包H5,这就涉及app和h5之间的通信,h5和h5之间的通信。
1.1. 准备工作
无论是app和h5通信还是 h5和h5之间的通信都是需要引入web-view的sdk文件 我下载的是1.5.2版本,代码如下
!(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
})
下载到本地,嵌入的h5页面引入 也可以直接全局引入在main.js里面(本人是main.js里导入的)
//main.js引入
import uniview from './pages/login/uni.webview.1.5.2'
//挂载到全局实例上面
// web-view SDK
Vue.prototype.uniview = uniview
1.2. app和h5通信(真机调试 ||打包后)
无论是app和h5通信还是 h5和h5之间的通信都是需要引入web-view的sdk文件 我下载的是1.5.2版本,代码如下
//app页面向h5页面传参采用的是路径传参
<view class="content">
<web-view :src="http://192.168.1.149:8082?token=1231" @message="getMessage" />
</view>
//h5页面接收
onLoad(options){
console.log('第一次登录@', options.token)
}
//h5页面向app页面传参
this.uniview.webView.postMessage({
data: {
type: 'pay_copy',
message: '传过去的参数',
},
})
//app页面接收 绑定@message事件 //只会在真机调试时生效！！！！！！！！！！！！！！！！
<view class="content">
<web-view :src="http://192.168.1.149:8082?token=1231" @message="getMessage" />
</view>
getMessage(value) {
console.log(value, '传过来的参数')
}
1.3. h5和h5之间通信
/内嵌的h5页面 (和h5传app一样不需要改)
this.uniview.webView.postMessage({
data: {
type: 'pay_copy',
message: this.detailList,
},
})
//父级h5(接收用window的方法接收)
onLoad() {
if (window) {
window.addEventListener('message', (e) => {
//可以通过e里面的参数 orgin判断是否是要嵌入的h5 (判断一下来源安全一些)
console.log(e, 'h5传过来的')
})
}
}