fix(app): wxs

packages/uni-app-plus/src/view/framework/dom/components/index.ts

 import { ComponentDescriptorVm } from '@dcloudio/uni-core'
-import { ComponentPublicInstance, defineComponent, h } from 'vue'
+import {
+  ComponentInternalInstance,
+  ComponentPublicInstance,
+  defineComponent,
+  h,
+} from 'vue'
 import { UniComment } from '../elements/UniComment'
 import { UniTextElement } from '../elements/UniTextElement'
 import { UniTextNode } from '../elements/UniTextNode'
@@ -45,15 +50,16 @@ import { UniVideo } from './UniVideo'
 import { UniWebView } from './UniWebView'
 
 export interface UniCustomElement extends HTMLElement {
-  __id: number
+  __id?: number
   __ownerId?: number
-  __vueParentComponent: ComponentPublicInstance
+  __vueParentComponent: ComponentInternalInstance
   __listeners: Record<string, (evt: Event) => void>
   // wxs
-  __wxsVm: ComponentDescriptorVm
+  __wxsVm?: ComponentDescriptorVm
   __wxsStyle: Record<string, string | number>
   __wxsAddClass: string[]
   __wxsRemoveClass: string[]
+  __wxsState: Record<string, any>
   __wxsClassChanged: boolean
   __wxsStyleChanged: boolean
   // renderjs

packages/uni-app-plus/src/view/framework/dom/wxs.ts

@@ -6,7 +6,7 @@ import {
   WXS_MODULES,
 } from '@dcloudio/uni-shared'
 import {
-  ComponentDescriptorVm,
+  createComponentDescriptorVm,
   getComponentDescriptor,
 } from '@dcloudio/uni-core'
 import { UniCustomElement } from './components'
@@ -171,51 +171,3 @@ function wrapperWxsEvent(event: Record<string, any>, el: UniCustomElement) {
   })
   return event
 }
-
-function createComponentDescriptorVm(el: UniCustomElement) {
-  return (
-    el.__wxsVm ||
-    (el.__wxsVm = {
-      ownerId: el.__ownerId,
-      $el: el,
-      $emit() {},
-      $forceUpdate() {
-        const {
-          __wxsStyle,
-          __wxsAddClass,
-          __wxsRemoveClass,
-          __wxsStyleChanged,
-          __wxsClassChanged,
-        } = el
-        let updateClass: () => void
-        let updateStyle: () => void
-        if (__wxsStyleChanged) {
-          el.__wxsStyleChanged = false
-          __wxsStyle &&
-            (updateStyle = () => {
-              Object.keys(__wxsStyle).forEach((n) => {
-                el.style[n as any] = __wxsStyle[n] as string
-              })
-            })
-        }
-        if (__wxsClassChanged) {
-          el.__wxsClassChanged = false
-          updateClass = () => {
-            __wxsRemoveClass &&
-              __wxsRemoveClass.forEach((clazz) => {
-                el.classList.remove(clazz)
-              })
-            __wxsAddClass &&
-              __wxsAddClass.forEach((clazz) => {
-                el.classList.add(clazz)
-              })
-          }
-        }
-        requestAnimationFrame(() => {
-          updateClass && updateClass()
-          updateStyle && updateStyle()
-        })
-      },
-    } as unknown as ComponentDescriptorVm)
-  )
-}

packages/uni-core/src/view/index.ts

@@ -16,4 +16,5 @@ export {
   ComponentDescriptor,
   ComponentDescriptorVm,
   getComponentDescriptor,
+  createComponentDescriptorVm,
 } from './plugin/componentWxs'

packages/uni-core/src/view/plugin/componentWxs.ts

