refactor(h5): add onNavigationBarChange

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)

src/platforms/h5/components/page/index.vue

 <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>

src/platforms/h5/components/system-routes/system-header.vue

-<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>

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
     }
   }