feat(setNavigationBarColor): 补充设置状态栏前景色、背景色示例及测试

54e414e2 · DCloud-WZF · dabf8c77 · 54e414e2 · 54e414e2 · 54e414e2
4 changed file
--- a/pages.json
+++ b/pages.json
@@ -7,7 +7,7 @@
        "navigationBarTitleText": "内置组件",
        "backgroundColor": "#F8F8F8"
      }
-    },
+    },
    {
      "path": "pages/component/view/view",
      "style": {
@@ -19,85 +19,84 @@
      "style": {
        "navigationBarTitleText": "scroll-view"
      }
-    },
-    {
-      "path": "pages/component/scroll-view/scroll-view-refresher",
-      "style": {
-        "navigationBarTitleText": "scroll-view-refresher"
-      }
-    },
-    {
-      "path": "pages/component/scroll-view/scroll-view-props",
-      "style": {
-        "navigationBarTitleText": "非下拉刷新的scroll-view属性示例"
-      }
-    },
-    {
-      "path": "pages/component/scroll-view/scroll-view-refresher-props",
-      "style": {
-        "navigationBarTitleText": "下拉刷新的scroll-view属性示例"
-      }
-    },
-    {
-      "path": "pages/component/scroll-view/scroll-view-custom-refresher-props",
-      "style": {
-        "navigationBarTitleText": "自定义下拉刷新的scroll-view属性示例"
-      }
-    },
-    {
-      "path": "pages/component/swiper/swiper",
-      "style": {
-        "navigationBarTitleText": "swiper"
-      }
-    },
-    {
-      "path": "pages/component/list-view/list-view",
-      "style": {
-        "navigationBarTitleText": "list-view"
-      }
-    },
-    {
-      "path": "pages/component/list-view/list-view-multiplex",
-      "style": {
-        "navigationBarTitleText": "list-view-multiplex"
-      }
-    },
-    {
-      "path" : "pages/component/list-view/list-view-multiplex-input",
-      "style" :
-      {
-        "navigationBarTitleText" : "list-view复用input",
-        "enablePullDownRefresh" : false
-      }
-    },
-    {
-      "path": "pages/component/list-view/list-view-multiplex-video",
-      "style": {
-        "navigationBarTitleText": "list-view-multiplex-video"
-      }
-    },
-    {
-      "path": "pages/component/list-view/list-view-children-in-slot",
-      "style": {
-        "navigationBarTitleText": "list-view-children-in-slot"
-      }
-    },
-    // #ifdef APP
-    {
-      "path": "pages/component/sticky-section/sticky-section",
-      "style": {
-        "navigationBarTitleText": "sticky-section"
-      }
-    },
-
-    {
-      "path": "pages/component/sticky-header/sticky-header",
-      "style": {
-        "navigationBarTitleText": "sticky-header",
-        "enablePullDownRefresh": false
-      }
-    },
-    //#endif
+    },
+    {
+      "path": "pages/component/scroll-view/scroll-view-refresher",
+      "style": {
+        "navigationBarTitleText": "scroll-view-refresher"
+      }
+    },
+    {
+      "path": "pages/component/scroll-view/scroll-view-props",
+      "style": {
+        "navigationBarTitleText": "非下拉刷新的scroll-view属性示例"
+      }
+    },
+    {
+      "path": "pages/component/scroll-view/scroll-view-refresher-props",
+      "style": {
+        "navigationBarTitleText": "下拉刷新的scroll-view属性示例"
+      }
+    },
+    {
+      "path": "pages/component/scroll-view/scroll-view-custom-refresher-props",
+      "style": {
+        "navigationBarTitleText": "自定义下拉刷新的scroll-view属性示例"
+      }
+    },
+    {
+      "path": "pages/component/swiper/swiper",
+      "style": {
+        "navigationBarTitleText": "swiper"
+      }
+    },
+    {
+      "path": "pages/component/list-view/list-view",
+      "style": {
+        "navigationBarTitleText": "list-view"
+      }
+    },
+    {
+      "path": "pages/component/list-view/list-view-multiplex",
+      "style": {
+        "navigationBarTitleText": "list-view-multiplex"
+      }
+    },
+    {
+      "path": "pages/component/list-view/list-view-multiplex-input",
+      "style": {
+        "navigationBarTitleText": "list-view复用input",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/component/list-view/list-view-multiplex-video",
+      "style": {
+        "navigationBarTitleText": "list-view-multiplex-video"
+      }
+    },
+    {
+      "path": "pages/component/list-view/list-view-children-in-slot",
+      "style": {
+        "navigationBarTitleText": "list-view-children-in-slot"
+      }
+    },
+    // #ifdef APP
+    {
+      "path": "pages/component/sticky-section/sticky-section",
+      "style": {
+        "navigationBarTitleText": "sticky-section"
+      }
+    },
+
+    {
+      "path": "pages/component/sticky-header/sticky-header",
+      "style": {
+        "navigationBarTitleText": "sticky-header",
+        "enablePullDownRefresh": false
+      }
+    },
+    //#endif
    {
      "path": "pages/component/text/text",
      "style": {
@@ -110,24 +109,24 @@
        "navigationBarTitleText": "text-props"
      }
    },
-    {
-      "path": "pages/component/rich-text/rich-text",
-      "style": {
-        "navigationBarTitleText": "rich-text"
-      }
-    },
-    {
-      "path": "pages/component/rich-text/rich-text-tags",
-      "style": {
-        "navigationBarTitleText": "rich-text-tags"
-      }
-    },
-    {
-      "path": "pages/component/rich-text/rich-text-complex",
-      "style": {
-        "navigationBarTitleText": "rich-text-complex"
-      }
-    },
+    {
+      "path": "pages/component/rich-text/rich-text",
+      "style": {
+        "navigationBarTitleText": "rich-text"
+      }
+    },
+    {
+      "path": "pages/component/rich-text/rich-text-tags",
+      "style": {
+        "navigationBarTitleText": "rich-text-tags"
+      }
+    },
+    {
+      "path": "pages/component/rich-text/rich-text-complex",
+      "style": {
+        "navigationBarTitleText": "rich-text-complex"
+      }
+    },
    {
      "path": "pages/component/progress/progress",
      "style": {
@@ -253,51 +252,51 @@
      "style": {
        "navigationBarTitleText": "redirectPage"
      }
-    },
-    {
-      "path": "pages/component/web-view/web-view",
-      "style": {
-        "navigationBarTitleText": "web-view"
-      }
-    },
-    {
-      "path": "pages/component/web-view-local/web-view-local",
-      "style": {
-        "navigationBarTitleText": "web-view-local"
-      }
-    },
-    // #ifndef APP-IOS
-    {
-      "path": "pages/component/unicloud-db-contacts/list",
-      "style": {
-        "navigationBarTitleText": "联系人",
-        "enablePullDownRefresh": true
-      }
-    },
-    {
-      "path": "pages/component/unicloud-db-contacts/add",
-      "style": {
-        "navigationBarTitleText": "新增联系人"
-      }
-    },
-    {
-      "path": "pages/component/unicloud-db-contacts/edit",
-      "style": {
-        "navigationBarTitleText": "编辑联系人"
-      }
-    },
-    {
-      "path": "pages/component/unicloud-db-contacts/detail",
-      "style": {
-        "navigationBarTitleText": ""
-      }
-    },
-    {
-      "path": "pages/component/mixin-datacom/mixin-datacom",
-      "style": {
-        "navigationBarTitleText": "mixinDatacom"
-      }
-    },
+    },
+    {
+      "path": "pages/component/web-view/web-view",
+      "style": {
+        "navigationBarTitleText": "web-view"
+      }
+    },
+    {
+      "path": "pages/component/web-view-local/web-view-local",
+      "style": {
+        "navigationBarTitleText": "web-view-local"
+      }
+    },
+    // #ifndef APP-IOS
+    {
+      "path": "pages/component/unicloud-db-contacts/list",
+      "style": {
+        "navigationBarTitleText": "联系人",
+        "enablePullDownRefresh": true
+      }
+    },
+    {
+      "path": "pages/component/unicloud-db-contacts/add",
+      "style": {
+        "navigationBarTitleText": "新增联系人"
+      }
+    },
+    {
+      "path": "pages/component/unicloud-db-contacts/edit",
+      "style": {
+        "navigationBarTitleText": "编辑联系人"
+      }
+    },
+    {
+      "path": "pages/component/unicloud-db-contacts/detail",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/component/mixin-datacom/mixin-datacom",
+      "style": {
+        "navigationBarTitleText": "mixinDatacom"
+      }
+    },
    // #endif
    {
      "path": "pages/component/general-attribute/general-attribute",
@@ -310,19 +309,19 @@
      "style": {
        "navigationBarTitleText": "general-event"
      }
-    },
-    {
-      "path": "pages/component/general-event/transition-event",
-      "style": {
-        "navigationBarTitleText": "transitionend事件"
-      }
-    },
-    {
-      "path": "pages/component/general-event/touch-event",
-      "style": {
-        "navigationBarTitleText": "touch-event"
-      }
-    },
+    },
+    {
+      "path": "pages/component/general-event/transition-event",
+      "style": {
+        "navigationBarTitleText": "transitionend事件"
+      }
+    },
+    {
+      "path": "pages/component/general-event/touch-event",
+      "style": {
+        "navigationBarTitleText": "touch-event"
+      }
+    },
    {
      "path": "pages/tabBar/API",
      "style": {
@@ -341,21 +340,21 @@
      "style": {
        "navigationBarTitleText": "getApp"
      }
-    },
+    },
    // #ifdef APP-ANDROID
    {
      "path": "pages/API/exit/exit",
      "style": {
        "navigationBarTitleText": "exit"
      }
-    },
-    {
-      "path": "pages/API/install-apk/install-apk",
-      "style": {
-        "navigationBarTitleText": "install-apk",
-        "enablePullDownRefresh": false
-      }
-    },
+    },
+    {
+      "path": "pages/API/install-apk/install-apk",
+      "style": {
+        "navigationBarTitleText": "install-apk",
+        "enablePullDownRefresh": false
+      }
+    },
    // #endif
    {
      "path": "pages/API/get-current-pages/get-current-pages",
@@ -381,6 +380,13 @@
        "navigationBarTitleText": "设置导航条颜色"
      }
    },