@@ -13,14 +13,16 @@ import {
 
 export interface WxsElement extends HTMLElement {
   __id?: number
+  __ownerId?: number
+  __wxsVm?: ComponentDescriptorVm
   __wxsStyle: Record<string, string | number>
   __wxsAddClass: string[]
   __wxsRemoveClass: string[]
   __wxsState: Record<string, any>
   __wxsClassChanged: boolean
   __wxsStyleChanged: boolean
-  __vueParentComponent: ComponentInternalInstance // vue3 引擎内部，需要开放该属性
-  __wxsComponentDescriptor: ComponentDescriptor
+  __vueParentComponent?: ComponentInternalInstance // vue3 引擎内部，需要开放该属性
+  __wxsComponentDescriptor?: ComponentDescriptor
 }
 
 export interface ComponentDescriptorVm {
@@ -53,12 +55,11 @@ export class ComponentDescriptor {
     if (!this.$el || !selector) {
       return
     }
-    const el = this.$el.querySelector(selector) as WxsElement
-    return (
-      el &&
-      el.__vueParentComponent &&
-      createComponentDescriptor(el.__vueParentComponent.proxy!, false)
-    )
+    const wxsVm = getWxsVm(this.$el.querySelector(selector) as WxsElement)
+    if (!wxsVm) {
+      return
+    }
+    return createComponentDescriptor(wxsVm, false)
   }
 
   selectAllComponents(selector: string) {
@@ -68,11 +69,10 @@ export class ComponentDescriptor {
     const descriptors = []
     const els = this.$el.querySelectorAll(selector)
     for (let i = 0; i < els.length; i++) {
-      const el = els[i] as WxsElement
-      el.__vueParentComponent &&
-        descriptors.push(
-          createComponentDescriptor(el.__vueParentComponent.proxy!, false)
-        )
+      const wxsVm = getWxsVm(els[i] as WxsElement)
+      if (wxsVm) {
+        descriptors.push(createComponentDescriptor(wxsVm, false))
+      }
     }
     return descriptors
   }
@@ -277,3 +277,64 @@ export function wrapperH5WxsEvent(
     }
   }
 }
+
+function getWxsVm(el: WxsElement) {
+  if (!el) {
+    return
+  }
+  if (__PLATFORM__ === 'app') {
+    return createComponentDescriptorVm(el)
+  } else if (__PLATFORM__ === 'h5') {
+    return el.__vueParentComponent && el.__vueParentComponent.proxy!
+  }
+}
+
+export function createComponentDescriptorVm(
+  el: WxsElement
+): ComponentDescriptorVm {
+  return (
+    el.__wxsVm ||
+    (el.__wxsVm = {
+      ownerId: el.__ownerId,
+      $el: el,
+      $emit() {},
+      $forceUpdate() {
+        const {
+          __wxsStyle,
+          __wxsAddClass,
+          __wxsRemoveClass,
+          __wxsStyleChanged,
+          __wxsClassChanged,
+        } = el
+        let updateClass: () => void
+        let updateStyle: () => void
+        if (__wxsStyleChanged) {
+          el.__wxsStyleChanged = false
+          __wxsStyle &&
+            (updateStyle = () => {
+              Object.keys(__wxsStyle).forEach((n) => {
+                el.style[n as any] = __wxsStyle[n] as string
+              })
+            })
+        }
+        if (__wxsClassChanged) {
+          el.__wxsClassChanged = false
+          updateClass = () => {
+            __wxsRemoveClass &&
+              __wxsRemoveClass.forEach((clazz) => {
+                el.classList.remove(clazz)
+              })
+            __wxsAddClass &&
+              __wxsAddClass.forEach((clazz) => {
+                el.classList.add(clazz)
+              })
+          }
+        }
+        requestAnimationFrame(() => {
+          updateClass && updateClass()
+          updateStyle && updateStyle()
+        })
+      },
+    } as unknown as ComponentDescriptorVm)
+  )
+}

packages/uni-h5/dist/uni-h5.es.js

@@ -884,8 +884,11 @@ class ComponentDescriptor {
     if (!this.$el || !selector) {
       return;
     }
-    const el = this.$el.querySelector(selector);
-    return el && el.__vueParentComponent && createComponentDescriptor(el.__vueParentComponent.proxy, false);
+    const wxsVm = getWxsVm(this.$el.querySelector(selector));
+    if (!wxsVm) {
+      return;
+    }
+    return createComponentDescriptor(wxsVm, false);
   }
   selectAllComponents(selector) {
     if (!this.$el || !selector) {
@@ -894,8 +897,10 @@ class ComponentDescriptor {
     const descriptors = [];
     const els = this.$el.querySelectorAll(selector);
     for (let i = 0; i < els.length; i++) {
-      const el = els[i];
-      el.__vueParentComponent && descriptors.push(createComponentDescriptor(el.__vueParentComponent.proxy, false));
+      const wxsVm = getWxsVm(els[i]);
+      if (wxsVm) {
+        descriptors.push(createComponentDescriptor(wxsVm, false));
+      }
     }
     return descriptors;
   }
@@ -1064,6 +1069,14 @@ function wrapperH5WxsEvent(event, eventValue, instance2) {
     }
   }
 }
+function getWxsVm(el) {
+  if (!el) {
+    return;
+  }
+  {
+    return el.__vueParentComponent && el.__vueParentComponent.proxy;
+  }
+}
 const isClickEvent = (val) => val.type === "click";
 const isMouseEvent = (val) => val.type.indexOf("mouse") === 0;
 function $nne(evt, eventValue, instance2) {
@@ -11488,7 +11501,6 @@ function useScrollViewState(props2) {
   };
 }
 function useScrollViewLoader(props2, state2, scrollTopNumber, scrollLeftNumber, trigger, rootRef, main, content, emit2) {
-  let _lastScrollTime = 0;
   let beforeRefreshing = false;
   let toUpperNumber = 0;
   let triggerAbort = false;
@@ -11532,48 +11544,45 @@ function useScrollViewLoader(props2, state2, scrollTopNumber, scrollLeftNumber,
     _content.style.webkitTransform = transform;
   }
   function _handleScroll($event) {
-    if ($event.timeStamp - _lastScrollTime > 20) {
-      _lastScrollTime = $event.timeStamp;
-      const target = $event.target;
-      trigger("scroll", $event, {
-        scrollLeft: target.scrollLeft,
-        scrollTop: target.scrollTop,
-        scrollHeight: target.scrollHeight,
-        scrollWidth: target.scrollWidth,
-        deltaX: state2.lastScrollLeft - target.scrollLeft,
-        deltaY: state2.lastScrollTop - target.scrollTop
-      });
-      if (props2.scrollY) {
-        if (target.scrollTop <= upperThresholdNumber.value && state2.lastScrollTop - target.scrollTop > 0 && $event.timeStamp - state2.lastScrollToUpperTime > 200) {
-          trigger("scrolltoupper", $event, {
-            direction: "top"
-          });
-          state2.lastScrollToUpperTime = $event.timeStamp;
-        }
-        if (target.scrollTop + target.offsetHeight + lowerThresholdNumber.value >= target.scrollHeight && state2.lastScrollTop - target.scrollTop < 0 && $event.timeStamp - state2.lastScrollToLowerTime > 200) {
-          trigger("scrolltolower", $event, {
-            direction: "bottom"
-          });
-          state2.lastScrollToLowerTime = $event.timeStamp;
-        }
+    const target = $event.target;
+    trigger("scroll", $event, {
+      scrollLeft: target.scrollLeft,
+      scrollTop: target.scrollTop,
+      scrollHeight: target.scrollHeight,
+      scrollWidth: target.scrollWidth,
+      deltaX: state2.lastScrollLeft - target.scrollLeft,
+      deltaY: state2.lastScrollTop - target.scrollTop
+    });
+    if (props2.scrollY) {
+      if (target.scrollTop <= upperThresholdNumber.value && state2.lastScrollTop - target.scrollTop > 0 && $event.timeStamp - state2.lastScrollToUpperTime > 200) {
+        trigger("scrolltoupper", $event, {
+          direction: "top"
+        });
+        state2.lastScrollToUpperTime = $event.timeStamp;
       }
-      if (props2.scrollX) {
-        if (target.scrollLeft <= upperThresholdNumber.value && state2.lastScrollLeft - target.scrollLeft > 0 && $event.timeStamp - state2.lastScrollToUpperTime > 200) {
-          trigger("scrolltoupper", $event, {
-            direction: "left"
-          });
-          state2.lastScrollToUpperTime = $event.timeStamp;
-        }
-        if (target.scrollLeft + target.offsetWidth + lowerThresholdNumber.value >= target.scrollWidth && state2.lastScrollLeft - target.scrollLeft < 0 && $event.timeStamp - state2.lastScrollToLowerTime > 200) {
-          trigger("scrolltolower", $event, {
-            direction: "right"
-          });
-          state2.lastScrollToLowerTime = $event.timeStamp;
-        }
+      if (target.scrollTop + target.offsetHeight + lowerThresholdNumber.value >= target.scrollHeight && state2.lastScrollTop - target.scrollTop < 0 && $event.timeStamp - state2.lastScrollToLowerTime > 200) {
+        trigger("scrolltolower", $event, {
+          direction: "bottom"
+        });
+        state2.lastScrollToLowerTime = $event.timeStamp;
+      }
+    }
+    if (props2.scrollX) {
+      if (target.scrollLeft <= upperThresholdNumber.value && state2.lastScrollLeft - target.scrollLeft > 0 && $event.timeStamp - state2.lastScrollToUpperTime > 200) {
+        trigger("scrolltoupper", $event, {
+          direction: "left"
+        });
+        state2.lastScrollToUpperTime = $event.timeStamp;
+      }
+      if (target.scrollLeft + target.offsetWidth + lowerThresholdNumber.value >= target.scrollWidth && state2.lastScrollLeft - target.scrollLeft < 0 && $event.timeStamp - state2.lastScrollToLowerTime > 200) {
+        trigger("scrolltolower", $event, {
+          direction: "right"
+        });
+        state2.lastScrollToLowerTime = $event.timeStamp;
       }
-      state2.lastScrollTop = target.scrollTop;
-      state2.lastScrollLeft = target.scrollLeft;
     }
+    state2.lastScrollTop = target.scrollTop;
+    state2.lastScrollLeft = target.scrollLeft;
   }
   function _scrollTopChanged(val) {
     if (props2.scrollY) {