uni-app 小程序定位问题
一、问题描述：页面上定位偏移
最近接到一个需求，在小程序首页写一个新手引导。
具体内容就是：整个页面背景黑色半透明蒙层，首页上的某几个按钮需要高亮显示（有一些引导提示语指向按钮）
1. 我的问题
ps: 写之前没想到有兼容问题，太大意了；写完成了自测才发现，emo~
最开始，我是直接新写了一个组件，全屏、背景黑色半透明蒙层；然后把要高亮的按钮写出来，通过定位将这些按钮定位到页面以前的位置上；但是，不管我是用rpx或者%或者vh，后面我又考虑了安全距离的问题。但是在不同机型上还是或多或少又问题
2. 解决方案
2.1 方案一：能用
在首页（父组件）中获取到要高亮元素的文职，并且传递给蒙层组件，然后在蒙层组件中通过定位将元素定位到指定位置。而如果又引导线，提示语等，都基于这个元素去定位、移动即可
缺点：
如果存在引导线，提示语等，基于高亮元素去定位，在不同机型（特别是比较老的机型）上可能以一点的便宜，但不会很大，定位的时候留足空间，不要重叠即可
- 怎么获取元素的位置
javascript
const query = uni.createSelectorQuery().in(this);
query.select(".editIcon").boundingClientRect((data) => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top);
}).exec();2.2 方案二：效果最好，但开发量较大，可视实际情况选用
使用蒙版镂空定位，方法如下：
- 父组件（首页），整体
z-index: 1 - 子组件（蒙层组件），只负责蒙层和逻辑部分，判断当前需要显示那个高亮元素，回传到父组件（
this.$parent.xxx = xxx 或者 其他通信方案），然后再父组件中通过这个变量去判断z-index: 2 - 父组件（首页），父组件中通过这个变量去判断，当时是否高亮显示元素
z-index: 3这样这个元素就显示在蒙层之上了
缺点：
- 元素需要写两套（通过变量判断是否展示蒙层，具体展示什么内容）；一套原本正常的元素，一套蒙层高亮元素
- 如果高亮元素较多的话，会改动较大
注意：z-index的用法
- 只有在元素的position属性值为
relative, absolute, fixed或sticky（即非static）时才会起作用 - 父元素的z-index属性值必须小于子元素的z-index属性值并且也要有position属性值（非static）
二、小程序上的安全距离
safeAreaInsets 安全距离：主要指的是在全面屏手机（如 iPhone X 及以上型号）上，屏幕顶部和底部为了容纳刘海屏或前置摄像头而预留的安全区域。（iPhone X 之前和大部分安卓机是没有的，为0）
1. 怎么获取安全距离
javascript
uni.getSystemInfo({ // 获取窗口信息
success: (res) => {
this.topSafeDistance = res.safeArea.top; // 顶部安全区域距离
}
})safeAreaInsets 的结构
| 参数 | 类型 | 说明 |
|---|---|---|
| left | Number | 安全区域左侧插入位置 |
| right | Number | 安全区域右侧插入位置 |
| top | Number | 安全区顶部插入位置 |
| bottom | Number | 安全区域底部插入位置 |
2. 在那些地方需要注意这个安全距离 => 说白了就是不同机型的适配问题
- 页面（绝对）定位 => 正常写页面不会有什么问题；举例：如果想在页面写好后，想写一个元素定位到已经写好的页面上去重叠，就需要注意这个安全距离了，不然会出现定位偏移问题。
- 自定义顶部导航栏
- 自定义底部导航栏
文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！