- uniapp 设计引用webview的页面(可以是网路的,也可以在hybrid文件内的)
<template>
<view class="container">
<web-view :src="webviewurl" class="webview" @message="getclose"></web-view>
</view>
</template>
<script>
import { xxx} from '@/util/xxx'
export default {
data() {
return {
webviewurl:'',
wv: null
}
},
onLoad() {
let obj = xxx()
this.webviewurl = `/hybrid/htmlxxx.html?a=${obj.a}&BladeAuth=${obj.b}`
setTimeout(()=>{
let currentWebview = this.$scope.$getAppWebview()
this.wv = currentWebview.children()[0]
this.start()
},1000)
},
destroyed(){
},
watch:{
textObj() {
this.start()
}
},
computed: {
textObj() {
return this.$store.state.msg
}
},
methods:{
start() {
if (this.textObj.id & this.textObj.content) {
this.wv.evalJS("document.dispatchEvent(new CustomEvent('getUNIMsg',{detail: {msg:"+JSON.stringify(this.textObj)+"}}))")
} else {
this.wv.evalJS("document.dispatchEvent(new CustomEvent('getUNIMsg',{detail: {msg:{}}}))")
}
},
getclose() {
this.$store.commit('SET_MSG', {})
}
}
}
</script>
<style lang="scss" scoped>
.container {
}
</style>
- webview页面,可以是原始方法的html,也可以是利用webpack打包好的文件
xx.js
const tui = require("./uniwebview.js")
Vue.prototype.tui = tui
mounted () {
document.addEventListener("getUNIMsg",(e)=>{
console.log('getUNIMsg',e.detail.msg)
this.$store.commit('SET_MSG', e.detail.msg)
},false)
}
methods: {
close() {
this.tui.postMessage({
data: ""
})
}
}