From 6016990cbfd8e0988daa8d1d8dea0b53be1d8f93 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Thu, 21 Sep 2023 15:52:35 +0800
Subject: [PATCH] feat(API): getElementById

---
 pages.json                                    |  6 +++
 .../get-element-by-id.test.js                 | 20 ++++++++
 .../get-element-by-id/get-element-by-id.uvue  | 51 +++++++++++++++++++
 .../get-launch-options-sync.uvue              | 15 +++---
 pages/tabBar/API.uvue                         |  7 ++-
 5 files changed, 90 insertions(+), 9 deletions(-)
 create mode 100644 pages/API/get-element-by-id/get-element-by-id.test.js
 create mode 100644 pages/API/get-element-by-id/get-element-by-id.uvue

diff --git a/pages.json b/pages.json
index a5993bb2..6254699c 100644
--- a/pages.json
+++ b/pages.json
@@ -269,6 +269,12 @@
         "navigationBarTitleText": "页面级下拉刷新",
         "enablePullDownRefresh": true
       }
+    },
+    {
+      "path": "pages/API/get-element-by-id/get-element-by-id",
+      "style": {
+        "navigationBarTitleText": "获取节点"
+      }
     },
     {
       "path": "pages/API/nodes-info/nodes-info",
diff --git a/pages/API/get-element-by-id/get-element-by-id.test.js b/pages/API/get-element-by-id/get-element-by-id.test.js
new file mode 100644
index 00000000..34cd75ed
--- /dev/null
+++ b/pages/API/get-element-by-id/get-element-by-id.test.js
@@ -0,0 +1,20 @@
+const PAGE_PATH = "/pages/API/get-element-by-id/get-element-by-id";
+let page;
+
+describe("getElementById", () => {
+  beforeAll(async () => {
+    page = await program.navigateTo(PAGE_PATH);
+    await page.waitFor(1000);
+  });
+  it("getElementByNotExistId", async () => {
+    const res = await page.callMethod("getElementByNotExistId");
+    expect(!!res).toBe(false);
+  });
+  it("changeStyle", async () => {
+    await page.callMethod("changePageHeadBackgroundColor");
+    await page.callMethod("changeTextColor");
+    await page.callMethod("changeViewStyle");
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  });
+});
diff --git a/pages/API/get-element-by-id/get-element-by-id.uvue b/pages/API/get-element-by-id/get-element-by-id.uvue
new file mode 100644
index 00000000..6975757b
--- /dev/null
+++ b/pages/API/get-element-by-id/get-element-by-id.uvue
@@ -0,0 +1,51 @@
+<template>
+  <view>
+    <page-head id="page-head" title="getElementById"></page-head>
+    <view class="uni-padding-wrap">
+      <text id="text">this is text</text>
+      <view id="view" class="uni-common-mt" style="border: 1px solid red"
+        >this is view</view
+      >
+      <button class="uni-btn" @click="changePageHeadBackgroundColor">
+        修改 page-head 背景色
+      </button>
+      <button class="uni-btn" @click="changeTextColor">
+        修改 text 字体颜色
+      </button>
+      <button class="uni-btn" @click="changeViewStyle">
+        修改 view 宽高及背景色
+      </button>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      checked: false,
+      homePagePath: '/pages/tabBar/component',
+      launchOptionsPath: '',
+    }
+  },
+  methods: {
+    getElementByNotExistId(): Element | null {
+      return uni.getElementById('not-exist-id')
+    },
+    changePageHeadBackgroundColor(){
+      const pageHead = uni.getElementById('page-head')!
+      pageHead.style.setProperty('backgroundColor', 'red')
+    },
+    changeTextColor(){
+      const text = uni.getElementById('text')!
+      text.style.setProperty('color', 'red')
+    },
+    changeViewStyle(){
+      const view = uni.getElementById('view')!
+      view.style.setProperty('width', '90%')
+      view.style.setProperty('height', '50px')
+      view.style.setProperty('backgroundColor', '#007AFF')
+    }
+  }
+}
+</script>
diff --git a/pages/API/get-launch-options-sync/get-launch-options-sync.uvue b/pages/API/get-launch-options-sync/get-launch-options-sync.uvue
index b4e550e6..0e1ce697 100644
--- a/pages/API/get-launch-options-sync/get-launch-options-sync.uvue
+++ b/pages/API/get-launch-options-sync/get-launch-options-sync.uvue
@@ -1,13 +1,12 @@
 <template>
   <view>
     <page-head title="getLaunchOptionsSync"></page-head>
-    <button @click="getLaunchOptionsSync">getLaunchOptionsSync</button>
-    <view
-      v-if="launchOptionsPath.length > 0"
-      class="uni-common-pl uni-common-mt"
-    >
-      <text>应用启动路径：</text>
-      <text style="margin-top: 5px">{{ launchOptionsPath }}</text>
+    <view class="uni-padding-wrap">
+      <button @click="getLaunchOptionsSync">getLaunchOptionsSync</button>
+      <view v-if="launchOptionsPath.length > 0" class="uni-common-mt">
+        <text>应用启动路径：</text>
+        <text style="margin-top: 5px">{{ launchOptionsPath }}</text>
+      </view>
     </view>
   </view>
 </template>
@@ -22,7 +21,7 @@ export default {
     }
   },
   methods: {
-    getLaunchOptionsSync: function () {
+    getLaunchOptionsSync() {
       const launchOptions = uni.getLaunchOptionsSync()
       this.launchOptionsPath = launchOptions.path
       if (launchOptions.path == this.homePagePath) {
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index 48826c56..e225f4c3 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -173,7 +173,12 @@
                 name: "节点布局交互状态",
                 url: "intersection-observer",
                 enable: false
-              }, */
+              }, */
+              {
+                name: '获取节点',
+                url: 'get-element-by-id',
+                api: ["getElementById"]
+              },
               {
                 name: '节点信息',
                 url: 'nodes-info',
-- 
GitLab