lcny-admin-mobile-vue/src/pages/webview/index.vue

76 lines
1.8 KiB
Vue

<template>
<view>
<web-view
:fullscreen="true"
ref="webview"
style="height: 500rpx"
:src="src"
@onPostMessage="message"
@message="message"
>
</web-view>
</view>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
src: '',
webview_styles: {
progress: {
color: '#FF3333',
},
},
}
},
computed: {
...mapGetters(['token']),
},
onLoad({ url }) {
const host = process.env.VUE_APP_BASE_URL
const queryParams = this.queryURLParams(decodeURIComponent(url))
const query = {
...queryParams.query,
token: this.token,
appbar: 'hidden',
timestamp: new Date().getTime(),
}
this.src = `${host}/#${queryParams.path}${uni.$u.queryParams(query)}`
console.log(this.src);
},
onReady() {
this.writeToWebView()
// this.webviewContext = uni.createWebviewContext('web-view', this)
},
methods: {
queryURLParams(URL) {
// const url = location.search; // 项目中可直接通过search方法获取url中"?"符后的字串
let url = URL.split('?')[1]
let obj = {} // 声明参数对象
if (url) {
let arr = url.split('&') // 以&符号分割为数组
for (let i = 0; i < arr.length; i++) {
let arrNew = arr[i].split('=') // 以"="分割为数组
obj[arrNew[0]] = arrNew[1]
}
}
return {
query: obj,
path: URL.split('?')[0],
}
},
writeToWebView(data) {},
evalJs: function () {
console.log(this.$refs.webview)
this.$refs.webview.evalJs("document.body.style.background ='#00FF00'")
},
message(event) {
console.log(JSON.stringify(event))
},
},
}
</script>