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

package/dist/index.cjs.js

@@ -1,104 +1,66 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var history = require('history');
-var runtime = require('@tarojs/runtime');
-var MobileDetect = require('mobile-detect');
-var queryString = require('query-string');
 var components = require('@tarojs/components/dist/components');
 var taro = require('@tarojs/taro');
+var tslib = require('tslib');
+var runtime = require('@tarojs/runtime');
+var history = require('history');
+var queryString = require('query-string');
 var UniversalRouter = require('universal-router');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var MobileDetect__default = /*#__PURE__*/_interopDefaultLegacy(MobileDetect);
-var queryString__default = /*#__PURE__*/_interopDefaultLegacy(queryString);
-var UniversalRouter__default = /*#__PURE__*/_interopDefaultLegacy(UniversalRouter);
+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>
 
-/******************************************************************************
-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());
-    });
+`;
+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
+    components.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);
+    taro.initTabBarApis(config);
 }
-const routesAlias = new RoutesAlias();
 
 class RouterConfig {
     static set config(e) {
@@ -118,7 +80,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;
     }
 }
 
@@ -152,7 +114,7 @@ class MpaHistory {
             url += `?${to.search}`;
         }
         if (to.hash) {
-            url += `#${to.hash}`;
+            url += to.hash.startsWith('#') ? to.hash : `#${to.hash}`;
         }
         return url;
     }
@@ -201,6 +163,13 @@ class MpaHistory {
         };
     }
 }
+function setHistory(h, base = '/') {
+    exports.history = h;
+    basename = base;
+}
+function createMpaHistory(_) {
+    return new MpaHistory();
+}
 function setHistoryMode(mode, base = '/') {
     const options = {
         window
@@ -210,7 +179,7 @@ function setHistoryMode(mode, base = '/') {
         exports.history = history.createBrowserHistory(options);
     }
     else if (mode === 'multi') {
-        exports.history = new MpaHistory();
+        exports.history = createMpaHistory();
     }
     else {
         // default is hash
@@ -302,6 +271,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) {
+    runtime.eventCenter.trigger('__taroH5SetNavigationTitle', title);
+}
+function setNavigationBarStyle(option) {
+    runtime.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 = runtime.addLeadingSlash(key);
+            if (typeof path === 'string') {
+                this.conf.push([key, runtime.addLeadingSlash(path)]);
+            }
+            else if ((path === null || path === void 0 ? void 0 : path.length) > 0) {
+                this.conf.push(...path.map(p => [key, runtime.addLeadingSlash(p)]));
+            }
+        }
+    }
+}
+const routesAlias = new RoutesAlias();
+
 function processNavigateUrl(option) {
     var _a;
     const pathPieces = history.parsePath(option.url);
@@ -318,7 +353,7 @@ function processNavigateUrl(option) {
         pathPieces.pathname = parts.join('/');
     }
     // 处理自定义路由
-    pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname));
+    pathPieces.pathname = routesAlias.getAlias(runtime.addLeadingSlash(pathPieces.pathname));
     // 处理 basename
     pathPieces.pathname = prependBasename(pathPieces.pathname);
     // hack fix history v5 bug: https://github.com/remix-run/history/issues/814
@@ -327,7 +362,7 @@ function processNavigateUrl(option) {
     return pathPieces;
 }
 function navigate(option, method) {
-    return __awaiter(this, void 0, void 0, function* () {
+    return tslib.__awaiter(this, void 0, void 0, function* () {
         return new Promise((resolve, reject) => {
             stacks.method = method;
             const { success, complete, fail } = option;
@@ -342,6 +377,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') {
                         exports.history.push(pathPieces, state);
                     }
@@ -355,14 +405,24 @@ function navigate(option, method) {
                 }
                 else if (method === 'navigateBack') {
                     stacks.delta = option.delta;
-                    exports.history.go(-option.delta);
+                    if (stacks.length > option.delta) {
+                        exports.history.go(-option.delta);
+                    }
+                    else {
+                        exports.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);
+                }
             }
         });
     });
@@ -393,47 +453,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__default["default"](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);
 }
@@ -477,7 +512,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;
@@ -489,52 +527,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;
@@ -543,38 +638,10 @@ function addStyle(css) {
     document.getElementsByTagName('head')[0].appendChild(style);
 }
 
-// @ts-nocheck
-function initTabbar(config) {
-    if (config.tabBar == null) {
-        return;
-    }
-    // TODO: custom-tab-bar
-    components.defineCustomElementTaroTabbar();
-    const tabbar = document.createElement('taro-tabbar');
-    const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
-    tabbar.conf = config.tabBar;
-    tabbar.conf.homePage = exports.history.location.pathname === '/' ? homePage : exports.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);
-    taro.initTabBarApis(config);
-}
-
 /* eslint-disable dot-notation */
 class MultiPageHandler {
-    constructor(config) {
+    constructor(config, history) {
+        this.history = history;
         this.config = config;
         this.mount();
     }
@@ -590,7 +657,7 @@ class MultiPageHandler {
     get pageConfig() { return this.config.route; }
     get isTabBar() {
         var _a;
-        const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
+        const routePath = runtime.addLeadingSlash(runtime.stripBasename(this.pathname, this.basename));
         const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
             if (typeof target === 'string') {
                 return target === routePath;
@@ -617,43 +684,22 @@ class MultiPageHandler {
     getQuery(search = '', options = {}) {
         search = search ? `${search}&${this.search}` : this.search;
         const query = search
-            ? queryString__default["default"].parse(search)
+            ? queryString.parse(search)
             : {};
         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;
@@ -683,13 +729,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) {
@@ -717,6 +767,19 @@ class MultiPageHandler {
         bindPageScroll(page, scrollEl, distance);
         bindPageResize(page);
     }
+    triggerRouterChange() {
+        /**
+         * @tarojs/runtime 中生命周期跑在 promise 中，所以这里需要 setTimeout 延迟事件调用
+         * TODO 考虑将生命周期返回 Promise，用于处理相关事件调用顺序
+         */
+        setTimeout(() => {
+            runtime.eventCenter.trigger('__afterTaroRouterChange', {
+                toLocation: {
+                    path: this.pathname
+                }
+            });
+        }, 0);
+    }
 }
 
 const createStampId$1 = runtime.incrementId();
@@ -729,14 +792,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* () {
+    return tslib.__awaiter(this, void 0, void 0, function* () {
         if (typeof app.onUnhandledRejection === 'function') {
             window.addEventListener('unhandledrejection', app.onUnhandledRejection);
         }
+        runtime.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),
@@ -768,7 +832,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;
             }
@@ -780,24 +844,231 @@ function createMultiRouter(app, config, framework) {
         const page = runtime.createPageConfig(enablePullDownRefresh ? runtime.hooks.call('createPullDownComponent', el, pathName, framework, handler.PullDownRefresh) : el, pathName + runtime.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();
+        runtime.eventCenter.on('__taroH5SetNavigationTitle', (title) => {
+            this.setTitle(title);
+        });
+        runtime.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.homePage = runtime.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);
+        const routePath = runtime.getCurrentPage(this.routerMode, this.basename);
         return routePath === '/' ? this.homePage : routePath;
     }
     get appId() { return this.config.appId || 'app'; }
@@ -828,17 +1099,17 @@ class PageHandler {
     get pathname() { return this.router.pathname; }
     get basename() { return this.router.basename || ''; }
     get pageConfig() {
-        const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
-        const homePage = addLeadingSlash(this.homePage);
+        const routePath = runtime.addLeadingSlash(runtime.stripBasename(this.pathname, this.basename));
+        const homePage = runtime.addLeadingSlash(this.homePage);
         return this.routes.find(r => {
             var _a;
-            const pagePath = addLeadingSlash(r.path);
+            const pagePath = runtime.addLeadingSlash(r.path);
             return [pagePath, homePage].includes(routePath) || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
         });
     }
     isTabBar(pathname) {
         var _a;
-        const routePath = addLeadingSlash(stripBasename(pathname, this.basename)).split('?')[0];
+        const routePath = runtime.addLeadingSlash(runtime.stripBasename(pathname, this.basename)).split('?')[0];
         const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
             if (typeof target === 'string') {
                 return target === routePath;
@@ -848,11 +1119,19 @@ class PageHandler {
             }
             return false;
         })) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
-        return !!pagePath && this.tabBarList.some(t => stripTrailing(t.pagePath) === pagePath);
+        return !!pagePath && this.tabBarList.some(t => runtime.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);
+        const routePath = runtime.stripBasename(this.pathname, this.basename);
+        const pagePath = runtime.stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
         return pagePath.startsWith(routePath + '?');
     }
     get search() {
@@ -882,46 +1161,17 @@ class PageHandler {
     getQuery(stamp = '', search = '', options = {}) {
         search = search ? `${search}&${this.search}` : this.search;
         const query = search
-            ? queryString__default["default"].parse(search, { decode: false })
+            ? queryString.parse(search, { decode: false })
             : {};
         query.stamp = stamp;
         return Object.assign(Object.assign({}, query), options);
     }
     mount() {
-        setHistoryMode(this.routerMode, this.router.basename);
+        setHistory(this.history, this.basename);
         this.pathname = exports.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;
@@ -954,21 +1204,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();
             });
@@ -1019,9 +1274,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();
         }
@@ -1030,8 +1286,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();
             });
@@ -1047,12 +1304,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);
         }
@@ -1118,24 +1375,24 @@ class PageHandler {
 
 const createStampId = runtime.incrementId();
 let launchStampId = createStampId();
-function createRouter(app, config, framework) {
+function createRouter(history$1, 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$1);
     routesAlias.set(handler.router.customRoutes);
     const basename = handler.router.basename;
     const routes = handler.routes.map(route => {
-        const routePath = addLeadingSlash(route.path);
+        const routePath = runtime.addLeadingSlash(route.path);
         const paths = routesAlias.getAll(routePath);
         return {
             path: paths.length < 1 ? routePath : paths,
             action: route.load
         };
     });
-    const router = new UniversalRouter__default["default"](routes, { baseUrl: basename || '' });
+    const router = new UniversalRouter(routes, { baseUrl: basename || '' });
     const launchParam = {
         path: handler.currentPage,
         query: handler.getQuery(launchStampId),
@@ -1146,8 +1403,8 @@ function createRouter(app, config, framework) {
     runtime.eventCenter.trigger('__taroRouterLaunch', launchParam);
     (_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;
+    const render = ({ location, action }) => tslib.__awaiter(this, void 0, void 0, function* () {
+        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);
@@ -1176,22 +1433,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;
+            }
         }
+        runtime.eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
         const currentPage = runtime.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 = '';
@@ -1257,7 +1526,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'];
@@ -1276,21 +1545,90 @@ function createRouter(app, config, framework) {
             handler.load(page, pageConfig, pageStampId, stacksIndex);
         }
     });
-    const routePath = addLeadingSlash(stripBasename(exports.history.location.pathname, handler.basename));
+    const routePath = runtime.addLeadingSlash(runtime.stripBasename(history$1.location.pathname, handler.basename));
     if (routePath === '/') {
-        exports.history.replace(prependBasename(handler.homePage + exports.history.location.search));
+        history$1.replace(prependBasename(handler.homePage + history$1.location.search));
     }
-    render({ location: exports.history.location, action: history.Action.Push });
+    render({ location: history$1.location, action: history.Action.Push });
     (_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
-    return exports.history.listen(render);
+    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$1.listen(render);
+}
+
+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);
 }
 
+Object.defineProperty(exports, 'createBrowserHistory', {
+  enumerable: true,
+  get: function () { return history.createBrowserHistory; }
+});
+Object.defineProperty(exports, 'createHashHistory', {
+  enumerable: true,
+  get: function () { return history.createHashHistory; }
+});
+exports.createMpaHistory = createMpaHistory;
 exports.createMultiRouter = createMultiRouter;
 exports.createRouter = createRouter;
 exports.getCurrentPages = getCurrentPages;
+exports.handleAppMount = handleAppMount;
+exports.handleAppMountWithTabbar = handleAppMountWithTabbar;
+exports.isDingTalk = isDingTalk;
+exports.isWeixin = isWeixin;
 exports.navigateBack = navigateBack;
 exports.navigateTo = navigateTo;
+exports.prependBasename = prependBasename;
 exports.reLaunch = reLaunch;
 exports.redirectTo = redirectTo;
+exports.routesAlias = routesAlias;
+exports.setHistory = setHistory;
+exports.setHistoryMode = setHistoryMode;
+exports.setMpaTitle = setMpaTitle;
+exports.setNavigationBarStyle = setNavigationBarStyle;
+exports.setTitle = setTitle;
 exports.switchTab = switchTab;
-//# sourceMappingURL=index.cjs.js.map