Vue2 H5与uniapp内嵌webview实时通讯

一挽春风十里

已于 2022-10-18 17:54:17 修改

阅读量1.3k

点赞数 1

文章标签： uni-app javascript 前端 html5

于 2022-10-14 20:16:43 首次发布

本文链接：https://blog.csdn.net/iamnm/article/details/127326972

版权

原理：通过监听url中的hash值来判断通讯是否完成

uniapp代码：

<template>
	<view>
		<web-view  @message="message" :src="url+'#'+hash"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
				hash:''
			}
		},
		onLoad: function(e) {
			this.url = e.url
		},
		methods: {
			message(e) {
				console.log(e)
				var msg = e.detail.data[0]
				console.log(msg)
				this.SendMessage(msg)
			},
			SendMessage(msg){
				this.hash = encodeURI(msg)
			}
		},
	}
</script>

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<!--Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<title>你好，华哥</title>
</head>
<body>
<span id="app">
<button class="btn btn-red" type="button" v-on:click="sendmessage">sendmessage</button>
{{ hash }}
</span>
<script>
if( ("onhashchange" in window) && ((typeof document.documentMode==="undefined") || document.documentMode==8)) {
    // 浏览器支持onhashchange事件
    window.onhashchange = hashChangeFire;  // TODO，对应新的hash执行的操作函数
} else {
    // 不支持则用定时器检测的办法
    setInterval(function() {
        var ischanged = isHashChanged();  // TODO，检测hash值或其中某一段是否更改的函数
        if(ischanged) {
            hashChangeFire();  // TODO，对应新的hash执行的操作函数
        }
    }, 150);
}
function hashChangeFire(){ getmessage() } 
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    hash:''
  },
  // 在 `methods` 对象中定义方法
  methods: {
    sendmessage: function (event) {
        uni.postMessage({
            data: '你好华哥'
        });
        
    },
    getmessage: function (event) {
        this.hash = decodeURIComponent(window.location.hash.substring(1));
    }
  },
  created () {   // 在created ()里定义是为了确保vue组件加载完成后，再执行window 全局方法
    window.getmessage= this.getmessage  // 将vue中要被调用的方法定义成 window 全局方法
  },
})
</script>
</body>
</html>