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

package/dist/router/page.js

@@ -1,24 +1,22 @@
-/* eslint-disable dot-notation */
-import { Current, eventCenter, requestAnimationFrame } from '@tarojs/runtime';
+import { getHomePage, getCurrentPage, addLeadingSlash, stripBasename, stripTrailing, requestAnimationFrame, eventCenter, Current } from '@tarojs/runtime';
 import queryString from 'query-string';
-import { bindPageResize } from '../events/resize';
-import { bindPageScroll } from '../events/scroll';
-import { history, setHistoryMode } from '../history';
-import { loadAnimateStyle, loadRouterStyle } from '../style';
-import { initTabbar } from '../tabbar';
-import { addLeadingSlash, getCurrentPage, getHomePage, routesAlias, stripBasename, stripTrailing } from '../utils';
-import stacks from './stack';
-function setDisplay(el, type = '') {
-    if (el) {
-        el.style.display = type;
-    }
-}
-export default class PageHandler {
-    constructor(config) {
+import { bindPageResize } from '../events/resize.js';
+import { bindPageScroll } from '../events/scroll.js';
+import { setHistory, history } from '../history.js';
+import { loadAnimateStyle, loadRouterStyle } from '../style.js';
+import { routesAlias } from '../utils/index.js';
+import NavigationBarHandler from './navigation-bar.js';
+import stacks from './stack.js';
+
+/* eslint-disable dot-notation */
+class PageHandler {
+    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);
@@ -74,6 +72,14 @@ export default 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);
@@ -112,40 +118,11 @@ export default 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;
@@ -178,21 +155,26 @@ export default 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();
             });
@@ -243,9 +225,10 @@ export default 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();
         }
@@ -254,8 +237,9 @@ export default 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();
             });
@@ -271,12 +255,12 @@ export default 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);
         }
@@ -339,3 +323,5 @@ export default class PageHandler {
         }, 0);
     }
 }
+
+export { PageHandler as default };

package/dist/router/spa.d.ts

@@ -1,3 +1,5 @@
-import type { AppInstance } from '@tarojs/runtime';
-import type { SpaRouterConfig } from '../../types/router';
-export declare function createRouter(app: AppInstance, config: SpaRouterConfig, framework?: string): () => void;
+import { AppInstance } from '@tarojs/runtime';
+import { History } from "../history.js";
+import { SpaRouterConfig } from '../../types/router';
+declare function createRouter(history: History, app: AppInstance, config: SpaRouterConfig, framework?: string): () => void;
+export { createRouter };

package/dist/router/spa.js

@@ -1,31 +1,22 @@
-var __awaiter = (this && this.__awaiter) || function (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());
-    });
-};
-/* eslint-disable dot-notation */
-import { createPageConfig, Current, eventCenter, hooks, incrementId, stringify, } from '@tarojs/runtime';
-import { Action as LocationAction } from 'history';
+import { __awaiter } from 'tslib';
+import { incrementId, addLeadingSlash, eventCenter, stripBasename, Current, createPageConfig, hooks, stringify } from '@tarojs/runtime';
+import { Action } from 'history';
 import UniversalRouter from 'universal-router';
-import { history, prependBasename } from '../history';
-import { addLeadingSlash, routesAlias, stripBasename } from '../utils';
-import { setTitle } from '../utils/navigate';
-import { RouterConfig } from '.';
-import PageHandler from './page';
-import stacks from './stack';
+import { prependBasename } from '../history.js';
+import { routesAlias } from '../utils/index.js';
+import { RouterConfig } from './index.js';
+import PageHandler from './page.js';
+import stacks from './stack.js';
+
 const createStampId = incrementId();
 let launchStampId = createStampId();
