微信小步伐与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 组件：

1. <view class='container'>
3. <web-view wx:if="{{url}}" class='webview' src="{{url}}" bindload="bindload" binderror="binderror" bindmessage="bindmessage"></web-view>
5. </view>

复制代码

可以看到，webview 组件根据条件（这里通过wx:if判断url是否有值来决定是否渲染）展示在对应的容器内，并占满可用空间。
然后再看看它的相干属性，src属性是一个很关键的属性，其范例为 String，用于指定要加载的网页链接，也就是一个网站的 url，默认值是 none，它明确了 webview 要指向的网页内容。比如我们想在小步伐中展示某个详细网页，可以将对应的合法 https 链接赋值给src属性，像<web-view src="Example Domain"></web-view>这样的代码，就能让小步伐加载展示Example Domain这个网页内容（需注意要配置好相干域名白名单等条件）。
除此之外，另有像bindload、binderror、bindmessage等常用属性。bindload属性对应的事件会在网页加载成功时候触发，在对应的 js 文件中可以这样界说处置惩罚函数来响应这个事件：

1. bindload() {
3. console.log('webview load success');
5. }

复制代码

binderror属性对应的事件则在网页加载失败的时候触发，处置惩罚函数示比方下：

1. binderror() {
3. console.log('webview load error');
5. }

复制代码

而bindmessage属性在网页向小步伐发送消息时起到关键作用，不过它的触发是有特定时机的，比方小步伐后退、组件烧毁、分享等场景下，小步伐端才能吸收到消息，在 js 文件中吸收处置惩罚函数可以这么写：

1. bindmessage(e) {
3. console.log(e.detail.data);
5. }

复制代码

在对应的 js 文件中，对于 webview 组件也有一系列的根本设置情况。比如在小步伐页面的 js 文件里，我们需要对 webview 相干的数据以及事件举行公道的配置和管理。像在页面加载（onLoad生命周期方法）时，可以根据传入的参数来设置 webview 组件的src属性值，示例代码如下：

1. Page({
3. data: {
5. url: ''
7. },
9. onLoad(options) {
11. // 使用从其他页面传入的参数来设置webview的src
13. let params = JSON.parse(options.params);
15. this.setData({
17. url: params.url
19. });
21. }
23. });

复制代码

总之，webview 组件在小步伐中的利用需要综合考虑 dom 布局、属性运用以及 js 文件中的相干设置，这些都是后续实现与小步伐之间通信的基础内容。
（二）通信方式概述

在微信小步伐开辟中，小步伐原生页面和 webview 页面之间常常需要举行双向通信，以实现更丰富的功能交互。
从原生页面到 webview 页面的通信方面来看，本质上 webview 也是小步伐的一个页面，所以小步伐到 webview 可以按照正常的小步伐间的通信方式来操作。比方，通过wx.navigateTo、wx.redirectTo等方法，带上url参数以及query参数（query参数就犹如正常url的参数一样跟在后面），然后在 webview 的页面的Page实例里面通过onLoad方法的参数来获取url的值，进而设置给 webview 的src属性为该值即可。
而从 webview 页面到小步伐原生页面通信时，由于在 webview 中的跳转通常是在src对应的网页中的操作来处置惩罚的，所以需要联合jssdk来完成。详细来说，不需要wx.config配置，直接通过script标签引入https://res.wx.qq.com/open/js/jweixin-1.3.0.js，之后就可以利用wx.miniProgram.navigateTo、wx.miniProgram.navigateBack、wx.miniProgram.switchTab、wx.miniProgram.reLaunch、wx.miniProgram.redirectTo等接口来实现跳转，不过要注意的是这种跳转只能在当前小步伐页面内举行。并且在网页向小步伐发送消息时，还可以通过wx.miniProgram.postMessage向小步伐发送消息，小步伐端通过bindmessage事件来吸收消息，但吸收消息存在特定触发场景，比如小步伐后退、组件烧毁、分享时等才会触发吸收。
这些通例的通信实现途径只是基础，后续我们还会深入探究在实际应用中可能碰到的各种细节问题以及相应的解决方案，来确保小步伐与 webview 之间通信的高效性和正确性。
三、小步伐原生页面到 webview 页面通信

（一）页面跳转实现

