微信小程序全面屏的适配

最新推荐文章于 2024-07-18 09:01:59 发布

原创

最新推荐文章于 2024-07-18 09:01:59 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #全面屏适配

本文介绍了如何在微信小程序中实现全面屏适配，通过设置app.json的window属性为custom，自定义导航栏。然而，此方法可能导致低版本客户端显示问题。作者使用wx.getSystemInfoSync()获取设备信息，特别是statusBarHeight，来动态设置页面头部距离，以兼容各种全面屏设备，包括iPhone X。适配过程旨在确保页面在不同全面屏设备上能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
通过配置app.json的window属性的navigationStyle（导航栏样式，仅支持以下值：
default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮），改为custom模式，来自定义navigator。
注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉

注：客户端 6.7.2 版本开始，navigationStyle: custom 对组件无效

然后小程序的页面就会顶到手机屏幕顶部，这样子，老大用粪叉一扫，navigator顶部样式乱掉了。刘海屏，额！

没办法，只能做适配。然后我就用wx.getSystemInfoSync()，获取手机设备的各个参数，在网上有人说可以用model == 'iPhone X’手机型号来适配iphoneX，可是我不光要适配粪叉啊，我要适配所有全面屏!所以我只能翻找其他参数，于是，我找到了

statusBarHeight(状态栏高度)

在这里插入图片描述
对啊，我可以给页面头部搞一个与状态栏同等高度的距离啊。原理都讲完了，代码。

//app.js
App({
  onShow: function (options) {
    var that = this
    var res = wx.getSystemInfoSync()
    console.log(res)
    that.globalData.statusBarHeight = res.statusBarHeight*2