You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
4.5 KiB
57 lines
4.5 KiB
// 定义一个全局变量 `cache`，用于缓存获取到的安全区域相关信息，初始值设置为 `null`。
|
|
let cache = null;
|
|
|
|
// 定义 `getSafeArea` 函数，该函数用于获取设备的安全区域相关信息，返回一个 `Promise` 对象，方便进行异步操作的处理。
|
|
function getSafeArea() {
|
|
return new Promise((resolve, reject) => {
|
|
// 首先检查 `cache` 是否已经有值（不为 `null`），如果已经缓存了安全区域信息，则直接通过 `resolve` 将缓存的信息传递出去，避免重复获取。
|
|
if (cache!= null) {
|
|
resolve(cache);
|
|
}
|
|
// 如果 `cache` 为 `null`，说明还没有获取过安全区域信息，需要调用微信小程序的 `wx.getSystemInfo` 方法来获取系统相关信息。
|
|
else {
|
|
wx.getSystemInfo({
|
|
// `success` 回调函数会在成功获取到系统信息后被调用，它接收一个包含系统信息的对象作为参数，解构出其中需要的属性（`model` 表示设备型号，`screenHeight` 表示屏幕高度，`statusBarHeight` 表示状态栏高度）。
|
|
success: ({ model, screenHeight, statusBarHeight }) => {
|
|
// 通过正则表达式判断设备型号是否匹配 `iphone x`（不区分大小写），用于识别是否为 iPhone X 系列设备，将结果赋值给 `iphoneX` 变量。
|
|
const iphoneX = /iphone x/i.test(model);
|
|
// 判断设备型号是否匹配 `iPhone11`（不区分大小写）并且屏幕高度是否为 `812`，用于识别特定的 iPhone 11 相关机型，将结果赋值给 `iphoneNew` 变量。
|
|
const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
|
|
// 将安全区域相关信息缓存到 `cache` 变量中，包括是否为 iPhone X 系列或特定 iPhone 11 机型（通过 `iphoneX` 或 `iphoneNew` 判断）以及状态栏高度信息。
|
|
cache = {
|
|
isIPhoneX: iphoneX || iphoneNew,
|
|
statusBarHeight
|
|
};
|
|
// 通过 `resolve` 将缓存好的安全区域信息传递出去，用于后续的处理。
|
|
resolve(cache);
|
|
},
|
|
// 如果获取系统信息失败，调用 `reject`，将错误信息传递出去，由调用 `getSafeArea` 函数的地方进行相应的错误处理。
|
|
fail: reject
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 使用 `export` 关键字导出一个名为 `safeArea` 的函数，该函数返回一个通过 `Behavior` 创建的行为对象，用于在微信小程序组件中实现与安全区域相关的功能和属性配置。
|
|
export const safeArea = ({ safeAreaInsetBottom = true, safeAreaInsetTop = false } = {}) => Behavior({
|
|
// `properties` 属性用于定义行为对象关联的组件可接收的外部属性，这里定义了两个与安全区域插入相关的布尔类型属性。
|
|
properties: {
|
|
// `safeAreaInsetTop` 属性，其类型为布尔类型（`Boolean`），默认值由传入 `safeArea` 函数的参数 `safeAreaInsetTop` 决定（如果未传则默认为 `false`），用于控制是否在顶部插入安全区域相关的样式或布局调整等。
|
|
safeAreaInsetTop: {
|
|
type: Boolean,
|
|
value: safeAreaInsetTop
|
|
},
|
|
// `safeAreaInsetBottom` 属性，同样是布尔类型（`Boolean`），默认值由传入 `safeArea` 函数的参数 `safeAreaInsetBottom` 决定（如果未传则默认为 `true`），用于控制是否在底部插入安全区域相关的样式或布局调整等。
|
|
safeAreaInsetBottom: {
|
|
type: Boolean,
|
|
value: safeAreaInsetBottom
|
|
}
|
|
},
|
|
// `created` 生命周期钩子函数，在组件被创建时会被调用，这里用于获取安全区域信息并设置到组件的 `data` 中，以便组件后续使用这些信息进行相应的布局或样式处理。
|
|
created() {
|
|
// 调用 `getSafeArea` 函数获取安全区域信息，当获取成功后（`Promise` 状态变为 `resolved`），解构出 `isIPhoneX`（是否为 iPhone X 系列等相关机型）和 `statusBarHeight`（状态栏高度）信息，并通过 `this.set`（这里假设是微信小程序组件中用于设置数据的方法）将这些信息设置到组件的数据中。
|
|
getSafeArea().then(({ isIPhoneX, statusBarHeight }) => {
|
|
this.set({ isIPhoneX, statusBarHeight });
|
|
});
|
|
}
|
|
}); |