@tarojs/router 3.8.0-canary.0 → 4.0.0-alpha.2

package/dist/index.esm.js

@@ -1,94 +1,65 @@
-import { createBrowserHistory, createHashHistory, Action, parsePath } from 'history';
-import { Current, incrementId, eventCenter, createPageConfig, hooks, stringify, requestAnimationFrame as requestAnimationFrame$1 } from '@tarojs/runtime';
-import MobileDetect from 'mobile-detect';
-import queryString from 'query-string';
 import { defineCustomElementTaroTabbar } from '@tarojs/components/dist/components';
 import { initTabBarApis } from '@tarojs/taro';
+import { __awaiter } from 'tslib';
+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';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+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 const removeLeadingSlash = (str = '') => str.replace(/^\.?\//, '')
-// export const removeTrailingSearch = (str = '') => str.replace(/\?[\s\S]*$/, '')
-const addLeadingSlash = (url = '') => (url.charAt(0) === '/' ? url : '/' + url);
-const hasBasename = (path = '', prefix = '') => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path) || path === prefix;
-const stripBasename = (path = '', prefix = '') => hasBasename(path, prefix) ? path.substring(prefix.length) : path;
-const stripTrailing = (str = '') => str.replace(/[?#][\s\S]*$/, '');
-const getHomePage = (path = '', basename = '', customRoutes = {}, entryPagePath = '') => {
-    var _a;
-    const routePath = addLeadingSlash(stripBasename(path, basename));
-    const alias = ((_a = Object.entries(customRoutes).find(([key]) => key === routePath)) === null || _a === void 0 ? void 0 : _a[1]) || routePath;
-    return entryPagePath || (typeof alias === 'string' ? alias : alias[0]) || basename;
-};
-const getCurrentPage = (routerMode = 'hash', basename = '/') => {
-    const pagePath = routerMode === 'hash'
-        ? location.hash.slice(1).split('?')[0]
-        : location.pathname;
-    return addLeadingSlash(stripBasename(pagePath, basename));
-};
-class RoutesAlias {
-    constructor() {
-        this.conf = [];
-        this.getConfig = (url = '') => {
-            const customRoute = this.conf.filter((arr) => {
-                return arr.includes(url);
-            });
-            return customRoute[0];
-        };
-        this.getOrigin = (url = '') => {
-            var _a;
-            return ((_a = this.getConfig(url)) === null || _a === void 0 ? void 0 : _a[0]) || url;
-        };
-        this.getAlias = (url = '') => {
-            var _a;
-            return ((_a = this.getConfig(url)) === null || _a === void 0 ? void 0 : _a[1]) || url;
-        };
-        this.getAll = (url = '') => {
-            return this.conf
-                .filter((arr) => arr.includes(url))
-                .reduceRight((p, a) => {
-                p.unshift(a[1]);
-                return p;
-            }, []);
-        };
+function initTabbar(config, history) {
+    if (config.tabBar == null || config.tabBar.custom) {
+        return;
     }
-    set(customRoutes = {}) {
-        for (let key in customRoutes) {
-            const path = customRoutes[key];
-            key = addLeadingSlash(key);
-            if (typeof path === 'string') {
-                this.conf.push([key, addLeadingSlash(path)]);
-            }
-            else if ((path === null || path === void 0 ? void 0 : path.length) > 0) {
-                this.conf.push(...path.map(p => [key, addLeadingSlash(p)]));
-            }
-        }
+    // TODO: custom-tab-bar
+    defineCustomElementTaroTabbar();
+    const tabbar = document.createElement('taro-tabbar');
+    const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
+    tabbar.conf = config.tabBar;
+    tabbar.conf.homePage = history.location.pathname === '/' ? homePage : history.location.pathname;
+    const routerConfig = config.router;
+    tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
+    if (routerConfig.customRoutes) {
+        tabbar.conf.custom = true;
+        tabbar.conf.customRoutes = routerConfig.customRoutes;
+    }
+    else {
+        tabbar.conf.custom = false;
+        tabbar.conf.customRoutes = {};
     }
+    if (typeof routerConfig.basename !== 'undefined') {
+        tabbar.conf.basename = routerConfig.basename;
+    }
+    const container = document.getElementById('container');
+    container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
+    initTabBarApis(config);
 }
-const routesAlias = new RoutesAlias();
 
 class RouterConfig {
     static set config(e) {
@@ -108,7 +79,7 @@ class RouterConfig {
     }
     static get customRoutes() { return this.router.customRoutes || {}; }
     static isPage(url = '') {
-        return this.pages.findIndex(e => addLeadingSlash(e) === url) !== -1;
+        return this.pages.findIndex(e => prependBasename(e) === url) !== -1;
     }
 }
 
@@ -142,7 +113,7 @@ class MpaHistory {
             url += `?${to.search}`;
         }
         if (to.hash) {
-            url += `#${to.hash}`;
+            url += to.hash.startsWith('#') ? to.hash : `#${to.hash}`;
         }
         return url;
     }
@@ -191,6 +162,13 @@ class MpaHistory {
         };
     }
 }
+function setHistory(h, base = '/') {
+    history = h;
+    basename = base;
+}
+function createMpaHistory(_) {
+    return new MpaHistory();
+}
 function setHistoryMode(mode, base = '/') {
     const options = {
         window
@@ -200,7 +178,7 @@ function setHistoryMode(mode, base = '/') {
         history = createBrowserHistory(options);
     }
     else if (mode === 'multi') {
-        history = new MpaHistory();
+        history = createMpaHistory();
     }
     else {
         // default is hash
@@ -292,6 +270,72 @@ class Stacks {
 }
 const stacks = new Stacks();
 
+const isWeixin = () => !!navigator.userAgent.match(/\bMicroMessenger\b/ig);
+const isDingTalk = () => !!navigator.userAgent.match(/\bDingTalk\b/ig);
+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');
+        }
+        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 {
+    constructor() {
+        this.conf = [];
+        this.getConfig = (url = '') => {
+            const customRoute = this.conf.filter((arr) => {
+                return arr.includes(url);
+            });
+            return customRoute[0];
+        };
+        this.getOrigin = (url = '') => {
+            var _a;
+            return ((_a = this.getConfig(url)) === null || _a === void 0 ? void 0 : _a[0]) || url;
+        };
+        this.getAlias = (url = '') => {
+            var _a;
+            return ((_a = this.getConfig(url)) === null || _a === void 0 ? void 0 : _a[1]) || url;
+        };
+        this.getAll = (url = '') => {
+            return this.conf
+                .filter((arr) => arr.includes(url))
+                .reduceRight((p, a) => {
+                p.unshift(a[1]);
+                return p;
+            }, []);
+        };
+    }
+    set(customRoutes = {}) {
+        for (let key in customRoutes) {
+            const path = customRoutes[key];
+            key = addLeadingSlash(key);
+            if (typeof path === 'string') {
+                this.conf.push([key, addLeadingSlash(path)]);
+            }
+            else if ((path === null || path === void 0 ? void 0 : path.length) > 0) {
+                this.conf.push(...path.map(p => [key, addLeadingSlash(p)]));
+            }
+        }
+    }
+}
+const routesAlias = new RoutesAlias();
+
 function processNavigateUrl(option) {
     var _a;
     const pathPieces = parsePath(option.url);
@@ -332,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);
                     }
@@ -345,14 +404,24 @@ function navigate(option, method) {
                 }
                 else if (method === 'navigateBack') {
                     stacks.delta = option.delta;
-                    history.go(-option.delta);
+                    if (stacks.length > option.delta) {
+                        history.go(-option.delta);
+                    }
+                    else {
+                        history.go(1 - stacks.length);
+                    }
                 }
             }
             catch (error) {
                 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);
+                }
             }
         });
     });
