uniApp -- 学习笔记（vue3+ts）_uniapp vue3 ts

一.关于界面节点信息 6月15

uniApp官网介绍

（一） 个人理解是官网返回一个 SelectorQuery 对象实例。 并且可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。但是关于这个需要到查询信息，只有打印出来

，
在onReady 调用 let selectorQuery: UniNamespace.SelectorQuery = uni.createSelectorQuery();返回到上图结果，但是我还是不理解这是什么。如果按照官网来说返回了一个SelectorQuery 的查询对象选择器出来。

不过这个有几点需要注意–使用uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用，也就是dom树完成之后。

---

（二）那么在拿到这个SelectorQuery之后他给了一些方法和示例：

   interface SelectorQuery {
        /**
         * 将选择器的选取范围更改为自定义组件component内默认本页
         */
        in(component: any): SelectorQuery;
        /**
         * 在当前页面下选择第一个匹配选择器selector的节点
         */
        select(selector: string): NodesRef;
        /**
         * 在当前页面下选择匹配选择器selector的所有节点
         */
        selectAll(selector: string): NodesRef;
        /**
         * 选择显示区域
         */
        selectViewport(): NodesRef;
        /**
         * 执行所有的请求
         */
        exec(callback?: (result: any) => void): NodesRef;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这四个方法并给予了一些注释

1. 将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点支付宝小程序不支持in(component)，使用无效果。并给予了示例

const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
}).exec();
1
2
3
4
5

2. 在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息支持下列语法。

ID选择器：#the-id
class选择器（可以连续指定多个）：.a-class.another-class
子元素选择器：.the-parent > .the-child
后代选择器：.the-ancestor .the-descendant
跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
多选择器的并集：#a-node, .some-other-nodes

3. 在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
4. 选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个 NodesRef 对象实例。
5. 执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

这是官网给的说法，听起来云里雾里的，但是可以拿到几个关键信息。拿到选择器，获取一定程度组件的，或者是整个页面的部分或者区域的选择器，提供了上述的几个方法。

（三）我需要的是了解这几个方法的作用，这一个栏目，是uni选择器的了解，和构想一下使用场景的需求，其实从文档中可以得到的信息这几个方法的重载，选择一个节点，选择一个类的所有节点选择某个区域，调用exec 方法进行请求，那么了解了他的处理方式后面就好处理了，起一个测试

可以拿到对应的节点坐标信息 left":0,"right":8.40625,"top":119,"bottom":139,"width":8.40625,"height":20

其实主要就是拿到这个数据，那么后面就比较理解了，比如selectAll 就是获取只要class 或者 id 所有的节点信息，数据为数组的节点位置信息。那么可以对这个数据做一些处理。

创建一个uniapp基于vite+vue3+ts项目

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
1

注意

Vue3/Vite版要求 node 版本 18+、20+

如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）

• HBuilderX Mac 版本: 菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
• HBuilderX Windows 版本: 菜单栏 工具->设置->运行配置->node路径
  

由于我开发一直都是在idea上面，所以一般在HBuilderX打开用来收集插件。我会用idea进行开发，所以就没有配置
如此便建立好了一个vite+vue3的项目，插件的话，跟上面后台的配置是一样的。包括路由接口等，整个架子没有区别，其他的开始开发