feat: add navigationbar flag

packages/global.d.ts

@@ -26,7 +26,9 @@ declare var __UNI_FEATURE_LEFTWINDOW__: boolean
 declare var __UNI_FEATURE_RIGHTWINDOW__: boolean
 declare var __UNI_FEATURE_RESPONSIVE__: boolean
 declare var __UNI_FEATURE_PULL_DOWN_REFRESH__: boolean
+declare var __UNI_FEATURE_NAVIGATIONBAR__: boolean
 declare var __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__: boolean
+declare var __UNI_FEATURE_NAVIGATIONBAR_SEARCHINPUT__: boolean
 // TODO
 declare var __uniRoutes: any
 declare var __uniConfig: UniApp.UniConfig

packages/shims-uni-app.d.ts

 declare namespace UniApp {
+  type ClassObj = Record<string, boolean>
+  type StyleObj = Record<string, any>
   type PLATFORM = keyof PagesJsonPagePlatformStyle
   interface LayoutWindowOptions {
     matchMedia?: {
@@ -21,7 +23,7 @@ declare namespace UniApp {
   }
 
   interface PageNavigationBarButton {
-    type?:
+    type:
       | 'none'
       | 'forward'
       | 'back'
@@ -30,17 +32,31 @@ declare namespace UniApp {
       | 'home'
       | 'menu'
       | 'close'
-    color?: string
+    color: string
     background?: string
+    badgeText?: string
     colorPressed?: string
     float?: 'right' | 'left'
-    fontWeight?: string
-    fontSize?: string
+    fontWeight?: any
+    fontSize: string
     fontSrc?: string
+    fontFamily?: string
     select?: boolean
-    text?: string
+    text: string
     width?: string
+    redDot?: boolean
   }
+
+  interface PageNavigationBarSearchInput {
+    autoFocus?: boolean
+    align?: 'center' | 'left' | 'right'
+    backgroundColor?: string
+    borderRadius?: string
+    placeholder?: string
+    placeholderColor?: string
+    disabled?: boolean
+  }
+
   interface PageNavigationBar {
     type?: 'default' | 'transparent' | 'float' | 'none'
     titleText?: string
@@ -52,6 +68,8 @@ declare namespace UniApp {
     shadowColorType?: 'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow'
     backButton?: boolean
     buttons?: PageNavigationBarButton[]
+    searchInput?: PageNavigationBarSearchInput
+    style?: 'default' | 'custom'
   }
   interface PageRefreshOptions {
     support: boolean
@@ -109,7 +127,7 @@ declare namespace UniApp {
     pages: PagesJsonPageOptions[]
     subpackages?: PagesJsonSubpackagesOptions[]
     subPackages?: PagesJsonSubpackagesOptions[]
-    globalStyle?: PagesJsonPageStyle
+    globalStyle: PagesJsonPageStyle
     tabBar?: {
       list: []
     }

packages/uni-h5/dist/uni-h5.esm.js

@@ -753,7 +753,7 @@ const afterEach = (to, from, failure) => {
   console.log("afterEach.id", history.state.__id__);
   console.log("afterEach", to, from, failure, JSON.stringify(history.state));
 };
-var TabBar = defineComponent({
+var TabBar = /* @__PURE__ */ defineComponent({
   name: "TabBar"
 });
 const pageMetaKey = PolySymbol(process.env.NODE_ENV !== "production" ? "pageMeta" : "pm");
@@ -8034,7 +8034,17 @@ const UniServiceJSBridge$1 = extend(ServiceJSBridge, {
     window.UniViewJSBridge.subscribeHandler(event2, args, pageId);
   }
 });
-var PageHead = defineComponent({
+const ICON_FONTS = {
+  none: "",
+  forward: "",
+  back: "",
+  share: "",
+  favorite: "",
+  home: "",
+  menu: "",
+  close: ""
+};
+var PageHead = /* @__PURE__ */ defineComponent({
   name: "PageHead",
   setup() {
     const pageMeta = usePageMeta();
@@ -8044,9 +8054,11 @@ var PageHead = defineComponent({
       clazz,
       style
     } = usePageHead(navigationBar);
+    const buttons = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ && userPageHeadButtons(navigationBar);
     return () => {
       const backButtonJsx = __UNI_FEATURE_PAGES__ ? createBackButtonJsx(navigationBar) : null;
-      const leftButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ ? createButtonsJsx("left", navigationBar) : [];
+      const leftButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ ? createButtonsJsx(buttons.left) : [];
+      const rightButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ ? createButtonsJsx(buttons.right) : [];
       return createVNode("uni-page-head", {
         "uni-page-head-type": navigationBar.type
       }, [createVNode("div", {
@@ -8054,7 +8066,9 @@ var PageHead = defineComponent({
         style: style.value
       }, [createVNode("div", {
         class: "uni-page-head-hd"
-      }, [backButtonJsx, ...leftButtonsJsx])], 6)], 8, ["uni-page-head-type"]);
+      }, [backButtonJsx, ...leftButtonsJsx, ...rightButtonsJsx]), createVNode("div", {
+        class: "uni-page-head-bd"
+      }, null)], 6)], 8, ["uni-page-head-type"]);
     };
   }
 });
@@ -8068,13 +8082,25 @@ function createBackButtonJsx(navigationBar) {
     }, [createTextVNode("\uE601")])]);
   }
 }
-function createButtonsJsx(float, navigationBar) {
-  if (isArray(navigationBar.buttons)) {
-    return navigationBar.buttons.filter((btn) => btn.float === float).map((btn, index2) => createVNode("div", {
-      key: index2
-    }, [createVNode("i", null, null)]));
-  }
-  return [];
+function createButtonsJsx(btns) {
+  return btns.map(({
+    btnClass,
+    btnStyle,
+    btnText,
+    badgeText,
+    iconStyle
+  }, index2) => {
+    return createVNode("div", {
+      key: index2,
+      class: btnClass,
+      style: btnStyle,
+      "badge-text": badgeText
+    }, [createVNode("i", {
+      class: "uni-btn-icon",
+      style: iconStyle,
+      innerHTML: btnText
+    }, null, 12, ["innerHTML"])], 14, ["badge-text"]);
+  });
 }
 function usePageHead(navigationBar) {
   const clazz = computed(() => {
@@ -8107,6 +8133,52 @@ function usePageHead(navigationBar) {
     style
   };
 }
+function userPageHeadButtons(navigationBar) {
+  const left = [];
+  const right = [];
+  const {
+    buttons
+  } = navigationBar;
+  if (!isArray(buttons)) {
+    return {
+      left,
+      right
+    };
+  }
+  const {
+    type
+  } = navigationBar;
+  const isTransparent = type === "transparent";
+  buttons.forEach((btn) => {
+    const pageHeadBtn = usePageHeadButton(btn, isTransparent);
+    if (btn.float === "left") {
+      left.push(pageHeadBtn);
+    } else {
+      right.push(pageHeadBtn);
+    }
+  });
+}
+function usePageHeadButton(btn, isTransparent) {
+  return {
+    btnClass: {
+      "uni-page-head-btn": true,
+      "uni-page-head-btn-red-dot": !!(btn.redDot || btn.badgeText),
+      "uni-page-head-btn-select": !!btn.select
+    },
+    btnStyle: {
+      backgroundColor: isTransparent ? btn.background : "transparent",
+      width: btn.width
+    },
+    btnText: btn.fontSrc && btn.fontFamily ? btn.text.replace("\\u", "&#x") : ICON_FONTS[btn.type] || btn.text,
+    badgeText: btn.badgeText,
+    iconStyle: {
+      color: btn.color,
+      fontSize: btn.fontSize,
+      fontWeight: btn.fontWeight,
+      fontFamily: btn.fontFamily
+    }
+  };
+}
 var _sfc_main$2 = {
   name: "PageRefresh",
   setup() {
@@ -8387,13 +8459,11 @@ var index = defineComponent({
   name: "Page",
   setup(props, ctx) {
     providePageMeta();
-    return () => createVNode("uni-page", null, [createVNode(PageHead, null, null), createPageBodyVNode(ctx)]);
+    return () => createVNode("uni-page", null, __UNI_FEATURE_NAVIGATIONBAR__ ? [createVNode(PageHead), createPageBodyVNode(ctx)] : [createPageBodyVNode(ctx)]);
   }
 });
 function createPageBodyVNode(ctx) {
-  return openBlock(), createBlock(PageBody, {
-    key: 0
-  }, {
+  return openBlock(), createBlock(PageBody, {key: 0}, {
     default: withCtx(() => [renderSlot(ctx.slots, "page")]),
     _: 3
   });

packages/uni-h5/src/framework/components/app/tabBar.ts

 import { defineComponent } from 'vue'
 
-export default defineComponent({
+export default /*#__PURE__*/ defineComponent({
   name: 'TabBar',
 })

packages/uni-h5/src/framework/components/page/index.tsx → packages/uni-h5/src/framework/components/page/index.ts

@@ -2,6 +2,7 @@ import {
   withCtx,
   openBlock,
   renderSlot,
+  createVNode,
   createBlock,
   SetupContext,
   defineComponent,
@@ -15,12 +16,14 @@ export default defineComponent({
   name: 'Page',
   setup(props, ctx) {
     providePageMeta()
-    return () => (
-      <uni-page>
-        <PageHead />
-        {createPageBodyVNode(ctx)}
-      </uni-page>
-    )
+    return () =>
+      createVNode(
+        'uni-page',
+        null,
+        __UNI_FEATURE_NAVIGATIONBAR__
+          ? [createVNode(PageHead), createPageBodyVNode(ctx)]
+          : [createPageBodyVNode(ctx)]
+      )
   },
 })
 

packages/uni-h5/src/framework/components/page/pageBody.tsx

-import {
-  ref,
-  Fragment,
-  openBlock,
-  renderSlot,
-  createBlock,
-  createVNode,
-  defineComponent,
-  createCommentVNode,
-  Ref,
-  VNodeProps,
-} from 'vue'
+import { ref, renderSlot, defineComponent, Ref } from 'vue'
 
 import { usePageMeta } from '../../plugin/provide'
 

packages/uni-h5/src/framework/components/page/pageHead.tsx

@@ -2,20 +2,36 @@ import { computed, defineComponent } from 'vue'
 import { isArray } from '@vue/shared'
 import { usePageMeta } from '../../plugin/provide'
 
-export default defineComponent({
+const ICON_FONTS = {
+  none: '',
+  forward: '',
+  back: '',
+  share: '',
+  favorite: '',
+  home: '',
+  menu: '',
+  close: '',
+}
+
+export default /*#__PURE__*/ defineComponent({
   name: 'PageHead',
   setup() {
     const pageMeta = usePageMeta()
     const navigationBar = pageMeta.navigationBar
     UniServiceJSBridge.emit('onNavigationBarChange', navigationBar.titleText)
     const { clazz, style } = usePageHead(navigationBar)
+    const buttons = (__UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ &&
+      userPageHeadButtons(navigationBar)) as PageHeadButtons
     return () => {
       // 单页面无需back按钮
       const backButtonJsx = __UNI_FEATURE_PAGES__
         ? createBackButtonJsx(navigationBar)
         : null
       const leftButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__
-        ? createButtonsJsx('left', navigationBar)
+        ? createButtonsJsx(buttons.left)
+        : []
+      const rightButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__
+        ? createButtonsJsx(buttons.right)
         : []
       return (
         <uni-page-head uni-page-head-type={navigationBar.type}>
@@ -23,7 +39,9 @@ export default defineComponent({
             <div class="uni-page-head-hd">
               {backButtonJsx}
               {...leftButtonsJsx}
+              {...rightButtonsJsx}
             </div>
+            <div class="uni-page-head-bd"></div>
           </div>
         </uni-page-head>
       )
@@ -43,20 +61,21 @@ function createBackButtonJsx(navigationBar: UniApp.PageNavigationBar) {
   }
 }
 
-function createButtonsJsx(
-  float: 'left' | 'right',
-  navigationBar: UniApp.PageNavigationBar
-) {
-  if (isArray(navigationBar.buttons)) {
-    return navigationBar.buttons
-      .filter((btn) => btn.float === float)
-      .map((btn, index) => (
-        <div key={index}>
-          <i />
+function createButtonsJsx(btns: PageHeadButton[]) {
+  return btns.map(
+    ({ btnClass, btnStyle, btnText, badgeText, iconStyle }, index) => {
+      return (
+        <div
+          key={index}
+          class={btnClass}
+          style={btnStyle}
+          badge-text={badgeText}
+        >
+          <i class="uni-btn-icon" style={iconStyle} v-html={btnText} />
         </div>
-      ))
-  }
-  return []
+      )
+    }
+  )
 }
 
 function usePageHead(navigationBar: UniApp.PageNavigationBar) {
@@ -86,3 +105,67 @@ function usePageHead(navigationBar: UniApp.PageNavigationBar) {
     style,
   }
 }
+
+interface PageHeadButton {
+  btnClass: UniApp.ClassObj
+  btnStyle: UniApp.StyleObj
+  btnText: string
+  badgeText?: string
+  iconStyle: UniApp.StyleObj
+}
+
+interface PageHeadButtons {
+  left: PageHeadButton[]
+  right: PageHeadButton[]
+}
+
+function userPageHeadButtons(navigationBar: UniApp.PageNavigationBar) {
+  const left: PageHeadButton[] = []
+  const right: PageHeadButton[] = []
+  const { buttons } = navigationBar
+  if (!isArray(buttons)) {
+    return {
+      left,
+      right,
+    }
+  }
+  const { type } = navigationBar
+  const isTransparent = type === 'transparent'
+  buttons.forEach((btn) => {
+    const pageHeadBtn = usePageHeadButton(btn, isTransparent)
+    if (btn.float === 'left') {
+      left.push(pageHeadBtn)
+    } else {
+      right.push(pageHeadBtn)
+    }
+  })
+}
+
+function usePageHeadButton(
+  btn: UniApp.PageNavigationBarButton,
+  isTransparent: boolean
+) {
+  return {
+    btnClass: {
+      // 类似这样的大量重复的字符串，会在gzip时压缩大小，无需在代码层考虑优化相同字符串
+      'uni-page-head-btn': true,
+      'uni-page-head-btn-red-dot': !!(btn.redDot || btn.badgeText),
+      'uni-page-head-btn-select': !!btn.select,
+    },
+    btnStyle: {
+      backgroundColor: isTransparent ? btn.background : 'transparent',
+      width: btn.width,
+    },
+    btnText:
+      btn.fontSrc && btn.fontFamily
+        ? btn.text.replace('\\u', '&#x')
+        : ICON_FONTS[btn.type] || btn.text,
+    badgeText: btn.badgeText,
+    iconStyle: {
+      color: btn.color,
+      fontSize: btn.fontSize,
+      fontWeight: btn.fontWeight,
+      fontFamily: btn.fontFamily,
+    },
+  }
+}

packages/vite-plugin-uni/src/utils/define.ts

@@ -14,8 +14,10 @@ interface PagesFeatures {
   topWindow: boolean
   leftWindow: boolean
   rightWindow: boolean
+  navigationBar: boolean
   pullDownRefresh: boolean
   navigationBarButtons: boolean
+  navigationBarSearchInput: boolean
 }
 interface ManifestFeatures {
   wx: boolean
@@ -40,14 +42,16 @@ function resolvePagesFeature(
   command: ConfigEnv['command']
 ): PagesFeatures {
   const features: PagesFeatures = {
-    nvue: true, // 是否启用nvue
-    pages: true, // 是否多页面
-    tabBar: true, // 是否启用tabBar
-    topWindow: false, // 是否启用topWindow
-    leftWindow: false, // 是否启用leftWindow
-    rightWindow: false, // 是否启用rightWindow
-    pullDownRefresh: false, // 是否启用下拉刷新
-    navigationBarButtons: true, // 是否启用标题按钮
+    nvue: true,
+    pages: true,
+    tabBar: true,
+    topWindow: false,
+    leftWindow: false,
+    rightWindow: false,
+    navigationBar: true,
+    pullDownRefresh: false,
+    navigationBarButtons: true,
+    navigationBarSearchInput: true,
   }
 
   const {
@@ -76,7 +80,7 @@ function resolvePagesFeature(
   if (rightWindow && rightWindow.path) {
     features.rightWindow = true
   }
-  if (globalStyle && globalStyle.enablePullDownRefresh) {
+  if (globalStyle.enablePullDownRefresh) {
     features.pullDownRefresh = true
   } else {
     if (pages.find((page) => page.style && page.style.enablePullDownRefresh)) {
@@ -91,17 +95,37 @@ function resolvePagesFeature(
     ) {
       features.nvue = false
     }
-    if (
-      !pages.find(
-        (page) =>
-          isArray(page.style.navigationBar.buttons) &&
-          page.style.navigationBar.buttons.length
-      )
-    ) {
+    let isNavigationCustom = false
+    if (globalStyle.navigationBar.style === 'custom') {
+      isNavigationCustom = true // 全局custom
+      if (pages.find((page) => page.style.navigationBar.style === 'default')) {
+        isNavigationCustom = false
+      }
+    } else {
+      // 所有页面均custom
+      if (pages.every((page) => page.style.navigationBar.style === 'custom')) {
+        isNavigationCustom = true
+      }
+    }
+    if (isNavigationCustom) {
+      features.navigationBar = false
       features.navigationBarButtons = false
+      features.navigationBarSearchInput = false
+    } else {
+      if (
+        !pages.find(
+          (page) =>
+            isArray(page.style.navigationBar.buttons) &&
+            page.style.navigationBar.buttons.length
+        )
+      ) {
+        features.navigationBarButtons = false
+      }
+      if (!pages.find((page) => page.style.navigationBar.searchInput)) {
+        features.navigationBarSearchInput = false
+      }
     }
   }
-
   return features
 }
 
@@ -147,8 +171,10 @@ export function getFeatures(
     topWindow,
     leftWindow,
     rightWindow,
+    navigationBar,
     pullDownRefresh,
     navigationBarButtons,
+    navigationBarSearchInput,
   } = Object.assign(
     resolveManifestFeature(options),
     resolvePagesFeature(options, command),
@@ -167,7 +193,9 @@ export function getFeatures(
     __UNI_FEATURE_LEFTWINDOW__: leftWindow,
     __UNI_FEATURE_RIGHTWINDOW__: rightWindow,
     __UNI_FEATURE_RESPONSIVE__: topWindow || leftWindow || rightWindow,
+    __UNI_FEATURE_NAVIGATIONBAR__: navigationBar,
     __UNI_FEATURE_PULL_DOWN_REFRESH__: pullDownRefresh,
     __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__: navigationBarButtons,
+    __UNI_FEATURE_NAVIGATIONBAR_SEARCHINPUT__: navigationBarSearchInput,
   }
 }

packages/vite-plugin-uni/src/utils/pagesJson.ts

 import path from 'path'
 import slash from 'slash'
-import { hasOwn, isPlainObject } from '@vue/shared'
+import { hasOwn, isArray, isPlainObject } from '@vue/shared'
 import { parseJson } from '@dcloudio/uni-cli-shared'
 
 export function normalizePagesJson(jsonStr: string, platform: UniApp.PLATFORM) {
   let pagesJson: UniApp.PagesJson = {
     pages: [],
+    globalStyle: {
+      navigationBar: {},
+    },
   }
   // preprocess
   try {
@@ -113,9 +116,36 @@ function normalizeNavigationBar(
   if (isPlainObject(titleNView)) {
     Object.assign(navigationBar, titleNView)
   }
+  if (isArray(navigationBar.buttons)) {
+    navigationBar.buttons = navigationBar.buttons.map((btn) =>
+      normalizeNavigationBarButton(
+        btn,
+        navigationBar.type,
+        navigationBar.textStyle === 'black' ? '#000' : '#fff'
+      )
+    )
+  }
   return navigationBar
 }
 
+function normalizeNavigationBarButton(
+  btn: UniApp.PageNavigationBarButton,
+  type: UniApp.PageNavigationBar['type'],
+  textColor: '#000' | '#fff'
+) {
+  btn.color = type === 'transparent' ? '#fff' : btn.color || textColor
+  if (!btn.fontSize) {
+    btn.fontSize =
+      type === 'transparent' || (btn.text && /\\u/.test(btn.text))
+        ? '22px'
+        : '27px'
+  } else if (/\d$/.test(btn.fontSize)) {
+    btn.fontSize += 'px'
+  }
+  btn.text = btn.text || ''
+  return btn
+}
+
 const platforms = ['h5', 'app-plus', 'mp-', 'quickapp']
 
 function removePlatformStyle(pageStyle: UniApp.PagesJsonPageStyle) {