uniapp学习D21.屏幕安全区域 JS处理屏幕安全区域 CSS处理屏幕安全区域 2.条件编译（兼容处理）作用；既要

1.屏幕安全区域

JS处理屏幕安全区域

CSS处理屏幕安全区域

2.条件编译（兼容处理）

作用；既要兼容网页，又要处理API

用于判断运行在哪个端

2.1用法一：如果是（），就运行

// 如果代码运行在APP,则输出'运行在APP'
 // #ifdef APP
 console.log('运行在APP')
 // #endif

2.2 用法二：如果不是（），就执行代码

// 如果代码不是运行在微信小程序,则不运行这段代码
    // #ifndef MP-WEIXIN
    console.log('不是运行在微信小程序0')
    // #endif

2.3 用法三：运行在（）或者（）

// 运行在H5或者APP
    // #ifdef H5 || APP
    console.log('不是运行在微信小程序0')
    // #endif

2.4 使用条件样式实现在不同端实现不同效果

2.4.1（写在css样式中）

这样就实现了只在H5端添加padding值

2.4.2（写在html中）

3.节点信息

小程序没有DOM，但是要写节点交互，节点信息就应运而生了 查询dom--》获取宽高尺寸--》获取完后才能对应操作目标值

3.1 创建查询器

重点：调用一个小程序的API（uni.createSelectorQuery()）

注意！！！DOM需要渲染，所以如果想要使用小程序的查询器获取DOM的数据，则必须要写生命周期

<template>
  <view class="container">
    <div class="box"></div>
  </view>
</template>

<script setup>
  // 注意必须使用生命周期才能拿到结果!!!否则报错
  import { onMounted } from 'vue'

  onMounted(() => {
    // 1.创建查询器
    const querySelector = uni.createSelectorQuery()
    // 2.查询元素
    querySelector.select('.box').boundingClientRect((res) = {
      console.log(res)
    })
    // 3.执行查询
    querySelector.exec()
  })
</script>

<style lang="scss">
  .box {
    width: 300rpx;
    height: 200rpx;
    background-color: pink;
  }
</style>

3.2.1 查询器中的方法

3.2 节点对象

3.3 节点信息

节点信息对象中包含了若干的信息，根据需要调用不同的方法进行获取：
1.boundingClientRect：获取节点的宽高以及位置，长度单位是px；
2.scrolloffset:获取节点滚动的位置，但是要注意只支持‘scroll-view’组件或者视图（页面）(viewport)

4. 自定义组件

4.1 组件规范easycom

**规范：文件夹名为components，组件名和组件.vue名必须要一致 **

测试：

4.2 custom-tabs布局模板

4.3实战与心得：（实现点击组件，被点击的text高亮）

子组件：

父组件：

解释与总结： 1.父传子的实现：先在组件内定义一个数组，customTabsPropds，（父组件中在custom-tabs给list（注意一定要和子组件一样叫list），再定义feedTabs中的数据。，再传给list，子组件再通过defineProps这个函数来接收父组件传来的值）这里，父传子就已经实现了。
2.active类赋值的实现：内置的ref函数可以自动刷新获取新的值，index是v-for循环自动遍历的，然后我们通过绑定onTabChange这个点击事件，来将值赋值给tabIndex.value，再使用一次index：index是v-for循环自动遍历的，所以如果遍历到的index和tabindex.value值一样，则添加active类

4.4 回顾一下查询器

注意注意注意！！！：
// 组合式API获取组件(或者页面)实例时,使用getCurrentInsrance,相当于选项式API的this // 注意:!!!在自定义组件中使用查询器的时候要用到in方法

onMounted(() => {
    // 1.创建查询器
    // 组合式API获取组件(或者页面)实例时,使用getCurrentInsrance,相当于选项式API的this
    // 注意:!!!在自定义组件中使用查询器的时候要用到in方法
    const querySelector = uni.createSelectorQuery().in(getCurrentInstance());
    // 2.查找元素
    querySelector.selectAll('custom-tabs-bar').boundingClientRect((res)=>{
        console.log(res)
    })
    // 3.执行查找
    querySelector.exec()
});

因为onMounted（）内的数据只能内部调用，所以我们需要定义一个全局变量来在外部接收

uniapp学习D2