@open-wxa/wxa-runner-core 0.8.0 → 0.8.1

package/dist/runtime/host.js

@@ -1642,7 +1642,8 @@ ${frames}` : "");
   }
 
   // src/runtime/host/api/ui.ts
-  function createUiApis({ shell, updateNavigation }) {
+  function createUiApis({ shell, updateNavigation, setTabBarHidden }) {
+    const updateTabBarItem = (api, index, item) => shell.updateTabBarItem(Number(index), item) ? void 0 : fail(api, "tabbar item not found");
     return {
       showToast: (args) => shell.showToast(args),
       hideToast: () => shell.hideToast(),
@@ -1660,6 +1661,22 @@ ${frames}` : "");
       }),
       showNavigationBarLoading: () => shell.setNavigationLoading(true),
       hideNavigationBarLoading: () => shell.setNavigationLoading(false),
+      hideTabBar: () => setTabBarHidden(true),
+      showTabBar: () => setTabBarHidden(false),
+      // 基础库把 removeTabBarBadge、showTabBarRedDot、hideTabBarRedDot 都转成 setTabBarBadge，用 type 区分；
+      // 徽标文字超长时基础库已经换成 ...
+      setTabBarBadge: (args, { api }) => updateTabBarItem(api, args.index, { mark: tabBarMark(args) }),
+      setTabBarItem: (args, { api }) => updateTabBarItem(api, args.index, {
+        text: args.text,
+        iconPath: args.iconPath,
+        selectedIconPath: args.selectedIconPath
+      }),
+      setTabBarStyle: (args) => shell.updateTabBarStyle({
+        color: args.color,
+        selectedColor: args.selectedColor,
+        backgroundColor: args.backgroundColor,
+        borderStyle: args.borderStyle
+      }),
       hideHomeButton: () => void 0,
       setBackgroundColor: () => void 0,
       setBackgroundTextStyle: () => void 0,
