feat(pageStyle): 调整数据结构，确保属性在多平台下排序一致以便自动化截图对比

pages/API/get-current-pages/get-current-pages.uvue

-<template>
-  <!-- #ifdef APP -->
-  <scroll-view class="page-scroll-view">
-  <!-- #endif -->
-    <page-head title="getCurrentPages"></page-head>
-    <view class="uni-padding-wrap">
-      <button @click="_getCurrentPages">getCurrentPages</button>
-      <view v-if="pages.length" style="padding: 15px 0px">
-        <text>当前页面栈中 {{ pages.length }} 个页面，列表如下：</text>
-        <template v-for="(page, index) in pages" :key="page.route">
-          <text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
-        </template>
-      </view>
-    </view>
-
-    <page-head title="currentPageStyle"></page-head>
-    <view class="page-style-item" v-for="(value, key) in currentPageStyle" :key="key">
-      <view class="item-text">
-        <text class="item-text-key">{{key}}:</text>
-        <text class="item-text-value">{{value}}</text>
-      </view>
-      <view class="set-value" v-if="typeof value == 'boolean'">
-        <switch :checked="getStyleValue(key).getBoolean('oldValue')"
-          @change="switchChange(key, $event as UniSwitchChangeEvent)">
-        </switch>
-      </view>
-      <view class="set-value" v-if="typeof value == 'number'">
-        <slider :value="getStyleValue(key).getNumber('oldValue')" :show-value="true"
-          @change="sliderChange(key, $event as UniSliderChangeEvent)" />
-      </view>
-      <view class="set-value" v-else-if="typeof value == 'string'">
-        <radio-group class="radio-set-value" @change="radioChange(key, $event as RadioGroupChangeEvent)">
-          <radio :value="getStyleValue(key).getString('oldValue')">{{getStyleValue(key).getString('oldValue')}}</radio>
-          <text class="split-h"></text>
-          <radio :value="getStyleValue(key).getString('newValue')">{{getStyleValue(key).getString('newValue')}}</radio>
-        </radio-group>
-      </view>
-    </view>
-  <!-- #ifdef APP -->
-  </scroll-view>
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view class="page-scroll-view">
+  <!-- #endif -->
+    <page-head title="getCurrentPages"></page-head>
+    <view class="uni-padding-wrap">
+      <button @click="_getCurrentPages">getCurrentPages</button>
+      <view v-if="pages.length" style="padding: 15px 0px">
+        <text>当前页面栈中 {{ pages.length }} 个页面，列表如下：</text>
+        <template v-for="(page, index) in pages" :key="page.route">
+          <text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
+        </template>
+      </view>
+    </view>
+
+    <page-head title="currentPageStyle"></page-head>
+    <template v-for="(item, index) in PageStyleArray">
+      <view class="page-style-item" v-if="currentPageStyle[item.key]!=null" :key="index">
+        <view class="item-text">
+          <text class="item-text-key">{{item.key}}:</text>
+          <text class="item-text-value">{{currentPageStyle[item.key]}}</text>
+        </view>
+        <view class="set-value" v-if="item.type == 'boolean'">
+          <switch :checked="item.value.getBoolean('oldValue')"
+            @change="switchChange(item.key, $event as UniSwitchChangeEvent)">
+          </switch>
+        </view>
+        <view class="set-value" v-else-if="item.type == 'number'">
+          <slider :value="item.value.getNumber('oldValue')" :show-value="true"
+            @change="sliderChange(item.key, $event as UniSliderChangeEvent)" />
+        </view>
+        <view class="set-value" v-else-if="item.type == 'string'">
+          <radio-group class="radio-set-value" @change="radioChange(item.key, $event as RadioGroupChangeEvent)">
+            <radio :value="item.value.getString('oldValue')">{{item.value.getString('oldValue')}}</radio>
+            <text class="split-h"></text>
+            <radio :value="item.value.getString('newValue')">{{item.value.getString('newValue')}}</radio>
+          </radio-group>
+        </view>
+      </view>
+    </template>
+  <!-- #ifdef APP -->
+  </scroll-view>
   <!-- #endif -->
 </template>
 
