京东小程序折叠屏适配探索
业务研发部 张磊约 11 分钟
Tech 导读
折叠屏逐渐成为Android手机发展的趋势，京东小程序团队近年来也支持了越来越多的业务和应用，折叠屏适配不仅符合发展趋势，也能为用户提供更好的体验。本文讲述了京东小程序引擎在折叠屏适配中遇到的问题及解决思路，欢迎大家探讨交流。
导读
随着近年来手机行业的飞速发展，手机从功能机进入到智能机，手机屏幕占比也随着技术和系统的进步越来越大，特别是Android 10推出以后，折叠屏逐渐成为Android手机发展的趋势。
京东小程序近年来也支持了越来越多的业务和应用，做好小程序的折叠屏的适配也是符合未来的发展趋势，能为用户和业务方提供更好的体验和价值。
应用在折叠屏运行时，可以从一个屏幕切换到另一个屏幕。应用应该做好配置变更的适配和界面状态的保存，以保证应用当前任务能无缝迁移到转换后的屏幕，从而为用户提供出色的连续性体验。
2.1 Resizeable Activity
Android 10 (API 级别 29) 或更高版本 支持更多种宽高比。
默认情况下，Activity resizableActivity 属性为 true，系统假定该应用完全支持多窗口并且可调整大小。
2.2 屏幕宽高比
2.3 处理配置变更
总之，为了做好Android应用的折叠屏适配，应用需要妥善地保存界面状态和支持配置变更，并进行详细的测试，详细适配指导方案可以参考官方文档。
图 7 微信小程序折叠屏适配诉求
4.1 京东小程序折叠屏问题
京东小程序之前也存在元素尺寸不合适、折叠后无法从任务栈中再次打开等问题，下面是京东快递小程序的现象。
4.2 小程序多屏幕适配
4.3 折叠屏问题分析
1. 元素尺寸问题：
4.4 解决思路
监听屏幕折叠：
1. 记录当前屏幕参数（宽、高、方向）
2. 在onConfigurationChanged(Configuration newConfig)回调中获取最新屏幕配置。当屏幕发生折叠后，系统会将newConfig下发给应用程序，取出new Config.orientation 、new Config. screen WidthDp 和 new Config.screen Height Dp ， 与 之前保存的屏幕参数进行对比。如果宽、高发生变化，通常认为屏幕发生折叠。
3. 细节处理
a.由于视屏播放器全屏状态下通常会是横屏状态，当从全屏状态切回正常模式时往往会回到竖屏，这里屏幕的 orientation 会与之前的不同，不能当做折叠处理。
b.折叠屏手机屏幕往往底部还有一个最近应用的快捷导航条，如果是开启状态，因为需要重汇的缘故，在发生折叠后，系统会触发两次onConfigurationChanged(Configuration newConfig)回调，而且两次回调的参数中 newConfig.screenHeightDp 会前后不一致，这里需要做一下兼容处理，否则会误判为多次折叠。
1.局部刷新：通知业务自行刷新
这种方案可以在一定程度上保留用户操作流程的完整，但是也存在非当前页面无法刷新或者或退后再次刷新等问题，对用户来说体验一般，而且需要小程序业务的开发者来监听页面变化，增加了开发者的业务复杂度。
2.整体刷新：重启小程序
这种方案是客户端引擎监听到设备发生折叠时，关闭小程序，并进行重新打开。可以很好地保障页面的重新适配，重启行为会对用户操作流程完整性有一定的损伤，对小程序开发者来说没有工作量。
针对此问题，引擎侧需要避免杀死小程序所在进程，同时结合上面 2 个页面刷新方案，综合考虑，采用在当前进程整体刷新、重启小程序方案。一方面解决了历史任务栈无法重启问题，另一方面避免了创建新进程的开销，界面上给人的感官也更流程。
4.5 遇到的问题及解决方案
Android系统还有两个功能就是多窗口和画中画模式，activity可以缩放为一个小窗口，在屏幕中显示一小块区域，能够很灵活的拉伸缩放，对于此，小程序引擎忽略了窗口大小的变化，否则用户只要一缩放就会重启小程序，这是用户无法接受的。这种情况下，保持不变是契合多窗口的设计初衷的，读者在处理类似的适配方案时应当注意多窗口、画中画问题。
不同的厂商或者不同的用户配置，会在发生折叠时，因为状态栏或者系统底部的虚拟按键等设置，触发不同次数的onConfigurationChanged回调，回调下发的screenHeightDp数值不一致。上文已经提到，需要针对回调参数下发的newConfig数据做真正的折叠判断，忽略“伪配置变更”。
不考虑折叠屏的情况下，京东小程序在多栈模式下返回时并不是真正的关闭小程序，而是压到后台，没有触发activity的finish。当用户再次打开时会触发onNewIntent事件，这里会进行小程序的重启。
但是遇到折叠屏，就会触发onConfigurationChanged 和 onNewIntent 都回调的情况，通过查阅源代码和打印日志方式，可以发现onConfigurationChanged的回调早于onNewIntent的。所以onConfigurationChanged一旦识别到发生屏幕折叠就会重启小程序，在onNewIntent这里应该避免再次重启小程序。
在适配中会遇到在某些机器上“没问题”，在其他机器上“很容易复现”的窘境。在理论和实际上，客户端传递给逻辑层、视图层的尺寸数据都没问题，但是小程序表现上还是存在问题。经过细致的排查，发现js引擎上有些数据的是来自于window对象的宽高数据，此数据与折叠后的屏幕数据不一致，即webview和js引擎获取到的设备尺寸更新不及时，造成rpx计算失准。为此，我们替换了引擎中对window宽高的使用方式，替换为屏幕真正的数据。
4.6 修复效果展示
外屏转内屏：
图 17 折叠屏适配后-后台唤起
业务联系
京东小程序开放平台目前正在大力扶持服务商（ISV）快速开拓京东小程序代开发市场，通过限时免费入驻、1V1帮扶、重点项目合作共创、官方宣传资源倾向等专属权益帮助ISV快速入驻和承接商家需求。
如有意向，可查阅服务商入驻相关文档：
https://mp-docs.jd.com/doc/introduction/accessGuide/1768
或通过官方联系方式进行咨询：
1）邮箱：[email protected]；
2）官方微信：JDminiprogram；
3）官方咚咚群：102021518776；
4）话机：010-8912-5842；
深入了解和体验京东小程序，可前往官网 https://mp.jd.com/entrance=tech_share 获取更多信息。
求分享
求点赞
求在看
▪功能支撑：会员成长体系、等级计算策略、权益体系、营销底层能力支持
▪用户活跃：会员关怀、用户触达、活跃活动、业务线交叉获客、拉新促活