补充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>
+      <text>osTheme:</text>
+      <text id="theme">{{ osTheme }}</text>
     </view>
     <view class="uni-common-mt item-box">
-      <text>fn1 trigger num:</text>
-      <text id="fn1-trigger-num">{{ dataInfo.fn1TriggerNum }}</text>
+      <text>appTheme:</text>
+      <text id="theme">{{ appTheme }}</text>
     </view>
-    <view class="uni-common-mt item-box">
-      <text>fn2 trigger num:</text>
-      <text id="fn2-trigger-num">{{ dataInfo.fn2TriggerNum }}</text>
+
+    <view>
+      <view class="uni-title uni-common-mt">
+        <text class="uni-title-text"> 修改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
-}
+    <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>
 
-const bindFn1 = () => {
-  uni.onOSThemeChange(fn1)
-}
-const removeFn1 = () => {
-  uni.offOSThemeChange(fn1)
-}
-const bindFn2 = () => {
-  uni.onOSThemeChange(fn2)
-}
-const removeFn2 = () => {
-  uni.offOSThemeChange(fn2)
-}
+  </view>
+</template>
 
-onReady(() => {
-  bindFn1()
-  bindFn2()
-})
+<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 {
+  .item-box {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-}
+  }
+  .uni-list-cell {
+    justify-content: flex-start;
+  }
 </style>

pages/tabBar/API.uvue

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