From 40281220a2460f3e40166b6ebf5359da7594df62 Mon Sep 17 00:00:00 2001
From: DCloud_LXH <283700113@qq.com>
Date: Wed, 17 Apr 2024 13:49:47 +0800
Subject: [PATCH] feat: rendering

---
 pages/index/index.uvue             | 636 +++++++++++++++--------------
 pages/rendering/render/render.uvue |  18 +-
 2 files changed, 342 insertions(+), 312 deletions(-)

diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index 2d221bc..19e42d8 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -6,15 +6,19 @@
       <uni-collapse>
         <uni-collapse-item v-for="menu in menus" :key="menu.id" :title="menu.name" class="menu">
           <view v-for="(page, index) in menu.pages" :key="page.name">
-            <view v-if="page.url" class="page-item" :class="{ 'first-child': index == 0 }"
-              @click="goDetailPage(menu.id, page)">
+            <view v-if="page.url" class="page-item" :class="{ 'first-child': index == 0 }" @click="goDetailPage(menu.id, page)">
               <text :class="{ 'text-disabled': page.enable == false }" class="text">{{ page.name }}</text>
             </view>
             <template v-if="page.children">
               <uni-collapse style="flex: 1">
                 <uni-collapse-item :title="page.name" class="menu">
-                  <view v-for="(child, index) in page.children" :key="child.url" class="page-item"
-                    :class="{ 'first-child': index == 0 }" @click="goDetailPage(`${menu.id}/${page.id}`, child)">
+                  <view
+                    v-for="(child, index) in page.children"
+                    :key="child.url"
+                    class="page-item"
+                    :class="{ 'first-child': index == 0 }"
+                    @click="goDetailPage(`${menu.id}/${page.id}`, child)"
+                  >
                     <text :class="{ 'text-disabled': child.enable == false }" class="text">{{ child.name }}</text>
                   </view>
                 </uni-collapse-item>
@@ -30,270 +34,270 @@
 </template>
 
 <script lang="uts">
-  import { setLifeCycleNum, state } from '@/store/index.uts';
+import { setLifeCycleNum, state } from '@/store/index.uts'
 
-  type Page = {
-    id: string;
-    name: string;
-    enable?: boolean;
-    url?: string;
-    children?: Page[];
-  };
+type Page = {
+  id: string
+  name: string
+  enable?: boolean
+  url?: string
+  children?: Page[]
+}
 
-  type Menu = {
-    id: string;
-    name: string;
-    pages: Page[];
-    url?: string;
-    enable?: boolean;
-  };
+type Menu = {
+  id: string
+  name: string
+  pages: Page[]
+  url?: string
+  enable?: boolean
+}
 
