微信小程序 获取到了该手机得底部安全距离得高度 怎么全局给每个page赋值呢 实现全局配置手机底部安全距离？

Question

当前思路：app.js里已经获取到高度，通过js声明wxss变量，但无效

Answer 1

微信小程序本身不支持全局动态为 page 添加样式，如果要实现的话可以编写一个 app-container 组件作为每个页面的根组件，然后将安全区域的高度以 css 变量的形式添加给 app-container 组件即可，示例如下：

Component({
  options: {
    pureDataPattern: /^_/,
    addGlobalClass: true,
    styleIsolation: "shared"
  },
  data: {
    safeareaInsetBottom: 0
  },
  lifetimes: {
    attached() {
      // 此处省略获取底部安全区域高度的方法...
      this.setData({
        safeareaInsetBottom: xxx
      });
    }
  }
});

<view class="app-container" style="{{ '--safearea-inset-bottom': safeareaInsetBottom + 'px' }}">
  <slot></slot>
<view>

.app-container {
  padding-bottom: var(--safearea-inset-bottom);
}

另外，如果只需要兼容微信小程序并且不需要在 javascript 中使用安全区域计算的话，可以直接使用 env(safe-area-inset-bottom)，而无需再使用 javascript 获取，示例如下：

page {
  padding-bottom: env(safe-area-inset-bottom);
}

也可以使用 calc()：

page {
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}