微信小程序遇到的棘手问题
深层页面返回浅层页面
前言
最近做小程序遇到一个页面跳转的问题,很是让人伤脑筋。问题描述如下:
从第 6 层页面既可以返回第 2 层页面,又可以返回第 5 层页面。
而且,第 2 层页面既可以打开第 6 层页面,又可以打开 第 3 层页面。
目前在小程序中用到最多的是 wx.navigateTo
和 wx.navigateBack
刚开始尝试了如下 2 种操作:
- 从第 6 层页面如果直接使用
wx.navigateTo
跳转第 2 层页面,然后重复这个操作。 - 从第 6 层页面如果直接使用
wx.redirectTo
跳转第 2 层页面,然后重复这个操作。
这 2 种操作方式,页面栈都会超过 10 个,报错 navigateTo:fail webview count limit exceed
。
您可以点击这里 微信小程序navigateTo和redirectTo交替使用报错navigateTo:fail webview count limit exceed。
然后又想到了如下 3 种操作:
- 全部使用弹窗
将第 6 层页面伪装成占满全屏的弹窗,从第 6 层返回上一层页面只需要关闭弹窗即可。
这种方式实际上未考虑手机物理按键返回,故舍弃! - 路由和弹窗同时使用
将第 2 层页面跳转第 6 层页面使用路由跳转页面,第 5 层跳转第 6 层页面使用弹窗展示,且在第 5 层页面通过 wx.enableAlertBeforeUnload API,开启小程序返回对话框,实现监听手机物理按键返回。
这种方式使用弹窗时,多了一个返回提示,而且必须用户手动点击提示框才行,用户体验差,故舍弃! - 全部使用路由
第 6 层页面无论跳转哪个页面都使用路由实现。
当第 2 层页面使用wx.navigateTo
到第 6 层页面后,第 6 层页面直接使用wx.navigateBack
就可以返回 第 2 层页面。
当第 5 层页面使用wx.navigateTo
到第 6 层页面后,第 6 层页面直接使用wx.navigateBack
先返回 第 5 层页面。然后从页面栈 getCurrentPages
中计算第 2 个页面所在的层数,然后使用wx.navigateBack
返回对应的层数。
这样即使用户会感知到某个页面一闪而过,但至少比弹出提示框更友好。
ios系统横屏页面跳转竖屏页面
前言
小程序页面从横屏跳转到竖屏页面时,在 ios
系统中,自定义头部的样式出现了样式问题,继续返回到横屏页面,然后再次进入竖屏页面,自定义头部的样式就没问题了。
可能是横屏跳转到竖屏时,自定义头部样式计算产生了问题,一种最简单的解决办法是:刷新页面。
当从横屏跳转到竖屏时,刷新一次页面,那么样式计算就没问题了,但是这只是一种临时解决方案,最终解决还是需要真机调试,一点点的调试自定义头部。
总结
小程序每次遇到问题都是一种累积,经验的累积,解决问题思路的扩散。