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

package/dist/index.esm.js

@@ -1,12 +1,38 @@
 import { defineCustomElementTaroTabbar } from '@tarojs/components/dist/components';
 import { initTabBarApis } from '@tarojs/taro';
 import { __awaiter } from 'tslib';
-import { addLeadingSlash, Current, stripBasename, eventCenter, incrementId, createPageConfig, hooks, stringify, getHomePage, getCurrentPage, stripTrailing, requestAnimationFrame as requestAnimationFrame$1 } from '@tarojs/runtime';
+import { eventCenter, addLeadingSlash, Current, stripBasename, incrementId, createPageConfig, hooks, stringify, getHomePage, getCurrentPage, stripTrailing, requestAnimationFrame as requestAnimationFrame$1 } from '@tarojs/runtime';
 import { createBrowserHistory, createHashHistory, Action, parsePath } from 'history';
 export { createBrowserHistory, createHashHistory } from 'history';
 import queryString from 'query-string';
 import UniversalRouter from 'universal-router';
 
+const home_svg_str = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M23.8899 12.2737C23.8232 12.3584 23.7237 12.3997 23.6198 12.3974H20.7994V23.5996C20.7994 23.8194 20.6213 24 20.4001 24H14.7994C14.5791 24 14.4002 23.8194 14.4002 23.5996V15.6H9.59963V23.5996C9.59963 23.8194 9.42075 24 9.20033 24H3.59968C3.48981 24 3.38964 23.954 3.31764 23.8811C3.24495 23.8091 3.2004 23.7087 3.2004 23.5996V12.3975H0.398546V12.3967C0.296893 12.396 0.194446 12.3544 0.11579 12.2738C-0.0371146 12.114 -0.0400714 11.864 0.11579 11.7076L11.7201 0.117284C11.8767 -0.0390948 12.1298 -0.0390948 12.2863 0.117284L23.8899 11.7076C24.0465 11.864 24.0265 12.0995 23.8899 12.2737ZM12.0029 0.964625L1.37086 11.5854L3.59968 11.5839V11.5999C3.65537 11.5999 3.70804 11.611 3.75557 11.6307C3.89952 11.692 4.00046 11.8339 4.00046 11.9996V23.1991H8.79955V15.2003C8.79955 14.9789 8.97917 14.8002 9.20033 14.8002H14.7995C15.0207 14.8002 15.2003 14.9789 15.2003 15.2003V23.1991H20.0001V11.9996C20.0001 11.8339 20.1003 11.692 20.2443 11.6307C20.2918 11.611 20.3453 11.5999 20.4001 11.5999V11.5713L22.6193 11.5691L12.0029 0.964625Z" fill="currentColor"/>
+</svg>
+`;
+const back_svg_str = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.8206 22.9016L7.45515 11.8756L17.8206 1.09845C18.0598 0.849741 18.0598 0.435233 17.8206 0.186528C17.5814 -0.0621762 17.1827 -0.0621762 16.9435 0.186528L6.1794 11.4611C5.9402 11.7098 5.9402 12.1244 6.1794 12.3731L16.9435 23.8135C17.1827 24.0622 17.5814 24.0622 17.8206 23.8135C18.0598 23.5648 18.0598 23.1503 17.8206 22.9016Z" fill="currentColor"/>
+</svg>
+
+`;
+function initNavigationBar(container) {
+    const navigationBar = document.createElement('taro-navigation-bar-wrap');
+    navigationBar.classList.add('taro-navigation-bar-no-icon');
+    const navigationBarBackBtn = document.createElement('taro-navigation-bar-back');
+    const navigationBarHomeBtn = document.createElement('taro-navigation-bar-home');
+    navigationBarBackBtn.innerHTML = back_svg_str;
+    navigationBarHomeBtn.innerHTML = home_svg_str;
+    const navigationBarTitle = document.createElement('taro-navigation-bar-title');
+    navigationBar.appendChild(navigationBarHomeBtn);
+    navigationBar.appendChild(navigationBarBackBtn);
+    navigationBar.appendChild(navigationBarTitle);
+    navigationBar.id = 'taro-navigation-bar';
+    container.prepend(navigationBar);
+}
+
 function initTabbar(config, history) {
     if (config.tabBar == null || config.tabBar.custom) {
         return;
@@ -87,7 +113,7 @@ class MpaHistory {
             url += `?${to.search}`;
         }
         if (to.hash) {
-            url += `#${to.hash}`;
+            url += to.hash.startsWith('#') ? to.hash : `#${to.hash}`;
         }
         return url;
     }
@@ -244,26 +270,29 @@ class Stacks {
 }
 const stacks = new Stacks();
 
-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);
 }
 
 class RoutesAlias {
@@ -347,6 +376,21 @@ function navigate(option, method) {
                 if ('url' in option) {
                     const pathPieces = processNavigateUrl(option);
                     const state = { timestamp: Date.now() };
+                    if (pathPieces.pathname) {
+                        const originPath = routesAlias.getOrigin(pathPieces.pathname);
+                        const pagePath = originPath.startsWith('/') ? originPath.substring(1) : originPath;
+                        if (!RouterConfig.pages.includes(pagePath)) {
+                            const res = { errMsg: `${method}:fail page ${pagePath} is not found` };
+                            fail === null || fail === void 0 ? void 0 : fail(res);
+                            complete === null || complete === void 0 ? void 0 : complete(res);
+                            if (fail || complete) {
+                                return resolve(res);
+                            }
+                            else {
+                                return reject(res);
+                            }
+                        }
+                    }
                     if (method === 'navigateTo') {
                         history.push(pathPieces, state);
                     }
@@ -372,7 +416,12 @@ function navigate(option, method) {
                 const res = { errMsg: `${method}:fail ${error.message || error}` };
                 fail === null || fail === void 0 ? void 0 : fail(res);
                 complete === null || complete === void 0 ? void 0 : complete(res);
-                reject(res);
+                if (fail || complete) {
+                    return resolve(res);
+                }
+                else {
+                    return reject(res);
+                }
             }
         });
     });
