149 lines
3.5 KiB
Vue
149 lines
3.5 KiB
Vue
<template>
|
|
<view class="fullHeight">
|
|
<!-- <levitatedsphere id="levitatedsphere" :x="100" :y="80"></levitatedsphere> -->
|
|
<view>
|
|
<!-- :webview-styles="styles" -->
|
|
<web-view ref="myWv" class="webView" :src="work_url" @message="handleMessage" :fullscreen="false" @onPostMessage="handlePostMessage">
|
|
|
|
</web-view>
|
|
</view>
|
|
<!-- <footers class="footer" activeTab="submit"></footers> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import footers from '@/components/footers/footers.vue'
|
|
export default {
|
|
components: {
|
|
footers
|
|
},
|
|
data() {
|
|
return {
|
|
styles: {
|
|
height: '0',
|
|
screenHeight: '',
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
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() {
|
|
try {
|
|
let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
|
|
const _funName = 'msgFromUniapp'
|
|
const _data = {
|
|
token: userInfo.token,
|
|
loginUser: userInfo
|
|
};
|
|
// #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";
|
|
iframe.contentWindow.postMessage(_data, "*")
|
|
}
|
|
|
|
})
|
|
}, 500);
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
var currentWebview = this.$scope.$getAppWebview();
|
|
setTimeout(function() {
|
|
console.log(JSON.stringify(currentWebview.children()[0]));
|
|
let wv = currentWebview.children()[0]
|
|
wv.setStyle({
|
|
top: 0,
|
|
height: ((this.screenHeight - 300)),
|
|
// bottom: uni.upx2px(110)
|
|
bottom: 0
|
|
})
|
|
// let query=uni.createSelectorQuery();
|
|
// let dom = query.select("#levitatedsphere");
|
|
// console.log(dom);
|
|
// currentWebview.appendChild(dom)
|
|
wv.evalJS(`${_funName}(${JSON.stringify(_data)})`);
|
|
}, 1000);
|
|
// #endif
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
}
|
|
},
|
|
methods: {
|
|
handleLoad(data){
|
|
console.log(11111,data);
|
|
let query=uni.createSelectorQuery();
|
|
let dom = query.select("#levitatedsphere");
|
|
console.log(dom);
|
|
console.log(uni.createSelectorQuery().select("#app"));
|
|
console.log(document.body);
|
|
uni.createSelectorQuery().select("#app").appendChild(dom);
|
|
},
|
|
handlePostMessage(data) {
|
|
console.log(data);
|
|
uni.showToast({
|
|
title: data
|
|
})
|
|
},
|
|
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>
|
|
.fullHeight {
|
|
height: 100vh
|
|
}
|
|
|
|
:deep(.webView) {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 10;
|
|
}
|
|
:deep(iframe){
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
border-width: 0;
|
|
}
|
|
</style> |