wip(app): uni-app-plus

packages/uni-app-plus/dist/tools.umd.js

@@ -75,8 +75,8 @@
     function decodePageCreatedAction([]) {
         return ['pageCreated'];
     }
-    function decodeCreateAction([, nodeId, nodeName]) {
-        return ['create', nodeId, decodeTag(nodeName)];
+    function decodeCreateAction([, nodeId, nodeName, nodeJson]) {
+        return ['create', nodeId, decodeTag(nodeName), nodeJson];
     }
     function decodeInsertAction([, ...action]) {
         return ['insert', ...action];

packages/uni-app-plus/dist/uni-app-service.es.js

@@ -2927,9 +2927,9 @@ var serviceContext = (function (vue) {
   const ShareWithSystemOptions = {
       formatArgs: {
           type(value, params) {
-              if (!TYPE.includes(value))
-                  return '分享参数 type 不正确';
-              return elemInArray(value, TYPE);
+              if (value && !TYPE.includes(value))
+                  return '分享参数 type 不正确。只支持text、image';
+              params.type = elemInArray(value, TYPE);
           },
       },
   };
@@ -4507,6 +4507,7 @@ var serviceContext = (function (vue) {
   }, RequestProtocol, RequestOptions);
 
   const socketTasks = [];
+  const socketsMap = {};
   const globalEvent = {
       open: '',
       close: '',
@@ -4520,6 +4521,7 @@ var serviceContext = (function (vue) {
       try {
           if (!socket) {
               socket = requireNativePlugin('uni-webSocket');
+              bindSocketCallBack(socket);
           }
           socket.WebSocket({
               id: socketId,
@@ -4535,6 +4537,32 @@ var serviceContext = (function (vue) {
       }
       return { socket, socketId, errMsg };
   }
+  function bindSocketCallBack(socket) {
+      socket.onopen((e) => {
+          const curSocket = socketsMap[e.id];
+          if (!curSocket)
+              return;
+          curSocket._socketOnOpen();
+      });
+      socket.onmessage((e) => {
+          const curSocket = socketsMap[e.id];
+          if (!curSocket)
+              return;
+          curSocket._socketOnMessage(e);
+      });
+      socket.onerror((e) => {
+          const curSocket = socketsMap[e.id];
+          if (!curSocket)
+              return;
+          curSocket._socketOnError();
+      });
+      socket.onclose((e) => {
+          const curSocket = socketsMap[e.id];
+          if (!curSocket)
+              return;
+          curSocket._socketOnClose();
+      });
+  }
   class SocketTask {
       constructor(socket, socketId) {
           this.id = socketId;
@@ -4552,41 +4580,43 @@ var serviceContext = (function (vue) {
           this.readyState = this.CLOSED;
           if (!this._socket)
               return;
-          this._socket.onopen(() => {
-              this.readyState = this.OPEN;
-              this.socketStateChange('open');
-          });
-          this._socket.onmessage((e) => {
-              this.socketStateChange('message', {
-                  data: typeof e.data === 'object'
-                      ? base64ToArrayBuffer(e.data.base64)
-                      : e.data,
-              });
-          });
-          this._socket.onerror(() => {
-              this.socketStateChange('error');
-              this.onErrorOrClose();
-          });
-          this._socket.onclose(() => {
-              this.socketStateChange('close');
-              this.onErrorOrClose();
+      }
+      _socketOnOpen() {
+          this.readyState = this.OPEN;
+          this.socketStateChange('open');
+      }
+      _socketOnMessage(e) {
+          this.socketStateChange('message', {
+              data: typeof e.data === 'object'
+                  ? base64ToArrayBuffer(e.data.base64)
+                  : e.data,
           });
       }
+      _socketOnError() {
+          this.socketStateChange('error');
+          this.onErrorOrClose();
+      }
+      _socketOnClose() {
+          this.socketStateChange('close');
+          this.onErrorOrClose();
+      }
       onErrorOrClose() {
           this.readyState = this.CLOSED;
+          delete socketsMap[this.id];
           const index = socketTasks.indexOf(this);
           if (index >= 0) {
               socketTasks.splice(index, 1);
           }
       }
       socketStateChange(name, res = {}) {
+          const data = name === 'message' ? res : {};
           if (this === socketTasks[0] && globalEvent[name]) {
-              UniServiceJSBridge.invokeOnCallback(globalEvent[name], res);
+              UniServiceJSBridge.invokeOnCallback(globalEvent[name], data);
           }
           // WYQ fix: App平台修复websocket onOpen时发送数据报错的Bug
           this._callbacks[name].forEach((callback) => {
               if (typeof callback === 'function') {
-                  callback(name === 'message' ? res : {});
+                  callback(data);
               }
           });
       }
@@ -4651,6 +4681,7 @@ var serviceContext = (function (vue) {
       }
       else {
           socketTasks.push(socketTask);
+          socketsMap[socketId] = socketTask;
       }
       setTimeout(() => {
           resolve();
@@ -5253,10 +5284,10 @@ var serviceContext = (function (vue) {
   }
   const onInitBackgroundAudioManager = /*#__PURE__*/ once(() => {
       eventNames.forEach((item) => {
-          const name = item[0].toUpperCase() + item.substr(1);
-          BackgroundAudioManager.prototype[`on${name}`] = function (callback) {
-              callbacks[item].push(callback);
-          };
+          BackgroundAudioManager.prototype[`on${capitalize(item)}`] =
+              function (callback) {
+                  callbacks[item].push(callback);
+              };
       });
   });
   const props = [
@@ -7282,6 +7313,7 @@ var serviceContext = (function (vue) {
           super(NODE_TYPE_PAGE, '#page', null);
           this._id = 1;
           this._created = false;
+          this._createActionMap = new Map();
           this.updateActions = [];
           this.nodeId = 0;
           this.pageId = pageId;
@@ -7327,13 +7359,29 @@ var serviceContext = (function (vue) {
       genId() {
           return this._id++;
       }
-      push(action) {
+      push(action, extras) {
           if (this.isUnmounted) {
               if ((process.env.NODE_ENV !== 'production')) {
                   console.log(formatLog('PageNode', 'push.prevent', action));
               }
               return;
           }
+          switch (action[0]) {
+              case ACTION_TYPE_CREATE:
+                  this._createActionMap.set(action[1], action);
+                  break;
+              case ACTION_TYPE_INSERT:
+                  const createAction = this._createActionMap.get(action[1]);
+                  if (createAction) {
+                      createAction[3] = extras;
+                  }
+                  else {
+                      if ((process.env.NODE_ENV !== 'production')) {
+                          console.error(formatLog(`Insert`, action, 'not found createAction'));
+                      }
+                  }
+                  break;
+          }
           this.updateActions.push(action);
           if ((process.env.NODE_ENV !== 'production')) {
               console.log(formatLog('PageNode', 'push', action));
@@ -7349,10 +7397,11 @@ var serviceContext = (function (vue) {
           this.send([this.createAction]);
       }
       update() {
-          const { updateActions } = this;
+          const { updateActions, _createActionMap } = this;
           if ((process.env.NODE_ENV !== 'production')) {
-              console.log(formatLog('PageNode', 'update', updateActions.length));
+              console.log(formatLog('PageNode', 'update', updateActions.length, _createActionMap.size));
           }
+          _createActionMap.clear();
           // 首次
           if (!this._created) {
               this._created = true;
@@ -7393,13 +7442,8 @@ var serviceContext = (function (vue) {
       pageNode.push([ACTION_TYPE_CREATE, nodeId, nodeName]);
   }
   function pushInsertAction(pageNode, newChild, parentNodeId, refChildId) {
-      pageNode.push([
-          ACTION_TYPE_INSERT,
-          newChild.nodeId,
-          parentNodeId,
-          refChildId,
-          newChild.toJSON({ attr: true }),
-      ]);
+      const nodeJson = newChild.toJSON({ attr: true });
+      pageNode.push([ACTION_TYPE_INSERT, newChild.nodeId, parentNodeId, refChildId], Object.keys(nodeJson).length ? nodeJson : undefined);
   }
   function pushRemoveAction(pageNode, nodeId) {
       pageNode.push([ACTION_TYPE_REMOVE, nodeId]);
@@ -7812,7 +7856,6 @@ var serviceContext = (function (vue) {
     hideKeyboard: hideKeyboard,
     downloadFile: downloadFile,
     request: request,
-    createSocketTask: createSocketTask,
     connectSocket: connectSocket,
     sendSocketMessage: sendSocketMessage,
     closeSocket: closeSocket,

packages/uni-app-plus/src/service/framework/dom/Page.ts

@@ -6,6 +6,7 @@ import {
   IUniPageNode,
   formatLog,
   UniEvent,
+  UniNodeJSON,
 } from '@dcloudio/uni-shared'
 import {
   PageCreateAction,
@@ -20,6 +21,7 @@ import {
   ACTION_TYPE_SET_TEXT,
   ACTION_TYPE_PAGE_CREATE,
   ACTION_TYPE_PAGE_CREATED,
+  CreateAction,
 } from '../../../PageAction'
 import { VD_SYNC } from '../../../constants'
 
@@ -29,6 +31,7 @@ export default class UniPageNode extends UniNode implements IUniPageNode {
   private _created: boolean = false
   private createAction: PageCreateAction
   private createdAction: PageCreatedAction
+  private _createActionMap = new Map<number, CreateAction>()
   public updateActions: PageAction[] = []
 
   public isUnmounted: boolean
@@ -98,13 +101,28 @@ export default class UniPageNode extends UniNode implements IUniPageNode {
   genId() {
     return this._id++
   }
-  push(action: PageAction) {
+  push(action: PageAction, extras?: unknown) {
     if (this.isUnmounted) {
       if (__DEV__) {
         console.log(formatLog('PageNode', 'push.prevent', action))
       }
       return
     }
+    switch (action[0]) {
+      case ACTION_TYPE_CREATE:
+        this._createActionMap.set(action[1], action)
+        break
+      case ACTION_TYPE_INSERT:
+        const createAction = this._createActionMap.get(action[1])
+        if (createAction) {
+          createAction[3] = extras as UniNodeJSON
+        } else {
+          if (__DEV__) {
+            console.error(formatLog(`Insert`, action, 'not found createAction'))
+          }
+        }
+        break
+    }
     this.updateActions.push(action)
     if (__DEV__) {
       console.log(formatLog('PageNode', 'push', action))
@@ -120,10 +138,18 @@ export default class UniPageNode extends UniNode implements IUniPageNode {
     this.send([this.createAction])
   }
   update() {
-    const { updateActions } = this
+    const { updateActions, _createActionMap } = this
     if (__DEV__) {
-      console.log(formatLog('PageNode', 'update', updateActions.length))
+      console.log(
+        formatLog(
+          'PageNode',
+          'update',
+          updateActions.length,
+          _createActionMap.size
+        )
+      )
     }
+    _createActionMap.clear()
     // 首次
     if (!this._created) {
       this._created = true
@@ -175,13 +201,11 @@ function pushInsertAction(
   parentNodeId: number,
   refChildId: number
 ) {
-  pageNode.push([
-    ACTION_TYPE_INSERT,
-    newChild.nodeId!,
-    parentNodeId,
-    refChildId,
-    newChild.toJSON({ attr: true }),
-  ])
+  const nodeJson = newChild.toJSON({ attr: true })
+  pageNode.push(
+    [ACTION_TYPE_INSERT, newChild.nodeId!, parentNodeId, refChildId],
+    Object.keys(nodeJson).length ? nodeJson : undefined
+  )
 }
 
 function pushRemoveAction(pageNode: UniPageNode, nodeId: number) {

packages/uni-app-plus/src/service/framework/dom/decodeActions.ts

@@ -27,8 +27,8 @@ function decodePageCreatedAction([]: PageCreatedAction) {
   return ['pageCreated']
 }
 
-function decodeCreateAction([, nodeId, nodeName]: CreateAction) {
-  return ['create', nodeId, decodeTag(nodeName)]
+function decodeCreateAction([, nodeId, nodeName, nodeJson]: CreateAction) {
+  return ['create', nodeId, decodeTag(nodeName), nodeJson]
 }
 
 function decodeInsertAction([, ...action]: InsertAction) {

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

+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import Ad from '../../../components/ad'
 
 import { UniComponent } from './UniComponent'
 
 export class UniAd extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-ad', Ad)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-ad', Ad, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/audio.css'
 import { Audio } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniAudio extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-audio', Audio)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-audio', Audio, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/button.css'
 import { Button } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniButton extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-button', Button)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-button', Button, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/canvas.css'
 import { Canvas } from '@dcloudio/uni-components'
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniCanvas extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-canvas', Canvas, 'canvas > div')
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-canvas', Canvas, nodeJson, 'canvas > div')
   }
 }

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

 import '@dcloudio/uni-components/style/checkbox.css'
 import { Checkbox } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniCheckbox extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-checkbox', Checkbox, '.uni-checkbox-wrapper')
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-checkbox', Checkbox, nodeJson, '.uni-checkbox-wrapper')
   }
 }

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

 import '@dcloudio/uni-components/style/checkbox-group.css'
 import { CheckboxGroup } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniCheckboxGroup extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-checkbox-group', CheckboxGroup)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-checkbox-group', CheckboxGroup, nodeJson)
   }
 }

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

@@ -2,7 +2,7 @@ import { hasOwn } from '@vue/shared'
 import { Component, createApp, reactive } from 'vue'
 import {
   decodeAttr,
-  formatLog,
+  // formatLog,
   parseEventName,
   UniNodeJSON,
 } from '@dcloudio/uni-shared'
@@ -11,48 +11,40 @@ import { createInvoker } from '../modules/events'
 import { createWrapper } from '.'
 
 export class UniComponent extends UniNode {
-  private $component: Component
+  declare $: Element
   private $props!: Record<string, any>
-  private $selector?: string
   private $holder?: Element
-  private $fragment: DocumentFragment | null = null
+  // private $fragment: DocumentFragment | null = null
   constructor(
     id: number,
     tag: string,
     component: Component,
+    nodeJson: Partial<UniNodeJSON>,
     selector?: string
   ) {
     super(id, tag)
-    this.$component = component
+    const container = document.createElement('div')
+    this.$props = reactive({})
+    this.init(nodeJson)
+    createApp(createWrapper(component, this.$props)).mount(container)
+    this.$ = container.firstElementChild!
     if (selector) {
-      this.$selector = selector
+      this.$holder = this.$.querySelector(selector)!
+    }
+    if (hasOwn(nodeJson, 't')) {
+      this.setText(nodeJson.t || '')
     }
   }
   init(nodeJson: Partial<UniNodeJSON>) {
-    const container = document.createElement('div')
-    this.$props = reactive({})
     const { a } = nodeJson
     if (a) {
       Object.keys(a).forEach((n) => {
         this.setAttr(n, a[n])
       })
     }
-    createApp(createWrapper(this.$component, this.$props)).mount(container)
-    this.$ = container.firstElementChild!
-    if (hasOwn(nodeJson, 't')) {
-      this.$.textContent = nodeJson.t || ''
-    }
-    if (this.$selector) {
-      this.$holder = this.$.querySelector(this.$selector)!
-    }
-    if (this.$fragment) {
-      if (__DEV__) {
-        console.log(formatLog(this.tag, 'init', 'fragment', this.$fragment))
-      }
-
-      ;(this.$holder || this.$).appendChild(this.$fragment)
-      this.$fragment = null
-    }
+  }
+  setText(text: string) {
+    ;(this.$holder || this.$).textContent = text
   }
   setAttr(name: string, value: unknown) {
     const decoded = decodeAttr(name)
@@ -69,40 +61,40 @@ export class UniComponent extends UniNode {
   removeAttr(name: string) {
     this.$props[decodeAttr(name)] = null
   }
-  get fragment() {
-    if (!this.$fragment) {
-      this.$fragment = document.createDocumentFragment()
-    }
-    return this.$fragment
-  }
+  // get fragment() {
+  //   if (!this.$fragment) {
+  //     this.$fragment = document.createDocumentFragment()
+  //   }
+  //   return this.$fragment
+  // }
   appendChild(node: Element) {
-    if (!this.$) {
-      // 可能还未初始化，临时存放
-      if (__DEV__) {
-        console.log(
-          formatLog(this.tag, 'fragment', 'appendChild', node.tagName)
-        )
-      }
-      return this.fragment.appendChild(node)
-    }
+    // if (!this.$) {
+    //   // 可能还未初始化，临时存放
+    //   if (__DEV__) {
+    //     console.log(
+    //       formatLog(this.tag, 'fragment', 'appendChild', node.tagName)
+    //     )
+    //   }
+    //   return this.fragment.appendChild(node)
+    // }
     return (this.$holder || this.$).appendChild(node)
   }
   insertBefore(newChild: Node, refChild: Node) {
-    if (!this.$) {
-      // 可能还未初始化，临时存放
-      if (__DEV__) {
-        console.log(
-          formatLog(
-            this.tag,
-            'fragment',
-            'insertBefore',
-            (newChild as Element).tagName,
-            (refChild as Element).tagName
-          )
-        )
-      }
-      return this.fragment.insertBefore(newChild, refChild)
-    }
+    // if (!this.$) {
+    //   // 可能还未初始化，临时存放
+    //   if (__DEV__) {
+    //     console.log(
+    //       formatLog(
+    //         this.tag,
+    //         'fragment',
+    //         'insertBefore',
+    //         (newChild as Element).tagName,
+    //         (refChild as Element).tagName
+    //       )
+    //     )
+    //   }
+    //   return this.fragment.insertBefore(newChild, refChild)
+    // }
     return (this.$holder || this.$).insertBefore(newChild, refChild)
   }
 }

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

+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import CoverImage from '../../../components/cover-image'
 
 import { UniComponent } from './UniComponent'
 
 export class UniCoverImage extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-cover-image', CoverImage)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-cover-image', CoverImage, nodeJson)
   }
 }

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

+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import CoverView from '../../../components/cover-view'
 
 import { UniComponent } from './UniComponent'
 
 export class UniCoverView extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-cover-view', CoverView)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-cover-view', CoverView, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/editor.css'
 import { Editor } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniEditor extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-editor', Editor)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-editor', Editor, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/form.css'
 import { Form } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniForm extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-form', Form, 'span')
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-form', Form, nodeJson, 'span')
   }
 }

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

 import '@dcloudio/uni-components/style/icon.css'
 import { Icon } from '@dcloudio/uni-components'
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 
 import { UniComponent } from './UniComponent'
 
 export class UniIcon extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-icon', Icon)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-icon', Icon, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/image.css'
 import { Image } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniImage extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-image', Image)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-image', Image, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/input.css'
 import { Input } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniInput extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-input', Input)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-input', Input, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/label.css'
 import { Label } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniLabel extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-label', Label)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-label', Label, nodeJson)
   }
 }

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

+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import Map from '../../../components/map'
 
 import { UniComponent } from './UniComponent'
 
 export class UniMap extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-map', Map)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-map', Map, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/movable-area.css'
 import { MovableArea } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniMovableArea extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-movable-area', MovableArea)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-movable-area', MovableArea, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/movable-view.css'
 import { MovableView } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniMovableView extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-movable-view', MovableView)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-movable-view', MovableView, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/navigator.css'
 import { Navigator } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniNavigator extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-navigator', Navigator)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-navigator', Navigator, nodeJson)
   }
 }

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

+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import Picker from '../../../components/picker'
-
 import { UniComponent } from './UniComponent'
 
 export class UniPicker extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-picker', Picker)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-picker', Picker, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/picker-view.css'
 import { PickerView } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniPickerView extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-picker-view', PickerView, '.uni-picker-view-wrapper')
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(
+      id,
+      'uni-picker-view',
+      PickerView,
+      nodeJson,
+      '.uni-picker-view-wrapper'
+    )
   }
 }

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

 import '@dcloudio/uni-components/style/picker-view-column.css'
 import { PickerViewColumn } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniPickerViewColumn extends UniComponent {
-  constructor(id: number) {
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
     super(
       id,
       'uni-picker-view-column',
       PickerViewColumn,
+      nodeJson,
       '.uni-picker-view-content'
     )
   }

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

 import '@dcloudio/uni-components/style/progress.css'
 import { Progress } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniProgress extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-progress', Progress)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-progress', Progress, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/radio.css'
 import { Radio } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniRadio extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-radio', Radio, '.uni-radio-wrapper')
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-radio', Radio, nodeJson, '.uni-radio-wrapper')
   }
 }

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

 import '@dcloudio/uni-components/style/radio-group.css'
 import { RadioGroup } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniRadioGroup extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-radio-group', RadioGroup)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-radio-group', RadioGroup, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/rich-text.css'
 import { RichText } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniRichText extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-rich-text', RichText)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-rich-text', RichText, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/scroll-view.css'
 import { ScrollView } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniScrollView extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-scroll-view', ScrollView, '.uni-scroll-view-content')
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(
+      id,
+      'uni-scroll-view',
+      ScrollView,
+      nodeJson,
+      '.uni-scroll-view-content'
+    )
   }
 }

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

 import '@dcloudio/uni-components/style/slider.css'
 import { Slider } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniSlider extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-slider', Slider)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-slider', Slider, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/swiper.css'
 import { Swiper } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniSwiper extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-swiper', Swiper, '.uni-swiper-slide-frame')
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-swiper', Swiper, nodeJson, '.uni-swiper-slide-frame')
   }
 }

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

 import '@dcloudio/uni-components/style/swiper-item.css'
 import { SwiperItem } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniSwiperItem extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-swiper-item', SwiperItem)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-swiper-item', SwiperItem, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/switch.css'
 import { Switch } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniSwitch extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-switch', Switch)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-switch', Switch, nodeJson)
   }
 }

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

 import '@dcloudio/uni-components/style/textarea.css'
 import { Textarea } from '@dcloudio/uni-components'
-
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniComponent } from './UniComponent'
 
 export class UniTextarea extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-textarea', Textarea)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-textarea', Textarea, nodeJson)
   }
 }

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

+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import '../../../../../style/video.css'
 import Video from '../../../components/video'
 
 import { UniComponent } from './UniComponent'
 
 export class UniVideo extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-video', Video)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-video', Video, nodeJson)
   }
 }

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

+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import WebView from '../../../components/web-view'
 
 import { UniComponent } from './UniComponent'
 
 export class UniWebView extends UniComponent {
-  constructor(id: number) {
-    super(id, 'uni-web-view', WebView)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, 'uni-web-view', WebView, nodeJson)
   }
 }

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

+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { defineComponent, h } from 'vue'
 import { UniComment } from '../elements/UniComment'
 import { UniTextElement } from '../elements/UniTextElement'
@@ -97,8 +98,12 @@ const BuiltInComponents = [
 
 export type WrapperComponent = ReturnType<typeof createWrapper>
 
-export function createBuiltInComponent(type: number, id: number) {
-  return new BuiltInComponents[type]!(id)
+export function createBuiltInComponent(
+  type: number,
+  id: number,
+  nodeJson: Partial<UniNodeJSON>
+) {
+  return new BuiltInComponents[type]!(id, nodeJson)
 }
 
 export function createWrapper(

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

@@ -2,7 +2,6 @@ import { UniNode } from './UniNode'
 
 export class UniComment extends UniNode {
   constructor(id: number) {
-    super(id, '#comment')
-    this.$ = document.createComment('')
+    super(id, '#comment', document.createComment(''))
   }
 }

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

@@ -9,19 +9,22 @@ import { UniCustomElement } from '../components'
 import { queuePostActionJob } from '../scheduler'
 
 export class UniElement<T extends object> extends UniNode {
-  $: UniCustomElement
+  declare $: UniCustomElement
   $props: T = reactive({} as any)
   $propNames: string[]
   protected _update?: Function
-  constructor(id: number, element: Element, propNames: string[] = []) {
-    super(id, element.tagName)
-    this.$ = element as UniCustomElement
+  constructor(
+    id: number,
+    element: Element,
+    nodeJson: Partial<UniNodeJSON>,
+    propNames: string[] = []
+  ) {
+    super(id, element.tagName, element)
     this.$.__id = id
     this.$.__listeners = Object.create(null)
-
     this.$propNames = propNames
-
     this._update = this.update.bind(this)
+    this.init(nodeJson)
   }
   init(nodeJson: Partial<UniNodeJSON>) {
     if (hasOwn(nodeJson, 'a')) {

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

-import { formatLog } from '@dcloudio/uni-shared'
+import { formatLog, UniNodeJSON } from '@dcloudio/uni-shared'
+import { UniCustomElement } from '../components'
 import { UniElement } from './UniElement'
 
 interface HoverProps {
@@ -15,8 +16,13 @@ const PROP_NAMES_HOVER = [
 ]
 export class UniHoverElement extends UniElement<HoverProps> {
   private _hover?: Hover
-  constructor(id: number, element: Element, propNames: string[] = []) {
-    super(id, element, [...PROP_NAMES_HOVER, ...propNames])
+  constructor(
+    id: number,
+    element: Element,
+    nodeJson: Partial<UniNodeJSON>,
+    propNames: string[] = []
+  ) {
+    super(id, element, nodeJson, [...PROP_NAMES_HOVER, ...propNames])
   }
   update() {
     const hoverClass = this.$props['hover-class']

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

@@ -9,9 +9,12 @@ export class UniNode {
   $!: Element | Text | Comment
   isMounted: boolean = false
   isUnmounted: boolean = false
-  constructor(id: number, tag: string) {
+  constructor(id: number, tag: string, element?: Element | Text | Comment) {
     this.id = id
     this.tag = tag
+    if (element) {
+      this.$ = element
+    }
   }
   init(nodeJson: Partial<UniNodeJSON>) {
     if (hasOwn(nodeJson, 't')) {
@@ -21,12 +24,7 @@ export class UniNode {
   setText(text: string) {
     this.$.textContent = text
   }
-  insert(
-    parentNodeId: number,
-    refNodeId: number,
-    nodeJson: Partial<UniNodeJSON>
-  ) {
-    this.init(nodeJson)
+  insert(parentNodeId: number, refNodeId: number) {
     const node = this.$
     const parentNode = $(parentNodeId)
     if (refNodeId === -1) {
@@ -41,7 +39,7 @@ export class UniNode {
     $.parentNode!.removeChild($)
     this.isUnmounted = false
   }
-  appendChild(node: Element) {
+  appendChild(node: Node) {
     return this.$.appendChild(node)
   }
   insertBefore(newChild: Node, refChild: Node) {

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

@@ -13,9 +13,10 @@ const PROP_NAMES_HOVER = ['space', 'decode']
 export class UniTextElement extends UniElement<TextProps> {
   private _text: string = ''
 
-  constructor(id: number) {
-    super(id, document.createElement('uni-text'), PROP_NAMES_HOVER)
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, document.createElement('uni-text'), nodeJson, PROP_NAMES_HOVER)
   }
+
   init(nodeJson: Partial<UniNodeJSON>) {
     this._text = nodeJson.t || ''
     super.init(nodeJson)

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

@@ -2,7 +2,6 @@ import { UniNode } from './UniNode'
 
 export class UniTextNode extends UniNode {
   constructor(id: number) {
-    super(id, '#text')
-    this.$ = document.createTextNode('')
+    super(id, '#text', document.createTextNode(''))
   }
 }

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

 import '@dcloudio/uni-components/style/view.css'
+import { UniNodeJSON } from '@dcloudio/uni-shared'
 import { UniHoverElement } from './UniHoverElement'
 export class UniViewElement extends UniHoverElement {
-  constructor(id: number) {
-    super(id, document.createElement('uni-view'))
+  constructor(id: number, nodeJson: Partial<UniNodeJSON>) {
+    super(id, document.createElement('uni-view'), nodeJson)
   }
 }

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

@@ -20,9 +20,9 @@ export function onVdSync(actions: PageAction[]) {
       case ACTION_TYPE_PAGE_CREATED:
         return onPageCreated()
       case ACTION_TYPE_CREATE:
-        return createElement(action[1], action[2])
+        return createElement(action[1], action[2], action[3])
       case ACTION_TYPE_INSERT:
-        return $(action[1]).insert(action[2], action[3], action[4])
+        return $(action[1]).insert(action[2], action[3])
       case ACTION_TYPE_REMOVE:
         return $(action[1]).remove()
       case ACTION_TYPE_SET_ATTRIBUTE:

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

@@ -5,7 +5,7 @@ import {
   disableScrollListener,
   updateCssVar,
 } from '@dcloudio/uni-core'
-import { formatLog } from '@dcloudio/uni-shared'
+import { formatLog, UniNodeJSON } from '@dcloudio/uni-shared'
 import { PageCreateData } from '../../../PageAction'
 
 import { createBuiltInComponent } from './components'
@@ -19,12 +19,23 @@ export function $(id: number) {
   return elements.get(id) as UniElement<any>
 }
 
-export function createElement(id: number, tag: string | number) {
+export function createElement(
+  id: number,
+  tag: string | number,
+  nodeJson: Partial<UniNodeJSON> = {}
+) {
   let element: UniNode
-  if (isString(tag)) {
-    element = new UniElement(id, document.createElement(tag))
+  if (id === 0) {
+    // initPageElement
+    element = new UniNode(
+      id,
+      tag as string,
+      document.createElement(tag as string)
+    )
+  } else if (isString(tag)) {
+    element = new UniElement(id, document.createElement(tag), nodeJson)
   } else {
-    element = createBuiltInComponent(tag, id)
+    element = createBuiltInComponent(tag, id, nodeJson)
   }
   elements.set(id, element)
   return element
@@ -80,7 +91,7 @@ function initSystemInfo(
 }
 
 function initPageElement() {
-  createElement(0, 'div').$ = document.getElementById('app')!
+  createElement(0, 'div', {}).$ = document.getElementById('app')!
 }
 
 function initPageCss(route: string) {

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

+import { initSubscribeHandlers } from './subscriber'
+import { preventDoubleTap } from './gesture'
+
+export function initView() {
+  initSubscribeHandlers()
+  preventDoubleTap()
+}

packages/uni-components/src/components/label/index.tsx

@@ -44,7 +44,7 @@ export default /*#__PURE__*/ defineBuiltInComponent({
           true
         )
       } else {
-        if (typeof handlers[0] === 'function') handlers[0]($event, true)
+        handlers.length && handlers[0]($event, true)
       }
     })
 

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

@@ -903,7 +903,7 @@ var index$x = /* @__PURE__ */ defineBuiltInComponent({
       if (props2.for) {
         UniViewJSBridge.emit("uni-label-click-" + pageId + "-" + props2.for, $event, true);
       } else {
-        handlers[0]($event, true);
+        handlers.length && handlers[0]($event, true);
       }
     });
     return () => vue.createVNode("uni-label", {

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

@@ -1717,7 +1717,7 @@ var index$t = /* @__PURE__ */ defineBuiltInComponent({
       if (props2.for) {
         UniViewJSBridge.emit("uni-label-click-" + pageId + "-" + props2.for, $event, true);
       } else {
-        handlers[0]($event, true);
+        handlers.length && handlers[0]($event, true);
       }
     });
     return () => createVNode("uni-label", {