+    {
+      "path": "pages/API/set-navigation-bar-color/set-navigation-bar-color-custom-navigation",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "设置状态栏颜色"
+      }
+    },
    {
      "path": "pages/API/set-navigation-bar-title/set-navigation-bar-title",
      "style": {
@@ -533,7 +539,7 @@
      "style": {
        "navigationBarTitleText": "websocket-global"
      }
-    },
+    },
    // #ifndef APP-IOS
    {
      "path": "pages/API/unicloud-call-function/unicloud-call-function",
@@ -546,7 +552,7 @@
      "style": {
        "navigationBarTitleText": ""
      }
-    },
+    },
    // #endif
    {
      "path": "pages/API/get-system-info/get-system-info",
@@ -566,14 +572,14 @@
        "navigationBarTitleText": "get-app-base-info"
      }
    },
-    // #ifdef APP
+    // #ifdef APP
    {
      "path": "pages/API/get-system-setting/get-system-setting",
      "style": {
        "navigationBarTitleText": "get-system-setting"
      }
-    },
-    // #endif
+    },
+    // #endif
    // #ifndef WEB
    {
      "path": "pages/API/get-app-authorize-setting/get-app-authorize-setting",
@@ -586,7 +592,7 @@
      "style": {
        "navigationBarTitleText": "保存图片到相册"
      }
-    },
+    },
    // #endif
    {
      "path": "pages/API/preview-image/preview-image",
@@ -617,7 +623,7 @@
      "style": {
        "navigationBarTitleText": "event-bus"
      }
-    },
+    },
    // #ifndef APP-IOS
    {
      "path": "pages/API/unicloud-file-api/unicloud-file-api",
@@ -636,7 +642,7 @@
      "style": {
        "navigationBarTitleText": "电量"
      }
-    },
+    },
    // #endif
    {
      "path": "pages/API/get-window-info/get-window-info",
@@ -747,12 +753,12 @@
        "navigationBarTitleText": "border"
      }
    },
