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

原创

已于 2024-02-23 11:12:44 修改

· 1.6k 阅读

10 ·

版权

文章标签：

#uni-app

于 2024-02-21 18:23:20 首次发布

本文详细描述了如何在UniApp中使用webview嵌入H5，并通过uni.postMessage实现H5向UniApp发送消息，以及如何在UniApp端处理并显示推送通知。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

uniapp使用webview嵌入h5
h5向uniapp推送消息
完整的uniapp的index.vue代码（注：需要提前打开手机app的通知权限）

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