补充theme-change示例

pages.json

@@ -1309,6 +1309,13 @@
         "navigationBarTitleText": "日历"
       }
     },
+    {
+      "path": "pages/API/theme-change/theme-change",
+      "style": {
+        "navigationBarTitleText": "主题切换",
+        "enablePullDownRefresh": false
+      }
+    },
     // #endif
     {
       "path": "pages/template/schema/schema",
@@ -1380,13 +1387,6 @@
         "enablePullDownRefresh": false
       }
     },
-    // {
-    //   "path": "pages/API/theme-change/theme-change",
-    //   "style": {
-    //     "navigationBarTitleText": "主题切换",
-    //     "enablePullDownRefresh": false
-    //   }
-    // },
     {
       "path": "uni_modules/uni-pay-x/pages/success/success",
       "style": {

pages/API/theme-change/theme-change.test.js

+// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
+
+describe('API-theme-change', () => {
+
+  let page;
+  const isApp = process.env.UNI_OS_NAME === "android" || process.env.UNI_OS_NAME === "ios";
+
+  if (!isApp) {
+    it('dummyTest', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/API/theme-change/theme-change')
+    await page.waitFor(600);
+  });
+
+
+
+  it("check-set-app-theme", async () => {
+    await page.callMethod('setAppTheme', "dark")
+    await page.waitFor(300)
+    expect(await page.data('appTheme')).toBe("dark")
+  })
+});

pages/API/theme-change/theme-change.uvue

-<template>
-  <view class="uni-padding-wrap">
-    <view class="uni-common-mt item-box">
-      <text>theme:</text>
-      <text id="theme">{{ dataInfo.theme }}</text>
-    </view>
-    <view class="uni-common-mt item-box">
-      <text>fn1 trigger num:</text>
-      <text id="fn1-trigger-num">{{ dataInfo.fn1TriggerNum }}</text>
+<template>
+  <view class="uni-padding-wrap">
+    <view class="uni-common-mt item-box">
+      <text>osTheme:</text>
+      <text id="theme">{{ osTheme }}</text>
     </view>
     <view class="uni-common-mt item-box">
-      <text>fn2 trigger num:</text>
-      <text id="fn2-trigger-num">{{ dataInfo.fn2TriggerNum }}</text>
+      <text>appTheme:</text>
+      <text id="theme">{{ appTheme }}</text>
     </view>
-    <button class="uni-common-mt" id="bind-fn1" @click="bindFn1">
-      bind fn1
-    </button>
-    <button class="uni-common-mt" id="remove-fn1" @click="removeFn1">
-      remove fn1
-    </button>
-    <button class="uni-common-mt" id="bind-fn2" @click="bindFn2">
-      bind fn2
-    </button>
-    <button class="uni-common-mt" id="remove-fn2" @click="removeFn2">
-      remove fn2
-    </button>
-  </view>
-</template>
-
-<script setup lang="uts">
-type DataInfo = {
-  fn1TriggerNum: number
-  fn2TriggerNum: number
-  theme: string
-
-}
-
-const dataInfo = reactive<DataInfo>({
-  fn1TriggerNum: 0,
-  fn2TriggerNum: 0,
-  theme: ''
-})
 
-const fn1 = (options : OnThemeChangeOptions) => {
-  dataInfo.fn1TriggerNum++
-  console.log('fn1 triggered options: ', options)
-  dataInfo.theme = options.theme
-}
-
-const fn2 = (options : OnThemeChangeOptions) => {
-  dataInfo.fn2TriggerNum++
-  console.log('fn2 triggered options: ', options)
-  dataInfo.theme = options.theme
-}
-
-const bindFn1 = () => {
-  uni.onOSThemeChange(fn1)
-}
-const removeFn1 = () => {
-  uni.offOSThemeChange(fn1)
-}
-const bindFn2 = () => {
-  uni.onOSThemeChange(fn2)
-}
-const removeFn2 = () => {
-  uni.offOSThemeChange(fn2)
-}
-
-onReady(() => {
-  bindFn1()
-  bindFn2()
-})
-</script>
-
-<style>
-.item-box {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
+    <view>
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 修改appTheme主题 </text>
+      </view>
+    </view>
+    <view class="uni-list uni-common-pl">
+      <radio-group @change="radioChange" class="radio-group">
+        <radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in items" :key="item"
+          :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item"
+          :checked="index === current">
+          {{ item }}
+        </radio>
+      </radio-group>
+    </view>
+
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        osThemeChangeId: 0,
+        appThemeChangeId: 0,
+        osTheme: "light" as string,
+        appTheme: "light" as string,
+        current: 0,
+        items: [
+          "light",
+          "dark",
+          "auto"
+        ] as string[]
+      }
+    },
+    methods: {
+      bindOsThemeChange(): number {
+        return uni.onOsThemeChange(function(res: OsThemeChangeResult) {
+          this.osTheme = res.osTheme
+        })
+      },
+      bindAppThemeChange(): number {
+        return uni.onAppThemeChange(function(res: AppThemeChangeResult) {
+          this.appTheme = res.appTheme
+        })
+      },
+      radioChange(e : UniRadioGroupChangeEvent) {
+        const theme = e.detail.value
+        setAppTheme(theme)
+        uni.showToast({
+          icon: 'none',
+          title: '当前选中:'+theme,
+        })
+      },
+      setAppTheme(value: string) {
+        uni.setAppTheme({
+          theme: value,
+          success: function() {
+            console.log("设置appTheme为", value, "成功")
+          },
+          fail: function(e: IAppThemeFail) {
+            console.log("设置appTheme为", value, "失败,原因:", e.errMsg)
+          }
+        })
+      }
+    },
+    onReady() {
+      uni.getSystemInfo({
+        success: (res:GetSystemInfoResult) => {
+          this.osTheme = res.osTheme!
+          this.appTheme = res.appTheme!
+          this.current = this.items.indexOf(this.appTheme)
+        }
+      })
+      this.osThemeChangeId = bindOsThemeChange()
+      this.appThemeChangeId = bindAppThemeChange()
+    }
+  }
+</script>
+
+<style>
+  .item-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .uni-list-cell {
+    justify-content: flex-start;
+  }
 </style>

pages/tabBar/API.uvue

@@ -500,6 +500,16 @@
                 url: 'facial-recognition-verify',
               }
             ] as Page[],
+          },
+          {
+            id: 'theme-change',
+            name: '主题切换',
+            pages: [
+              {
+                name: '主题切换',
+                url: 'theme-change',
+              }
+            ] as Page[]
           },
           // #endif
           {
@@ -546,16 +556,6 @@
               }
             ] as Page[]
           },
-          // {
-          //   id: 'theme-change',
-          //   name: '主题切换',
-          //   pages: [
-          //     {
-          //       name: '主题切换',
-          //       url: 'theme-change',
-          //     }
-          //   ] as Page[]
-          // },
           // #endif
           /*
           {