feat(App): navigationBar

packages/uni-app-plus/dist/uni-app-service.es.js

@@ -4844,6 +4844,47 @@ var serviceContext = (function (vue) {
       desc: Object,
   };
 
+  const FRONT_COLORS = ['#ffffff', '#000000'];
+  const API_SET_NAVIGATION_BAR_COLOR = 'setNavigationBarColor';
+  const SetNavigationBarColorOptions = {
+      formatArgs: {
+          animation(animation, params) {
+              if (!animation) {
+                  animation = { duration: 0, timingFunc: 'linear' };
+              }
+              params.animation = {
+                  duration: animation.duration || 0,
+                  timingFunc: animation.timingFunc || 'linear',
+              };
+          },
+      },
+  };
+  const SetNavigationBarColorProtocol = {
+      frontColor: {
+          type: String,
+          required: true,
+          validator(frontColor) {
+              if (FRONT_COLORS.indexOf(frontColor) === -1) {
+                  return `invalid frontColor "${frontColor}"`;
+              }
+          },
+      },
+      backgroundColor: {
+          type: String,
+          required: true,
+      },
+      animation: Object,
+  };
+  const API_SET_NAVIGATION_BAR_TITLE = 'setNavigationBarTitle';
+  const SetNavigationBarTitleProtocol = {
+      title: {
+          type: String,
+          required: true,
+      },
+  };
+  const API_SHOW_NAVIGATION_BAR_LOADING = 'showNavigationBarLoading';
+  const API_HIDE_NAVIGATION_BAR_LOADING = 'hideNavigationBarLoading';
+
   const API_PAGE_SCROLL_TO = 'pageScrollTo';
   const PageScrollToProtocol = {
       scrollTop: Number,
@@ -5603,6 +5644,12 @@ var serviceContext = (function (vue) {
       }
       return null;
   }
+  function getWebview(page) {
+      if (page) {
+          return page.$getAppWebview();
+      }
+      return getCurrentWebview();
+  }
   let pullDownRefreshWebview = null;
   function getPullDownRefreshWebview() {
       return pullDownRefreshWebview;
@@ -8474,6 +8521,72 @@ var serviceContext = (function (vue) {
       UniServiceJSBridge.invokeViewMethod(PAGE_SCROLL_TO, options, pageId, resolve);
   }, PageScrollToProtocol, PageScrollToOptions);
 
+  const setNavigationBarTitle = defineAsyncApi(API_SET_NAVIGATION_BAR_TITLE, ({ __page__, title }, { resolve, reject }) => {
+      const webview = getWebview(__page__);
+      if (webview) {
+          const style = webview.getStyle();
+          if (style && style.titleNView) {
+              webview.setStyle({
+                  titleNView: {
+                      titleText: title
+                  }
+              });
+          }
+          resolve();
+      }
+      else {
+          reject();
+      }
+  }, SetNavigationBarTitleProtocol);
+  const showNavigationBarLoading = defineAsyncApi(API_SHOW_NAVIGATION_BAR_LOADING, (_, { resolve }) => {
+      plus.nativeUI.showWaiting('', {
+          modal: false
+      });
+      resolve();
+  });
+  const hideNavigationBarLoading = defineAsyncApi(API_HIDE_NAVIGATION_BAR_LOADING, (_, { resolve }) => {
+      plus.nativeUI.closeWaiting();
+      resolve();
+  });
+  function setPageMeta(statusBarStyle) {
+      const pages = getCurrentPages();
+      if (!pages.length) {
+          return;
+      }
+      // 框架内部页面跳转会从这里获取style配置
+      pages[pages.length - 1].$page.statusBarStyle = statusBarStyle;
+  }
+  const setNavigationBarColor = defineAsyncApi(API_SET_NAVIGATION_BAR_COLOR, ({ __page__, frontColor, backgroundColor }, { resolve, reject }) => {
+      const webview = getWebview(__page__);
+      if (webview) {
+          const styles = {};
+          if (frontColor) {
+              styles.titleColor = frontColor;
+          }
+          if (backgroundColor) {
+              styles.backgroundColor = backgroundColor;
+          }
+          const statusBarStyle = frontColor === '#000000' ? 'dark' : 'light';
+          plus.navigator.setStatusBarStyle(statusBarStyle);
+          // 用户调用api时同时改变当前页配置，这样在系统调用设置时，可以避免覆盖用户设置
+          setPageMeta(statusBarStyle);
+          const style = webview.getStyle();
+          if (style && style.titleNView) {
+              if (style.titleNView.autoBackButton) {
+                  styles.backButton = styles.backButton || {};
+                  styles.backButton.color = frontColor;
+              }
+              webview.setStyle({
+                  titleNView: styles
+              });
+          }
+          resolve();
+      }
+      else {
+          reject();
+      }
+  }, SetNavigationBarColorProtocol, SetNavigationBarColorOptions);
+
   const providers = {
       oauth(callback) {
           plus.oauth.getServices((services) => {
@@ -11093,6 +11206,10 @@ var serviceContext = (function (vue) {
     stopPullDownRefresh: stopPullDownRefresh,
     loadFontFace: loadFontFace,
     pageScrollTo: pageScrollTo,
+    setNavigationBarTitle: setNavigationBarTitle,
+    showNavigationBarLoading: showNavigationBarLoading,
+    hideNavigationBarLoading: hideNavigationBarLoading,
+    setNavigationBarColor: setNavigationBarColor,
     getProvider: getProvider,
     login: login,
     getUserInfo: getUserInfo,

packages/uni-app-plus/src/service/api/index.ts

@@ -48,6 +48,7 @@ export * from './ui/startPullDownRefresh'
 export * from './ui/stopPullDownRefresh'
 export * from './ui/loadFontFace'
 export * from './ui/pageScrollTo'
+export * from './ui/navigationBar'
 
 export * from './plugin/getProvider'
 export * from './plugin/oauth'

packages/uni-app-plus/src/service/api/ui/navigationBar.ts

+import { ComponentPublicInstance } from 'vue'
+import {
+  defineAsyncApi,
+  API_SET_NAVIGATION_BAR_COLOR,
+  API_SET_NAVIGATION_BAR_TITLE,
+  API_SHOW_NAVIGATION_BAR_LOADING,
+  API_HIDE_NAVIGATION_BAR_LOADING,
+  API_TYPE_SET_NAVIGATION_BAR_COLOR,
+  API_TYPE_SET_NAVIGATION_BAR_TITLE,
+  API_TYPE_SHOW_NAVIGATION_BAR_LOADING,
+  API_TYPE_HIDE_NAVIGATION_BAR_LOADING,
+  SetNavigationBarColorOptions,
+  SetNavigationBarColorProtocol,
+  SetNavigationBarTitleProtocol,
+} from '@dcloudio/uni-api'
+import { getWebview } from '../../../service/utils'
+import { StatusBarStyle } from '../../statusBar'
+
+interface SetNavigationBarTitleOptions
+  extends UniApp.SetNavigationBarTitleOptions {
+  __page__?: ComponentPublicInstance
+}
+
+export const setNavigationBarTitle =
+  defineAsyncApi<API_TYPE_SET_NAVIGATION_BAR_TITLE>(
+    API_SET_NAVIGATION_BAR_TITLE,
+    (
+      { __page__, title }: SetNavigationBarTitleOptions,
+      { resolve, reject }
+    ) => {
+      const webview = getWebview(__page__)
+      if (webview) {
+        const style = webview.getStyle()
+        if (style && style.titleNView) {
+          webview.setStyle({
+            titleNView: {
+              titleText: title,
+            },
+          })
+        }
+        resolve()
+      } else {
+        reject()
+      }
+    },
+    SetNavigationBarTitleProtocol
+  )
+
+export const showNavigationBarLoading =
+  defineAsyncApi<API_TYPE_SHOW_NAVIGATION_BAR_LOADING>(
+    API_SHOW_NAVIGATION_BAR_LOADING,
+    (_, { resolve }) => {
+      plus.nativeUI.showWaiting('', {
+        modal: false,
+      })
+      resolve()
+    }
+  )
+
+export const hideNavigationBarLoading =
+  defineAsyncApi<API_TYPE_HIDE_NAVIGATION_BAR_LOADING>(
+    API_HIDE_NAVIGATION_BAR_LOADING,
+    (_, { resolve }) => {
+      plus.nativeUI.closeWaiting()
+      resolve()
+    }
+  )
+
+function setPageMeta(statusBarStyle: StatusBarStyle) {
+  const pages = getCurrentPages()
+  if (!pages.length) {
+    return
+  }
+  // 框架内部页面跳转会从这里获取style配置
+  pages[pages.length - 1].$page.statusBarStyle = statusBarStyle
+}
+
+interface SetNavigationbarColorOptions
+  extends UniApp.SetNavigationbarColorOptions {
+  __page__?: ComponentPublicInstance
+}
+
+export const setNavigationBarColor =
+  defineAsyncApi<API_TYPE_SET_NAVIGATION_BAR_COLOR>(
+    API_SET_NAVIGATION_BAR_COLOR,
+    (
+      { __page__, frontColor, backgroundColor }: SetNavigationbarColorOptions,
+      { resolve, reject }
+    ) => {
+      const webview = getWebview(__page__)
+      if (webview) {
+        const styles: PlusWebviewWebviewTitleNViewStyles = {}
+        if (frontColor) {
+          styles.titleColor = frontColor
+        }
+        if (backgroundColor) {
+          styles.backgroundColor = backgroundColor
+        }
+        const statusBarStyle = frontColor === '#000000' ? 'dark' : 'light'
+        plus.navigator.setStatusBarStyle(statusBarStyle)
+
+        // 用户调用api时同时改变当前页配置，这样在系统调用设置时，可以避免覆盖用户设置
+        setPageMeta(statusBarStyle)
+
+        const style = webview.getStyle()
+        if (style && style.titleNView) {
+          if (style.titleNView.autoBackButton) {
+            styles.backButton = styles.backButton || {}
+            styles.backButton.color = frontColor
+          }
+          webview.setStyle({
+            titleNView: styles,
+          })
+        }
+        resolve()
+      } else {
+        reject()
+      }
+    },
+    SetNavigationBarColorProtocol,
+    SetNavigationBarColorOptions
+  )

packages/uni-app-plus/src/service/utils.ts

@@ -9,6 +9,13 @@ export function getCurrentWebview() {
   return null
 }
 
+export function getWebview(page?: ComponentPublicInstance) {
+  if (page) {
+    return page.$getAppWebview!()
+  }
+  return getCurrentWebview()
+}
+
 let pullDownRefreshWebview: PlusWebviewWebviewObject | null = null
 
 export function getPullDownRefreshWebview() {