uniapp 微信小程序，底部安全距离适配，针对安卓iPhone不同型号手机

1、全局定义底部安全距离

// 前提：项目中安装了vuex或其他状态管理工具
// 文件位置src/store/index.ts

import { createStore } from 'vuex';

export default createStore<any>({
  state() {
    return {
      safeBottom: '' // 底部安全距离
    };
  },
  mutations: {
    ...
  },
  actions: {
    ...
  },
  getters: {
    safeBottom: (state) => state.safeBottom
  }
});

2、获取设备安全距离

// 文件位置src/utils/utils.ts

import store from '@/store/index';

// 获取设备的基本信息 底部安全距离需要
export const getSysInfo = () => {
  uni.getSystemInfo({
    success(system: any) {
      store.state.safeBottom = system.screenHeight - system.safeArea.bottom;
    }
  });
};

...

3、main.ts中引入函数的调用

import { createSSRApp } from 'vue';
import App from './App.vue';
import store from './store/index'; // 导入store
import { getSysInfo } from '@/utils/utils';

export function createApp() {
  const app = createSSRApp(App);
  app.use(store);
  ...省略其他
  getSysInfo(); //调用函数

  return {
    app
  };
}

4、页面使用

<!-- .vue文件 -->
<template>
  <!-- 可根据是否需要安全距离 设置相应样式 -->
  <view :style="{ height: safeBottom > 0 ? '176rpx' : '152rpx'}">...省略其他</view>
</template>

<script lang="ts" setup>
import store from '@/store/index';
const safeBottom = computed(() => store.state.safeBottom); // 当前设备的安全距离
</script>