@tarojs/router 4.0.0-beta.2 → 4.0.0-beta.21

package/dist/router/navigation-bar.d.ts

@@ -0,0 +1,32 @@
+import PageHandler from "./page.js";
+interface NavigationBarCache {
+    backgroundColor?: string;
+    fontColor?: string;
+    title?: string;
+    show?: boolean;
+}
+declare class NavigationBarHandler {
+    pageContext: PageHandler;
+    navigationBarElement: Element;
+    cache: Record<string, NavigationBarCache>;
+    isLoadDdEntry: boolean;
+    constructor(pageContext: PageHandler);
+    private toHomeFn;
+    private backFn;
+    get homeBtnElement(): Element | null;
+    get backBtnElement(): Element | null;
+    get titleElement(): Element | null;
+    init(): void;
+    setNavigationBarElement(): void;
+    load(): void;
+    setCacheValue(): void;
+    setFnBtnState(): void;
+    setNavigationBarBackground(backgroundColor?: string): void;
+    setNavigationBarTextStyle(fontColor?: string): void;
+    setTitle(title?: any): void;
+    fnBtnToggleToHome(): void;
+    fnBtnToggleToBack(): void;
+    fnBtnToggleToNone(): void;
+    setNavigationBarVisible(show?: any): void;
+}
+export { NavigationBarHandler as default };

package/dist/router/navigation-bar.js

