feat: tabBar

packages/shims-uni-app.d.ts

@@ -132,6 +132,7 @@ declare namespace UniApp {
   }
   interface PageRouteMeta extends PagesJsonPageStyle {
     id: number
+    route: string
     isNVue?: boolean
     isQuit?: boolean
     isEntry?: boolean

packages/uni-api/src/protocols/ui/tabBar.ts

@@ -2,6 +2,7 @@ import { extend } from '@vue/shared'
 import { getLen } from '@dcloudio/uni-shared'
 import { getRealPath } from '@dcloudio/uni-platform'
 import { getCurrentPageMeta } from '@dcloudio/uni-core'
+import { removeLeadingSlash } from '@dcloudio/uni-shared'
 
 import { ApiOptions, ApiProtocol } from '../type'
 
@@ -46,7 +47,19 @@ export const SetTabBarItemProtocol: ApiProtocol = extend(
   IndexProtocol
 )
 
-export const SetTabBarItemOptions: ApiOptions = IndexOptions
+export const SetTabBarItemOptions: ApiOptions = {
+  beforeInvoke: IndexOptions.beforeInvoke,
+  formatArgs: extend(
+    {
+      pagePath(value, params) {
+        if (value) {
+          params.pagePath = removeLeadingSlash(value)
+        }
+      },
+    } as ApiOptions['formatArgs'],
+    IndexOptions.formatArgs
+  ),
+}
 
 export const SetTabBarStyleProtocol: ApiProtocol = {
   color: {
@@ -70,6 +83,7 @@ export const SetTabBarStyleProtocol: ApiProtocol = {
 }
 const GRADIENT_RE = /^(linear|radial)-gradient\(.+?\);?$/
 export const SetTabBarStyleOptions: ApiOptions = {
+  beforeInvoke: IndexOptions.beforeInvoke,
   formatArgs: {
     backgroundImage(value, params) {
       if (value && !GRADIENT_RE.test(value)) {
@@ -111,6 +125,7 @@ export const SetTabBarBadgeProtocol: ApiProtocol = extend(
 )
 
 export const SetTabBarBadgeOptions: ApiOptions = {
+  beforeInvoke: IndexOptions.beforeInvoke,
   formatArgs: extend(
     {
       text(value, params) {

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

 import {isFunction, extend, isPlainObject, isArray, hasOwn as hasOwn$1, isString, isObject as isObject$1, capitalize, toRawType, makeMap as makeMap$1, isPromise, hyphenate} from "@vue/shared";
-import {injectHook, createVNode, reactive, inject, provide, computed, nextTick, defineComponent, onRenderTriggered, watch, withDirectives, vShow, withCtx, openBlock, createBlock, KeepAlive, resolveDynamicComponent, resolveComponent, onMounted, ref, mergeProps, toDisplayString, toHandlers, renderSlot, createCommentVNode, getCurrentInstance, onBeforeUnmount, withModifiers, vModelDynamic, createTextVNode, Fragment, renderList, vModelText, onBeforeMount} from "vue";
-import {passive, NAVBAR_HEIGHT, getLen, COMPONENT_NAME_PREFIX, plusReady, debounce, PRIMARY_COLOR} from "@dcloudio/uni-shared";
+import {injectHook, createVNode, reactive, inject, provide, computed, nextTick, defineComponent, watch, withDirectives, vShow, withCtx, openBlock, createBlock, KeepAlive, resolveDynamicComponent, resolveComponent, onMounted, ref, mergeProps, toDisplayString, toHandlers, renderSlot, createCommentVNode, getCurrentInstance, onBeforeUnmount, withModifiers, vModelDynamic, createTextVNode, Fragment, renderList, vModelText, onBeforeMount} from "vue";
+import {passive, NAVBAR_HEIGHT, removeLeadingSlash, getLen, COMPONENT_NAME_PREFIX, plusReady, debounce, PRIMARY_COLOR} from "@dcloudio/uni-shared";
 import {createRouter, createWebHistory, createWebHashHistory, useRoute, RouterView, isNavigationFailure} from "vue-router";
 function applyOptions(options, instance2, publicThis) {
   Object.keys(options).forEach((name) => {
@@ -1365,21 +1365,16 @@ function createPageState(type) {
 function isPage(vm) {
   return vm.$options.mpType === "page";
 }
-function normalizeRoute(path) {
-  if (path.indexOf("/") === 0) {
-    return path.substr(1);
-  }
-  return path;
-}
 function initPublicPage(route) {
   if (!route) {
-    const {path} = __uniRoutes[0];
-    return {id, path, route: path.substr(1), fullPath: path};
+    const {path: path2} = __uniRoutes[0];
+    return {id, path: path2, route: path2.substr(1), fullPath: path2};
   }
+  const {path} = route;
   return {
     id,
-    path: route.path,
-    route: normalizeRoute(route.path),
+    path,
+    route: removeLeadingSlash(path),
     fullPath: route.meta.isEntry ? route.meta.pagePath : route.fullPath,
     options: {},
     meta: usePageMeta()
@@ -2493,7 +2488,16 @@ const SetTabBarItemProtocol = extend({
     type: String
   }
 }, IndexProtocol);
-const SetTabBarItemOptions = IndexOptions;
+const SetTabBarItemOptions = {
+  beforeInvoke: IndexOptions.beforeInvoke,
+  formatArgs: extend({
+    pagePath(value, params) {
+      if (value) {
+        params.pagePath = removeLeadingSlash(value);
+      }
+    }
+  }, IndexOptions.formatArgs)
+};
 const SetTabBarStyleProtocol = {
   color: {
     type: String
@@ -2516,6 +2520,7 @@ const SetTabBarStyleProtocol = {
 };
 const GRADIENT_RE = /^(linear|radial)-gradient\(.+?\);?$/;
 const SetTabBarStyleOptions = {
+  beforeInvoke: IndexOptions.beforeInvoke,
   formatArgs: {
     backgroundImage(value, params) {
       if (value && !GRADIENT_RE.test(value)) {
@@ -2549,6 +2554,7 @@ const SetTabBarBadgeProtocol = extend({
   }
 }, IndexProtocol);
 const SetTabBarBadgeOptions = {
+  beforeInvoke: IndexOptions.beforeInvoke,
   formatArgs: extend({
     text(value, params) {
       if (getLen(value) >= 4) {
@@ -3159,9 +3165,6 @@ var TabBar = /* @__PURE__ */ defineComponent({
       borderStyle,
       placeholderStyle
     } = useTabBarStyle(tabBar2);
-    onRenderTriggered(() => {
-      debugger;
-    });
     return () => {
       const tabBarItemsTsx = createTabBarItemsTsx(tabBar2, onSwitchTab);
       return createVNode("uni-tabbar", {
@@ -11074,6 +11077,35 @@ const navigateTo = /* @__PURE__ */ defineAsyncApi(API_NAVIGATE_TO, ({url}, {reso
 const redirectTo = /* @__PURE__ */ defineAsyncApi(API_REDIRECT_TO, ({url}, {resolve, reject}) => navigate(API_REDIRECT_TO, url).then(resolve).catch(reject), RedirectToProtocol, RedirectToOptions);
 const reLaunch = /* @__PURE__ */ defineAsyncApi(API_RE_LAUNCH, ({url}, {resolve, reject}) => navigate(API_RE_LAUNCH, url).then(resolve).catch(reject), ReLaunchProtocol, ReLaunchOptions);
 const switchTab = /* @__PURE__ */ defineAsyncApi(API_SWITCH_TAB, ({url}, {resolve, reject}) => navigate(API_SWITCH_TAB, url).then(resolve).catch(reject), SwitchTabProtocol, SwitchTabOptions);
+const setTabBarItemProps = ["text", "iconPath", "selectedIconPath"];
+const setTabBarStyleProps = [
+  "color",
+  "selectedColor",
+  "backgroundColor",
+  "borderStyle"
+];
+const setTabBarBadgeProps = ["badge", "redDot"];
+function setProperties(item, props, propsData) {
+  props.forEach(function(name) {
+    if (hasOwn$1(propsData, name)) {
+      item[name] = propsData[name];
+    }
+  });
+}
+function normalizeRoute(index2, oldPagePath, newPagePath) {
+  const oldTabBarRoute = __uniRoutes.find((item) => item.meta.route === oldPagePath);
+  if (oldTabBarRoute) {
+    const {meta} = oldTabBarRoute;
+    delete meta.tabBarIndex;
+    meta.isQuit = meta.isTabBar = false;
+  }
+  const newTabBarRoute = __uniRoutes.find((item) => item.meta.route === newPagePath);
+  if (newTabBarRoute) {
+    const {meta} = newTabBarRoute;
+    meta.tabBarIndex = index2;
+    meta.isQuit = meta.isTabBar = false;
+  }
+}
 function setTabBar(type, args, resolve) {
   const tabBar2 = useTabBar();
   switch (type) {
@@ -11082,13 +11114,47 @@ function setTabBar(type, args, resolve) {
       break;
     case "hideTabBar":
       tabBar2.shown = false;
+      break;
+    case "setTabBarItem":
+      const {index: index2} = args;
+      const tabBarItem = tabBar2.list[index2];
+      const oldPagePath = tabBarItem.pagePath;
+      setProperties(tabBarItem, setTabBarItemProps, args);
+      const {pagePath} = args;
+      if (pagePath && pagePath !== oldPagePath) {
+        normalizeRoute(index2, oldPagePath, pagePath);
+      }
+      break;
+    case "setTabBarStyle":
+      setProperties(tabBar2, setTabBarStyleProps, args);
+      break;
+    case "showTabBarRedDot":
+      setProperties(tabBar2.list[args.index], setTabBarBadgeProps, {
+        badge: "",
+        redDot: true
+      });
+      break;
+    case "setTabBarBadge":
+      setProperties(tabBar2.list[args.index], setTabBarBadgeProps, {
+        badge: args.text,
+        redDot: true
+      });
+      break;
+    case "hideTabBarRedDot":
+    case "removeTabBarBadge":
+      setProperties(tabBar2.list[args.index], setTabBarBadgeProps, {
+        badge: "",
+        redDot: false
+      });
+      break;
   }
   resolve();
 }
 const setTabBarItem = /* @__PURE__ */ defineAsyncApi("setTabBarItem", (args, {resolve}) => {
   setTabBar("setTabBarItem", args, resolve);
 }, SetTabBarItemProtocol, SetTabBarItemOptions);
-const setTabBarStyle = /* @__PURE__ */ defineAsyncApi("setTabBarStyle", () => {
+const setTabBarStyle = /* @__PURE__ */ defineAsyncApi("setTabBarStyle", (args, {resolve}) => {
+  setTabBar("setTabBarStyle", args, resolve);
 }, SetTabBarStyleProtocol, SetTabBarStyleOptions);
 const hideTabBar = /* @__PURE__ */ defineAsyncApi("hideTabBar", (args, {resolve}) => {
   setTabBar("hideTabBar", args, resolve);
@@ -11096,13 +11162,17 @@ const hideTabBar = /* @__PURE__ */ defineAsyncApi("hideTabBar", (args, {resolve}
 const showTabBar = /* @__PURE__ */ defineAsyncApi("showTabBar", (args, {resolve}) => {
   setTabBar("showTabBar", args, resolve);
 }, ShowTabBarProtocol);
-const hideTabBarRedDot = /* @__PURE__ */ defineAsyncApi("hideTabBarRedDot", () => {
+const hideTabBarRedDot = /* @__PURE__ */ defineAsyncApi("hideTabBarRedDot", (args, {resolve}) => {
+  setTabBar("hideTabBarRedDot", args, resolve);
 }, HideTabBarRedDotProtocol, HideTabBarRedDotOptions);
-const showTabBarRedDot = /* @__PURE__ */ defineAsyncApi("showTabBarRedDot", () => {
+const showTabBarRedDot = /* @__PURE__ */ defineAsyncApi("showTabBarRedDot", (args, {resolve}) => {
+  setTabBar("showTabBarRedDot", args, resolve);
 }, ShowTabBarRedDotProtocol, ShowTabBarRedDotOptions);
-const removeTabBarBadge = /* @__PURE__ */ defineAsyncApi("removeTabBarBadge", () => {
+const removeTabBarBadge = /* @__PURE__ */ defineAsyncApi("removeTabBarBadge", (args, {resolve}) => {
+  setTabBar("removeTabBarBadge", args, resolve);
 }, RemoveTabBarBadgeProtocol, RemoveTabBarBadgeOptions);
-const setTabBarBadge = /* @__PURE__ */ defineAsyncApi("setTabBarBadge", () => {
+const setTabBarBadge = /* @__PURE__ */ defineAsyncApi("setTabBarBadge", (args, {resolve}) => {
+  setTabBar("setTabBarBadge", args, resolve);
 }, SetTabBarBadgeProtocol, SetTabBarBadgeOptions);
 var api = /* @__PURE__ */ Object.freeze({
   __proto__: null,

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

@@ -15,9 +15,6 @@ export default /*#__PURE__*/ defineComponent({
     const tabBar = useTabBar()!
     const onSwitchTab = useSwitchTab(useRoute(), tabBar)
     const { style, borderStyle, placeholderStyle } = useTabBarStyle(tabBar)
-    onRenderTriggered(() => {
-      debugger
-    })
     return () => {
       const tabBarItemsTsx = createTabBarItemsTsx(tabBar, onSwitchTab)
       return (

packages/uni-h5/src/framework/plugin/page.ts

@@ -6,6 +6,7 @@ import {
   ComponentPublicInstance,
 } from 'vue'
 import { useRoute, RouteLocationNormalizedLoaded } from 'vue-router'
+import { removeLeadingSlash } from '@dcloudio/uni-shared'
 import { usePageMeta } from './provide'
 
 const SEP = '$$'
@@ -41,22 +42,16 @@ export function isPage(vm: ComponentPublicInstance) {
   return vm.$options.mpType === 'page'
 }
 
-function normalizeRoute(path: string) {
-  if (path.indexOf('/') === 0) {
-    return path.substr(1)
-  }
-  return path
-}
-
 function initPublicPage(route: RouteLocationNormalizedLoaded) {
   if (!route) {
     const { path } = __uniRoutes[0]
     return { id, path, route: path.substr(1), fullPath: path }
   }
+  const { path } = route
   return {
     id,
-    path: route.path,
-    route: normalizeRoute(route.path),
+    path: path,
+    route: removeLeadingSlash(path),
     fullPath: route.meta.isEntry ? route.meta.pagePath : route.fullPath,
     options: {}, // $route.query
     meta: usePageMeta(),

packages/uni-h5/src/service/api/ui/tabBar.ts

+import { hasOwn } from '@vue/shared'
 import {
   defineAsyncApi,
   HideTabBarProtocol,
@@ -16,6 +17,49 @@ import {
   ShowTabBarRedDotProtocol,
 } from '@dcloudio/uni-api'
 import { useTabBar } from '../../../framework/plugin/state'
+const setTabBarItemProps = ['text', 'iconPath', 'selectedIconPath']
+const setTabBarStyleProps = [
+  'color',
+  'selectedColor',
+  'backgroundColor',
+  'borderStyle',
+]
+const setTabBarBadgeProps = ['badge', 'redDot']
+
+function setProperties(
+  item: Record<string, any>,
+  props: string[],
+  propsData: Record<string, any>
+) {
+  props.forEach(function (name) {
+    if (hasOwn(propsData, name)) {
+      item[name] = propsData[name]
+    }
+  })
+}
+
+function normalizeRoute(
+  index: number,
+  oldPagePath: string,
+  newPagePath: string
+) {
+  const oldTabBarRoute = __uniRoutes.find(
+    (item) => item.meta.route === oldPagePath
+  )
+  if (oldTabBarRoute) {
+    const { meta } = oldTabBarRoute
+    delete meta.tabBarIndex
+    meta.isQuit = meta.isTabBar = false
+  }
+  const newTabBarRoute = __uniRoutes.find(
+    (item) => item.meta.route === newPagePath
+  )
+  if (newTabBarRoute) {
+    const { meta } = newTabBarRoute
+    meta.tabBarIndex = index
+    meta.isQuit = meta.isTabBar = false
+  }
+}
 
 function setTabBar(
   type: string,
@@ -29,6 +73,39 @@ function setTabBar(
       break
     case 'hideTabBar':
       tabBar.shown = false
+      break
+    case 'setTabBarItem':
+      const { index } = args
+      const tabBarItem = tabBar.list[index]
+      const oldPagePath = tabBarItem.pagePath
+      setProperties(tabBarItem, setTabBarItemProps, args)
+      const { pagePath } = args
+      if (pagePath && pagePath !== oldPagePath) {
+        normalizeRoute(index, oldPagePath, pagePath)
+      }
+      break
+    case 'setTabBarStyle':
+      setProperties(tabBar, setTabBarStyleProps, args)
+      break
+    case 'showTabBarRedDot':
+      setProperties(tabBar.list[args.index], setTabBarBadgeProps, {
+        badge: '',
+        redDot: true,
+      })
+      break
+    case 'setTabBarBadge':
+      setProperties(tabBar.list[args.index], setTabBarBadgeProps, {
+        badge: args.text,
+        redDot: true,
+      })
+      break
+    case 'hideTabBarRedDot':
+    case 'removeTabBarBadge':
+      setProperties(tabBar.list[args.index], setTabBarBadgeProps, {
+        badge: '',
+        redDot: false,
+      })
+      break
   }
   resolve()
 }
@@ -44,7 +121,9 @@ export const setTabBarItem = defineAsyncApi<typeof uni.setTabBarItem>(
 
 export const setTabBarStyle = defineAsyncApi<typeof uni.setTabBarStyle>(
   'setTabBarStyle',
-  () => {},
+  (args, { resolve }) => {
+    setTabBar('setTabBarStyle', args, resolve)
+  },
   SetTabBarStyleProtocol,
   SetTabBarStyleOptions
 )
@@ -66,28 +145,36 @@ export const showTabBar = defineAsyncApi<typeof uni.showTabBar>(
 )
 export const hideTabBarRedDot = defineAsyncApi<typeof uni.hideTabBarRedDot>(
   'hideTabBarRedDot',
-  () => {},
+  (args, { resolve }) => {
+    setTabBar('hideTabBarRedDot', args, resolve)
+  },
   HideTabBarRedDotProtocol,
   HideTabBarRedDotOptions
 )
 
 export const showTabBarRedDot = defineAsyncApi<typeof uni.showTabBarRedDot>(
   'showTabBarRedDot',
-  () => {},
+  (args, { resolve }) => {
+    setTabBar('showTabBarRedDot', args, resolve)
+  },
   ShowTabBarRedDotProtocol,
   ShowTabBarRedDotOptions
 )
 
 export const removeTabBarBadge = defineAsyncApi<typeof uni.removeTabBarBadge>(
   'removeTabBarBadge',
-  () => {},
+  (args, { resolve }) => {
+    setTabBar('removeTabBarBadge', args, resolve)
+  },
   RemoveTabBarBadgeProtocol,
   RemoveTabBarBadgeOptions
 )
 
 export const setTabBarBadge = defineAsyncApi<typeof uni.setTabBarBadge>(
   'setTabBarBadge',
-  () => {},
+  (args, { resolve }) => {
+    setTabBar('setTabBarBadge', args, resolve)
+  },
   SetTabBarBadgeProtocol,
   SetTabBarBadgeOptions
 )

packages/uni-shared/dist/uni-shared.cjs.js

@@ -100,6 +100,9 @@ const COMPONENT_PREFIX = 'v-' + COMPONENT_SELECTOR_PREFIX;
 function getLen(str = '') {
     return ('' + str).replace(/[^\x00-\xff]/g, '**').length;
 }
+function removeLeadingSlash(str) {
+    return str.indexOf('/') === 0 ? str.substr(1) : str;
+}
 
 const encode = encodeURIComponent;
 function stringifyQuery(obj, encodeStr = encode) {
@@ -157,4 +160,5 @@ exports.isNativeTag = isNativeTag;
 exports.normalizeDataset = normalizeDataset;
 exports.passive = passive;
 exports.plusReady = plusReady;
+exports.removeLeadingSlash = removeLeadingSlash;
 exports.stringifyQuery = stringifyQuery;

packages/uni-shared/dist/uni-shared.d.ts

@@ -32,6 +32,8 @@ export declare function plusReady(callback: () => void): void;
 
 export declare const PRIMARY_COLOR = "#007aff";
 
+export declare function removeLeadingSlash(str: string): string;
+
 export declare const RESPONSIVE_MIN_WIDTH = 768;
 
 export declare function stringifyQuery(obj?: Record<string, any>, encodeStr?: typeof encodeURIComponent): string;

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

@@ -96,6 +96,9 @@ const COMPONENT_PREFIX = 'v-' + COMPONENT_SELECTOR_PREFIX;
 function getLen(str = '') {
     return ('' + str).replace(/[^\x00-\xff]/g, '**').length;
 }
+function removeLeadingSlash(str) {
+    return str.indexOf('/') === 0 ? str.substr(1) : str;
+}
 
 const encode = encodeURIComponent;
 function stringifyQuery(obj, encodeStr = encode) {
@@ -136,4 +139,4 @@ const RESPONSIVE_MIN_WIDTH = 768;
 const COMPONENT_NAME_PREFIX = 'VUni';
 const PRIMARY_COLOR = '#007aff';
 
-export { BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, NAVBAR_HEIGHT, PRIMARY_COLOR, RESPONSIVE_MIN_WIDTH, TABBAR_HEIGHT, TAGS, debounce, getLen, isBuiltInComponent, isCustomElement, isNativeTag, normalizeDataset, passive, plusReady, stringifyQuery };
+export { BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, NAVBAR_HEIGHT, PRIMARY_COLOR, RESPONSIVE_MIN_WIDTH, TABBAR_HEIGHT, TAGS, debounce, getLen, isBuiltInComponent, isCustomElement, isNativeTag, normalizeDataset, passive, plusReady, removeLeadingSlash, stringifyQuery };

packages/uni-shared/src/utils.ts

 export function getLen(str = '') {
   return ('' + str).replace(/[^\x00-\xff]/g, '**').length
 }
+
+export function removeLeadingSlash(str: string) {
+  return str.indexOf('/') === 0 ? str.substr(1) : str
+}