@@ -407,12 +456,18 @@ let pageResizeFn;
 function bindPageResize(page) {
     pageResizeFn && window.removeEventListener('resize', pageResizeFn);
     pageResizeFn = function () {
-        page.onResize && page.onResize({
-            size: {
-                windowHeight: window.innerHeight,
-                windowWidth: window.innerWidth
-            }
-        });
+        if (page.onResize) {
+            const mediaQuery = window.matchMedia('(orientation: portrait)');
+            page.onResize({
+                deviceOrientation: mediaQuery.matches ? 'portrait' : 'landscape',
+                size: {
+                    windowHeight: window.innerHeight,
+                    windowWidth: window.innerWidth,
+                    screenHeight: window.screen.height,
+                    screenWidth: window.screen.width,
+                }
+            });
+        }
     };
     window.addEventListener('resize', pageResizeFn, false);
 }
@@ -456,6 +511,9 @@ function getOffset() {
  */
 function loadAnimateStyle(ms = 300) {
     const css = `
+body {
+  overflow: hidden; // 防止 iOS 页面滚动
+}
 .taro_router > .taro_page {
   position: absolute;
   left: 0;
@@ -517,6 +575,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;
@@ -685,6 +797,7 @@ function createMultiRouter(history, app, config, framework) {
         if (typeof app.onUnhandledRejection === 'function') {
             window.addEventListener('unhandledrejection', app.onUnhandledRejection);
         }
+        eventCenter.on('__taroH5SetNavigationTitle', setMpaTitle);
         RouterConfig.config = config;
         const handler = new MultiPageHandler(config, history);
         const launchParam = {
@@ -718,7 +831,7 @@ function createMultiRouter(history, app, config, framework) {
             return;
         let enablePullDownRefresh = ((_c = config === null || config === void 0 ? void 0 : config.window) === null || _c === void 0 ? void 0 : _c.enablePullDownRefresh) || false;
         if (pageConfig) {
-            setTitle((_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title);
+            setMpaTitle((_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title);
             if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
                 enablePullDownRefresh = pageConfig.enablePullDownRefresh;
             }
@@ -730,9 +843,219 @@ function createMultiRouter(history, app, config, framework) {
         const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, pathName, framework, handler.PullDownRefresh) : el, pathName + stringify(launchParam), {}, loadConfig);
         handler.load(page, pageConfig);
         (_f = app.onShow) === null || _f === void 0 ? void 0 : _f.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);
+            }
+        });
     });
 }
 
+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');
+        }
+    }
+}
+
 /* eslint-disable dot-notation */
 class PageHandler {
     constructor(config, history) {
@@ -741,6 +1064,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);
@@ -884,6 +1208,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();
         }
@@ -896,6 +1221,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();
@@ -950,6 +1276,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();
         }
@@ -959,6 +1286,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();
@@ -1075,7 +1403,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);
@@ -1115,7 +1443,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;
             }
@@ -1132,7 +1459,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 = '';
@@ -1198,7 +1525,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'];
@@ -1223,6 +1550,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);
 }
 
@@ -1238,6 +1574,7 @@ function handleAppMount(config, _, appId = config.appId || 'app') {
     app.classList.add('taro_router');
     if (!isPosition)
         appWrapper.appendChild(app);
+    initNavigationBar(appWrapper);
 }
 function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
     let app = document.getElementById(appId);
@@ -1263,6 +1600,7 @@ function handleAppMountWithTabbar(config, history, appId = config.appId || 'app'
         appWrapper.replaceChild(container, app);
     }
     initTabbar(config, history);
+    initNavigationBar(container);
 }
 
-export { createMpaHistory, createMultiRouter, createRouter, getCurrentPages, handleAppMount, handleAppMountWithTabbar, history, isDingTalk, isWeixin, navigateBack, navigateTo, prependBasename, reLaunch, redirectTo, routesAlias, setHistory, setHistoryMode, setTitle, switchTab };
+export { createMpaHistory, createMultiRouter, createRouter, getCurrentPages, handleAppMount, handleAppMountWithTabbar, history, isDingTalk, isWeixin, navigateBack, navigateTo, prependBasename, reLaunch, redirectTo, routesAlias, setHistory, setHistoryMode, setMpaTitle, setNavigationBarStyle, setTitle, switchTab };

package/dist/index.js

@@ -1,3 +1,4 @@
+import { initNavigationBar } from './navigationBar.js';
 import { initTabbar } from './tabbar.js';
 export { getCurrentPages, navigateBack, navigateTo, reLaunch, redirectTo, switchTab } from './api.js';
 export { createMpaHistory, history, prependBasename, setHistory, setHistoryMode } from './history.js';
@@ -5,7 +6,7 @@ export { createMultiRouter } from './router/mpa.js';
 export { createRouter } from './router/spa.js';
 export { routesAlias } from './utils/index.js';
 export { createBrowserHistory, createHashHistory } from 'history';
-export { isDingTalk, isWeixin, setTitle } from './utils/navigate.js';
+export { isDingTalk, isWeixin, setMpaTitle, setNavigationBarStyle, setTitle } from './utils/navigate.js';
 
 function handleAppMount(config, _, appId = config.appId || 'app') {
     let app = document.getElementById(appId);
@@ -19,6 +20,7 @@ function handleAppMount(config, _, appId = config.appId || 'app') {
     app.classList.add('taro_router');
     if (!isPosition)
         appWrapper.appendChild(app);
+    initNavigationBar(appWrapper);
 }
 function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
     let app = document.getElementById(appId);
@@ -44,6 +46,7 @@ function handleAppMountWithTabbar(config, history, appId = config.appId || 'app'
         appWrapper.replaceChild(container, app);
     }
     initTabbar(config, history);
+    initNavigationBar(container);
 }
 
 export { handleAppMount, handleAppMountWithTabbar };

package/dist/navigationBar.d.ts

@@ -0,0 +1,2 @@
+declare function initNavigationBar(container: HTMLElement): void;
+export { initNavigationBar };

package/dist/navigationBar.js

@@ -0,0 +1,27 @@
+const home_svg_str = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M23.8899 12.2737C23.8232 12.3584 23.7237 12.3997 23.6198 12.3974H20.7994V23.5996C20.7994 23.8194 20.6213 24 20.4001 24H14.7994C14.5791 24 14.4002 23.8194 14.4002 23.5996V15.6H9.59963V23.5996C9.59963 23.8194 9.42075 24 9.20033 24H3.59968C3.48981 24 3.38964 23.954 3.31764 23.8811C3.24495 23.8091 3.2004 23.7087 3.2004 23.5996V12.3975H0.398546V12.3967C0.296893 12.396 0.194446 12.3544 0.11579 12.2738C-0.0371146 12.114 -0.0400714 11.864 0.11579 11.7076L11.7201 0.117284C11.8767 -0.0390948 12.1298 -0.0390948 12.2863 0.117284L23.8899 11.7076C24.0465 11.864 24.0265 12.0995 23.8899 12.2737ZM12.0029 0.964625L1.37086 11.5854L3.59968 11.5839V11.5999C3.65537 11.5999 3.70804 11.611 3.75557 11.6307C3.89952 11.692 4.00046 11.8339 4.00046 11.9996V23.1991H8.79955V15.2003C8.79955 14.9789 8.97917 14.8002 9.20033 14.8002H14.7995C15.0207 14.8002 15.2003 14.9789 15.2003 15.2003V23.1991H20.0001V11.9996C20.0001 11.8339 20.1003 11.692 20.2443 11.6307C20.2918 11.611 20.3453 11.5999 20.4001 11.5999V11.5713L22.6193 11.5691L12.0029 0.964625Z" fill="currentColor"/>
+</svg>
+`;
+const back_svg_str = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.8206 22.9016L7.45515 11.8756L17.8206 1.09845C18.0598 0.849741 18.0598 0.435233 17.8206 0.186528C17.5814 -0.0621762 17.1827 -0.0621762 16.9435 0.186528L6.1794 11.4611C5.9402 11.7098 5.9402 12.1244 6.1794 12.3731L16.9435 23.8135C17.1827 24.0622 17.5814 24.0622 17.8206 23.8135C18.0598 23.5648 18.0598 23.1503 17.8206 22.9016Z" fill="currentColor"/>
+</svg>
+
+`;
+function initNavigationBar(container) {
+    const navigationBar = document.createElement('taro-navigation-bar-wrap');
+    navigationBar.classList.add('taro-navigation-bar-no-icon');
+    const navigationBarBackBtn = document.createElement('taro-navigation-bar-back');
+    const navigationBarHomeBtn = document.createElement('taro-navigation-bar-home');
+    navigationBarBackBtn.innerHTML = back_svg_str;
+    navigationBarHomeBtn.innerHTML = home_svg_str;
+    const navigationBarTitle = document.createElement('taro-navigation-bar-title');
+    navigationBar.appendChild(navigationBarHomeBtn);
+    navigationBar.appendChild(navigationBarBackBtn);
+    navigationBar.appendChild(navigationBarTitle);
+    navigationBar.id = 'taro-navigation-bar';
+    container.prepend(navigationBar);
+}
+
+export { initNavigationBar };

package/dist/router/mpa.js

@@ -1,8 +1,9 @@
 import { __awaiter } from 'tslib';
 import { incrementId, eventCenter, createPageConfig, hooks, stringify } from '@tarojs/runtime';
-import { setTitle } from '../utils/navigate.js';
+import '../utils/index.js';
 import { RouterConfig } from './index.js';
 import MultiPageHandler from './multi-page.js';
+import { setMpaTitle } from '../utils/navigate.js';
 
 const createStampId = incrementId();
 const launchStampId = createStampId();
@@ -20,6 +21,7 @@ function createMultiRouter(history, app, config, framework) {
         if (typeof app.onUnhandledRejection === 'function') {
             window.addEventListener('unhandledrejection', app.onUnhandledRejection);
         }
+        eventCenter.on('__taroH5SetNavigationTitle', setMpaTitle);
         RouterConfig.config = config;
         const handler = new MultiPageHandler(config, history);
         const launchParam = {
@@ -53,7 +55,7 @@ function createMultiRouter(history, app, config, framework) {
             return;
         let enablePullDownRefresh = ((_c = config === null || config === void 0 ? void 0 : config.window) === null || _c === void 0 ? void 0 : _c.enablePullDownRefresh) || false;
         if (pageConfig) {
-            setTitle((_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title);
+            setMpaTitle((_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title);
             if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
                 enablePullDownRefresh = pageConfig.enablePullDownRefresh;
             }
@@ -65,6 +67,15 @@ function createMultiRouter(history, app, config, framework) {
         const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, pathName, framework, handler.PullDownRefresh) : el, pathName + stringify(launchParam), {}, loadConfig);
         handler.load(page, pageConfig);
         (_f = app.onShow) === null || _f === void 0 ? void 0 : _f.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);
+            }
+        });
     });
 }