-  export default {
-    data() {
-      return {
-        menus: [
-          {
-            id: 'app-instance',
-            name: 'App 实例',
-            pages: [
-              {
-                id: 'component',
-                name: 'component',
-                url: 'component/component'
-              },
-              {
-                id: 'globalProperties',
-                name: 'globalProperties',
-                children: [
-                  {
-                    id: 'globalProperties-options',
-                    name: 'globalProperties  选项式 API',
-                    url: 'globalProperties-options'
-                  },
-                  {
-                    id: 'globalProperties-composition',
-                    name: 'globalProperties 组合式 API',
-                    url: 'globalProperties-composition'
-                  }
-                ]
-              },
-              {
-                id: 'use',
-                name: 'use',
-                children: [
-                  {
-                    id: 'use-options',
-                    name: 'use 选项式 API',
-                    url: 'use-composition'
-                  },
-                  {
-                    id: 'use-composition',
-                    name: 'use 组合式 API',
-                    url: 'use-composition'
-                  }
-                ]
-              }
-            ] as Page[]
-          },
-          {
-            id: 'component-instance',
-            name: '组件 实例',
-            pages: [
-              {
-                id: 'attrs',
-                name: 'attrs',
-                children: [
-                  {
-                    id: 'attrs-options',
-                    name: 'attrs 选项式 API',
-                    url: 'attrs-options'
-                  },
-                  {
-                    id: 'attrs-composition',
-                    name: 'attrs 组合式 API',
-                    url: 'attrs-composition'
-                  }
-                ]
-              },
-              {
-                id: 'data',
-                name: 'data',
-                children: [
-                  {
-                    id: 'data-options',
-                    name: 'data 选项式 API',
-                    url: 'data-options'
-                  },
-                  {
-                    id: 'data-composition',
-                    name: 'data 组合式 API',
-                    url: 'data-composition'
-                  }
-                ]
-              },
-              {
-                id: 'props',
-                name: 'props',
-                children: [
-                  {
-                    id: 'props-options',
-                    name: 'props 选项式 API',
-                    url: 'props-options'
-                  },
-                  {
-                    id: 'props-composition',
-                    name: 'props 组合式 API',
-                    url: 'props-composition'
-                  }
-                ]
-              },
-              {
-                id: 'el',
-                name: '$el',
-                children: [
-                  {
-                    id: 'el-options',
-                    name: '$el 选项式 API',
-                    url: 'el-options'
-                  },
-                  {
-                    id: 'el-composition',
-                    name: '$el 组合式 API',
-                    url: 'el-composition'
-                  }
-                ]
-              },
-              {
-                id: 'options',
-                name: '$options',
-                children: [
-                  {
-                    id: 'options-options',
-                    name: '$options 选项式 API',
-                    url: 'options-options'
-                  },
-                  {
-                    id: 'options-composition',
-                    name: '$options 组合式 API',
-                    url: 'options-composition'
-                  }
-                ]
-              },
-              {
-                id: 'parent',
-                name: '$parent',
-                children: [
-                  {
-                    id: 'parent-options',
-                    name: '$parent 选项式 API',
-                    url: 'parent-options'
-                  },
-                  {
-                    id: 'parent-composition',
-                    name: '$parent 组合式 API',
-                    url: 'parent-composition'
-                  }
-                ]
-              },
-              // #ifdef APP
-              {
-                id: 'root',
-                name: '$root',
-                children: [
-                  {
-                    id: 'root-options',
-                    name: '$root 选项式 API',
-                    url: 'root-options'
-                  },
-                  {
-                    id: 'root-composition',
-                    name: '$root 组合式 API',
-                    url: 'root-composition'
-                  }
-                ]
-              }
-              // #endif
-            ] as Page[]
-          },
-          {
-            id: 'lifecycle',
-            name: '生命周期',
-            pages: [
-              {
-                id: 'page',
-                name: '页面生命周期',
-                children: [
-                  {
-                    id: 'page-options',
-                    name: '页面生命周期（选项式）',
-                    url: 'page-options',
-                  },
+export default {
+  data() {
+    return {
+      menus: [
+        {
+          id: 'app-instance',
+          name: 'App 实例',
+          pages: [
+            {
+              id: 'component',
+              name: 'component',
+              url: 'component/component'
+            },
+            {
+              id: 'globalProperties',
+              name: 'globalProperties',
+              children: [
+                {
+                  id: 'globalProperties-options',
+                  name: 'globalProperties  选项式 API',
+                  url: 'globalProperties-options'
+                },
+                {
+                  id: 'globalProperties-composition',
+                  name: 'globalProperties 组合式 API',
+                  url: 'globalProperties-composition'
+                }
+              ]
+            },
+            {
+              id: 'use',
+              name: 'use',
+              children: [
+                {
+                  id: 'use-options',
+                  name: 'use 选项式 API',
+                  url: 'use-composition'
+                },
+                {
+                  id: 'use-composition',
+                  name: 'use 组合式 API',
+                  url: 'use-composition'
+                }
+              ]
+            }
+          ] as Page[]
+        },
+        {
+          id: 'component-instance',
+          name: '组件 实例',
+          pages: [
+            {
+              id: 'attrs',
+              name: 'attrs',
+              children: [
+                {
+                  id: 'attrs-options',
+                  name: 'attrs 选项式 API',
+                  url: 'attrs-options'
+                },
+                {
+                  id: 'attrs-composition',
+                  name: 'attrs 组合式 API',
+                  url: 'attrs-composition'
+                }
+              ]
+            },
+            {
+              id: 'data',
+              name: 'data',
+              children: [
+                {
+                  id: 'data-options',
+                  name: 'data 选项式 API',
+                  url: 'data-options'
+                },
+                {
+                  id: 'data-composition',
+                  name: 'data 组合式 API',
+                  url: 'data-composition'
+                }
+              ]
+            },
+            {
+              id: 'props',
+              name: 'props',
+              children: [
+                {
+                  id: 'props-options',
+                  name: 'props 选项式 API',
+                  url: 'props-options'
+                },
+                {
+                  id: 'props-composition',
+                  name: 'props 组合式 API',
+                  url: 'props-composition'
+                }
+              ]
+            },
+            {
+              id: 'el',
+              name: '$el',
+              children: [
+                {
+                  id: 'el-options',
+                  name: '$el 选项式 API',
+                  url: 'el-options'
+                },
+                {
+                  id: 'el-composition',
+                  name: '$el 组合式 API',
+                  url: 'el-composition'
+                }
+              ]
+            },
+            {
+              id: 'options',
+              name: '$options',
+              children: [
+                {
+                  id: 'options-options',
+                  name: '$options 选项式 API',
+                  url: 'options-options'
+                },
+                {
+                  id: 'options-composition',
+                  name: '$options 组合式 API',
+                  url: 'options-composition'
+                }
+              ]
+            },
+            {
+              id: 'parent',
+              name: '$parent',
+              children: [
+                {
+                  id: 'parent-options',
+                  name: '$parent 选项式 API',
+                  url: 'parent-options'
+                },
+                {
+                  id: 'parent-composition',
+                  name: '$parent 组合式 API',
+                  url: 'parent-composition'
+                }
+              ]
+            },
+            // #ifdef APP
+            {
+              id: 'root',
+              name: '$root',
+              children: [
+                {
+                  id: 'root-options',
+                  name: '$root 选项式 API',
+                  url: 'root-options'
+                },
+                {
+                  id: 'root-composition',
+                  name: '$root 组合式 API',
+                  url: 'root-composition'
+                }
+              ]
+            }
+            // #endif
+          ] as Page[]
+        },
+        {
+          id: 'lifecycle',
+          name: '生命周期',
+          pages: [
+            {
+              id: 'page',
+              name: '页面生命周期',
+              children: [
+                {
+                  id: 'page-options',
+                  name: '页面生命周期（选项式）',
+                  url: 'page-options'
+                },
 
-                  {
-                    id: 'page-composition',
-                    name: '页面生命周期（组合式）',
-                    url: 'page-composition',
-                  }
-                ]
-              }
-            ] as Page[]
-          },
-          {
-            id: 'built-in',
-            name: '内置组件',
-            pages: [
-              {
-                id: 'component/keep-alive',
-                name: 'keep-alive',
-                children: [
-                  {
-                    id: 'keep-alive-options',
-                    name: 'keep-alive（选项式）',
-                    url: 'keep-alive-options',
-                  },
+                {
+                  id: 'page-composition',
+                  name: '页面生命周期（组合式）',
+                  url: 'page-composition'
+                }
+              ]
+            }
+          ] as Page[]
+        },
+        {
+          id: 'built-in',
+          name: '内置组件',
+          pages: [
+            {
+              id: 'component/keep-alive',
+              name: 'keep-alive',
+              children: [
+                {
+                  id: 'keep-alive-options',
+                  name: 'keep-alive（选项式）',
+                  url: 'keep-alive-options'
+                },
 
-                  {
-                    id: 'keep-alive-composition',
-                    name: 'keep-alive（组合式）',
-                    url: 'keep-alive-composition',
-                  }
-                ]
-              },
-              {
-                id: 'component/teleport',
-                name: 'teleport',
-                children: [
-                  {
-                    id: 'teleport-options',
-                    name: 'teleport（选项式）',
-                    url: 'teleport-options',
-                  },
+                {
+                  id: 'keep-alive-composition',
+                  name: 'keep-alive（组合式）',
+                  url: 'keep-alive-composition'
+                }
+              ]
+            },
+            {
+              id: 'component/teleport',
+              name: 'teleport',
+              children: [
+                {
+                  id: 'teleport-options',
+                  name: 'teleport（选项式）',
+                  url: 'teleport-options'
+                },
 
-                  {
-                    id: 'teleport-composition',
-                    name: 'teleport（组合式）',
-                    url: 'teleport-composition',
-                  }
-                ]
-              },
-              {
-                id: 'component/component',
-                name: 'component',
-                children: [
-                  {
-                    id: 'component-options',
-                    name: 'component（选项式）',
-                    url: 'component-options',
-                  },
+                {
+                  id: 'teleport-composition',
+                  name: 'teleport（组合式）',
+                  url: 'teleport-composition'
+                }
+              ]
+            },
+            {
+              id: 'component/component',
+              name: 'component',
+              children: [
+                {
+                  id: 'component-options',
+                  name: 'component（选项式）',
+                  url: 'component-options'
+                },
 
-                  {
-                    id: 'component-composition',
-                    name: 'component（组合式）',
-                    url: 'component-composition',
-                  }
-                ]
-              },
-              {
+                {
+                  id: 'component-composition',
+                  name: 'component（组合式）',
+                  url: 'component-composition'
+                }
+              ]
+            },
+            {
               id: 'component/slots',
               name: 'slot',
               children: [
@@ -327,65 +331,81 @@
                 }
               ]
             }
-            ] as Page[]
-          }
-        ] as Menu[],
-      }
-    },
-    methods: {
-      goDetailPage(parentUrl: string, page: Page) {
-        if (page.enable == false) {
-          uni.showToast({
-            icon: 'none',
-            title: '暂不支持'
-          });
-          return;
+          ] as Page[]
+        },
+        {
+          id: 'rendering',
+          name: '渲染',
+          pages: [
+            {
+              id: 'render',
+              name: 'render Function（选项式）',
+              url: 'render/render'
+            },
+            {
+              id: 'unrecognized-component',
+              name: 'unrecognized-component',
+              url: 'unrecognized-component/unrecognized-component'
+            }
+          ] as Page[]
         }
-        uni.navigateTo({
-          url: `/pages/${parentUrl}/${page.url}`
-        });
-      },
-      // 自动化测试
-      setLifeCycleNum(num: number) {
-        setLifeCycleNum(num);
-      },
-      // 自动化测试
-      getLifeCycleNum(): number {
-        return state.lifeCycleNum;
-      },
-      // 自动化测试
-      checkLaunchPath(): boolean {
-        const app = getApp();
-        return app.checkLaunchPath();
+      ] as Menu[]
+    }
+  },
+  methods: {
+    goDetailPage(parentUrl: string, page: Page) {
+      if (page.enable == false) {
+        uni.showToast({
+          icon: 'none',
+          title: '暂不支持'
+        })
+        return
       }
+      uni.navigateTo({
+        url: `/pages/${parentUrl}/${page.url}`
+      })
+    },
+    // 自动化测试
+    setLifeCycleNum(num: number) {
+      setLifeCycleNum(num)
+    },
+    // 自动化测试
+    getLifeCycleNum(): number {
+      return state.lifeCycleNum
+    },
+    // 自动化测试
+    checkLaunchPath(): boolean {
+      const app = getApp()
+      return app.checkLaunchPath()
     }
-  };
+  }
+}
 </script>
 
 <style lang="scss">
-  .menu {
-    border-bottom: 1px solid #dbd9d9;
+.menu {
+  border-bottom: 1px solid #dbd9d9;
 
-    &.open {
-      border-bottom: none;
-    }
+  &.open {
+    border-bottom: none;
   }
+}
 
-  .page-item {
-    padding: 12px 10px;
-    border-bottom: 1px solid #dbd9d9;
+.page-item {
+  padding: 12px 10px;
+  border-bottom: 1px solid #dbd9d9;
 
-    &.first-child {
-      border-top: 1px solid #dbd9d9;
-    }
+  &.first-child {
+    border-top: 1px solid #dbd9d9;
+  }
 
-    .text {
-      font-size: 14px;
-      color: #333;
+  .text {
+    font-size: 14px;
+    color: #333;
 
-      &.text-disabled {
-        color: #999;
-      }
+    &.text-disabled {
+      color: #999;
     }
   }
+}
 </style>
\ No newline at end of file
diff --git a/pages/rendering/render/render.uvue b/pages/rendering/render/render.uvue
index 39c4b03..38b4c03 100644
--- a/pages/rendering/render/render.uvue
+++ b/pages/rendering/render/render.uvue
@@ -1,16 +1,26 @@
 <script lang="uts">
 import CompForRenderFunction from '@/components/CompForRenderFunction.uvue'
 export default {
-  data(){
+  data() {
     return {
       msg: 'default msg'
     }
   },
   render(): VNode {
-    return h('view', {class: 'page'}, [
+    return h('view', { class: 'page' }, [
       h(CompForRenderFunction, {}, (): VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]),
       h('text', { class: 'uni-common-mt msg', style: { color: 'blue' } }, this.msg),
-      h('button', { class: 'uni-common-mt btn', type: 'primary', onClick: () => {this.msg = 'new msg'} }, 'click')
+      h(
+        'button',
+        {
+          class: 'uni-common-mt btn',
+          type: 'primary',
+          onClick: () => {
+            this.msg = 'new msg'
+          }
+        },
+        'click'
+      )
     ])
   }
 }
@@ -20,4 +30,4 @@ export default {
 .btn {
   color: red;
 }
-</style>
+</style>
\ No newline at end of file
-- 
GitLab