-    {
-      "path": "pages/CSS/border/complex-border/complex-border",
-      "style": {
-        "navigationBarTitleText": "border属性组合示例"
-      }
-    },
+    {
+      "path": "pages/CSS/border/complex-border/complex-border",
+      "style": {
+        "navigationBarTitleText": "border属性组合示例"
+      }
+    },
    {
      "path": "pages/CSS/box-shadow/box-shadow",
      "style": {
@@ -909,12 +915,12 @@
        "navigationBarTitleText": "margin"
      }
    },
-    {
-      "path": "pages/CSS/overflow/overflow",
-      "style": {
-        "navigationBarTitleText": "overflow"
-      }
-    },
+    {
+      "path": "pages/CSS/overflow/overflow",
+      "style": {
+        "navigationBarTitleText": "overflow"
+      }
+    },
    {
      "path": "pages/CSS/padding/padding-bottom",
      "style": {
@@ -1023,23 +1029,23 @@
        "navigationBarTitleText": "Scale"
      }
    },
-    {
-      "path": "pages/CSS/transform/rotate",
-      "style": {
-        "navigationBarTitleText": "Rotate"
-      }
-    },
-    {
-      "path": "pages/CSS/variable/variable",
-      "style": {
-        "navigationBarTitleText": "css 变量"
-      }
-    },
-    {
-      "path": "pages/tabBar/template",
-      "style": {
-        "navigationBarTitleText": "模板"
-      }
+    {
+      "path": "pages/CSS/transform/rotate",
+      "style": {
+        "navigationBarTitleText": "Rotate"
+      }
+    },
+    {
+      "path": "pages/CSS/variable/variable",
+      "style": {
+        "navigationBarTitleText": "css 变量"
+      }
+    },
+    {
+      "path": "pages/tabBar/template",
+      "style": {
+        "navigationBarTitleText": "模板"
+      }
    },
    {
      "path": "pages/template/list-news/list-news",
@@ -1076,14 +1082,14 @@
      "style": {
        "navigationStyle": "custom"
      }
-    },
+    },
    // #ifdef APP
    {
      "path": "pages/template/scroll-sticky/scroll-sticky",
      "style": {
        "navigationBarTitleText": "scroll-view自定义滚动吸顶"
      }
-    },
+    },
    // #endif
    {
      "path": "pages/template/scroll-fold-nav/scroll-fold-nav",
@@ -1103,7 +1109,7 @@
      "style": {
        "navigationBarTitleText": "半屏弹窗"
      }
-    },
+    },
    // #ifdef APP
    {
      "path": "pages/template/long-list/long-list",
@@ -1118,7 +1124,7 @@
        "navigationBarTitleText": "顶部banner长列表",
        "enablePullDownRefresh": true
      }