-export 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 => {
@@ -48,7 +39,7 @@ export 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);
@@ -77,22 +68,34 @@ export 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 = '';
@@ -158,7 +161,7 @@ export 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'];
@@ -181,7 +184,18 @@ export function createRouter(app, config, framework) {
     if (routePath === '/') {
         history.replace(prependBasename(handler.homePage + history.location.search));
     }
-    render({ location: history.location, action: LocationAction.Push });
+    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 { createRouter };

package/dist/router/stack.d.ts

@@ -23,4 +23,4 @@ declare class Stacks {
     removeTab(path: string): void;
 }
 declare const stacks: Stacks;
-export default stacks;
+export { stacks as default };

package/dist/router/stack.js

@@ -78,4 +78,5 @@ class Stacks {
     }
 }
 const stacks = new Stacks();
-export default stacks;
+
+export { stacks as default };

package/dist/style.d.ts

@@ -1,8 +1,14 @@
 /**
  * 插入页面动画需要的样式
  */
-export declare function loadAnimateStyle(ms?: number): void;
+declare function loadAnimateStyle(ms?: number): void;
 /**
  * 插入路由相关样式
  */
-export declare function loadRouterStyle(usingWindowScroll: any): void;
+declare function loadRouterStyle(enableTabBar: boolean, enableWindowScroll: boolean): void;
+/**
+ * 插入导航栏相关的样式
+*/
+declare function loadNavigationBarStyle(): void;
+declare function addStyle(css: any): void;
+export { loadAnimateStyle, loadRouterStyle, loadNavigationBarStyle, addStyle };

package/dist/style.js

@@ -1,9 +1,12 @@
 /**
  * 插入页面动画需要的样式
  */
