feat(x): iOS 同步调整 createSelectorQuery 补充 node/filed 相关方案 #3263

packages/uni-app-plus/__tests__/x/api/dom/createSelectorQuery.spec.ts

+import { createSelectorQuery } from '../../../../src/x/api/dom/createSelectorQuery'
+
+// import { getCurrentPage } from '@dcloudio/uni-core'
+
+jest.mock('@dcloudio/uni-core', () => {
+  return {
+    getCurrentPage: jest.fn(),
+  }
+})
+
+describe('createSelectorQuery', () => {
+  it('定义包含的方法', () => {
+    const query = createSelectorQuery()
+    expect(typeof query.in).toBe('function')
+    expect(typeof query.select).toBe('function')
+    expect(typeof query.selectAll).toBe('function')
+    expect(typeof query.selectViewport).toBe('function')
+    expect(typeof query.exec).toBe('function')
+  })
+  it('NodesRef 定义的方法', () => {
+    const query = createSelectorQuery()
+    const ref = query.select('.test')
+    expect(typeof ref.boundingClientRect).toBe('function')
+    expect(typeof ref.scrollOffset).toBe('function')
+    expect(typeof ref.fields).toBe('function')
+    expect(typeof ref.context).toBe('function')
+    expect(typeof ref.node).toBe('function')
+  })
+})

packages/uni-app-plus/src/x/api/dom/createSelectorQuery.ts

@@ -2,14 +2,20 @@ import type { SelectorQueryRequest } from '@dcloudio/uni-api'
 import type {
   CreateSelectorQuery,
   NodeField,
-  NodeInfo,
   NodesRef,
   SelectorQuery,
   SelectorQueryNodeInfoCallback,
+  NodeInfo as _NodeInfo,
 } from '@dcloudio/uni-app-x/types/uni'
 import { getCurrentPage } from '@dcloudio/uni-core'
 import type { ComponentPublicInstance, VNode } from 'vue'
 
+type NodeInfo = Partial<
+  _NodeInfo & {
+    node: UniElement
+  }
+>
+
 function isVueComponent(comp: any) {
   const has$instance = typeof comp.$ === 'object'
   const has$el = typeof comp.$el === 'object'
@@ -23,6 +29,7 @@ class NodesRefImpl implements NodesRef {
   private _selectorQuery: SelectorQueryImpl
   private _component: ComponentPublicInstance | null
   private _selector: string
+  /** single=true querySelector */
   private _single: boolean
   constructor(
     selectorQuery: SelectorQueryImpl,
@@ -61,7 +68,7 @@ class NodesRefImpl implements NodesRef {
 
   fields(
     fields: NodeField,
-    callback: SelectorQueryNodeInfoCallback
+    callback: SelectorQueryNodeInfoCallback | null
   ): SelectorQuery {
     this._selectorQuery._push(
       this._selector,
@@ -101,7 +108,19 @@ class NodesRefImpl implements NodesRef {
     return this._selectorQuery
   }
 
+  /**
+   * fields({node:true})
+   */
   node(_callback: (result: any) => void): SelectorQuery {
+    this._selectorQuery._push(
+      this._selector,
+      this._component,
+      this._single,
+      {
+        node: true,
+      } as NodeField,
+      _callback
+    )
     return this._selectorQuery
   }
 }
@@ -174,24 +193,43 @@ class SelectorQueryImpl implements SelectorQuery {
   }
 }
 
+/**
+ * QuerySelectorHelper
+ */
 class QuerySelectorHelper {
   _element: UniElement
   _commentStartVNode: VNode | undefined
+  _fields: NodeField
 
-  constructor(element: UniElement, vnode: VNode | undefined) {
+  constructor(
+    element: UniElement,
+    vnode: VNode | undefined,
+    fields: NodeField
+  ) {
     this._element = element
     this._commentStartVNode = vnode
+    this._fields = fields
   }
 
+  /**
+   * entry
+   */
   static queryElement(
     element: UniElement,
     selector: string,
     all: boolean,
-    vnode: VNode | undefined
+    vnode: VNode | undefined,
+    fields: NodeField
   ): any | null {
-    return new QuerySelectorHelper(element, vnode).query(selector, all)
+    return new QuerySelectorHelper(element, vnode, fields).query(selector, all)
   }
 
+  /**
+   * 执行查询
+   * @param selector 选择器
+   * @param all 是否查询所有 selectAll
+   * @returns
+   */
   query(selector: string, all: boolean): any | null {
     if (this._element.nodeName == '#comment') {
       return this.queryFragment(this._element, selector, all)
@@ -243,6 +281,7 @@ class QuerySelectorHelper {
     if (element2 == null) {
       element2 = element.querySelector(selector)
     }
+    // 查询到元素，查询 nodeInfo
     if (element2 != null) {
       return this.getNodeInfo(element2)
     }
@@ -285,7 +324,25 @@ class QuerySelectorHelper {
     return null
   }
 
+  /**
+   * 查询元素信息
+   * @param element
+   * @returns
+   */
   getNodeInfo(element: UniElement): NodeInfo {
+    if (this._fields.node == true) {
+      const nodeInfo: NodeInfo = {
+        node: element,
+      }
+
+      if (this._fields.size == true) {
+        const rect = element.getBoundingClientRect()
+        nodeInfo.width = rect.width
+        nodeInfo.height = rect.height
+      }
+      return nodeInfo
+    }
+
     const rect = element.getBoundingClientRect()
     const nodeInfo = {
       id: element.getAttribute('id')?.toString(),
@@ -296,11 +353,17 @@ class QuerySelectorHelper {
       bottom: rect.bottom,
       width: rect.width,
       height: rect.height,
-    } as NodeInfo
+    }
     return nodeInfo
   }
 }
 
+/**
+ * requestComponentInfo
+ * @param vueComponent
+ * @param queue
+ * @param callback
+ */
 function requestComponentInfo(
   vueComponent: ComponentPublicInstance | null,
   queue: Array<SelectorQueryRequest>,
@@ -309,12 +372,14 @@ function requestComponentInfo(
   const result: Array<any> = []
   const el = vueComponent?.$el
   if (el != null) {
+    // 执行待查询 queue
     queue.forEach((item: SelectorQueryRequest) => {
       const queryResult = QuerySelectorHelper.queryElement(
         el,
         item.selector,
         !item.single,
-        vueComponent?.$.subTree
+        vueComponent?.$.subTree,
+        item.fields
       )
       if (queryResult != null) {
         result.push(queryResult)
@@ -324,6 +389,9 @@ function requestComponentInfo(
   callback(result)
 }
 
+/**
+ * createSelectorQuery
+ */
 export const createSelectorQuery: CreateSelectorQuery =
   function (): SelectorQuery {
     const instance = getCurrentPage() as ComponentPublicInstance