@@ -1667,6 +1684,11 @@ ${frames}` : "");
       stopPullDownRefresh: () => void 0
     };
   }
+  function tabBarMark(args) {
+    if (args.type === "text") return { type: "text", text: String(args.badgeValue ?? "") };
+    if (args.type === "redDot") return { type: "redDot" };
+    return null;
+  }
 
   // src/runtime/host/api/webView.ts
   function createWebViewApis({ documentOf, emitToWebview }) {
@@ -1975,7 +1997,12 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
 .wxa-tabbar { flex: none; height: calc(50px + var(--wxa-safe-bottom, 0px)); padding-bottom: var(--wxa-safe-bottom, 0px); display: flex; border-top: .5px solid rgba(0,0,0,.1); box-sizing: border-box; }
 .wxa-tabbar.is-hidden { display: none; }
 .wxa-tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; user-select: none; gap: 2px; }
-.wxa-tabbar-item img { width: 24px; height: 24px; }
+.wxa-tabbar-item img { width: 24px; height: 24px; display: block; }
+.wxa-tabbar-icon, .wxa-tabbar-text { position: relative; }
+.wxa-tabbar-badge { position: absolute; top: -4px; left: calc(100% - 6px); min-width: 16px; height: 16px; padding: 0 5px; box-sizing: border-box; border-radius: 8px; background: #fa5151; color: #fff; font-size: 11px; line-height: 16px; text-align: center; white-space: nowrap; }
+.wxa-tabbar-dot { position: absolute; top: -2px; left: calc(100% - 2px); width: 8px; height: 8px; border-radius: 50%; background: #fa5151; }
+.wxa-tabbar-text > .wxa-tabbar-badge { top: -10px; left: calc(100% + 1px); }
+.wxa-tabbar-text > .wxa-tabbar-dot { top: -3px; left: calc(100% + 1px); }
 .wxa-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
 .wxa-mask { position: absolute; inset: 0; pointer-events: auto; }
 .wxa-mask.is-dim { background: rgba(0,0,0,.5); }
@@ -2140,7 +2167,10 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.tabBarConfig = null;
       this.onTabTap = () => void 0;
       this.navigation = { title: "", backgroundColor: "#000", textStyle: "white", showBack: false, custom: false };
-      this.tabBarVisible = false;
+      /** 当前页面是 tabBar 页面时为它的路径 */
+      this.tabBarPath = null;
+      /** wx.hideTabBar 设置，对所有 tab 页生效，直到 wx.showTabBar */
+      this.tabBarHidden = false;
       const style = document.createElement("style");
       style.textContent = SHELL_CSS;
       document.head.appendChild(style);
@@ -2252,9 +2282,28 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     setNavigationLoading(loading) {
       this.navBar.classList.toggle("is-loading", loading);
     }
-    /** 该页面是否显示原生 tabBar（自定义 tabBar 不算） */
+    /** 该页面是否显示原生 tabBar（自定义 tabBar、被 wx.hideTabBar 隐藏的都不算） */
     hasTabBar(pagePath) {
-      return !!this.tabBarConfig?.list.some((item) => item.pagePath === pagePath);
+      return !this.tabBarHidden && !!this.tabBarConfig?.list.some((item) => item.pagePath === pagePath);
+    }
+    setTabBarHidden(hidden) {
+      this.tabBarHidden = hidden;
+      this.renderTabBar(this.tabBarPath);
+    }
+    /** 没有原生 tabBar（未配置或自定义 tabBar）时什么都不做 */
+    updateTabBarStyle(style) {
+      if (!this.tabBarConfig) return;
+      Object.assign(this.tabBarConfig, definedOnly(style));
+      this.renderTabBar(this.tabBarPath);
+    }
+    /** 返回 false 表示 index 越界；没有原生 tabBar 时什么都不做 */
+    updateTabBarItem(index, item) {
+      if (!this.tabBarConfig) return true;
+      const target = this.tabBarConfig.list[index];
+      if (!target) return false;
+      Object.assign(target, definedOnly(item));
+      this.renderTabBar(this.tabBarPath);
+      return true;
     }
     /**
      * 页面窗口里 env(safe-area-inset-*) 的取值：窗口贴着屏幕边缘的一侧才有安全区。
@@ -2271,9 +2320,10 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     /** 当前页面是 tabBar 页面时传入它的路径，否则传 null */
     renderTabBar(selectedPath) {
       const config = this.tabBarConfig;
-      this.tabBarVisible = selectedPath !== null && this.hasTabBar(selectedPath);
-      this.tabBar.classList.toggle("is-hidden", !this.tabBarVisible);
-      if (!config || !this.tabBarVisible) return;
+      this.tabBarPath = selectedPath;
+      const visible = this.tabBarVisible();
+      this.tabBar.classList.toggle("is-hidden", !visible);
+      if (!config || !visible) return;
       this.tabBar.style.background = config.backgroundColor || "#f7f7f7";
       this.tabBar.style.borderTopColor = config.borderStyle === "white" ? "rgba(255,255,255,.3)" : "rgba(0,0,0,.1)";
       this.tabBar.innerHTML = "";
@@ -2284,21 +2334,26 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
         el.dataset.pagePath = item.pagePath;
         el.style.color = selected ? config.selectedColor || "#07c160" : config.color || "#7a7e83";
         const icon = selected ? item.selectedIconPath || item.iconPath : item.iconPath;
+        const iconBox = element("span", "wxa-tabbar-icon");
         if (icon) {
           const img = document.createElement("img");
-          img.src = "/" + icon.replace(/^\//, "");
-          el.appendChild(img);
+          img.src = /^https?:\/\//.test(icon) ? icon : "/" + icon.replace(/^\//, "");
+          iconBox.appendChild(img);
+          el.appendChild(iconBox);
         }
-        const text = document.createElement("span");
-        text.textContent = item.text || "";
+        const text = element("span", "wxa-tabbar-text", item.text || "");
         el.appendChild(text);
+        if (item.mark) (icon ? iconBox : text).appendChild(markElement(item.mark));
         el.addEventListener("click", () => this.onTabTap(item.pagePath, index));
         this.tabBar.appendChild(el);
       });
     }
+    tabBarVisible() {
+      return this.tabBarPath !== null && this.hasTabBar(this.tabBarPath);
+    }
     /** 页面可用高度，与 getSystemInfo().windowHeight 对应；tabBar 会连同底部安全区一起占掉 */
     windowHeight() {
-      return this.profile.screenHeight - this.screenTop() - (this.tabBarVisible ? TAB_BAR_HEIGHT + this.profile.safeAreaBottom : 0);
+      return this.profile.screenHeight - this.screenTop() - (this.tabBarVisible() ? TAB_BAR_HEIGHT + this.profile.safeAreaBottom : 0);
     }
     /** 页面窗口顶部到屏幕顶部的距离，与 getWindowInfo().screenTop 对应 */
     screenTop() {
@@ -2435,6 +2490,12 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.device.querySelector(".wxa-error")?.remove();
     }
   };
+  function markElement(mark) {
+    return mark.type === "redDot" ? element("span", "wxa-tabbar-dot") : element("span", "wxa-tabbar-badge", mark.text);
+  }
+  function definedOnly(value) {
+    return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== void 0));
+  }
   function maskElement(dim) {
     return element("div", "wxa-mask" + (dim ? " is-dim" : ""));
   }
@@ -2843,6 +2904,13 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       page.navigation = { ...page.navigation, ...Object.fromEntries(Object.entries(state).filter(([, v]) => v !== void 0)) };
       this.shell.setNavigation(page.navigation);
     }
+    /** tabBar 显隐改变 tab 页窗口是否贴着屏幕底边，已打开的 tab 页要同步底部安全区 */
+    setTabBarHidden(hidden) {
+      this.shell.setTabBarHidden(hidden);
+      for (const page of this.tabPages.values()) {
+        page.setSafeAreaInsets(this.shell.safeAreaInsetsFor(page.path, page.navigation));
+      }
+    }
     registerApis() {
       const routeApi = (handler) => (args) => this.enqueueRoute(() => handler(args));
       this.api.register({
@@ -2875,7 +2943,11 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
         ...createAudioApis({ emit: (event, data) => this.emitToService(event, data) }),
         ...createMapApis({ registry: this.api, operations: this.mapOperations }),
         ...createLibFileApis({ windowOf: (webviewId) => this.pages.get(webviewId)?.win }),
-        ...createUiApis({ shell: this.shell, updateNavigation: (state) => this.updateNavigation(state) }),
+        ...createUiApis({
+          shell: this.shell,
+          updateNavigation: (state) => this.updateNavigation(state),
+          setTabBarHidden: (hidden) => this.setTabBarHidden(hidden)
+        }),
         ...createMediaApis({
           showActionSheet: (options) => this.shell.showActionSheet(options),
           chooseFiles,