feat(API): theme change

pages.json

@@ -1310,6 +1310,13 @@
         "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.uvue

+<template>
+  <view class="uni-padding-wrap">
+    <view class="uni-common-mt flex justify-between flex-row">
+      <text>theme:</text>
+      <text id="theme">{{ dataInfo.theme }}</text>
+    </view>
+    <view class="uni-common-mt flex justify-between flex-row">
+      <text>fn1 trigger num:</text>
+      <text id="fn1-trigger-num">{{ dataInfo.fn1TriggerNum }}</text>
+    </view>
+    <view class="uni-common-mt flex justify-between flex-row">
+      <text>fn2 trigger num:</text>
+      <text id="fn2-trigger-num">{{ dataInfo.fn2TriggerNum }}</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>
+.flex {
+  display: flex;
+}
+.flex-row {
+  flex-direction: row;
+}
+.justify-between {
+  justify-content: space-between;
+}
+</style>

pages/tabBar/API.uvue

@@ -8,26 +8,28 @@
       </view>
       <view class="uni-text-box">
         <text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
-        <u-link :href="'https://uniapp.dcloud.io/uni-app-x/api/'" :text="'https://uniapp.dcloud.io/uni-app-x/api/'" :inWhiteList="true"></u-link>
+        <u-link :href="'https://uniapp.dcloud.io/uni-app-x/api/'" :text="'https://uniapp.dcloud.io/uni-app-x/api/'"
+          :inWhiteList="true"></u-link>
       </view>
 
       <uni-collapse>
         <template v-for="item in list" :key="item.id">
           <uni-collapse-item :title="item.name" class="item">
-            <view class="uni-navigate-item" :hover-class="page.enable == false?'':'is--active'" v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
-              <text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
+            <view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
+              v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
+              <text class="uni-navigate-text"
+                :class="page.enable == false ? 'text-disabled' : ''">{{ page.name }}</text>
               <image :src="arrowRightIcon" class="uni-icon-size"></image>
             </view>
           </uni-collapse-item>
         </template>
       </uni-collapse>
-
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
   <view ref="pop" @click="hidePop()" class="popup">
-    <view style="width: 90%;background-color: white;" @click="stopClickPop">
+    <view style="width: 90%; background-color: white" @click="stopClickPop">
       <api-set-tabbar></api-set-tabbar>
     </view>
   </view>
@@ -532,6 +534,16 @@
               }
             ] as Page[]
           },
+          {
+            id: 'theme-change',
+            name: '主题切换',
+            pages: [
+              {
+                name: '主题切换',
+                url: 'theme-change',
+              }
+            ] as Page[]
+          },
           // #endif
           /*
           {