本编文章 uniappAPP与uniappH5是两个独立的项目，都是可以单独登录访问，在app中嵌套H5项目，需要在H5项目中获取app项目的登录信息，可以直接获取登录人信息，进而可以直接访问。
一、在app中使用web-view嵌入H5页面（只要在网址上面携带参数就可以）:
app中：需要将用户验签使用的token作为参数传入到H5项目中
<template>
<view class="box" style="padding-top: 100px;">
<web-view :src="wholeSrc" @message="getMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
wholeSrc:'',
token:''
}
},
mounted() {
this.token = uni.getStorageSync('token')
this.wholeSrc = '地址?token=' + this.token
},
onLoad() {
if (window) {
window.addEventListener('message', (e) => {
//可以通过e里面的参数 orgin判断是否是要嵌入的h5 (判断一下来源安全一些)
console.log(e.data, 'h5传过来的')
})
}
},
methods: {
getMessage(value){
console.log(value ,'value','getMessage里面的值')
}
}
}
</script>二、H5页面（接收app中所携带的参数）:
1、首先需要再H5项目下载webview.js文件，在main.js中引入（uni.webview.1.5.2.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中引入
//main.js引入
import uniview from '@/utils/uni.webview.1.5.2.js'
//挂载到全局实例上面
// web-view SDK
Vue.prototype.uniview = uniview在请求拦截器里面添加获取用户登录验签的token，否则需要重新登陆H5项目获取当前项目的验签
if(window.location.href.indexOf("?") !== -1){
if(window.location.href.split('?')[1].split('&')[0].split('=')[1]){
let token=window.location.href.split('?')[1].split('&')[0].split('=')[1]
uni.setStorage({
key: 'access-token',
data: token
})
document.cookie = 'token=' + token
}
}此时就可以获取到app项目中登录人的信息，不需要重新登录
在H5跳转的那个页面可以通过onload获取app携带的参数
//h5页面接收
onLoad(options){
if(options && options.token){
uni.setStorage({
key: 'access-token',
data: options.token
})
uni.getStorage({
key: 'access-token',
success: (res) => {
console.log(res.data,'tempToken')
}
})
}h5页面向app项目传参
//h5页面向app页面传参
this.uniview.webView.postMessage({
data: {
type: 'pay_copy',
message: 'h5传过去的参数我是 镜像报表中的参数88888888！',
},
})如果使用了自定义导航，可以使用webview中的返回方法
this.uniview.webView.navigateBack({
delta: 1
})平台声明：以上文章转载于《CSDN》，文章全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，仅作参考。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/g_mx123/article/details/144470218