在微信小步伐开辟中，从小步伐原生页面跳转到 webview 页面是比较常见的操作，以下通过代码示例来分析详细的实现过程以及参数转达和数据装载的方式。
假设我们有一个小步伐原生页面 A，现在要跳转到包含 webview 组件的页面 B，并且要转达一些参数已往。我们可以利用wx.navigateTo方法来举行页面跳转，示例代码如下：

1. let params = {
3. a: 1,
5. b: 2
7. };
9. wx.navigateTo({
11. url: `/pages/webview/index?params=${JSON.stringify(params)}`
13. });

复制代码

在上述代码中，params对象就是我们要转达的参数，通过JSON.stringify方法将其转换为字符串情势，拼接到url后面。
当跳转到目的 webview 页面 B 后，需要在该页面的onLoad生命周期方法中获取并处置惩罚转达过来的参数，然后设置 webview 的src属性来装载对应的网页数据，示比方下：

1. Page({
3. data: {
5. url: ''
7. },
9. onLoad(options) {
11. // 使用从A页面传入的参数来设置webview的src
13. let params = JSON.parse(options.params);
15. this.setData({
17. url: params.url
19. });
21. }
23. });

复制代码

这里的options参数就是包含了从上个页面转达过来的所有参数信息，我们从中解析出需要的参数，进而可以根据业务需求来动态设置 webview 要加载的网页地址，完成数据的装载，使得 webview 页面能精确展示出期望的内容。
（二）通信注意要点

在小步伐原生页面到 webview 页面通信的过程中，有几个容易出现问题的地方需要特别留意。
起首是参数转达格式方面，要确保转达的参数可以或许被精确序列化和反序列化。比如利用JSON.stringify将对象参数转换为字符串举行转达时，参数对象中的数据范例要符合 JSON 规范，像函数等不可序列化的数据范例是不能直接转达的，如果包含了这类数据可能会导致转达失败或者在吸收端解析出错。并且在吸收参数的 webview 页面，肯定要正确地利用JSON.parse举行反序列化操作，否则无法精确获取参数内容。
在数据吸收处置惩罚环节，要注意对吸收数据的验证和容错处置惩罚。比方转达过来的参数可能由于网络问题或者上个页面逻辑异常等情况出现不完整或者不符合预期格式的问题，此时在 webview 页面吸收参数后，需要举行必要的格式校验，比如判断参数是否为null或者undefined，对于一些应该是数值范例的参数要验证是否确实是有用的数字等。别的，当根据参数来设置 webview 的src属性加载网页时，如果src的值不符合要求（比如不是合法的 https 域名地址、未在微信公众平台配置白名单的域名等），则会导致网页加载失败，所以要提前做好相干的合法性检查以及错误提示等逻辑，保障用户体验。同时，还要考虑到网络耽误等情况对数据加载的影响，制止因长时间等待数据加载而出现页面卡顿或者空缺等不良征象，可以适当添加一些加载提示动画等交互元素，告知用户当前的页面状态。
四、webview 页面到小步伐原生页面通信

（一）借助 JSSDK 跳转通信

在实际项目中，比如常见的 react 项目里，我们来看看在 webview 页面中怎样利用 JSSDK 向小步伐原生页面举行跳转并实现通信。
起首，在 webview 对应的 html 页面中，我们需要引入 JSSDK，代码如下：

1. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" defer></script>

复制代码

引入之后，我们就可以在相应的 js 代码逻辑里利用微信小步伐提供的相干接口来举行跳转操作了。比方，假设我们要从 webview 页面跳转到小步伐的某个详细原生页面，并且转达一些参数已往，代码示比方下：

1. componentDidMount() {
3. // 获取url中路由参数
5. let query = this.props.history.location.search.slice(1);
7. }
9. enter() {
11. let params = {
13. a: 1,
15. b: 2
17. };
19. wx.miniProgram.navigateTo({
21. url: `/pages/index/index?params=${JSON.stringify(params)}`
23. });
25. }

复制代码

在上述代码中，componentDidMount 方法里可以先获取当前页面 url 中的路由参数（如果有需要的话），而 enter 方法里则界说了要转达的参数 params，通过 wx.miniProgram.navigateTo 接口举行页面跳转，将参数拼接到 url 后面转达给目的小步伐原生页面。
这里要注意的是，像 wx.miniProgram.navigateTo、wx.miniProgram.navigateBack、wx.miniProgram.switchTab、wx.miniProgram.reLaunch、wx.miniProgram.redirectTo 这些接口的利用是有肯定规则的，它们只能在当前小步伐页面内举行跳转操作，开辟者在利用时要确保符合相应的场景需求，这样才能正确地实现从 webview 页面到小步伐原生页面的跳转通信。
（二）返回按键刷新问题及解决方案

