如何实现小程序H5页面onShow及实现跨页面通信的详细方案？

本文共计4690个文字，预计阅读时间需要19分钟。

小程序WebView状态与H5页面交互场景：

1.H5页面在小程序中跳转场景

2.H5跳转小程序Native页面（如：调用小程序地理位置选择功能，返回信息给H5页面）

3.H5跳转自身业务线的H5页面（内部页面）

小程序webview的现状

h5页面在小程序中的交互（跳转）场景

• h5跳转小程序native页面（如：调用小程序地址选择能力，然后返回对应的地址信息给h5页面）
• h5跳转己方业务线的h5页面（内部页面交互，方式比较多样）
• h5跳转其它业务线的h5页面（如：交易流程，相关页面可能有其他业务线提供）

主要痛点

在完成相关操作后， 页面状态需要更新 ，目前常见的更新方式有如下两种：

• 第一种：通过url传参（如：url中加入__isonshowrefresh=1，告诉webview再次onshow时候刷新），把需要传递的参数拼接到url中，重新打开url。
• 第二种：需要跳转到新的页面进行数据更新（如：下单页 - 地址选择页 - 新的下单页）

第一种方案，功能上没有问题，但会导致页面刷新，如果页面操作复杂，需要多次刷新

第二种方案，正向操作时体验比方案一好，但导致了另外一个问题：操作 跳转层级过深 ，尤其返回的时候简直让人崩溃。