137 lines
3.3 KiB
Vue

<template>
<view>
<!-- <levitatedsphere :x="100" :y="80"></levitatedsphere> -->
<web-view ref="myWv" class="webView" :src="work_url + pageUrl" :webview-styles="styles" :fullscreen="false"
@onPostMessage="handlePostMessage" @message="handleMessage"></web-view>
<!-- <footers class="footer" activeTab="workspace"></footers> -->
</view>
</template>
<script>
import footers from '@/components/footers/footers.vue'
export default {
components: {
footers
},
data() {
return {
pageUrl: "/pages/instance/instancePreview",
styles: {
height: '0',
screenHeight: ''
},
instanceId: "",
nodeId: "",
routeName: "",
}
},
onLoad(options) {
this.instanceId = options.instanceId;
this.nodeId = options.nodeId;
this.routeName = options.routeName;
console.log("我是1111", this.pageUrl)
uni.getSystemInfo({
success: (res) => {
let screenHeight = res.screenHeight;
this.screenHeight = screenHeight;
}
})
},
mounted(){
// #ifdef H5
window.addEventListener("message", (e) => {
console.log(e.data)
const dataInfo = e.data.data;
console.log("handleMessage", dataInfo);
if(dataInfo.type == "路由"){
uni.redirectTo({
url: dataInfo.url
})
}
}, false);
// #endif
},
onReady() {
console.log("进来了吗")
// uni.hideTabBar()
let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
// console.log(userInfo)
const _funName = 'msgFromUniapp'
const _data = {
token: userInfo.token,
loginUser: userInfo,
page: `/pages/instance/instancePreview?instanceId=${this.instanceId}&nodeId=${this.nodeId}&routeName=${this.routeName}`
};
// #ifdef H5
setTimeout(() => {
this.$nextTick(() => {
if(this.$refs.myWv.iframe){
// this.$refs.myWv.iframe.style.width = "100vw";
// this.$refs.myWv.iframe.style.height = "100vh";
this.$refs.myWv.iframe.scrolling = "no";
this.$refs.myWv.iframe.contentWindow.postMessage(_data, "*")
// this.$refs.myWv.evalJs(`${_funName}(${JSON.stringify(_data)})`);
} else {
const iframe = window.document.getElementsByTagName("iframe")[0];
iframe.scrolling = "no";
console.log("我是", _data, iframe)
iframe.contentWindow.postMessage(_data, "*")
}
})
}, 1000);
// #endif
// #ifdef APP-PLUS
var currentWebview = this.$scope.$getAppWebview();
setTimeout(function() {
let wv = currentWebview.children()[0]
console.log("我是wv", wv)
wv.setStyle({
top: 0,
height: ((this.screenHeight - 300)),
// bottom: uni.upx2px(110)
bottom: 0
})
wv.evalJS(`${_funName}(${JSON.stringify(_data)})`);
}, 1000);
// #endif
},
methods: {
handlePostMessage: function(data) {
console.log("接收到消息:" + JSON.stringify(data.detail));
},
handleMessage (value){
const dataInfo = value.detail.data.length > 0 ? value.detail.data[0] : {};
console.log("handleMessage", dataInfo);
if(dataInfo.type == "路由"){
uni.redirectTo({
url: dataInfo.url
})
}
},
}
}
</script>
<style>
page {
background-color: #F4F5F7;
}
</style>
<style lang="less" scoped>
:deep(.webView) {
width: 100vw;
height: 100vh;
z-index: 10;
}
:deep(iframe){
width: 100% !important;
height: 100% !important;
border-width: 0;
}
</style>