当 webview 页面跳转到小步伐原生页面后，按左上角返回按键时，webview 页面的刷新方面每每会存在一些问题，这里我们来详细分析一下，并讲讲对应的解决方案。
目前常见的有两种处置惩罚方案，分别是纪录路由栈和不纪录路由栈。
纪录路由栈方案：在 <web-view> 页面的 onShow 方法中举行操作，示例代码如下：

1. onShow() {
3. this.setData({
5. url: params.url
7. });
9. }

复制代码

这种操作方式下，web-view 会纪录本身的路由栈，每执行一次 setData，路由栈就会增长一级。此时在 <web-view> 页面按返回按钮，回退的是 <web-view> 本身的路由栈，而不是小步伐自身的路由栈。这样做的利益是可以或许比较细致地纪录页面的访问路径，方便在页面逻辑中根据路由栈情况做一些相应处置惩罚，比如可以实现多层级的页面返回逻辑，适用于一些有复杂页面层级关系且需要正确控制回退页面展示内容的业务场景。不过缺点就是路由栈如果不断增长，可能会占用肯定的内存资源，而且在某些特定业务下，可能不符合我们期望的直接回退到小步伐特定页面的需求。
不纪录路由栈方案：代码示比方下：

1. onShow() {
3. this.setData({
5. url: ''
7. }, () => {
9. this.setData({
11. url: params.url
13. });
15. });
17. }

复制代码

这种操作是先清空 url，由于 wx:if="{{url}}" 会烧毁 <web-view> 组件，然后在回调中重新 setData，相称于初始化 <web-view> 组件，<web-view> 自身路由栈不会增长。此时在 <web-view> 页面按返回按钮，回退的是小步伐自身的路由栈。长处在于可以或许简洁地实现回退到小步伐原生页面的逻辑，制止了路由栈不断累积的问题。但它也有不敷的地方，部分机型存在 bug，比方在 iPhone X 和 iPhone XS 等机型搭配的 iOS 12.4.1 体系下，webview 的 url 先清空后赋值的方案中在 binderror 中会报错，报错信息为 insertHTMLWebView:fail only one webView component，这就需要开辟者在实际应用中针对这些特定机型做额外的兼容处置惩罚或者考虑其他替代方案。
（三）终极刷新不纪录路由栈方案

下面先容一种解决从小步伐原生页面回退到 webview 中，刷新 webview 并不纪录 webview 自身路由栈问题的终极方案。
在详细代码实现上，起首在 onLoad 生命周期方法中，让 webview 需要的 url 从公共数据 app.globalData 中读取，示比方下：

1. onLoad(options) {
3. this.setData({
5. url: app.globalData.url
7. });
9. }

复制代码

这样做可以淘汰页面间通信的耦合度，让数据获取更加统一和规范。
然后在 onShow 方法里添加如下逻辑：

1. onShow() {
3. if (this.firstEnter) {
5. this.firstEnter = false;
7. return;
9. }
11. wx.redirectTo({
13. url: 'index'
15. });
17. }

复制代码

不过需要注意的是，这个方案会触发 onUnload 事件，如果之前在 onUnload 事件中有相干的业务逻辑，那么就需要针对这些逻辑做好兼容处置惩罚，制止出现意想不到的问题，比如数据丢失或者页面状态异常等情况。
通过这样一套方案的实施，可以或许较好地解决从小步伐原生页面回退到 webview 页面时，刷新且不纪录路由栈相干的一系列问题，提升小步伐与 webview 页面之间交互的流畅性和稳定性，为用户带来更好的利用体验。
五、通信常见故障及解决办法

（一）消息吸收不到问题

在开辟过程中，偶然会碰到从 h5 页面给小步伐发送消息，但小步伐却吸收不到的情况，下面就来分析一些常见的故障场景以及对应的排查思路和解决办法。
比方在 uniapp 中，有从 h5 页面给小步伐转达消息的需求时，直接发送消息每每不起作用。这时，起首要检查 h5 页面的相干设置。常见的解决办法是在 h5 页面的 index.html 中引入 js-sdk（加入 body 下面），代码如下：

