From 6d6b6948083906c8a2cf5382ecbdf638a8ecabe9 Mon Sep 17 00:00:00 2001
From: fxy060608 <fxy060608@gmail.com>
Date: Fri, 27 Mar 2020 17:17:28 +0800
Subject: [PATCH] refactor(h5): add onNavigationBarChange

---
 src/core/service/plugins/app/router-guard.js  |  19 +-
 src/platforms/h5/components/page/index.vue    |  72 +++----
 .../system-routes/system-header.vue           | 185 +++++++++---------
 .../h5/service/api/ui/navigation-bar.js       |  32 +--
 4 files changed, 135 insertions(+), 173 deletions(-)

diff --git a/src/core/service/plugins/app/router-guard.js b/src/core/service/plugins/app/router-guard.js
index d0889311a..04143f8b8 100644
--- a/src/core/service/plugins/app/router-guard.js
+++ b/src/core/service/plugins/app/router-guard.js
@@ -199,22 +199,11 @@ function afterEach (to, from) {
   if (to.type !== 'reLaunch') { // 因为 reLaunch 会重置 id，故不触发 onShow,switchTab 在 beforeRouteEnter 中触发
     // 直接获取所有 pages,getCurrentPages 正常情况下仅返回页面栈内，传 true 则返回所有已存在（主要是 tabBar 页面）
     const toVm = getCurrentPages(true).find(pageVm => pageVm.$page.id === toId) // 使用最新的 pages
-    if (toVm) { // 目标页面若已存在，则触发 onShow
+    if (toVm) { // 目标页面若已存在，则触发 onShow
       // 延迟执行 onShow，防止与 UniServiceJSBridge.emit('onHidePopup') 冲突。
-      setTimeout(function () {
-        if (__PLATFORM__ === 'h5') {
-          const navigationBar = toVm.$parent.$parent.navigationBar
-          if (typeof qh !== 'undefined') {
-            qh.setNavigationBarTitle({
-              title: document.title
-            })
-            qh.setNavigationBarColor({
-              backgroundColor: navigationBar.backgroundColor
-            })
-            qh.setNavigationBarTextStyle({
-              textStyle: navigationBar.textColor === '#000' ? 'black' : 'white'
-            })
-          }
+      setTimeout(function () {
+        if (__PLATFORM__ === 'h5') {
+          UniServiceJSBridge.emit('onNavigationBarChange', toVm.$parent.$parent.navigationBar)
         }
         callPageHook(toVm, 'onShow')
       }, 0)
diff --git a/src/platforms/h5/components/page/index.vue b/src/platforms/h5/components/page/index.vue
index 666edd7c4..fed247504 100644
--- a/src/platforms/h5/components/page/index.vue
+++ b/src/platforms/h5/components/page/index.vue
@@ -1,21 +1,19 @@
 <template>
   <uni-page :data-page="$route.meta.pagePath">
-    <page-head
-      v-if="navigationBar.type!=='none'"
+    <page-head
+      v-if="navigationBar.type!=='none'"
       v-bind="navigationBar" />
-    <page-refresh
-      v-if="enablePullDownRefresh"
-      ref="refresh"
-      :color="refreshOptions.color"
-      :offset="refreshOptions.offset"
-    />
-    <page-body
-      v-if="enablePullDownRefresh"
-      @touchstart.native="_touchstart"
+    <page-refresh
+      v-if="enablePullDownRefresh"
+      ref="refresh"
+      :color="refreshOptions.color"
+      :offset="refreshOptions.offset" />
+    <page-body
+      v-if="enablePullDownRefresh"
+      @touchstart.native="_touchstart"
       @touchmove.native="_touchmove"
-      @touchend.native="_touchend"
-      @touchcancel.native="_touchend"
-    >
+      @touchend.native="_touchend"
+      @touchcancel.native="_touchend">
       <slot name="page" />
     </page-body>
     <page-body v-else>
@@ -24,11 +22,11 @@
   </uni-page>
 </template>
 <style>
-uni-page {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
+  uni-page {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 </style>
 <script>
 import {
@@ -170,16 +168,18 @@ export default {
     let titleNView = this.titleNView
     if ( // 无头
       titleNView === false ||
-      titleNView === 'false' ||
-      (
-        this.navigationStyle === 'custom' &&
-        !isPlainObject(titleNView)
-      ) || (
+        titleNView === 'false' ||
+        (
+          this.navigationStyle === 'custom' &&
+          !isPlainObject(titleNView)
+        ) || (
         this.transparentTitle === 'always' &&
-        !isPlainObject(titleNView)
+          !isPlainObject(titleNView)
       )
     ) {
-      titleNView = { type: 'none' }
+      titleNView = {
+        type: 'none'
+      }
     } else {
       titleNView = Object.assign({}, {
         type: this.navigationStyle === 'custom' ? 'none' : 'default'
@@ -233,21 +233,9 @@ export default {
     }
   },
   created () {
-    if (__PLATFORM__ === 'h5') {
-      const navigationBar = this.navigationBar
-      document.title = navigationBar.titleText
-      if (typeof qh !== 'undefined') {
-        qh.setNavigationBarTitle({
-          title: document.title
-        })
-        qh.setNavigationBarColor({
-          backgroundColor: navigationBar.backgroundColor
-        })
-        qh.setNavigationBarTextStyle({
-          textStyle: navigationBar.textColor === '#000' ? 'black' : 'white'
-        })
-      }
-    }
+    const navigationBar = this.navigationBar
+    document.title = navigationBar.titleText
+    UniServiceJSBridge.emit('onNavigationBarChange', navigationBar)
   }
 }
-</script>
+</script>
diff --git a/src/platforms/h5/components/system-routes/system-header.vue b/src/platforms/h5/components/system-routes/system-header.vue
index 79800c346..38ef20acd 100644
--- a/src/platforms/h5/components/system-routes/system-header.vue
+++ b/src/platforms/h5/components/system-routes/system-header.vue
@@ -1,106 +1,103 @@
-<template>
-  <div class="system-header">
-    <div class="header-text">
-      <slot />
-    </div>
+<template>
+  <div class="system-header">
+    <div class="header-text">
+      <slot />
+    </div>
     <div
       class="header-btn header-back uni-btn-icon header-btn-icon"
-      @click="_back">&#xe601;</div>
+      @click="_back">&#xe601;</div>
     <div
       v-if="confirm"
       class="header-btn header-confirm"
-      @click="_confirm">
+      @click="_confirm">
       <svg
         class="header-btn-img"
         width="200px"
         height="200.00px"
         viewBox="0 0 1024 1024"
         version="1.1"
-        xmlns="http://www.w3.org/2000/svg">
-        <path d="M939.6960642844446 226.08613831111114c-14.635971697777777-13.725872355555557-37.719236835555556-13.070208568888889-51.445109191111115 1.6029502577777779L402.69993870222225 744.6571451733333 137.46159843555557 483.31364238222227c-14.344349013333334-14.12709944888889-37.392384-13.98030904888889-51.51948344888889 0.3640399644444444-14.12709944888889 14.30911886222222-13.945078897777778 37.392384 0.40122709333333334 51.482296319999996l291.8171704888889 287.48392106666665c0.10960327111111111 0.10960327111111111 0.2544366933333333 0.1448334222222222 0.3640399644444444 0.2544366933333333s0.1448334222222222 0.2544366933333333 0.2544366933333333 0.3640399644444444c2.293843057777778 2.1842397866666667 5.061329351111111 3.4231500799999997 7.719212373333333 4.879309937777777 1.3113264355555554 0.7652670577777777 2.43867648 1.8926159644444445 3.822419057777778 2.43867648 4.2960634311111106 1.6753664 8.846562417777779 2.548279751111111 13.361832391111111 2.548279751111111 4.769706666666666 0 9.539412195555554-0.9472864711111111 13.98030904888889-2.839903573333333 1.4933469866666664-0.6184766577777778 2.6578830222222223-1.8926159644444445 4.0416267377777775-2.6950701511111115 2.7302991644444448-1.6029502577777779 5.5702027377777785-2.9495068444444446 7.901232924444444-5.315766044444445 0.10960327111111111-0.10960327111111111 0.1448334222222222-0.2916238222222222 0.2544366933333333-0.40122709333333334 0.07241614222222222-0.10960327111111111 0.21920654222222222-0.1448334222222222 0.3268528355555555-0.2544366933333333L941.2579134577779 277.5273335466667C955.0953460622222 262.9305059555556 954.3320359822221 239.8844279466666 939.6960642844446 226.08613831111114z" />
-      </svg>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'SystemHeader',
-  props: {
-    confirm: {
-      type: Boolean,
-      default: false
-    }
-  },
-  created () {
-    if (__PLATFORM__ === 'h5') {
-      document.title = this.$slots.default[0].text
-      if (typeof qh !== 'undefined') {
-        qh.setNavigationBarTitle({
-          title: document.title
-        })
-      }
-    }
-  },
-  methods: {
-    _back () {
-      this.$emit('back')
-    },
-    _confirm () {
-      this.$emit('confirm')
-    }
-  }
-}
-</script>
-
-<style>
-
-.system-header {
-  position: relative;
-  width: 100%;
-  height: 44px;
-  color: #fff;
-  background-color: black;
-  padding: 0 44px;
-  text-align: center;
-  line-height: 44px;
-  font-size: 16px;
-  box-sizing: border-box;
-}
-
-.system-header * {
-  box-sizing: border-box;
-}
-
-.header-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.header-btn {
-  position: absolute;
-  width: 44px;
-  height: 44px;
-  top: 0;
-}
-
-.header-btn-img {
-  fill: #fff;
-  width: 50%;
-  height: 50%;
-  margin: 25%;
-}
-
-.header-back {
-  left: 0;
-}
-
-.header-confirm {
-  right: 0;
-}
-
-.header-btn-icon {
-  font-size: 27px;
-  line-height: 44px;
-}
+        xmlns="http://www.w3.org/2000/svg">
+        <path d="M939.6960642844446 226.08613831111114c-14.635971697777777-13.725872355555557-37.719236835555556-13.070208568888889-51.445109191111115 1.6029502577777779L402.69993870222225 744.6571451733333 137.46159843555557 483.31364238222227c-14.344349013333334-14.12709944888889-37.392384-13.98030904888889-51.51948344888889 0.3640399644444444-14.12709944888889 14.30911886222222-13.945078897777778 37.392384 0.40122709333333334 51.482296319999996l291.8171704888889 287.48392106666665c0.10960327111111111 0.10960327111111111 0.2544366933333333 0.1448334222222222 0.3640399644444444 0.2544366933333333s0.1448334222222222 0.2544366933333333 0.2544366933333333 0.3640399644444444c2.293843057777778 2.1842397866666667 5.061329351111111 3.4231500799999997 7.719212373333333 4.879309937777777 1.3113264355555554 0.7652670577777777 2.43867648 1.8926159644444445 3.822419057777778 2.43867648 4.2960634311111106 1.6753664 8.846562417777779 2.548279751111111 13.361832391111111 2.548279751111111 4.769706666666666 0 9.539412195555554-0.9472864711111111 13.98030904888889-2.839903573333333 1.4933469866666664-0.6184766577777778 2.6578830222222223-1.8926159644444445 4.0416267377777775-2.6950701511111115 2.7302991644444448-1.6029502577777779 5.5702027377777785-2.9495068444444446 7.901232924444444-5.315766044444445 0.10960327111111111-0.10960327111111111 0.1448334222222222-0.2916238222222222 0.2544366933333333-0.40122709333333334 0.07241614222222222-0.10960327111111111 0.21920654222222222-0.1448334222222222 0.3268528355555555-0.2544366933333333L941.2579134577779 277.5273335466667C955.0953460622222 262.9305059555556 954.3320359822221 239.8844279466666 939.6960642844446 226.08613831111114z" />
+      </svg>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SystemHeader',
+  props: {
+    confirm: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created () {
+    document.title = this.$slots.default[0].text
+    UniServiceJSBridge.emit('onNavigationBarChange', {
+      titleText: document.title,
+      textColor: '#fff',
+      backgroundColor: '#000'
+    })
+  },
+  methods: {
+    _back () {
+      this.$emit('back')
+    },
+    _confirm () {
+      this.$emit('confirm')
+    }
+  }
+}
+</script>
+
+<style>
+  .system-header {
+    position: relative;
+    width: 100%;
+    height: 44px;
+    color: #fff;
+    background-color: black;
+    padding: 0 44px;
+    text-align: center;
+    line-height: 44px;
+    font-size: 16px;
+    box-sizing: border-box;
+  }
+
+  .system-header * {
+    box-sizing: border-box;
+  }
+
+  .header-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .header-btn {
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    top: 0;
+  }
+
+  .header-btn-img {
+    fill: #fff;
+    width: 50%;
+    height: 50%;
+    margin: 25%;
+  }
+
+  .header-back {
+    left: 0;
+  }
+
+  .header-confirm {
+    right: 0;
+  }
+
+  .header-btn-icon {
+    font-size: 27px;
+    line-height: 44px;
+  }
 </style>
diff --git a/src/platforms/h5/service/api/ui/navigation-bar.js b/src/platforms/h5/service/api/ui/navigation-bar.js
index 0bcfc6f6a..6fabf175f 100644
--- a/src/platforms/h5/service/api/ui/navigation-bar.js
+++ b/src/platforms/h5/service/api/ui/navigation-bar.js
@@ -18,23 +18,15 @@ function setNavigationBar (type, args) {
 
         if (frontColor) {
           page.navigationBar.textColor = frontColor === '#000000' ? 'black' : 'white'
-          if (__PLATFORM__ === 'h5') {
-            if (typeof qh !== 'undefined') {
-              qh.setNavigationBarTextStyle({
-                textStyle: page.navigationBar.textColor
-              })
-            }
-          }
+          UniServiceJSBridge.emit('onNavigationBarChange', {
+            textColor: page.navigationBar.textColor
+          })
         }
         if (backgroundColor) {
           page.navigationBar.backgroundColor = backgroundColor
-          if (__PLATFORM__ === 'h5') {
-            if (typeof qh !== 'undefined') {
-              qh.setNavigationBarColor({
-                backgroundColor
-              })
-            }
-          }
+          UniServiceJSBridge.emit('onNavigationBarChange', {
+            backgroundColor
+          })
         }
         page.navigationBar.duration = duration + 'ms'
         page.navigationBar.timingFunc = timingFunc
@@ -50,14 +42,10 @@ function setNavigationBar (type, args) {
           title
         } = args
         page.navigationBar.titleText = title
-        if (__PLATFORM__ === 'h5') {
-          document.title = title
-          if (typeof qh !== 'undefined') {
-            qh.setNavigationBarTitle({
-              title: document.title
-            })
-          }
-        }
+        document.title = title
+        UniServiceJSBridge.emit('onNavigationBarChange', {
+          titleText: title
+        })
         break
     }
   }
-- 
GitLab