feat: set custom navigation bar color

pages.json

@@ -243,6 +243,13 @@
         "navigationBarTitleText": "设置导航条颜色"
       }
     },
+    {
+      "path": "pages/API/set-navigation-bar-color/set-custom-navigation-bar-color",
+      "style": {
+        "navigationBarTitleText": "设置自定义导航栏颜色",
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/API/navigator/new-page/new-page-1",
       "style": {
@@ -335,48 +342,48 @@
       "style": {
         "navigationBarTitleText": "background-image"
       }
-    },
-    {
-      "path": "pages/CSS/border/border-bottom",
-      "style": {
-        "navigationBarTitleText": "border-bottom"
-      }
+    },
+    {
+      "path": "pages/CSS/border/border-bottom",
+      "style": {
+        "navigationBarTitleText": "border-bottom"
+      }
     },
     {
       "path": "pages/CSS/border/border-color",
       "style": {
         "navigationBarTitleText": "border-color"
       }
-    },
-    {
-      "path": "pages/CSS/border/border-left",
-      "style": {
-        "navigationBarTitleText": "border-left"
-      }
+    },
+    {
+      "path": "pages/CSS/border/border-left",
+      "style": {
+        "navigationBarTitleText": "border-left"
+      }
     },
     {
       "path": "pages/CSS/border/border-radius",
       "style": {
         "navigationBarTitleText": "border-radius"
       }
-    },
-    {
-      "path": "pages/CSS/border/border-right",
-      "style": {
-        "navigationBarTitleText": "border-right"
-      }
+    },
+    {
+      "path": "pages/CSS/border/border-right",
+      "style": {
+        "navigationBarTitleText": "border-right"
+      }
     },
     {
       "path": "pages/CSS/border/border-style",
       "style": {
         "navigationBarTitleText": "border-style"
       }
-    },
-    {
-      "path": "pages/CSS/border/border-top",
-      "style": {
-        "navigationBarTitleText": "border-top"
-      }
+    },
+    {
+      "path": "pages/CSS/border/border-top",
+      "style": {
+        "navigationBarTitleText": "border-top"
+      }
     },
     {
       "path": "pages/CSS/border/border-width",
@@ -901,30 +908,33 @@
       "style": {
         "navigationStyle": "custom"
       }
-    }, {
+    },
+    {
       "path": "pages/API/unicloud-file-api/unicloud-file-api",
       "style": {
         "navigationBarTitleText": ""
       }
-
-    }, {
+    },
+    {
       "path": "pages/API/unicloud-database/unicloud-database",
       "style": {
         "navigationBarTitleText": ""
       }
-
-    }, {
+    },
+    {
       "path": "pages/template/navbar-lite/navbar-lite",
       "style": {
         "navigationBarTitleText": "自定义导航栏",
         "navigationStyle": "custom"
       }
-    }, {
+    },
+    {
       "path": "pages/template/custom-tab-bar/custom-tab-bar",
       "style": {
         "navigationBarTitleText": "自定义TabBar"
       }
-    }, {
+    },
+    {
       "path": "pages/template/custom-tab-bar2/custom-tab-bar2",
       "style": {
         "navigationBarTitleText": "自定义TabBar2"
@@ -980,4 +990,4 @@
       "query": "" //启动参数，在页面的onLoad函数里面得到
     }]
   }
-}
+}
\ No newline at end of file

pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.test.js