1. <script type="text/javascript">
3. var userAgent = navigator.userAgent;
5. if (userAgent.indexOf('AlipayClient') > -1) {
7. // 支付宝小程序的 JS-SDK 防止404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
9. document.writeln('<script src="https://appx/web-view.min.js">'+'</'+'script>');
11. } elseif (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
13. // QQ 小程序
15. document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"></script>');
17. } elseif (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
19. // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
21. document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>');
23. } elseif (/toutiaomicroapp/i.test(userAgent)) {
25. // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
27. document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"></script>');
29. } elseif (/swan/i.test(userAgent)) {
31. // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
33. document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"></script>');
35. } elseif (/quickapp/i.test(userAgent)) {
37. // quickapp
39. document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"></script>');
41. }
43. if (!/toutiaomicroapp/i.test(userAgent)) {
45. document.querySelector('.post-message-section').style.visibility ='visible';
47. }
49. </script>
51. <!-- uni 的 SDK -->
53. <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
55. <script type="text/javascript">
57. document.addEventListener('UniAppJSBridgeReady', function() {
59. // 在这里测试是否接收到uni.webView.postMessage({data: {type: 'back'}});
61. uni.webView.getEnv(function(res) {
63. console.log('当前环境：'+ JSON.stringify(res));
65. });
67. uni.webView.back();
69. });
71. </script>

复制代码

同时，在 uniapp 小步伐页面中，要精确利用<web-view>组件来吸收消息，像这样：

1. <web-view src="h5地址" @message="onMessage" >
3. </web-view>

复制代码

然后在对应的 methods 里面界说onMessage方法来处置惩罚吸收到的消息，示比方下：

1. onMessage(event) {
3. console.log('Received message from H5:',event);
5. }

复制代码

总的来说，关键步骤就是引入相干的兼容模块，在 webview 中的 h5 页面添加相干兼容 sdk 后，每每就能解决消息吸收不到的问题。
别的，还要注意一些细节情况。比如有的开辟者可能错误地利用了事件名称，在微信小步伐中，要吸收来自 H5 页面的消息，需要利用 webview 组件的bindmessage事件，而不是message。在小步伐的 wxml 文件中，要确保精确利用了<web-view>组件，并为其绑定message事件，示比方下：

1. <webview id="myWebview" src="你的H5页面URL" bindmessage="onMessage">
3. </webview>

复制代码

在对应的 js 文件中，实现onMessage事件处置惩罚函数，代码如下：

1. Page({
3. onMessage: function(e) {
5. console.log(e.detail.data); // 这里将打印出从H5页面传递过来的数据
7. }
9. });

复制代码

同时，要确保 H5 页面和小步伐页面在同一域下，由于出于安全考虑，跨域的消息转达可能会被制止。如果按照上述步骤操作后仍旧无法吸收消息，还需要进一步检查：比如检察 webview 组件的src属性是否精确指向了 H5 页面的 URL，确保 H5 页面中的postMessage方法调用没有错误，检察小步伐的控制台输出，看是否有其他错误信息等，通过这些全面的排查来解决消息吸收不到的问题。
（二）微信 PC 端显示问题

在微信 PC 端利用小步伐的 web-view 时，常常会碰到一些兼容性问题，其中比较典型的就是 web-view 不显示的情况。
原因在于微信 PC 端小步伐利用的引擎有兼容性问题，不支持页面的onTabItemTap声明周期钩子方法，所以在此方法内写的显示 web-view 的语句不会执行。
解决方法是放弃利用onTabItemTap，可以采用 store 或自界说事件监听等曲线方式来实现相应需求。
别的，需要注意的是，当前微信开辟者工具的 PC 端真机调试不支持忽略 web-view 域名校验，所以在测试时可能会显示 “不支持打开非业务域名”。这就要求开辟者在配置业务域名时要格外细致，要确保所利用的域名已经添加到了白名单中，并且业务域名（即需要跳转的域名）需经过 ICP 备案，新备案域名需 24 小时后才可配置，域名格式只支持英文大小写字母、数字及 “-”，不支持 IP 地址等。
如果碰到企业主体的微信小步伐在配置业务域名后，线上版本或体验版仍无法通过 web-view 组件访问相应外部链接的情况，要检查配置业务域名的相干操作是否正确无误，比如是否取消了所有第三方平台的授权，校验文件是否放置在需要跳转的域名的根目录劣等步骤，按照精确流程配置好业务域名后，才能保障 web-view 在微信 PC 端可以正常显示并利用，资助我们避开这些兼容性方面的坑洼，顺遂举行小步伐开辟与调试工作。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。