@@ -0,0 +1,209 @@
+import { eventCenter } from '@tarojs/runtime';
+import { reLaunch, navigateBack } from '../api.js';
+import { loadNavigationBarStyle } from '../style.js';
+import '../utils/index.js';
+import stacks from './stack.js';
+import { isDingTalk } from '../utils/navigate.js';
+
+class NavigationBarHandler {
+    constructor(pageContext) {
+        this.isLoadDdEntry = false;
+        this.cache = {};
+        this.pageContext = pageContext;
+        this.init();
+        loadNavigationBarStyle();
+        eventCenter.on('__taroH5SetNavigationTitle', (title) => {
+            this.setTitle(title);
+        });
+        eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
+            if (typeof backgroundColor === 'string')
+                this.setNavigationBarBackground(backgroundColor);
+            if (typeof frontColor === 'string')
+                this.setNavigationBarTextStyle(frontColor);
+        });
+    }
+    toHomeFn() {
+        reLaunch({ url: this.pageContext.homePage });
+    }
+    backFn() {
+        navigateBack();
+    }
+    get homeBtnElement() {
+        var _a;
+        if (!this.navigationBarElement)
+            return null;
+        return (_a = this.navigationBarElement.getElementsByTagName('taro-navigation-bar-home')) === null || _a === void 0 ? void 0 : _a[0];
+    }
+    get backBtnElement() {
+        var _a;
+        if (!this.navigationBarElement)
+            return null;
+        return (_a = this.navigationBarElement.getElementsByTagName('taro-navigation-bar-back')) === null || _a === void 0 ? void 0 : _a[0];
+    }
+    get titleElement() {
+        var _a;
+        if (!this.navigationBarElement)
+            return null;
+        return (_a = this.navigationBarElement.getElementsByTagName('taro-navigation-bar-title')) === null || _a === void 0 ? void 0 : _a[0];
+    }
+    init() {
+        var _a, _b;
+        this.setNavigationBarElement();
+        if (!this.navigationBarElement)
+            return;
+        (_a = this.homeBtnElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.toHomeFn.bind(this));
+        (_b = this.backBtnElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.backFn.bind(this));
+    }
+    setNavigationBarElement() {
+        var _a;
+        this.navigationBarElement = (_a = document.getElementsByTagName('taro-navigation-bar-wrap')) === null || _a === void 0 ? void 0 : _a[0];
+    }
+    load() {
+        this.setCacheValue();
+        this.setTitle();
+        this.setNavigationBarVisible();
+        this.setFnBtnState();
+        this.setNavigationBarBackground();
+        this.setNavigationBarTextStyle();
+    }
+    setCacheValue() {
+        const currentPage = this.pageContext.currentPage;
+        if (typeof this.cache[currentPage] !== 'object') {
+            this.cache[currentPage] = {};
+        }
+    }
+    setFnBtnState() {
+        const currentRouter = this.pageContext.currentPage;
+        if (this.pageContext.isTabBar(currentRouter) || this.pageContext.homePage === currentRouter) {
+            this.fnBtnToggleToNone();
+        }
+        else if (stacks.length > 1) {
+            this.fnBtnToggleToBack();
+        }
+        else {
+            this.fnBtnToggleToHome();
+        }
+    }
+    setNavigationBarBackground(backgroundColor) {
+        var _a, _b, _c;
+        if (!this.navigationBarElement)
+            return;
+        const currentPage = this.pageContext.currentPage;
+        let color;
+        if (typeof backgroundColor === 'string') {
+            color = backgroundColor;
+            this.cache[currentPage] &&
+                (this.cache[currentPage].backgroundColor = color);
+        }
+        else {
+            const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.backgroundColor;
+            if (typeof cacheValue === 'string') {
+                color = cacheValue;
+            }
+            else {
+                color = ((_c = (_b = this.pageContext.config) === null || _b === void 0 ? void 0 : _b.window) === null || _c === void 0 ? void 0 : _c.navigationBarBackgroundColor) || '#000000';
+                this.cache[currentPage] &&
+                    (this.cache[currentPage].backgroundColor = color);
+            }
+        }
+        this.navigationBarElement.style.background = color;
+    }
+    setNavigationBarTextStyle(fontColor) {
+        var _a, _b, _c;
+        if (!this.navigationBarElement)
+            return;
+        const currentPage = this.pageContext.currentPage;
+        let color;
+        if (typeof fontColor === 'string') {
+            color = fontColor;
+            this.cache[currentPage] &&
+                (this.cache[currentPage].fontColor = color);
+        }
+        else {
+            const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.fontColor;
+            if (typeof cacheValue === 'string') {
+                color = cacheValue;
+            }
+            else {
+                color = ((_c = (_b = this.pageContext.config) === null || _b === void 0 ? void 0 : _b.window) === null || _c === void 0 ? void 0 : _c.navigationBarTextStyle) || 'white';
+                this.cache[currentPage] &&
+                    (this.cache[currentPage].fontColor = color);
+            }
+        }
+        this.navigationBarElement.style.color = color;
+    }
+    setTitle(title) {
+        var _a, _b, _c;
+        const currentPage = this.pageContext.currentPage;
+        let proceedTitle;
+        if (typeof title === 'string') {
+            proceedTitle = title;
+            this.cache[currentPage] &&
+                (this.cache[currentPage].title = proceedTitle);
+        }
+        else {
+            const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.title;
+            if (typeof cacheValue === 'string') {
+                proceedTitle = cacheValue;
+            }
+            else {
+                proceedTitle = (_c = (_b = this.pageContext.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationBarTitleText) !== null && _c !== void 0 ? _c : document.title;
+                this.cache[currentPage] &&
+                    (this.cache[currentPage].title = proceedTitle);
+            }
+        }
+        if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
+            if (!this.isLoadDdEntry) {
+                this.isLoadDdEntry = true;
+                require('dingtalk-jsapi/platform');
+            }
+            const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
+            setDingTitle({ proceedTitle });
+        }
+        document.title = proceedTitle;
+        if (!this.titleElement)
+            return;
+        this.titleElement.innerHTML = proceedTitle;
+    }
+    fnBtnToggleToHome() {
+        if (!this.navigationBarElement)
+            return;
+        this.navigationBarElement.classList.add('taro-navigation-bar-home');
+        this.navigationBarElement.classList.remove('taro-navigation-bar-back');
+    }
+    fnBtnToggleToBack() {
+        if (!this.navigationBarElement)
+            return;
+        this.navigationBarElement.classList.remove('taro-navigation-bar-home');
+        this.navigationBarElement.classList.add('taro-navigation-bar-back');
+    }
+    fnBtnToggleToNone() {
+        if (!this.navigationBarElement)
+            return;
+        this.navigationBarElement.classList.remove('taro-navigation-bar-home');
+        this.navigationBarElement.classList.remove('taro-navigation-bar-back');
+    }
+    setNavigationBarVisible(show) {
+        var _a, _b;
+        let shouldShow;
+        if (typeof show === 'boolean') {
+            shouldShow = show;
+        }
+        else {
+            shouldShow = (_a = this.pageContext.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
+            if (typeof ((_b = this.pageContext.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
+                shouldShow = this.pageContext.pageConfig.navigationStyle;
+            }
+        }
+        if (shouldShow === 'default') {
+            this.navigationBarElement.classList.add('taro-navigation-bar-show');
+            this.navigationBarElement.classList.remove('taro-navigation-bar-hide');
+        }
+        else {
+            this.navigationBarElement.classList.add('taro-navigation-bar-hide');
+            this.navigationBarElement.classList.remove('taro-navigation-bar-show');
+        }
+    }
+}
+
+export { NavigationBarHandler as default };

package/dist/router/page.d.ts

@@ -1,15 +1,17 @@
+import NavigationBarHandler from "./navigation-bar.js";
 import { PageInstance } from '@tarojs/runtime';
 import { PageConfig, RouterAnimate } from '@tarojs/taro';
 import { History } from "../history.js";
 import { Route, SpaRouterConfig } from '../../types/router';
 declare class PageHandler {
     history: History;
-    protected config: SpaRouterConfig;
+    config: SpaRouterConfig;
     protected readonly defaultAnimation: RouterAnimate;
     protected unloadTimer: ReturnType<typeof setTimeout> | null;
     protected hideTimer: ReturnType<typeof setTimeout> | null;
     protected lastHidePage: HTMLElement | null;
     protected lastUnloadPage: PageInstance | null;
+    protected navigationBarHandler: NavigationBarHandler;
     homePage: string;
     constructor(config: SpaRouterConfig, history: History);
     get currentPage(): string;

package/dist/router/page.js

@@ -5,6 +5,7 @@ import { bindPageScroll } from '../events/scroll.js';
 import { setHistory, history } from '../history.js';
 import { loadAnimateStyle, loadRouterStyle } from '../style.js';
 import { routesAlias } from '../utils/index.js';
+import NavigationBarHandler from './navigation-bar.js';
 import stacks from './stack.js';
 
 /* eslint-disable dot-notation */
@@ -15,6 +16,7 @@ class PageHandler {
         this.config = config;
         this.homePage = getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
         this.mount();
+        this.navigationBarHandler = new NavigationBarHandler(this);
     }
     get currentPage() {
         const routePath = getCurrentPage(this.routerMode, this.basename);
@@ -158,6 +160,7 @@ class PageHandler {
             this.isDefaultNavigationStyle() && pageEl.classList.add('taro_navigation_page');
             this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
+            this.navigationBarHandler.load();
             this.bindPageEvents(page, pageConfig);
             this.triggerRouterChange();
         }
@@ -170,6 +173,7 @@ class PageHandler {
                 this.isDefaultNavigationStyle() && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page'));
                 this.addAnimation(pageEl, pageNo === 0);
                 (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
+                this.navigationBarHandler.load();
                 this.onReady(page, true);
                 this.bindPageEvents(page, pageConfig);
                 this.triggerRouterChange();
@@ -224,6 +228,7 @@ class PageHandler {
             pageEl.classList.remove('taro_page_shade');
             this.addAnimation(pageEl, pageNo === 0);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
+            this.navigationBarHandler.load();
             this.bindPageEvents(page, pageConfig);
             this.triggerRouterChange();
         }
@@ -233,6 +238,7 @@ class PageHandler {
                 pageEl = this.getPageContainer(page);
                 this.addAnimation(pageEl, pageNo === 0);
                 (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
+                this.navigationBarHandler.load();
                 this.onReady(page, false);
                 this.bindPageEvents(page, pageConfig);
                 this.triggerRouterChange();

package/dist/router/spa.js

@@ -4,7 +4,6 @@ import { Action } from 'history';
 import UniversalRouter from 'universal-router';
 import { prependBasename } from '../history.js';
 import { routesAlias } from '../utils/index.js';
-import { setTitle } from '../utils/navigate.js';
 import { RouterConfig } from './index.js';
 import PageHandler from './page.js';
 import stacks from './stack.js';
@@ -40,7 +39,7 @@ function createRouter(history, app, config, framework) {
     (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
     app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
     const render = ({ location, action }) => __awaiter(this, void 0, void 0, function* () {
-        var _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _c, _d, _e, _f, _g, _h, _j, _k;
         handler.pathname = decodeURI(location.pathname);
         if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
             window.scrollTo(0, 0);
@@ -80,7 +79,6 @@ function createRouter(history, app, config, framework) {
         let navigationBarTextStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationBarTextStyle) || 'white';
         let navigationBarBackgroundColor = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarBackgroundColor) || '#000000';
         if (pageConfig) {
-            setTitle((_j = pageConfig.navigationBarTitleText) !== null && _j !== void 0 ? _j : document.title);
             if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
                 enablePullDownRefresh = pageConfig.enablePullDownRefresh;
             }
@@ -97,7 +95,7 @@ function createRouter(history, app, config, framework) {
         eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = Current.page;
         const pathname = handler.pathname;
-        const methodName = (_k = stacks.method) !== null && _k !== void 0 ? _k : '';
+        const methodName = (_j = stacks.method) !== null && _j !== void 0 ? _j : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
         stacks.method = '';
@@ -163,7 +161,7 @@ function createRouter(history, app, config, framework) {
             shouldLoad = true;
         }
         if (shouldLoad || stacks.length < 1) {
-            const el = (_l = element.default) !== null && _l !== void 0 ? _l : element;
+            const el = (_k = element.default) !== null && _k !== void 0 ? _k : element;
             const loadConfig = Object.assign({}, pageConfig);
             const stacksIndex = stacks.length;
             delete loadConfig['path'];
@@ -188,6 +186,15 @@ function createRouter(history, app, config, framework) {
     }
     render({ location: history.location, action: Action.Push });
     (_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
+    window.addEventListener('visibilitychange', () => {
+        var _a, _b;
+        if (document.visibilityState === 'visible') {
+            (_a = app.onShow) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
+        }
+        else {
+            (_b = app.onHide) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
+        }
+    });
     return history.listen(render);
 }
 

package/dist/style.d.ts

@@ -6,5 +6,9 @@ declare function loadAnimateStyle(ms?: number): void;
  * 插入路由相关样式
  */
 declare function loadRouterStyle(enableTabBar: boolean, enableWindowScroll: boolean): void;
+/**
+ * 插入导航栏相关的样式
+*/
+declare function loadNavigationBarStyle(): void;
 declare function addStyle(css: any): void;
-export { loadAnimateStyle, loadRouterStyle, addStyle };
+export { loadAnimateStyle, loadRouterStyle, loadNavigationBarStyle, addStyle };

package/dist/style.js

@@ -3,6 +3,9 @@
  */
 function loadAnimateStyle(ms = 300) {
     const css = `
+body {
+  overflow: hidden; // 防止 iOS 页面滚动
+}
 .taro_router > .taro_page {
   position: absolute;
   left: 0;
@@ -64,6 +67,60 @@ ${enableTabBar ? `
 `;
     addStyle(css);
 }
+/**
+ * 插入导航栏相关的样式
+*/
+function loadNavigationBarStyle() {
+    const css = `
+  .taro-navigation-bar-show {
+    background: white;
+    position: sticky;
+    z-index: 500;
+    top: 0;
+    padding-bottom: 8px;
+    padding-top: calc(env(safe-area-inset-top) + 8px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .taro-navigation-bar-hide {
+    display: none;
+  }
+
+  taro-navigation-bar-title {
+    font-size: 24px;
+    height: 24px;
+    line-height: 24px;
+  }
+
+  .taro-navigation-bar-no-icon > taro-navigation-bar-home {
+    display: none;
+  }
+
+  .taro-navigation-bar-no-icon > taro-navigation-bar-back {
+    display: none;
+  }
+
+  .taro-navigation-bar-home > taro-navigation-bar-home {
+    display: block;
+    left: 8px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+  }
+
+  .taro-navigation-bar-back > taro-navigation-bar-back {
+    display: block;
+    left: 8px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+  }
+
+  `;
+    addStyle(css);
+}
 function addStyle(css) {
     if (!css)
         return;
@@ -72,4 +129,4 @@ function addStyle(css) {
     document.getElementsByTagName('head')[0].appendChild(style);
 }
 
-export { addStyle, loadAnimateStyle, loadRouterStyle };
+export { addStyle, loadAnimateStyle, loadNavigationBarStyle, loadRouterStyle };

package/dist/utils/index.js

@@ -1,5 +1,4 @@
 import { addLeadingSlash } from '@tarojs/runtime';
-import 'tslib';
 
 class RoutesAlias {
     constructor() {

package/dist/utils/navigate.d.ts

@@ -1,4 +1,9 @@
 declare const isWeixin: () => boolean;
 declare const isDingTalk: () => boolean;
-declare function setTitle(title: string): Promise<string>;
-export { isWeixin, isDingTalk, setTitle };
+declare function setMpaTitle(title: string): void;
+declare function setTitle(title: string): void;
+declare function setNavigationBarStyle(option: {
+    backgroundColor: string;
+    frontColor: string;
+}): void;
+export { isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle };

package/dist/utils/navigate.js

@@ -1,25 +1,28 @@
-import { __awaiter } from 'tslib';
+import { eventCenter } from '@tarojs/runtime';
 
-let preTitle = document.title;
-let isLoadDdEntry = false;
 const isWeixin = () => !!navigator.userAgent.match(/\bMicroMessenger\b/ig);
 const isDingTalk = () => !!navigator.userAgent.match(/\bDingTalk\b/ig);
-function setTitle(title) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (preTitle === title)
-            return title;
-        document.title = title;
-        preTitle = title;
-        if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
-            if (!isLoadDdEntry) {
-                isLoadDdEntry = true;
-                require('dingtalk-jsapi/platform');
-            }
-            const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
-            setDingTitle({ title });
+let preTitle = document.title;
+let isLoadDdEntry = false;
+function setMpaTitle(title) {
+    if (preTitle === title)
+        return;
+    document.title = title;
+    preTitle = title;
+    if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
+        if (!isLoadDdEntry) {
+            isLoadDdEntry = true;
+            require('dingtalk-jsapi/platform');
         }
-        return title;
-    });
+        const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
+        setDingTitle({ title });
+    }
+}
+function setTitle(title) {
+    eventCenter.trigger('__taroH5SetNavigationTitle', title);
+}
+function setNavigationBarStyle(option) {
+    eventCenter.trigger('__taroH5setNavigationBarColor', option);
 }
 
-export { isDingTalk, isWeixin, setTitle };
+export { isDingTalk, isWeixin, setMpaTitle, setNavigationBarStyle, setTitle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/router",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.21",
   "description": "Taro-router",
   "browser": "dist/index.js",
   "main:h5": "dist/index.esm.js",
@@ -44,12 +44,12 @@
     "rollup-plugin-ts": "^3.0.2",
     "ts-jest": "^29.0.5",
     "typescript": "^4.7.4",
-    "@tarojs/runtime": "4.0.0-beta.2",
-    "@tarojs/taro": "4.0.0-beta.2"
+    "@tarojs/taro": "4.0.0-beta.21",
+    "@tarojs/runtime": "4.0.0-beta.21"
   },
   "peerDependencies": {
-    "@tarojs/taro": "4.0.0-beta.2",
-    "@tarojs/runtime": "4.0.0-beta.2"
+    "@tarojs/runtime": "4.0.0-beta.21",
+    "@tarojs/taro": "4.0.0-beta.21"
   },
   "scripts": {
     "prebuild": "pnpm run clean",