【uniapp使用webview嵌入h5，并在h5中触发uniapp推送系统通知】

uniapp使用webview嵌入h5

嵌入h5如下

<web-view src="http://xxx.xxx.xxx.xxx:8000" @message="handleMessage"></web-view>

通过@message创建一个handleMessage事件。

handleMessage(evt) {
				console.log('原始信息:' + evt)
				console.log('接收到的消息：' + JSON.stringify(evt));
				if (evt) {
					// let data={};
					let data = JSON.parse(evt.detail.data);
					console.log('json解析：' + JSON.stringify(data));
					if (data && data.content && data.title && data.content != '' && data.title != '') {
						uni.createPushMessage({
							content: data.content, // 推送内容
							title: data.title, // 推送标题
							sound: "system",
							success: function(res) {
								console.log('推送成功', res);
							},
							fail: function(err) {
								console.log('推送失败', err);
							}
						});
					} else {
						return;
					}

				}
			}

h5向uniapp推送消息

主要使用uni.postMessage()向uniapp推送，如果想要使用uni，需要在h5中引入uni-webview.js。
先下载uni-webview.js文件：
链接: https://download.csdn.net/download/guoqu1919/88864022
放入如下h5项目路径：

在index.html中引入：

这边使用的angular框架，需要在typings.d.ts中声明一个名为 uni 的变量：

let json = {
          title: '标题',
          content: '内容'
        }
        //推送消息
        uni.postMessage({
          data: JSON.stringify(json)
        });

完整的uniapp的index.vue代码（注：需要提前打开手机app的通知权限）

<template>
	<view>
		<web-view src="http://xxx.xxx.xxx.xxx:8000" @message="handleMessage"></web-view>
	</view>
</template>
<!--  -->
<script>
	export default {
		data() {
			return {
			}
		},

		onReady() {
		},

		onLaunch() {
		},


		onLoad: function() {
		},
		methods: {

			handleMessage(evt) {
				console.log('原始信息:' + evt)
				console.log('接收到的消息：' + JSON.stringify(evt));
				if (evt) {
					// let data={};
					let data = JSON.parse(evt.detail.data);
					console.log('json解析：' + JSON.stringify(data));
					if (data && data.content && data.title && data.content != '' && data.title != '') {
						uni.createPushMessage({
							content: data.content, // 推送内容
							title: data.title, // 推送标题
							sound: "system",
							success: function(res) {
								console.log('推送成功', res);
							},
							fail: function(err) {
								console.log('推送失败', err);
							}
						});
					}  else {
						return;
					}

				}
			},
		}
	}
</script>

<style>

</style>

ps:仅供思路参考，仍需考虑安全方面