+const CURRENT_PAGE_PATH =
+  "/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color";
+
+describe("setCustomNavigationBarColor", () => {
+  let page;
+  let originLifeCycleNum;
+  beforeAll(async () => {
+    page = await program.navigateTo(CURRENT_PAGE_PATH);
+    await page.waitFor(1000);
+    originLifeCycleNum = await page.callMethod("getLifeCycleNum");
+  });
+
+  afterAll(async () => {
+    await page.callMethod("setLifeCycleNum", originLifeCycleNum);
+    const lifeCycleNum = await page.callMethod("getLifeCycleNum");
+    expect(lifeCycleNum).toBe(originLifeCycleNum);
+  });
+
+  it("setNavigationBarColor2", async () => {
+    await page.callMethod("setNavigationBarColor2");
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it("setNavigationBarColor1", async () => {
+    await page.callMethod("setNavigationBarColor1");
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  });
+});

pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.uvue

+<template>
+  <view>
+    <view class="custom-navigation">
+      <text
+        class="back-icon"
+        @click="back"
+        :style="`color:${navigationBarTextColor}`"
+        >{{ backIcon }}</text
+      >
+      <text class="title" :style="`color:${navigationBarTextColor}`"
+        >自定义导航栏</text
+      >
+    </view>
+    <page-head title="setCustomNavigationBarColor"></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>
+  </view>
+</template>
+
+<script lang="uts">
+import { state, setLifeCycleNum } from '@/store/index.uts'
+
+export default {
+  data() {
+    return {
+      backIcon: '\ue582',
+      navigationBarTextColor: '#fff'
+    }
+  },
+  onShow(){
+    uni.loadFontFace({
+      family: 'UniFontFamily',
+      source: 'static/font/uni.ttf'
+    })
+  },
+  methods: {
+    back(){
+      uni.navigateBack()
+    },
+    setNavigationBarColor1() {
+      uni.setNavigationBarColor({
+        frontColor: '#ffffff',
+        backgroundColor: '#0000',
+        success() {
+          this.navigationBarTextColor = '#fff'
+          console.log('setNavigationBarColor success')
+        },
+        fail() {
+          console.log('setNavigationBarColor success')
+        },
+        complete() {
+          console.log('setNavigationBarColor success')
+        }
+      })
+    },
+    setNavigationBarColor2() {
+      uni.setNavigationBarColor({
+        frontColor: '#000000',
+        backgroundColor: '#0000',
+        success() {
+          this.navigationBarTextColor = '#000'
+          console.log('setNavigationBarColor success')
+        },
+        fail() {
+          console.log('setNavigationBarColor success')
+        },
+        complete() {
+          console.log('setNavigationBarColor success')
+        }
+      })
+    },
+    // 自动化测试
+    getLifeCycleNum(): number {
+      return state.lifeCycleNum
+    },
+    // 自动化测试
+    setLifeCycleNum(num: number) {
+      setLifeCycleNum(num)
+    },
+  },
+}
+</script>
+
+<style>
+.custom-navigation {
+  padding-top: 40px;
+  padding-bottom: 10px;
+  background-color: #007aff;
+}
+.custom-navigation > .title {
+  margin: 0 auto;
+}
+.custom-navigation > .back-icon {
+  position: absolute;
+  font-family: UniFontFamily;
+  font-size: 20px;
+  left: 10px;
+}
+</style>

pages/API/set-navigation-bar-color/set-navigation-bar-color.test.js

@@ -4,7 +4,6 @@ const CURRENT_PAGE_PATH =
 describe('setNavigationBarColor', () => {
   let page
   let originLifeCycleNum
-  let lifeCycleNum
   beforeAll(async () => {
     page = await program.navigateTo(CURRENT_PAGE_PATH)
     await page.waitFor(1000)
@@ -13,7 +12,7 @@ describe('setNavigationBarColor', () => {
 
   afterAll(async () => {
     await page.callMethod('setLifeCycleNum', originLifeCycleNum)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    const lifeCycleNum = await page.callMethod('getLifeCycleNum')
     expect(lifeCycleNum).toBe(originLifeCycleNum)
   })
 

pages/API/set-navigation-bar-color/set-navigation-bar-color.uvue

@@ -8,19 +8,17 @@
       <button @tap="setNavigationBarColor2" class="uni-btn">
         设置导航条背景红色，标题黑色
       </button>
+      <button @tap="goCustomNavigation" class="uni-btn">
+        跳转自定义导航栏页面
+      </button>
     </view>
   </view>
 </template>
 
 <script lang="uts">
-import { State, state, setLifeCycleNum } from '@/store/index.uts'
+import { state, setLifeCycleNum } from '@/store/index.uts'
 
 export default {
-	data() {
-    return {
-			_state: state as State
-		}
-	},
   methods: {
     setNavigationBarColor1() {
       uni.setNavigationBarColor({
@@ -28,36 +26,30 @@ export default {
         backgroundColor: '#00ff00',
         success() {
           console.log('setNavigationBarColor success')
-          setLifeCycleNum(state.lifeCycleNum + 1)
         },
         fail() {
           console.log('setNavigationBarColor success')
-          setLifeCycleNum(state.lifeCycleNum - 1)
         },
         complete() {
           console.log('setNavigationBarColor success')
-          setLifeCycleNum(state.lifeCycleNum + 1)
         }
       })
     },
-		setNavigationBarColor2() {
-		  uni.setNavigationBarColor({
-		    frontColor: '#000000',
-		    backgroundColor: '#ff0000',
-		    success() {
-		      console.log('setNavigationBarColor success')
-		      setLifeCycleNum(state.lifeCycleNum + 1)
-		    },
-		    fail() {
-		      console.log('setNavigationBarColor success')
-		      setLifeCycleNum(state.lifeCycleNum - 1)
-		    },
-		    complete() {
-		      console.log('setNavigationBarColor success')
-		      setLifeCycleNum(state.lifeCycleNum + 1)
-		    }
-		  })
-		},
+    setNavigationBarColor2() {
+      uni.setNavigationBarColor({
+        frontColor: '#000000',
+        backgroundColor: '#ff0000',
+        success() {
+          console.log('setNavigationBarColor success')
+        },
+        fail() {
+          console.log('setNavigationBarColor success')
+        },
+        complete() {
+          console.log('setNavigationBarColor success')
+        }
+      })
+    },
     // 自动化测试
     getLifeCycleNum(): number {
       return state.lifeCycleNum
@@ -66,6 +58,11 @@ export default {
     setLifeCycleNum(num: number) {
       setLifeCycleNum(num)
     },
+    goCustomNavigation(){
+      uni.navigateTo({
+        url: '/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color'
+      })
+    }
   },
 }
 </script>