-<script>
-  import { PageStyleItem, PageStyleMap } from './page-style.uts';
+<script>
+  import { PageStyleItem, PageStyleArray } from './page-style.uts';
 
   class Page {
     constructor(public route : string) {
@@ -53,8 +55,8 @@
     data() {
       return {
         checked: false,
-        pages: [] as Page[],
-        PageStyleMap: PageStyleMap as Map<string, PageStyleItem>,
+        pages: [] as Page[],
+        PageStyleArray: PageStyleArray as PageStyleItem[],
         currentPageStyle: {} as UTSJSONObject,
       }
     },
@@ -62,18 +64,18 @@
       pageStyleText() : string {
         return JSON.stringify(this.currentPageStyle)
       }
-    },
-    onLoad() {
-      this.getPageStyle();
+    },
+    onLoad() {
+      this.getPageStyle();
     },
     onPullDownRefresh() {
       setTimeout(() => {
         uni.stopPullDownRefresh()
       }, 2000)
     },
-    methods: {
-      startPullDownRefresh() {
-        uni.startPullDownRefresh()
+    methods: {
+      startPullDownRefresh() {
+        uni.startPullDownRefresh()
       },
       _getCurrentPages: function () {
         this.pages.length = 0
@@ -88,40 +90,34 @@
             this.checked = false
           }
         }
-      },
-      /// get-set-page-style
-      radioChange(key : string, e : RadioGroupChangeEvent) {
-        this.setStyleValue(key, e.detail.value);
-      },
-      sliderChange(key : string, e : UniSliderChangeEvent) {
-        this.setStyleValue(key, e.detail.value);
-      },
-      switchChange(key : string, e : UniSwitchChangeEvent) {
-        this.setStyleValue(key, e.detail.value);
-      },
-      setStyleValue(key : string, value : any) {
-        const style = {}
-        style[key] = value
-        this.setPageStyle(style)
-        this.getPageStyle()
-      },
-      getStyleValue(key : string) : UTSJSONObject {
-        if (PageStyleMap.has(key))
-          return PageStyleMap.get(key)!.value;
-        else
-          return {}
-      },
-      getPageStyle() : UTSJSONObject {
-        const pages = getCurrentPages();
-        const currentPage = pages[pages.length - 1];
-        this.currentPageStyle = currentPage.$getPageStyle()
-        return this.currentPageStyle;
-      },
-      setPageStyle(style : UTSJSONObject) {
-        console.log('setPageStyle:', style);
-        const pages = getCurrentPages();
-        const currentPage = pages[pages.length - 1];
-        currentPage.$setPageStyle(style);
+      },
+      /// get-set-page-style
+      radioChange(key : string, e : RadioGroupChangeEvent) {
+        this.setStyleValue(key, e.detail.value);
+      },
+      sliderChange(key : string, e : UniSliderChangeEvent) {
+        this.setStyleValue(key, e.detail.value);
+      },
+      switchChange(key : string, e : UniSwitchChangeEvent) {
+        this.setStyleValue(key, e.detail.value);
+      },
+      setStyleValue(key : string, value : any) {
+        const style = {}
+        style[key] = value
+        this.setPageStyle(style)
+        this.getPageStyle()
+      },
+      getPageStyle() : UTSJSONObject {
+        const pages = getCurrentPages();
+        const currentPage = pages[pages.length - 1];
+        this.currentPageStyle = currentPage.$getPageStyle()
+        return this.currentPageStyle;
+      },
+      setPageStyle(style : UTSJSONObject) {
+        console.log('setPageStyle:', style);
+        const pages = getCurrentPages();
+        const currentPage = pages[pages.length - 1];
+        currentPage.$setPageStyle(style);
       },
       // getCurrentPage(): Page {
       //   const pages = getCurrentPages();
@@ -133,43 +129,43 @@
 </script>
 
 <style>
-  .page {
-    flex: 1;
-    padding: 10px;
-  }
-
-  .page-style {
-    margin-top: 15px;
+  .page {
+    flex: 1;
+    padding: 10px;
+  }
+
+  .page-style {
+    margin-top: 15px;
+  }
+
+  .page-style-item {
+    padding: 10px;
+    margin-top: 10px;
+    background-color: #ffffff;
+    border-radius: 5px;
+  }
+
+  .item-text {
+    flex-direction: row;
+  }
+
+  .item-text-key {
+    font-weight: bold;
+  }
+
+  .item-text-value {
+    margin-left: 32px;
+  }
+
+  .set-value {
+    margin-top: 10px;
   }
-
-  .page-style-item {
-    padding: 10px;
-    margin-top: 10px;
-    background-color: #ffffff;
-    border-radius: 5px;
-  }
-
-  .item-text {
-    flex-direction: row;
-  }
-
-  .item-text-key {
-    font-weight: bold;
-  }
-
-  .item-text-value {
-    margin-left: 32px;
-  }
-
-  .set-value {
-    margin-top: 10px;
-  }
-
-  .radio-set-value {
-    flex-direction: row;
-  }
-
-  .split-h {
-    width: 15px;
+
+  .radio-set-value {
+    flex-direction: row;
+  }
+
+  .split-h {
+    width: 15px;
   }
 </style>

pages/API/get-current-pages/page-style.uts

 
 export type PageStyleItem = {
+  key : string
   type : string
   value : UTSJSONObject
 }
 
-export const PageStyleMap = new Map<string, PageStyleItem>([
-  ["navigationBarBackgroundColor", {
+export const PageStyleArray = [
+  {
+    key: "navigationBarBackgroundColor",
     type: "string",
     value: {
       oldValue: "#F8F8F8",
       newValue: "#F0F0F0",
     }
-  } as PageStyleItem],
-  ["navigationBarTextStyle", {
+  },
+  {
+    key: "navigationBarTextStyle",
     type: "string",
     value: {
       oldValue: "white",
       newValue: "black",
     }
-  } as PageStyleItem],
-  ["navigationBarTitleText", {
+  },
+  {
+    key: "navigationBarTitleText",
     type: "string",
     value: {
       oldValue: "old title",
       newValue: "new title",
     }
-  } as PageStyleItem],
-  ["navigationStyle", {
+  },
+  {
+    key: "navigationStyle",
     type: "string",
     value: {
       oldValue: "default",
       newValue: "custom",
     }
-  } as PageStyleItem],
-  ["backgroundColor", {
+  },
+  {
+    key: "backgroundColor",
     type: "string",
     value: {
       oldValue: "#ffffff",
       newValue: "#000000",
     }
-  } as PageStyleItem],
-  ["backgroundColorContent", {
+  },
+  {
+    key: "backgroundColorContent",
     type: "string",
     value: {
       oldValue: "#ffffff",
       newValue: "#000000",
     }
-  } as PageStyleItem],
-  ["backgroundTextStyle", {
+  },
+  {
+    key: "backgroundTextStyle",
     type: "string",
     value: {
       oldValue: "dark",
       newValue: "light",
     }
-  } as PageStyleItem],
-  ["enablePullDownRefresh", {
+  },
+  {
+    key: "enablePullDownRefresh",
     type: "boolean",
     value: {
       oldValue: true,
       newValue: false,
     }
-  } as PageStyleItem],
-  ["onReachBottomDistance", {
+  },
+  {
+    key: "onReachBottomDistance",
     type: "number",
     value: {
       oldValue: 50,
       newValue: 100,
     }
-  } as PageStyleItem],
-  ["pageOrientation", {
+  },
+  {
+    key: "pageOrientation",
     type: "string",
     value: {
       oldValue: "auto",
       newValue: "portrait",
     }
-  } as PageStyleItem],
-  ["backgroundColorTop", {
+  },
+  {
+    key: "backgroundColorTop",
     type: "string",
     value: {
       oldValue: "#ffffff",
       newValue: "#000000",
     }
-  } as PageStyleItem],
-  ["backgroundColorBottom", {
+  },
+  {
+    key: "backgroundColorBottom",
     type: "string",
     value: {
       oldValue: "#ffffff",
       newValue: "#000000",
     }
-  } as PageStyleItem],
-  ["navigationBarAutoBackButton", {
+  },
+  {
+    key: "navigationBarAutoBackButton",
     type: "boolean",
     value: {
       oldValue: true,
       newValue: false,
     }
-  } as PageStyleItem],
-])
+  }] as PageStyleItem[]