微信小程序与webview的html通信“秘籍”

一、引言

微信小程序生态发展现状

在当今数字化的时代浪潮中，微信小程序已然占据了极为重要的地位。微信作为国内拥有庞大用户基数的社交平台，其活跃用户数量超 10 亿，而小程序依托微信这一强大载体，受众范围极为广泛。几乎各行各业的 APP 都会去拓展小程序端的应用，从生活服务类的美团外卖、饿了么，到金融理财领域的诸多应用，再到电商购物平台等，小程序都随处可见。

据第三方专业数据机构 QuestMobile 发布的《2024 微信小程序年度报告》显示，截至 10 月份，微信小程序用户规模达到 9.49 亿，月人均使用时长达 1.7 小时，月人均使用次数近 70 次，同比分别增长了 15.1%、5.2%。并且，小程序覆盖的生活、消费、娱乐场景还在持续增加，比如在生活服务方面，月活跃用户规模能达到 8.9 亿；移动购物领域，月活跃用户规模达到 8.78 亿；金融理财方面，月活跃用户规模也达到 8.64 亿，同比均有显著增长。同时，像移动视频、医疗服务等领域的用户量更是处于高速增长阶段。

小程序之所以如此受欢迎，得益于它自身诸多的优势。它无需安装，用户只需扫一扫或者搜一搜即可使用，还具有即用即走的特点，符合现代人快速的生活节奏。而且相对传统的手机应用开发来说，小程序开发成本和周期更低，开发者基于微信平台，共享微信的用户数据和社交关系链，能更快速地开发出满足需求的应用，同时还能实现跨平台的兼容性，一次编写代码可在多平台运行。另外，小程序还可以充分利用微信的社交关系链进行传播，例如通过微信好友、朋友圈、公众号等渠道分享，让其应用场景不断拓展。

然而，在小程序的开发与应用过程中，也会面临一些技术方面的问题需要去攻克，其中小程序与 webview 的 html 通信就是值得深入探讨的重要环节。由于小程序和 webview 在不同的环境下运行，各自有着相应的机制和规则，二者之间如何实现高效、准确的通信，关乎着很多功能能否顺利实现，以及用户体验能否得到保障，所以对这一通信问题的研究和探索是十分必要的。

二、微信小程序与 webview 通信基础

（一）webview 组件介绍

在微信小程序中，webview 组件扮演着极为重要的角色，它是实现小程序与 html 通信的关键元素之一。

首先从 dom 布局来讲，webview 组件在小程序页面的布局上有着自身特点，它通常会自动铺满整个小程序页面。例如，在常见的小程序页面代码结构中，像下面这样使用 webview 组件：