-export function loadAnimateStyle(ms = 300) {
+function loadAnimateStyle(ms = 300) {
     const css = `
-.taro_router .taro_page {
+body {
+  overflow: hidden; // 防止 iOS 页面滚动
+}
+.taro_router > .taro_page {
   position: absolute;
   left: 0;
   top: 0;
@@ -15,52 +18,109 @@ export 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);
 }
 /**
  * 插入路由相关样式
  */
-export 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;
@@ -68,3 +128,5 @@ function addStyle(css) {
     style.innerHTML = css;
     document.getElementsByTagName('head')[0].appendChild(style);
 }
+
+export { addStyle, loadAnimateStyle, loadNavigationBarStyle, loadRouterStyle };

package/dist/tabbar.d.ts

@@ -1,2 +1,4 @@
 import { AppConfig } from '@tarojs/taro';
-export declare function initTabbar(config: AppConfig): void;
+import { History } from "./history.js";
+declare function initTabbar(config: AppConfig, history: History): void;
+export { initTabbar };

package/dist/tabbar.js

@@ -1,9 +1,8 @@
-// @ts-nocheck
 import { defineCustomElementTaroTabbar } from '@tarojs/components/dist/components';
 import { initTabBarApis } from '@tarojs/taro';
-import { history } from './history';
-export function initTabbar(config) {
-    if (config.tabBar == null) {
+
+function initTabbar(config, history) {
+    if (config.tabBar == null || config.tabBar.custom) {
         return;
     }
     // TODO: custom-tab-bar
@@ -29,3 +28,5 @@ export function initTabbar(config) {
     container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
     initTabBarApis(config);
 }
+
+export { initTabbar };

package/dist/utils/index.d.ts

@@ -1,10 +1,3 @@
-export declare const addLeadingSlash: (url?: string) => string;
-export declare const hasBasename: (path?: string, prefix?: string) => boolean;
-export declare const stripBasename: (path?: string, prefix?: string) => string;
-export declare const stripTrailing: (str?: string) => string;
-export declare const stripSuffix: (path?: string, suffix?: string) => string;
-export declare const getHomePage: (path?: string, basename?: string, customRoutes?: Record<string, string | string[]>, entryPagePath?: string) => string;
-export declare const getCurrentPage: (routerMode?: string, basename?: string) => string;
 declare class RoutesAlias {
     conf: Array<string[]>;
     set(customRoutes?: Record<string, string | string[]>): void;
@@ -13,5 +6,6 @@ declare class RoutesAlias {
     getAlias: (url?: string) => string;
     getAll: (url?: string) => string[];
 }
-export declare const routesAlias: RoutesAlias;
-export {};
+declare const routesAlias: RoutesAlias;
+export { routesAlias };
+export * from "./navigate.js";

package/dist/utils/index.js

@@ -1,22 +1,5 @@
-// export const removeLeadingSlash = (str = '') => str.replace(/^\.?\//, '')
-// export const removeTrailingSearch = (str = '') => str.replace(/\?[\s\S]*$/, '')
-export const addLeadingSlash = (url = '') => (url.charAt(0) === '/' ? url : '/' + url);
-export const hasBasename = (path = '', prefix = '') => new RegExp('^' + prefix + '(\\/|\\?|#|$)', 'i').test(path) || path === prefix;
-export const stripBasename = (path = '', prefix = '') => hasBasename(path, prefix) ? path.substring(prefix.length) : path;
-export const stripTrailing = (str = '') => str.replace(/[?#][\s\S]*$/, '');
-export const stripSuffix = (path = '', suffix = '') => path.includes(suffix) ? path.substring(0, path.length - suffix.length) : path;
-export 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;
-};
-export const getCurrentPage = (routerMode = 'hash', basename = '/') => {
-    const pagePath = routerMode === 'hash'
-        ? location.hash.slice(1).split('?')[0]
-        : location.pathname;
-    return addLeadingSlash(stripBasename(pagePath, basename));
-};
+import { addLeadingSlash } from '@tarojs/runtime';
+
 class RoutesAlias {
     constructor() {
         this.conf = [];
@@ -56,4 +39,6 @@ class RoutesAlias {
         }
     }
 }
-export const routesAlias = new RoutesAlias();
+const routesAlias = new RoutesAlias();
+
+export { routesAlias };

package/dist/utils/navigate.d.ts

@@ -1,5 +1,9 @@
-import MobileDetect from 'mobile-detect';
-export declare function getMobileDetect(): MobileDetect;
-export declare function setTitle(title: string): Promise<string>;
-export declare function isWeixin(): boolean;
-export declare function isDingTalk(): boolean;
+declare const isWeixin: () => boolean;
+declare const isDingTalk: () => boolean;
+declare function setMpaTitle(title: string): void;
+declare function setTitle(title: string): void;
+declare function setNavigationBarStyle(option: {
+    backgroundColor: string;
+    frontColor: string;
+}): void;
+export { isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle };

package/dist/utils/navigate.js

@@ -1,44 +1,28 @@
-var __awaiter = (this && this.__awaiter) || function (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());
-    });
-};
-import MobileDetect from 'mobile-detect';
-let md;
+import { eventCenter } from '@tarojs/runtime';
+
+const isWeixin = () => !!navigator.userAgent.match(/\bMicroMessenger\b/ig);
+const isDingTalk = () => !!navigator.userAgent.match(/\bDingTalk\b/ig);
 let preTitle = document.title;
 let isLoadDdEntry = false;
-export function getMobileDetect() {
-    if (!md) {
-        md = new MobileDetect(navigator.userAgent);
-    }
-    return md;
-}
-export 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 });
+function setMpaTitle(title) {
+    if (preTitle === title)
+        return;
+    document.title = title;
+    preTitle = title;
+    if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
+        if (!isLoadDdEntry) {
+            isLoadDdEntry = true;
+            require('dingtalk-jsapi/platform');
         }
-        return title;
-    });
+        const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
+        setDingTitle({ title });
+    }
 }
-export function isWeixin() {
-    const md = getMobileDetect();
-    return md.match(/MicroMessenger/ig);
+function setTitle(title) {
+    eventCenter.trigger('__taroH5SetNavigationTitle', title);
 }
-export function isDingTalk() {
-    const md = getMobileDetect();
-    return md.match(/DingTalk/ig);
+function setNavigationBarStyle(option) {
+    eventCenter.trigger('__taroH5setNavigationBarColor', option);
 }
+
+export { isDingTalk, isWeixin, setMpaTitle, setNavigationBarStyle, setTitle };