微信小程序换刘海如何检测屏幕为刘海屏

来源：蜘蛛抓取(WebSpider) 时间：2018-07-09 10:53 标签： 微信小程序换刘海

我们使用cookie来确保您的高速浏览体驗继续浏览本站，即表示您同意我们使用cookie

百度智能小程序是百度在2018年新开發的重点项目在2019年百度将投入更多到百度智能小程序里，有望一举超越微信小程序换刘海和支付宝小程序如果等百度智能小程序火爆铨国再去做肯定是晚了，所以从现在开始就要开始动手勇敢吃螃蟹的人才能获得最好的红利！

在以前的文章里，我们讲过百度智能小程序是什么、怎样做好百度智能小程序体验设计、百度智能小程序接入自然搜索的步骤今天我们就来讲讲百度智能小程序应该如何布局。

劉海手机已经成为现如今手机的主流趋势开发者只要在顶部导航栏的下方布局页面即可，百度智能小程序官方会针对不同刘海屏幕的机型进行适配方便开发者的开发。

但是百度智能小程序只能针对普通版本进行适配如果使用透明框架的开发者，则需要自行适配

左图：刘海iPhone的安全区 = 屏幕 -(系统状态栏(1) + 框架控制功能区(2)+ 底部指示区(3))

一般刘海iPhone刘海高度为44pt，我们可以参考这个数值

右图：刘海安卓手机的安全区 = 屏幕 -(系统状态栏(1) + 框架控制功能区(2))

一般刘海安卓手机的刘海高度=系统状态栏高度，我们可以参考这个数值

正确考虑状态栏高度，页面的元素以及功能都在安全区内展现

页面元素和功能超出安全区，导致元素重叠用户看着会感觉少了一部分或者很别扭。

左图：刘海iPhone的安全區 = 屏幕 -(顶部刘海区(1) + 框架控制功能区(2)+ 底部指示区(3))

右图：刘海安卓手机的安全区 = 屏幕 -(顶部刘海区(1) + 框架控制功能区(2))

左图：刘海iPhone的安全区 = 屏幕 -(顶部劉海区(1) + 框架控制功能区(2)+ 底部指示区(3))

右图：刘海安卓手机的安全区 = 屏幕 -(顶部刘海区(1) + 框架控制功能区(2))

刘海iPhone的底部横条默认透明高度为34pt，如开發者使用刘海iPhone百度智能小程序的底部标签栏需要格外关注底部横条的配置，只有自动适配后底部标签栏才会出现背景颜色

左图：默认底部横条透明

右图：使用底部标签栏，自动适配底部横条

开发者可以自行按照喜欢的样式来调配和使用

当开发者未使用底部标签栏组件，而是选择自主开发千万要注意这个区域属于不可布局但是可操作的元素。

底部横条进行了正确配置颜色与底部栏一致，页面十分美觀

底部横条未进行正确配置，用户会感觉很别扭

本篇是系列文章，请点击查看接下来的文章：

阅读本文的人还可以阅读：

做H5开发需要去适配刘海微信开發工具里试了一下没有出现底部遮挡问题，现在安卓也很多刘海屏请问小程序是怎样去适配不同刘海屏的？

拿iPhone X举例刘海（顶部导航条）不需要适配，小程序的导航条默认会进行适配用户可通过传递)> 引用`code`- 列表。
同时被你 @ 的用户也会收到通知

我要回帖

更多关于 微信小程序换刘海 的文章

 

随机推荐