@@ -383,47 +452,22 @@ function getCurrentPages() {
     return pages.map(e => { var _a; return (Object.assign(Object.assign({}, e), { route: ((_a = e.path) === null || _a === void 0 ? void 0 : _a.replace(/\?.*/g, '')) || '' })); });
 }
 
-let md;
-let preTitle = document.title;
-let isLoadDdEntry = false;
-function getMobileDetect() {
-    if (!md) {
-        md = new MobileDetect(navigator.userAgent);
-    }
-    return md;
-}
-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 });
-        }
-        return title;
-    });
-}
-function isDingTalk() {
-    const md = getMobileDetect();
-    return md.match(/DingTalk/ig);
-}
-
 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);
 }
@@ -467,7 +511,10 @@ function getOffset() {
  */
 function loadAnimateStyle(ms = 300) {
     const css = `
-.taro_router .taro_page {
+body {
+  overflow: hidden; // 防止 iOS 页面滚动
+}
+.taro_router > .taro_page {
   position: absolute;
   left: 0;
   top: 0;
@@ -479,52 +526,109 @@ function loadAnimateStyle(ms = 300) {
   z-index: 0;
 }
 
-.taro_router .taro_page.taro_tabbar_page,
-.taro_router .taro_page.taro_page_show.taro_page_stationed {
+.taro_router > .taro_page.taro_tabbar_page,
+.taro_router > .taro_page.taro_page_show.taro_page_stationed {
   transform: none;
 }
 
-.taro_router .taro_page.taro_page_show {
+.taro_router > .taro_page.taro_page_show {
   transform: translate(0, 0);
-}`;
+}
+`;
     addStyle(css);
 }
 /**
  * 插入路由相关样式
  */
-function loadRouterStyle(usingWindowScroll) {
+function loadRouterStyle(enableTabBar, enableWindowScroll) {
     const css = `
   .taro_router {
     position: relative;
     width: 100%;
     height: 100%;
-    min-height: 100vh;
-  }
-
-  .taro-tabbar__container .taro_router {
-    min-height: calc(100vh - 50px);
   }
 
   .taro_page {
     width: 100%;
     height: 100%;
-  ${usingWindowScroll ? '' : `
+${enableWindowScroll ? '' : `
     overflow-x: hidden;
     overflow-y: scroll;
     max-height: 100vh;
-  `}
+`}
   }
-
-  .taro-tabbar__container .taro-tabbar__panel {
+${enableTabBar ? `
+  .taro-tabbar__container > .taro-tabbar__panel {
     overflow: hidden;
   }
 
-  .taro-tabbar__container .taro_page.taro_tabbar_page {
-    max-height: calc(100vh - 50px);
+  .taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
+    max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
+    max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
+  }
+
+` : ''}
+  .taro_page_shade,
+  .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
+    display: none;
   }
 `;
     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;
@@ -533,38 +637,10 @@ function addStyle(css) {
     document.getElementsByTagName('head')[0].appendChild(style);
 }
 
-// @ts-nocheck
-function initTabbar(config) {
-    if (config.tabBar == null) {
-        return;
-    }
-    // TODO: custom-tab-bar
-    defineCustomElementTaroTabbar();
-    const tabbar = document.createElement('taro-tabbar');
-    const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
-    tabbar.conf = config.tabBar;
-    tabbar.conf.homePage = history.location.pathname === '/' ? homePage : history.location.pathname;
-    const routerConfig = config.router;
-    tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
-    if (routerConfig.customRoutes) {
-        tabbar.conf.custom = true;
-        tabbar.conf.customRoutes = routerConfig.customRoutes;
-    }
-    else {
-        tabbar.conf.custom = false;
-        tabbar.conf.customRoutes = {};
-    }
-    if (typeof routerConfig.basename !== 'undefined') {
-        tabbar.conf.basename = routerConfig.basename;
-    }
-    const container = document.getElementById('container');
-    container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
-    initTabBarApis(config);
-}
-
 /* eslint-disable dot-notation */
 class MultiPageHandler {
-    constructor(config) {
+    constructor(config, history) {
+        this.history = history;
         this.config = config;
         this.mount();
     }
@@ -611,39 +687,18 @@ class MultiPageHandler {
             : {};
         return Object.assign(Object.assign({}, query), options);
     }
-    mount() {
-        setHistoryMode(this.routerMode, this.router.basename);
-        loadRouterStyle(this.usingWindowScroll);
-        const appId = this.appId;
-        let app = document.getElementById(appId);
-        let isPosition = true;
-        if (!app) {
-            app = document.createElement('div');
-            app.id = appId;
-            isPosition = false;
-        }
-        const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
-        app.classList.add('taro_router');
-        if (this.tabBarList.length > 1) {
-            const container = document.createElement('div');
-            container.classList.add('taro-tabbar__container');
-            container.id = 'container';
-            const panel = document.createElement('div');
-            panel.classList.add('taro-tabbar__panel');
-            panel.appendChild(app.cloneNode(true));
-            container.appendChild(panel);
-            if (!isPosition) {
-                appWrapper.appendChild(container);
-            }
-            else {
-                appWrapper.replaceChild(container, app);
-            }
-            initTabbar(this.config);
-        }
-        else {
-            if (!isPosition)
-                appWrapper.appendChild(app);
+    isDefaultNavigationStyle() {
+        var _a, _b;
+        let style = (_a = this.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
+        if (typeof ((_b = this.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
+            style = this.pageConfig.navigationStyle;
         }
+        return style !== 'custom';
+    }
+    mount() {
+        setHistory(this.history, this.basename);
+        // Note: 注入页面样式
+        loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
     }
     onReady(page, onLoad = true) {
         var _a;
@@ -673,13 +728,17 @@ class MultiPageHandler {
             return;
         (_a = page.onLoad) === null || _a === void 0 ? void 0 : _a.call(page, this.getQuery('', page.options), () => {
             var _a;
+            const pageEl = this.getPageContainer(page);
             if (this.isTabBar) {
-                const pageEl = this.getPageContainer(page);
                 pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page');
             }
+            if (this.isDefaultNavigationStyle()) {
+                pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page');
+            }
             this.onReady(page, true);
             (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
             this.bindPageEvents(page, pageConfig);
+            this.triggerRouterChange();
         });
     }
     getPageContainer(page) {
@@ -707,6 +766,19 @@ class MultiPageHandler {
         bindPageScroll(page, scrollEl, distance);
         bindPageResize(page);
     }
+    triggerRouterChange() {
+        /**
+         * @tarojs/runtime 中生命周期跑在 promise 中，所以这里需要 setTimeout 延迟事件调用
+         * TODO 考虑将生命周期返回 Promise，用于处理相关事件调用顺序
+         */
+        setTimeout(() => {
+            eventCenter.trigger('__afterTaroRouterChange', {
+                toLocation: {
+                    path: this.pathname
+                }
+            });
+        }, 0);
+    }
 }
 
 const createStampId$1 = incrementId();
@@ -719,14 +791,15 @@ const launchStampId$1 = createStampId$1();
  * - TabBar 会多次加载
  * - 不支持路由动画
  */
-function createMultiRouter(app, config, framework) {
+function createMultiRouter(history, app, config, framework) {
     var _a, _b, _c, _d, _e, _f;
     return __awaiter(this, void 0, void 0, function* () {
         if (typeof app.onUnhandledRejection === 'function') {
             window.addEventListener('unhandledrejection', app.onUnhandledRejection);
         }
+        eventCenter.on('__taroH5SetNavigationTitle', setMpaTitle);
         RouterConfig.config = config;
-        const handler = new MultiPageHandler(config);
+        const handler = new MultiPageHandler(config, history);
         const launchParam = {
             path: config.pageName,
             query: handler.getQuery(launchStampId$1),
@@ -758,7 +831,7 @@ function createMultiRouter(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;
             }
@@ -770,21 +843,228 @@ function createMultiRouter(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);
+            }
+        });
     });
 }
 
-/* eslint-disable dot-notation */
-function setDisplay(el, type = '') {
-    if (el) {
-        el.style.display = type;
+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) {
+    constructor(config, history) {
+        this.history = history;
         this.defaultAnimation = { duration: 300, delay: 50 };
         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);
@@ -840,6 +1120,14 @@ class PageHandler {
         })) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
         return !!pagePath && this.tabBarList.some(t => stripTrailing(t.pagePath) === pagePath);
     }
+    isDefaultNavigationStyle() {
+        var _a, _b;
+        let style = (_a = this.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
+        if (typeof ((_b = this.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
+            style = this.pageConfig.navigationStyle;
+        }
+        return style !== 'custom';
+    }
     isSamePage(page) {
         const routePath = stripBasename(this.pathname, this.basename);
         const pagePath = stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
@@ -878,40 +1166,11 @@ class PageHandler {
         return Object.assign(Object.assign({}, query), options);
     }
     mount() {
-        setHistoryMode(this.routerMode, this.router.basename);
+        setHistory(this.history, this.basename);
         this.pathname = history.location.pathname;
+        // Note: 注入页面样式
         this.animation && loadAnimateStyle(this.animationDuration);
-        loadRouterStyle(this.usingWindowScroll);
-        const appId = this.appId;
-        let app = document.getElementById(appId);
-        let isPosition = true;
-        if (!app) {
-            app = document.createElement('div');
-            app.id = appId;
-            isPosition = false;
-        }
-        const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
-        app.classList.add('taro_router');
-        if (this.tabBarList.length > 1) {
-            const container = document.createElement('div');
-            container.classList.add('taro-tabbar__container');
-            container.id = 'container';
-            const panel = document.createElement('div');
-            panel.classList.add('taro-tabbar__panel');
-            panel.appendChild(app.cloneNode(true));
-            container.appendChild(panel);
-            if (!isPosition) {
-                appWrapper.appendChild(container);
-            }
-            else {
-                appWrapper.replaceChild(container, app);
-            }
-            initTabbar(this.config);
-        }
-        else {
-            if (!isPosition)
-                appWrapper.appendChild(app);
-        }
+        loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
     }
     onReady(page, onLoad = true) {
         var _a;
@@ -944,21 +1203,26 @@ class PageHandler {
         const param = this.getQuery(stampId, '', page.options);
         let pageEl = this.getPageContainer(page);
         if (pageEl) {
-            setDisplay(pageEl);
+            pageEl.classList.remove('taro_page_shade');
             this.isTabBar(this.pathname) && pageEl.classList.add('taro_tabbar_page');
+            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();
         }
         else {
+            // FIXME 在 iOS 端快速切换页面时，可能不会执行回调注入对应类名导致 TabBar 白屏
             (_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
                 var _a;
                 pageEl = this.getPageContainer(page);
                 this.isTabBar(this.pathname) && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
+                this.isDefaultNavigationStyle() && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page'));
                 this.addAnimation(pageEl, pageNo === 0);
-                this.onReady(page, true);
                 (_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();
             });
@@ -1009,9 +1273,10 @@ class PageHandler {
         const param = this.getQuery(page['$taroParams']['stamp'], '', page.options);
         let pageEl = this.getPageContainer(page);
         if (pageEl) {
-            setDisplay(pageEl);
+            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();
         }
@@ -1020,8 +1285,9 @@ class PageHandler {
                 var _a;
                 pageEl = this.getPageContainer(page);
                 this.addAnimation(pageEl, pageNo === 0);
-                this.onReady(page, false);
                 (_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();
             });
@@ -1037,12 +1303,12 @@ class PageHandler {
             if (this.hideTimer) {
                 clearTimeout(this.hideTimer);
                 this.hideTimer = null;
-                setDisplay(this.lastHidePage, 'none');
+                pageEl.classList.add('taro_page_shade');
             }
             this.lastHidePage = pageEl;
             this.hideTimer = setTimeout(() => {
                 this.hideTimer = null;
-                setDisplay(this.lastHidePage, 'none');
+                pageEl.classList.add('taro_page_shade');
             }, this.animationDuration + this.animationDelay);
             (_a = page.onHide) === null || _a === void 0 ? void 0 : _a.call(page);
         }
@@ -1108,13 +1374,13 @@ class PageHandler {
 
 const createStampId = incrementId();
 let launchStampId = createStampId();
-function createRouter(app, config, framework) {
+function createRouter(history, app, config, framework) {
     var _a, _b;
     if (typeof app.onUnhandledRejection === 'function') {
         window.addEventListener('unhandledrejection', app.onUnhandledRejection);
     }
     RouterConfig.config = config;
-    const handler = new PageHandler(config);
+    const handler = new PageHandler(config, history);
     routesAlias.set(handler.router.customRoutes);
     const basename = handler.router.basename;
     const routes = handler.routes.map(route => {
@@ -1137,7 +1403,7 @@ function createRouter(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;
+        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);
@@ -1166,22 +1432,34 @@ function createRouter(app, config, framework) {
                 window.location.reload();
             }
             else {
-                throw new Error(error);
+                throw error;
             }
         }
         if (!element)
             return;
         const pageConfig = handler.pageConfig;
         let enablePullDownRefresh = ((_e = config === null || config === void 0 ? void 0 : config.window) === null || _e === void 0 ? void 0 : _e.enablePullDownRefresh) || false;
+        let navigationStyle = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.navigationStyle) || 'default';
+        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((_f = pageConfig.navigationBarTitleText) !== null && _f !== void 0 ? _f : document.title);
             if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
                 enablePullDownRefresh = pageConfig.enablePullDownRefresh;
             }
+            if (typeof pageConfig.navigationStyle === 'string') {
+                navigationStyle = pageConfig.navigationStyle;
+            }
+            if (typeof pageConfig.navigationBarTextStyle === 'string') {
+                navigationBarTextStyle = pageConfig.navigationBarTextStyle;
+            }
+            if (typeof pageConfig.navigationBarBackgroundColor === 'string') {
+                navigationBarBackgroundColor = pageConfig.navigationBarBackgroundColor;
+            }
         }
+        eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = Current.page;
         const pathname = handler.pathname;
-        const methodName = (_g = stacks.method) !== null && _g !== void 0 ? _g : '';
+        const methodName = (_j = stacks.method) !== null && _j !== void 0 ? _j : '';
         const cacheTabs = stacks.getTabs();
         let shouldLoad = false;
         stacks.method = '';
@@ -1247,7 +1525,7 @@ function createRouter(app, config, framework) {
             shouldLoad = true;
         }
         if (shouldLoad || stacks.length < 1) {
-            const el = (_h = element.default) !== null && _h !== void 0 ? _h : element;
+            const el = (_k = element.default) !== null && _k !== void 0 ? _k : element;
             const loadConfig = Object.assign({}, pageConfig);
             const stacksIndex = stacks.length;
             delete loadConfig['path'];
@@ -1272,8 +1550,57 @@ function createRouter(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);
 }
 
-export { createMultiRouter, createRouter, getCurrentPages, history, navigateBack, navigateTo, reLaunch, redirectTo, switchTab };
-//# sourceMappingURL=index.esm.js.map
+function handleAppMount(config, _, appId = config.appId || 'app') {
+    let app = document.getElementById(appId);
+    let isPosition = true;
+    if (!app) {
+        app = document.createElement('div');
+        app.id = appId;
+        isPosition = false;
+    }
+    const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
+    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);
+    let isPosition = true;
+    if (!app) {
+        app = document.createElement('div');
+        app.id = appId;
+        isPosition = false;
+    }
+    const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
+    app.classList.add('taro_router');
+    const container = document.createElement('div');
+    container.classList.add('taro-tabbar__container');
+    container.id = 'container';
+    const panel = document.createElement('div');
+    panel.classList.add('taro-tabbar__panel');
+    panel.appendChild(app.cloneNode(true));
+    container.appendChild(panel);
+    if (!isPosition) {
+        appWrapper.appendChild(container);
+    }
+    else {
+        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, setMpaTitle, setNavigationBarStyle, setTitle, switchTab };