uniapp webview与uniapp相互传参

  1. 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() {
			// #ifdef APP-PLUS
			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)
			// #endif
		},
		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() {
			//接收webview事件更新状态
				this.$store.commit('SET_MSG', {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
	}
</style>
  1. webview页面,可以是原始方法的html,也可以是利用webpack打包好的文件
//全局公共引入
xx.js
const tui = require("./uniwebview.js")
Vue.prototype.tui = tui

//组件功能页面xxx.vue
mounted () {
    document.addEventListener("getUNIMsg",(e)=>{
    	//webview接收uniapp传过来的信息
      console.log('getUNIMsg',e.detail.msg)
      this.$store.commit('SET_MSG', e.detail.msg)
    },false)
}
methods: {
    close() {
      this.tui.postMessage({
        data: ""
      })
    }
  }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值