vivo手机webview是什么,vivo system webview怎么重新安装

首页 > 实用技巧 > 作者:YD1662023-11-23 15:28:39

3)websocket背景下的webview通信实践

小程序webview初始化并在onLoad阶段通过 options.useMktsocket 判断是否需要加载 socket,同时判断应用环境通过 wx.connectSocket api 连接不同的 socket 服务;

初始化webview socket服务,接受服务器消息-对服务器消息进行甄别,如果H5页面通过socket传递给webview容器的数据data格式符合预期,且H5环境下登录态中的openId与小程序环境一致,则认为此次通信合法;

webview容器中绑定了 小程序分享miniShare 、小程序订阅openScribe、 健康检查health等常用业务API,用于处理广告、订阅、任务更新等业务实时回调;H5业务可通过此接口设置触发小程序原生页面的一些原生功能,为上层业务提供服务。

H5页面就可以通过 socket 通信更改并调用小程序的胶囊栏分享、通知webview容器页面调用小程序广告、也可以调用唤起小程序页面中的分享组件面板、触发左上角物理返回时及时通知H5页面触发回调等诸多业务;同时小程序容器页面原生事件完成后(比如广告、分享)再次通过socket返回给H5页面的回调,实现小程序webview跨页面的实时通信。

在websocket加持下,此时的小程序webview赋予了更多和H5通信的功能。

4.5 自定义分享面板

H5页面可以通过 websocket 通信更改并调用小程序的分享参数,不再依赖于页面options参数,可以调用在webview页面封装的分享面板,提供更加灵活的分享方式。

vivo手机webview是什么,vivo system webview怎么重新安装(9)

vivo手机webview是什么,vivo system webview怎么重新安装(10)

4.6 H5调用小程序原生的激励广告

H5页面可以通过 websocket 通信调用小程序原生的激励广告。

vivo手机webview是什么,vivo system webview怎么重新安装(11)

4.7 任务体系中用户任务组件状态的更新

用户在访问加载了webview-h5的页面会与websocket的server A服务器连接、小程序原生页面与server B连接时,这两个页面因为在不同的容器下,所以无法通信和告知;但是只要这两个页面加载的是同一个市场的websocket服务,服务端可以设置共享一个redis,通过redis的发布订阅功能,连通集群内部各个机器,那么在页面前进、回退时都可以绑定对应的回调事件,实现任务组件的灵活更新,给用户展示最新的任务状态。

五、总结

在处理小程序webview的业务方面,可以通过封装一个包含各端环境的SDK,在H5初始化时加载,打通H5和小程序webview之间的通道,实现H5控制分享、登录态同步、支付信息同步等功能。

在遇到跨页面数据刷新问题时,借助了websocket这把利器,通过redix的发布订阅通知链接了websocket服务器的页面,实现小程序webview物理返回上一页而数据不刷新的问题,同时websocket使得H5与webview的通信更加便捷灵活,拓展了H5调用小程序原生激励广告、封装并调用小程序原生的分享面板等功能。

【参考文献】【作者简介】

思语,携程高级前端开发工程师,关注互动营销领域;

Olivio,携程高级前端开发工程师,关注React Node 组件化;

Stone,携程高级研发经理,关注跨端解决方案,云原生落地等领域。

上一页123末页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.