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": {
@@ -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"

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,15 +26,12 @@ 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)
         }
       })
     },
@@ -46,15 +41,12 @@ export default {
         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)
         }
       })
     },
@@ -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>