-    },
+    },
    // #endif
    {
      "path": "pages/template/pull-zoom-image/pull-zoom-image",
@@ -1138,22 +1144,22 @@
      "style": {
        "navigationBarTitleText": "自定义TabBar"
      }
-    },
-    // #ifdef WEB
-    {
-      "path": "pages/template/browser-canvas/browser-canvas",
-      "style": {
-        "navigationBarTitleText": "如何使用浏览器 canvas"
-      }
-    },
-    // #endif
-    // #ifdef APP-ANDROID
-    {
-      "path": "pages/template/calendar/calendar",
-      "style": {
-        "navigationBarTitleText": "日历"
-      }
-    },
+    },
+    // #ifdef WEB
+    {
+      "path": "pages/template/browser-canvas/browser-canvas",
+      "style": {
+        "navigationBarTitleText": "如何使用浏览器 canvas"
+      }
+    },
+    // #endif
+    // #ifdef APP-ANDROID
+    {
+      "path": "pages/template/calendar/calendar",
+      "style": {
+        "navigationBarTitleText": "日历"
+      }
+    },
    {
      "path": "pages/template/schema/schema",
      "style": {
@@ -1168,43 +1174,43 @@
      }
    },
    // #endif
-    {
-      "path": "pages/webview-screenshot-comparison/webview-screenshot-comparison",
-      "style": {
-        "navigationBarTitleText": "截图对比测试",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/webview-screenshot/webview-screenshot",
-      "style": {
-        "navigationBarTitleText": "webview 截图测试",
-        "navigationStyle": "custom"
-      }
-    },
-    // #ifdef APP
-    {
-      "path": "pages/API/rewarded-video-ad/rewarded-video-ad",
-      "style": {
-        "navigationBarTitleText": "激励视频广告",
-        "enablePullDownRefresh": false
-      }
-    },
-    {
-      "path": "pages/API/create-request-permission-listener/create-request-permission-listener",
-      "style": {
-        "navigationBarTitleText": "权限申请监听",
-        "enablePullDownRefresh": false
-      }
-    },
-    {
-      "path": "pages/API/request-payment/request-payment",
-      "style": {
-        "navigationBarTitleText": "支付",
-        "enablePullDownRefresh": false
-      }
-    }
-
+    {
+      "path": "pages/webview-screenshot-comparison/webview-screenshot-comparison",
+      "style": {
+        "navigationBarTitleText": "截图对比测试",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/webview-screenshot/webview-screenshot",
+      "style": {
+        "navigationBarTitleText": "webview 截图测试",
+        "navigationStyle": "custom"
+      }
+    },
+    // #ifdef APP
+    {
+      "path": "pages/API/rewarded-video-ad/rewarded-video-ad",
+      "style": {
+        "navigationBarTitleText": "激励视频广告",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/API/create-request-permission-listener/create-request-permission-listener",
+      "style": {
+        "navigationBarTitleText": "权限申请监听",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/API/request-payment/request-payment",
+      "style": {
+        "navigationBarTitleText": "支付",
+        "enablePullDownRefresh": false
+      }
+    }
+
    // #endif
  ],
  "globalStyle": {

--- a/pages/API/set-navigation-bar-color/set-navigation-bar-color-custom-navigation.test.js
+++ b/pages/API/set-navigation-bar-color/set-navigation-bar-color-custom-navigation.test.js
+const CURRENT_PAGE_PATH =
+  '/pages/API/set-navigation-bar-color/set-navigation-bar-color-custom-navigation'
+
+describe('set statusBar color', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('web')) {
+    it('dummyTest', async () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+
+  let page
+  const adbScreenShotArea = {
+    x: 880,
+    y: 0,
+    width: 60,
+    height: 60
+  };
+  if (process.env.uniTestPlatformInfo.startsWith('android 6')) {
+    adbScreenShotArea.x = 535
+    adbScreenShotArea.width = 90
+    adbScreenShotArea.height = 50
+  } else if (process.env.uniTestPlatformInfo.startsWith('android 12')) {
+    adbScreenShotArea.x = 1160
+    adbScreenShotArea.width = 70
+    adbScreenShotArea.height = 80
+  }
+  beforeAll(async () => {
+    page = await program.navigateTo(CURRENT_PAGE_PATH)
+    await page.waitFor(1000)
+  })
+
+  it("setNavigationBarColor1", async () => {
+    await page.callMethod("setNavigationBarColor1");
+    const image = await program.screenshot({
+      adb: true,
+      area: adbScreenShotArea
+    });
+    expect(image).toMatchImageSnapshot();
+  });
+  it("setNavigationBarColor2", async () => {
+    await page.callMethod("setNavigationBarColor2");
+    const image = await program.screenshot({
+      adb: true,
+      area: adbScreenShotArea
+    });
+    expect(image).toMatchImageSnapshot();
+  });
+})
--- a/pages/API/set-navigation-bar-color/set-navigation-bar-color-custom-navigation.uvue
+++ b/pages/API/set-navigation-bar-color/set-navigation-bar-color-custom-navigation.uvue
+<template>
+  <page-head title="setNavigationBarColor"></page-head>
+  <view class="uni-padding-wrap uni-common-mt">
+    <button @tap="setNavigationBarColor1" class="uni-btn">
+      设置状态栏背景绿色，文字白色
+    </button>
+    <button @tap="setNavigationBarColor2" class="uni-btn">
+      设置状态栏背景红色，文字黑色
+    </button>
+  </view>
+</template>
+
+<script>
+  export default {
+    methods: {
+      setNavigationBarColor1() {
+        uni.setNavigationBarColor({
+          frontColor: "#ffffff",
+          backgroundColor: "#00ff00",
+          success: () => {
+            console.log("setNavigationBarColor success");
+          },
+          fail: () => {
+            console.log("setNavigationBarColor fail");
+          },
+          complete: () => {
+            console.log("setNavigationBarColor complete");
+          },
+        });
+      },
+      setNavigationBarColor2() {
+        uni.setNavigationBarColor({
+          frontColor: "#000000",
+          backgroundColor: "#ff0000",
+          success: () => {
+            console.log("setNavigationBarColor success");
+          },
+          fail: () => {
+            console.log("setNavigationBarColor fail");
+          },
+          complete: () => {
+            console.log("setNavigationBarColor complete");
+          },
+        });
+      },
+    },
+  };
+</script>
--- a/pages/API/set-navigation-bar-color/set-navigation-bar-color.uvue
+++ b/pages/API/set-navigation-bar-color/set-navigation-bar-color.uvue
@@ -7,9 +7,12 @@
    <button @tap="setNavigationBarColor2" class="uni-btn">
      设置导航条背景红色，标题黑色
    </button>
-    <button @tap="goCustomNavigation" class="uni-btn">
+    <button @tap="goNavbarLite" class="uni-btn">
      跳转自定义导航栏页面
    </button>
+    <button @tap="goCustomNavigation" class="uni-btn">
+      跳转设置状态栏页面
+    </button>
  </view>
 </template>

@@ -62,10 +65,15 @@
      setLifeCycleNum(num : number) {
        setLifeCycleNum(num)
      },
-      goCustomNavigation() {
+      goNavbarLite() {
        uni.navigateTo({
          url: '/pages/template/navbar-lite/navbar-lite'
        })
+      },
+      goCustomNavigation(){
+        uni.navigateTo({
+          url: '/pages/API/set-navigation-bar-color/set-navigation-bar-color-custom-navigation'
+        })
      }
    },
  }