@tarojs/router 4.0.0-canary.9 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -1,12 +1,228 @@
1
1
  import { defineCustomElementTaroTabbar } from '@tarojs/components/dist/components';
2
2
  import { initTabBarApis } from '@tarojs/taro';
3
3
  import { __awaiter } from 'tslib';
4
- import { addLeadingSlash, Current, stripBasename, eventCenter, incrementId, createPageConfig, hooks, stringify, getHomePage, getCurrentPage, stripTrailing, requestAnimationFrame as requestAnimationFrame$1 } from '@tarojs/runtime';
4
+ import { addLeadingSlash, eventCenter, Current, stripBasename, incrementId, createPageConfig, hooks, stringify, getHomePage, getCurrentPage, stripTrailing, requestAnimationFrame as requestAnimationFrame$1, safeExecute } from '@tarojs/runtime';
5
+ import { EventChannel } from '@tarojs/shared';
5
6
  import { createBrowserHistory, createHashHistory, Action, parsePath } from 'history';
6
7
  export { createBrowserHistory, createHashHistory } from 'history';
7
8
  import queryString from 'query-string';
8
9
  import UniversalRouter from 'universal-router';
9
10
 
11
+ /**
12
+ * 插入页面动画需要的样式
13
+ */
14
+ function loadAnimateStyle(ms = 300) {
15
+ const css = `
16
+ body {
17
+ /* 防止 iOS 页面滚动 */
18
+ overflow: hidden;
19
+ }
20
+ .taro_router > .taro_page {
21
+ position: absolute;
22
+ left: 0;
23
+ top: 0;
24
+ width: 100%;
25
+ height: 100%;
26
+ background-color: #fff;
27
+ transform: translate(100%, 0);
28
+ transition: transform ${ms}ms;
29
+ z-index: 0;
30
+ }
31
+
32
+ .taro_router > .taro_page.taro_tabbar_page,
33
+ .taro_router > .taro_page.taro_page_show.taro_page_stationed {
34
+ transform: none;
35
+ transition: none;
36
+ }
37
+
38
+ .taro_router > .taro_page.taro_page_show {
39
+ transform: translate(0, 0);
40
+ }
41
+ `;
42
+ addStyle(css);
43
+ }
44
+ /**
45
+ * 插入路由相关样式
46
+ */
47
+ function loadRouterStyle(enableTabBar, enableWindowScroll, enhanceAnimation) {
48
+ const css = `
49
+ .taro_router {
50
+ position: relative;
51
+ width: 100%;
52
+ height: 100%;
53
+ }
54
+
55
+ .taro_page {
56
+ width: 100%;
57
+ height: 100%;
58
+ ${enableWindowScroll ? '' : `
59
+ overflow-x: hidden;
60
+ overflow-y: scroll;
61
+ max-height: 100vh;
62
+ `}
63
+ }
64
+ ${enableTabBar ? `
65
+ .taro-tabbar__container > .taro-tabbar__panel {
66
+ overflow: hidden;
67
+ }
68
+
69
+ .taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
70
+ max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
71
+ max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
72
+ }
73
+
74
+ ` : ''}
75
+ ${enhanceAnimation
76
+ ? `.taro_page_shade:has(+.taro_page_stationed),
77
+ .taro_page_shade.taro_tabbar_page,
78
+ .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child):has(+.taro_page_stationed) {
79
+ display: none;
80
+ }` : ` .taro_page_shade,
81
+ .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
82
+ display: none;
83
+ }`}
84
+ `;
85
+ addStyle(css);
86
+ }
87
+ /**
88
+ * 插入导航栏相关的样式
89
+ */
90
+ function loadNavigationBarStyle() {
91
+ const css = `
92
+ .taro-navigation-bar-show {
93
+ display: flex;
94
+ background: white;
95
+ position: sticky;
96
+ z-index: 500;
97
+ top: 0;
98
+ padding-bottom: 8px;
99
+ padding-top: calc(env(safe-area-inset-top) + 8px);
100
+ justify-content: center;
101
+ align-items: center;
102
+ }
103
+
104
+ .taro-navigation-bar-hide {
105
+ display: none;
106
+ }
107
+
108
+ .taro-navigation-bar-title-wrap {
109
+ display: flex;
110
+ height: 24px;
111
+ }
112
+
113
+ .taro-navigation-bar-title-wrap > .taro-navigation-bar-loading {
114
+ display: none;
115
+ animation: loading 2s linear infinite;
116
+ }
117
+
118
+ .taro-navigation-bar-title-wrap .taro-navigation-bar-loading.taro-navigation-bar-loading-show {
119
+ display: flex;
120
+ }
121
+
122
+ .taro-navigation-bar-title-wrap > .taro-navigation-bar-title {
123
+ font-size: 24px;
124
+ height: 24px;
125
+ line-height: 24px;
126
+ max-width: 100px;
127
+ white-space: nowrap;
128
+ overflow: hidden;
129
+ line-height: 24px;
130
+ text-overflow: ellipsis;
131
+ }
132
+
133
+ @keyframes loading {
134
+ from {
135
+ transform: rotate(0deg);
136
+ }
137
+ to {
138
+ transform: rotate(360deg);
139
+ }
140
+ }
141
+
142
+ @keyframes loading {
143
+ from {
144
+ transform: rotate(0deg);
145
+ }
146
+ to {
147
+ transform: rotate(360deg);
148
+ }
149
+ }
150
+
151
+ .taro-navigation-bar-no-icon > .taro-navigation-bar-home {
152
+ display: none;
153
+ }
154
+
155
+ .taro-navigation-bar-no-icon > .taro-navigation-bar-back {
156
+ display: none;
157
+ }
158
+
159
+ .taro-navigation-bar-home-icon > .taro-navigation-bar-home {
160
+ display: flex;
161
+ left: 8px;
162
+ position: absolute;
163
+ width: 24px;
164
+ height: 24px;
165
+ }
166
+
167
+ .taro-navigation-bar-back-icon > .taro-navigation-bar-back {
168
+ display: flex;
169
+ left: 8px;
170
+ position: absolute;
171
+ width: 24px;
172
+ height: 24px;
173
+ }
174
+ `;
175
+ addStyle(css);
176
+ }
177
+ function addStyle(css) {
178
+ if (!css)
179
+ return;
180
+ const style = document.createElement('style');
181
+ style.innerHTML = css;
182
+ document.getElementsByTagName('head')[0].appendChild(style);
183
+ }
184
+
185
+ const home_svg_str = `
186
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
187
+ <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"/>
188
+ </svg>
189
+ `;
190
+ const back_svg_str = `
191
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
192
+ <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"/>
193
+ </svg>
194
+ `;
195
+ const loading_svg_str = `
196
+ <svg t="1709608074670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4741" width="24" height="24"><path d="M256 529.066667H85.333333a17.066667 17.066667 0 1 1 0-34.133334h170.666667a17.066667 17.066667 0 0 1 0 34.133334z" opacity=".278" p-id="4742"></path><path d="M99.84 640a17.066667 17.066667 0 0 1-4.437333-33.553067l164.693333-44.373333a17.066667 17.066667 0 1 1 8.891733 32.9728l-164.693333 44.373333a17.544533 17.544533 0 0 1-4.4544 0.580267z" opacity=".322" p-id="4743"></path><path d="M264.533333 462.523733a16.896 16.896 0 0 1-4.369066-0.580266l-164.693334-43.52a17.0496 17.0496 0 1 1 8.721067-32.989867l164.693333 43.52a17.066667 17.066667 0 1 1-4.352 33.570133z" opacity=".239" p-id="4744"></path><path d="M384.017067 307.2a17.032533 17.032533 0 0 1-14.7968-8.533333l-85.333334-147.626667a17.066667 17.066667 0 0 1 29.559467-17.083733l85.333333 147.626666A17.066667 17.066667 0 0 1 384.017067 307.2z" opacity=".122" p-id="4745"></path><path d="M639.982933 307.2a17.0496 17.0496 0 0 1-14.762666-25.6l85.333333-147.626667a17.066667 17.066667 0 1 1 29.559467 17.066667l-85.333334 147.626667a17.032533 17.032533 0 0 1-14.7968 8.533333z" opacity=".922" p-id="4746"></path><path d="M692.906667 347.306667a17.066667 17.066667 0 0 1-12.117334-29.098667l120.337067-121.173333a17.066667 17.066667 0 1 1 24.234667 24.046933l-120.337067 121.173333a17.1008 17.1008 0 0 1-12.117333 5.051734z" opacity=".878" p-id="4747"></path><path d="M733.883733 401.066667a17.066667 17.066667 0 0 1-8.5504-31.8464l147.626667-85.333334a17.0496 17.0496 0 1 1 17.066667 29.5424l-147.626667 85.333334a16.776533 16.776533 0 0 1-8.516267 2.304z" opacity=".839" p-id="4748"></path><path d="M512 273.066667a17.066667 17.066667 0 0 1-17.066667-17.066667V85.333333a17.066667 17.066667 0 0 1 34.133334 0v170.666667a17.066667 17.066667 0 0 1-17.066667 17.066667z" p-id="4749"></path><path d="M578.577067 281.6a17.066667 17.066667 0 0 1-16.520534-21.418667l43.52-164.693333a17.066667 17.066667 0 0 1 33.006934 8.721067l-43.52 164.693333a17.066667 17.066667 0 0 1-16.4864 12.6976z" opacity=".961" p-id="4750"></path><path d="M445.44 282.453333a17.066667 17.066667 0 0 1-16.469333-12.629333l-44.373334-164.693333a17.066667 17.066667 0 0 1 32.955734-8.891734l44.373333 164.693334a17.066667 17.066667 0 0 1-16.4864 21.521066z" opacity=".078" p-id="4751"></path><path d="M924.177067 640c-1.4848 0-2.9696-0.187733-4.4544-0.580267l-164.693334-44.373333a17.066667 17.066667 0 0 1 8.874667-32.9728l164.693333 44.373333a17.066667 17.066667 0 0 1-4.420266 33.553067z" opacity=".722" p-id="4752"></path><path d="M881.476267 742.4a17.015467 17.015467 0 0 1-8.482134-2.269867l-148.48-85.333333a17.0496 17.0496 0 1 1 16.9984-29.5936l148.48 85.333333a17.0496 17.0496 0 0 1-8.516266 31.863467z" opacity=".678" p-id="4753"></path><path d="M813.226667 830.293333a17.015467 17.015467 0 0 1-12.066134-5.000533l-120.337066-120.337067a17.0496 17.0496 0 1 1 24.132266-24.132266l120.337067 120.337066a17.0496 17.0496 0 0 1-12.066133 29.1328z" opacity=".639" p-id="4754"></path><path d="M938.666667 529.066667H768a17.066667 17.066667 0 1 1 0-34.133334h170.666667a17.066667 17.066667 0 1 1 0 34.133334z" opacity=".761" p-id="4755"></path><path d="M401.066667 941.226667a17.066667 17.066667 0 0 1-16.4864-21.504l44.373333-164.693334a17.066667 17.066667 0 1 1 32.955733 8.874667l-44.373333 164.693333a17.066667 17.066667 0 0 1-16.469333 12.629334z" opacity=".478" p-id="4756"></path><path d="M298.6496 898.56a17.066667 17.066667 0 0 1-14.779733-25.565867l85.333333-148.48a17.083733 17.083733 0 0 1 29.5936 16.9984l-85.333333 148.48a17.032533 17.032533 0 0 1-14.813867 8.567467z" opacity=".439" p-id="4757"></path><path d="M512 955.733333a17.066667 17.066667 0 0 1-17.066667-17.066666V768a17.066667 17.066667 0 1 1 34.133334 0v170.666667a17.066667 17.066667 0 0 1-17.066667 17.066666z" opacity=".522" p-id="4758"></path><path d="M725.3504 898.56a17.032533 17.032533 0 0 1-14.7968-8.533333l-85.333333-147.626667a17.066667 17.066667 0 0 1 29.559466-17.066667l85.333334 147.626667a17.066667 17.066667 0 0 1-14.762667 25.6z" opacity=".6" p-id="4759"></path><path d="M622.062933 942.08c-7.509333 0-14.421333-5.0176-16.469333-12.629333l-44.3904-164.693334a17.066667 17.066667 0 1 1 32.9728-8.874666l44.3904 164.693333a17.066667 17.066667 0 0 1-16.503467 21.504z" opacity=".561" p-id="4760"></path><path d="M759.4496 463.36a17.083733 17.083733 0 0 1-4.420267-33.553067l164.693334-44.373333a17.066667 17.066667 0 0 1 8.874666 32.955733l-164.693333 44.373334a16.657067 16.657067 0 0 1-4.4544 0.597333z" opacity=".702" p-id="4761"></path><path d="M330.24 347.306667a17.015467 17.015467 0 0 1-12.066133-5.000534l-120.32-120.32a17.0496 17.0496 0 1 1 24.132266-24.132266l120.32 120.32a17.0496 17.0496 0 0 1-12.066133 29.1328z" opacity=".161" p-id="4762"></path><path d="M290.116267 401.066667a17.032533 17.032533 0 0 1-8.533334-2.286934l-147.626666-85.333333a17.066667 17.066667 0 1 1 17.083733-29.5424l147.626667 85.333333a17.066667 17.066667 0 0 1-8.5504 31.829334z" opacity=".2" p-id="4763"></path><path d="M142.523733 742.4a17.066667 17.066667 0 0 1-8.567466-31.8464l147.626666-85.333333a17.066667 17.066667 0 1 1 17.083734 29.559466l-147.626667 85.333334a16.930133 16.930133 0 0 1-8.516267 2.286933z" opacity=".361" p-id="4764"></path><path d="M209.92 830.293333a17.066667 17.066667 0 0 1-12.117333-29.098666l120.32-121.173334a17.066667 17.066667 0 0 1 24.2176 24.029867l-120.32 121.1904a16.896 16.896 0 0 1-12.100267 5.051733z" opacity=".4" p-id="4765"></path></svg>
197
+ `;
198
+ function initNavigationBar(config, container) {
199
+ if (config.router.mode === 'multi')
200
+ return;
201
+ const navigationBar = document.createElement('div');
202
+ navigationBar.classList.add('taro-navigation-bar-no-icon');
203
+ const navigationBarBackBtn = document.createElement('div');
204
+ navigationBarBackBtn.classList.add('taro-navigation-bar-back');
205
+ const navigationBarHomeBtn = document.createElement('div');
206
+ navigationBarHomeBtn.classList.add('taro-navigation-bar-home');
207
+ navigationBarBackBtn.innerHTML = back_svg_str;
208
+ navigationBarHomeBtn.innerHTML = home_svg_str;
209
+ const navigationBarTitleWrap = document.createElement('div');
210
+ navigationBarTitleWrap.classList.add('taro-navigation-bar-title-wrap');
211
+ const navigationBarLoading = document.createElement('div');
212
+ navigationBarLoading.classList.add('taro-navigation-bar-loading');
213
+ navigationBarLoading.innerHTML = loading_svg_str;
214
+ const navigationBarTitle = document.createElement('div');
215
+ navigationBarTitle.classList.add('taro-navigation-bar-title');
216
+ navigationBarTitleWrap.appendChild(navigationBarLoading);
217
+ navigationBarTitleWrap.appendChild(navigationBarTitle);
218
+ navigationBar.appendChild(navigationBarHomeBtn);
219
+ navigationBar.appendChild(navigationBarBackBtn);
220
+ navigationBar.appendChild(navigationBarTitleWrap);
221
+ navigationBar.id = 'taro-navigation-bar';
222
+ container.prepend(navigationBar);
223
+ loadNavigationBarStyle();
224
+ }
225
+
10
226
  function initTabbar(config, history) {
11
227
  if (config.tabBar == null || config.tabBar.custom) {
12
228
  return;
@@ -52,8 +268,9 @@ class RouterConfig {
52
268
  return this.router.mode || 'hash';
53
269
  }
54
270
  static get customRoutes() { return this.router.customRoutes || {}; }
271
+ // 这个方法不考虑 basename 和 customRoutes,只判断原始的 url 是否在 pages 中
55
272
  static isPage(url = '') {
56
- return this.pages.findIndex(e => prependBasename(e) === url) !== -1;
273
+ return this.pages.findIndex(e => addLeadingSlash(e) === url) !== -1;
57
274
  }
58
275
  }
59
276
 
@@ -80,14 +297,14 @@ class MpaHistory {
80
297
  }
81
298
  parseUrl(to) {
82
299
  let url = to.pathname || '';
83
- if (RouterConfig.isPage(url)) {
300
+ if (RouterConfig.isPage(addLeadingSlash(url))) {
84
301
  url += '.html';
85
302
  }
86
303
  if (to.search) {
87
304
  url += `?${to.search}`;
88
305
  }
89
306
  if (to.hash) {
90
- url += `#${to.hash}`;
307
+ url += to.hash.startsWith('#') ? to.hash : `#${to.hash}`;
91
308
  }
92
309
  return url;
93
310
  }
@@ -244,26 +461,32 @@ class Stacks {
244
461
  }
245
462
  const stacks = new Stacks();
246
463
 
247
- let preTitle = document.title;
248
- let isLoadDdEntry = false;
249
464
  const isWeixin = () => !!navigator.userAgent.match(/\bMicroMessenger\b/ig);
250
465
  const isDingTalk = () => !!navigator.userAgent.match(/\bDingTalk\b/ig);
251
- function setTitle(title) {
252
- return __awaiter(this, void 0, void 0, function* () {
253
- if (preTitle === title)
254
- return title;
255
- document.title = title;
256
- preTitle = title;
257
- if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
258
- if (!isLoadDdEntry) {
259
- isLoadDdEntry = true;
260
- require('dingtalk-jsapi/platform');
261
- }
262
- const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
263
- setDingTitle({ title });
466
+ let preTitle = document.title;
467
+ let isLoadDdEntry = false;
468
+ function setMpaTitle(title) {
469
+ if (preTitle === title)
470
+ return;
471
+ document.title = title;
472
+ preTitle = title;
473
+ if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
474
+ if (!isLoadDdEntry) {
475
+ isLoadDdEntry = true;
476
+ require('dingtalk-jsapi/platform');
264
477
  }
265
- return title;
266
- });
478
+ const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
479
+ setDingTitle({ title });
480
+ }
481
+ }
482
+ function setTitle(title) {
483
+ eventCenter.trigger('__taroH5SetNavigationBarTitle', title);
484
+ }
485
+ function setNavigationBarStyle(option) {
486
+ eventCenter.trigger('__taroH5setNavigationBarColor', option);
487
+ }
488
+ function setNavigationBarLoading(loading) {
489
+ eventCenter.trigger('__taroH5setNavigationBarLoading', loading);
267
490
  }
268
491
 
269
492
  class RoutesAlias {
@@ -307,6 +530,7 @@ class RoutesAlias {
307
530
  }
308
531
  const routesAlias = new RoutesAlias();
309
532
 
533
+ const routeEvtChannel = EventChannel.routeChannel;
310
534
  function processNavigateUrl(option) {
311
535
  var _a;
312
536
  const pathPieces = parsePath(option.url);
@@ -315,13 +539,14 @@ function processNavigateUrl(option) {
315
539
  const parts = routesAlias.getOrigin(history.location.pathname).split('/');
316
540
  parts.pop();
317
541
  pathPieces.pathname.split('/').forEach((item) => {
318
- if (item === '.') {
542
+ if (item === '.')
319
543
  return;
320
- }
321
544
  item === '..' ? parts.pop() : parts.push(item);
322
545
  });
323
546
  pathPieces.pathname = parts.join('/');
324
547
  }
548
+ // 确保是 / 开头的路径
549
+ pathPieces.pathname = addLeadingSlash(pathPieces.pathname);
325
550
  // 处理自定义路由
326
551
  pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname));
327
552
  // 处理 basename
@@ -338,6 +563,10 @@ function navigate(option, method) {
338
563
  const { success, complete, fail } = option;
339
564
  const unListen = history.listen(() => {
340
565
  const res = { errMsg: `${method}:ok` };
566
+ if (method === 'navigateTo') {
567
+ res.eventChannel = routeEvtChannel;
568
+ routeEvtChannel.addEvents(option.events);
569
+ }
341
570
  success === null || success === void 0 ? void 0 : success(res);
342
571
  complete === null || complete === void 0 ? void 0 : complete(res);
343
572
  resolve(res);
@@ -348,6 +577,7 @@ function navigate(option, method) {
348
577
  const pathPieces = processNavigateUrl(option);
349
578
  const state = { timestamp: Date.now() };
350
579
  if (method === 'navigateTo') {
580
+ // Note: 由于 spa 会针对弱网情况下,短时间内多次跳转同一个页面跳转加了锁,后续如果有用户反馈返回无效,那可能是这个问题
351
581
  history.push(pathPieces, state);
352
582
  }
353
583
  else if (method === 'redirectTo' || method === 'switchTab') {
@@ -372,7 +602,12 @@ function navigate(option, method) {
372
602
  const res = { errMsg: `${method}:fail ${error.message || error}` };
373
603
  fail === null || fail === void 0 ? void 0 : fail(res);
374
604
  complete === null || complete === void 0 ? void 0 : complete(res);
375
- reject(res);
605
+ if (fail || complete) {
606
+ return resolve(res);
607
+ }
608
+ else {
609
+ return reject(res);
610
+ }
376
611
  }
377
612
  });
378
613
  });
@@ -407,12 +642,18 @@ let pageResizeFn;
407
642
  function bindPageResize(page) {
408
643
  pageResizeFn && window.removeEventListener('resize', pageResizeFn);
409
644
  pageResizeFn = function () {
410
- page.onResize && page.onResize({
411
- size: {
412
- windowHeight: window.innerHeight,
413
- windowWidth: window.innerWidth
414
- }
415
- });
645
+ if (page.onResize) {
646
+ const mediaQuery = window.matchMedia('(orientation: portrait)');
647
+ page.onResize({
648
+ deviceOrientation: mediaQuery.matches ? 'portrait' : 'landscape',
649
+ size: {
650
+ windowHeight: window.innerHeight,
651
+ windowWidth: window.innerWidth,
652
+ screenHeight: window.screen.height,
653
+ screenWidth: window.screen.width,
654
+ }
655
+ });
656
+ }
416
657
  };
417
658
  window.addEventListener('resize', pageResizeFn, false);
418
659
  }
@@ -451,80 +692,6 @@ function getOffset() {
451
692
  }
452
693
  }
453
694
 
454
- /**
455
- * 插入页面动画需要的样式
456
- */
457
- function loadAnimateStyle(ms = 300) {
458
- const css = `
459
- .taro_router > .taro_page {
460
- position: absolute;
461
- left: 0;
462
- top: 0;
463
- width: 100%;
464
- height: 100%;
465
- background-color: #fff;
466
- transform: translate(100%, 0);
467
- transition: transform ${ms}ms;
468
- z-index: 0;
469
- }
470
-
471
- .taro_router > .taro_page.taro_tabbar_page,
472
- .taro_router > .taro_page.taro_page_show.taro_page_stationed {
473
- transform: none;
474
- }
475
-
476
- .taro_router > .taro_page.taro_page_show {
477
- transform: translate(0, 0);
478
- }
479
- `;
480
- addStyle(css);
481
- }
482
- /**
483
- * 插入路由相关样式
484
- */
485
- function loadRouterStyle(enableTabBar, enableWindowScroll) {
486
- const css = `
487
- .taro_router {
488
- position: relative;
489
- width: 100%;
490
- height: 100%;
491
- }
492
-
493
- .taro_page {
494
- width: 100%;
495
- height: 100%;
496
- ${enableWindowScroll ? '' : `
497
- overflow-x: hidden;
498
- overflow-y: scroll;
499
- max-height: 100vh;
500
- `}
501
- }
502
- ${enableTabBar ? `
503
- .taro-tabbar__container > .taro-tabbar__panel {
504
- overflow: hidden;
505
- }
506
-
507
- .taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
508
- max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
509
- max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
510
- }
511
-
512
- ` : ''}
513
- .taro_page_shade,
514
- .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
515
- display: none;
516
- }
517
- `;
518
- addStyle(css);
519
- }
520
- function addStyle(css) {
521
- if (!css)
522
- return;
523
- const style = document.createElement('style');
524
- style.innerHTML = css;
525
- document.getElementsByTagName('head')[0].appendChild(style);
526
- }
527
-
528
695
  /* eslint-disable dot-notation */
529
696
  class MultiPageHandler {
530
697
  constructor(config, history) {
@@ -680,15 +847,16 @@ const launchStampId$1 = createStampId$1();
680
847
  * - 不支持路由动画
681
848
  */
682
849
  function createMultiRouter(history, app, config, framework) {
683
- var _a, _b, _c, _d, _e, _f;
684
850
  return __awaiter(this, void 0, void 0, function* () {
851
+ var _a, _b, _c, _d, _e, _f;
685
852
  if (typeof app.onUnhandledRejection === 'function') {
686
853
  window.addEventListener('unhandledrejection', app.onUnhandledRejection);
687
854
  }
855
+ eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle);
688
856
  RouterConfig.config = config;
689
857
  const handler = new MultiPageHandler(config, history);
690
858
  const launchParam = {
691
- path: config.pageName,
859
+ path: config.pageName, // 多页面模式没新开一个页面相当于重启,所以直接使用当前页面路径
692
860
  query: handler.getQuery(launchStampId$1),
693
861
  scene: 0,
694
862
  shareTicket: '',
@@ -718,7 +886,7 @@ function createMultiRouter(history, app, config, framework) {
718
886
  return;
719
887
  let enablePullDownRefresh = ((_c = config === null || config === void 0 ? void 0 : config.window) === null || _c === void 0 ? void 0 : _c.enablePullDownRefresh) || false;
720
888
  if (pageConfig) {
721
- setTitle((_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title);
889
+ setMpaTitle((_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title);
722
890
  if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
723
891
  enablePullDownRefresh = pageConfig.enablePullDownRefresh;
724
892
  }
@@ -730,9 +898,268 @@ function createMultiRouter(history, app, config, framework) {
730
898
  const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, pathName, framework, handler.PullDownRefresh) : el, pathName + stringify(launchParam), {}, loadConfig);
731
899
  handler.load(page, pageConfig);
732
900
  (_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
901
+ window.addEventListener('visibilitychange', () => {
902
+ var _a, _b, _c;
903
+ const currentPath = ((_a = Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
904
+ const path = currentPath.substring(0, currentPath.indexOf('?'));
905
+ const param = {};
906
+ // app的 onShow/onHide 生命周期的路径信息为当前页面的路径
907
+ Object.assign(param, launchParam, { path });
908
+ if (document.visibilityState === 'visible') {
909
+ (_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
910
+ }
911
+ else {
912
+ (_c = app.onHide) === null || _c === void 0 ? void 0 : _c.call(app, param);
913
+ }
914
+ });
733
915
  });
734
916
  }
735
917
 
918
+ class NavigationBarHandler {
919
+ constructor(pageContext) {
920
+ this.isLoadDdEntry = false;
921
+ this.cache = {};
922
+ this.pageContext = pageContext;
923
+ this.init();
924
+ eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
925
+ this.setTitle(title);
926
+ });
927
+ eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
928
+ this.setNavigationLoading(loading);
929
+ });
930
+ eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
931
+ if (typeof backgroundColor === 'string')
932
+ this.setNavigationBarBackground(backgroundColor);
933
+ if (typeof frontColor === 'string')
934
+ this.setNavigationBarTextStyle(frontColor);
935
+ });
936
+ }
937
+ toHomeFn() {
938
+ reLaunch({ url: this.pageContext.originHomePage });
939
+ }
940
+ backFn() {
941
+ navigateBack();
942
+ }
943
+ get homeBtnElement() {
944
+ var _a;
945
+ if (!this.navigationBarElement)
946
+ return null;
947
+ return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-home')) === null || _a === void 0 ? void 0 : _a[0];
948
+ }
949
+ get backBtnElement() {
950
+ var _a;
951
+ if (!this.navigationBarElement)
952
+ return null;
953
+ return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-back')) === null || _a === void 0 ? void 0 : _a[0];
954
+ }
955
+ get titleElement() {
956
+ var _a;
957
+ if (!this.navigationBarElement)
958
+ return null;
959
+ return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-title')) === null || _a === void 0 ? void 0 : _a[0];
960
+ }
961
+ get loadingElement() {
962
+ if (!this.navigationBarElement)
963
+ return null;
964
+ return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-loading')[0];
965
+ }
966
+ init() {
967
+ var _a, _b;
968
+ this.setNavigationBarElement();
969
+ if (!this.navigationBarElement)
970
+ return;
971
+ (_a = this.homeBtnElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.toHomeFn.bind(this));
972
+ (_b = this.backBtnElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.backFn.bind(this));
973
+ }
974
+ setNavigationBarElement() {
975
+ this.navigationBarElement = document.getElementById('taro-navigation-bar');
976
+ }
977
+ load() {
978
+ this.setCacheValue();
979
+ this.setTitle();
980
+ this.setNavigationBarVisible();
981
+ this.setFnBtnState();
982
+ this.setNavigationBarBackground();
983
+ this.setNavigationBarTextStyle();
984
+ this.setNavigationLoading();
985
+ }
986
+ setCacheValue() {
987
+ const currentPage = this.pageContext.originPathname;
988
+ if (typeof this.cache[currentPage] !== 'object') {
989
+ this.cache[currentPage] = {};
990
+ }
991
+ }
992
+ setFnBtnState() {
993
+ const currentRouter = this.pageContext.currentPage;
994
+ if (this.pageContext.isTabBar(currentRouter) || this.pageContext.homePage === currentRouter) {
995
+ this.fnBtnToggleToNone();
996
+ }
997
+ else if (stacks.length > 1) {
998
+ this.fnBtnToggleToBack();
999
+ }
1000
+ else {
1001
+ this.fnBtnToggleToHome();
1002
+ }
1003
+ }
1004
+ shiftLoadingState(show) {
1005
+ if (!this.loadingElement)
1006
+ return;
1007
+ if (show) {
1008
+ this.loadingElement.classList.add('taro-navigation-bar-loading-show');
1009
+ }
1010
+ else {
1011
+ this.loadingElement.classList.remove('taro-navigation-bar-loading-show');
1012
+ }
1013
+ }
1014
+ setNavigationLoading(show) {
1015
+ var _a;
1016
+ if (!this.navigationBarElement)
1017
+ return;
1018
+ const currentPage = this.pageContext.originPathname;
1019
+ let isShow;
1020
+ if (typeof show === 'boolean') {
1021
+ isShow = show;
1022
+ this.cache[currentPage] &&
1023
+ (this.cache[currentPage].loading = isShow);
1024
+ }
1025
+ else {
1026
+ const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.loading;
1027
+ if (typeof cacheValue === 'boolean') {
1028
+ isShow = cacheValue;
1029
+ }
1030
+ else {
1031
+ // 默认值为 false
1032
+ isShow = false;
1033
+ this.cache[currentPage] &&
1034
+ (this.cache[currentPage].loading = isShow);
1035
+ }
1036
+ }
1037
+ this.shiftLoadingState(isShow);
1038
+ }
1039
+ setNavigationBarBackground(backgroundColor) {
1040
+ var _a, _b, _c;
1041
+ if (!this.navigationBarElement)
1042
+ return;
1043
+ const currentPage = this.pageContext.originPathname;
1044
+ let color;
1045
+ if (typeof backgroundColor === 'string') {
1046
+ color = backgroundColor;
1047
+ this.cache[currentPage] &&
1048
+ (this.cache[currentPage].backgroundColor = color);
1049
+ }
1050
+ else {
1051
+ const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.backgroundColor;
1052
+ if (typeof cacheValue === 'string') {
1053
+ color = cacheValue;
1054
+ }
1055
+ else {
1056
+ color = ((_c = (_b = this.pageContext.config) === null || _b === void 0 ? void 0 : _b.window) === null || _c === void 0 ? void 0 : _c.navigationBarBackgroundColor) || '#000000';
1057
+ this.cache[currentPage] &&
1058
+ (this.cache[currentPage].backgroundColor = color);
1059
+ }
1060
+ }
1061
+ this.navigationBarElement.style.background = color;
1062
+ }
1063
+ setNavigationBarTextStyle(fontColor) {
1064
+ var _a, _b, _c;
1065
+ if (!this.navigationBarElement)
1066
+ return;
1067
+ const currentPage = this.pageContext.originPathname;
1068
+ let color;
1069
+ if (typeof fontColor === 'string') {
1070
+ color = fontColor;
1071
+ this.cache[currentPage] &&
1072
+ (this.cache[currentPage].fontColor = color);
1073
+ }
1074
+ else {
1075
+ const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.fontColor;
1076
+ if (typeof cacheValue === 'string') {
1077
+ color = cacheValue;
1078
+ }
1079
+ else {
1080
+ color = ((_c = (_b = this.pageContext.config) === null || _b === void 0 ? void 0 : _b.window) === null || _c === void 0 ? void 0 : _c.navigationBarTextStyle) || 'white';
1081
+ this.cache[currentPage] &&
1082
+ (this.cache[currentPage].fontColor = color);
1083
+ }
1084
+ }
1085
+ this.navigationBarElement.style.color = color;
1086
+ }
1087
+ setTitle(title) {
1088
+ var _a, _b, _c;
1089
+ const currentPage = this.pageContext.originPathname;
1090
+ let proceedTitle;
1091
+ if (typeof title === 'string') {
1092
+ proceedTitle = title;
1093
+ this.cache[currentPage] &&
1094
+ (this.cache[currentPage].title = proceedTitle);
1095
+ }
1096
+ else {
1097
+ const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.title;
1098
+ if (typeof cacheValue === 'string') {
1099
+ proceedTitle = cacheValue;
1100
+ }
1101
+ else {
1102
+ proceedTitle = (_c = (_b = this.pageContext.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationBarTitleText) !== null && _c !== void 0 ? _c : document.title;
1103
+ this.cache[currentPage] &&
1104
+ (this.cache[currentPage].title = proceedTitle);
1105
+ }
1106
+ }
1107
+ if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
1108
+ if (!this.isLoadDdEntry) {
1109
+ this.isLoadDdEntry = true;
1110
+ require('dingtalk-jsapi/platform');
1111
+ }
1112
+ const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
1113
+ setDingTitle({ proceedTitle });
1114
+ }
1115
+ document.title = proceedTitle;
1116
+ if (!this.titleElement)
1117
+ return;
1118
+ this.titleElement.innerHTML = proceedTitle;
1119
+ }
1120
+ fnBtnToggleToHome() {
1121
+ if (!this.navigationBarElement)
1122
+ return;
1123
+ this.navigationBarElement.classList.add('taro-navigation-bar-home-icon');
1124
+ this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
1125
+ }
1126
+ fnBtnToggleToBack() {
1127
+ if (!this.navigationBarElement)
1128
+ return;
1129
+ this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
1130
+ this.navigationBarElement.classList.add('taro-navigation-bar-back-icon');
1131
+ }
1132
+ fnBtnToggleToNone() {
1133
+ if (!this.navigationBarElement)
1134
+ return;
1135
+ this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
1136
+ this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
1137
+ }
1138
+ setNavigationBarVisible(show) {
1139
+ var _a, _b;
1140
+ if (!this.navigationBarElement)
1141
+ return;
1142
+ let shouldShow;
1143
+ if (typeof show === 'boolean') {
1144
+ shouldShow = show;
1145
+ }
1146
+ else {
1147
+ shouldShow = (_a = this.pageContext.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
1148
+ if (typeof ((_b = this.pageContext.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
1149
+ shouldShow = this.pageContext.pageConfig.navigationStyle;
1150
+ }
1151
+ }
1152
+ if (shouldShow === 'default') {
1153
+ this.navigationBarElement.classList.add('taro-navigation-bar-show');
1154
+ this.navigationBarElement.classList.remove('taro-navigation-bar-hide');
1155
+ }
1156
+ else {
1157
+ this.navigationBarElement.classList.add('taro-navigation-bar-hide');
1158
+ this.navigationBarElement.classList.remove('taro-navigation-bar-show');
1159
+ }
1160
+ }
1161
+ }
1162
+
736
1163
  /* eslint-disable dot-notation */
737
1164
  class PageHandler {
738
1165
  constructor(config, history) {
@@ -740,7 +1167,9 @@ class PageHandler {
740
1167
  this.defaultAnimation = { duration: 300, delay: 50 };
741
1168
  this.config = config;
742
1169
  this.homePage = getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
1170
+ this.originHomePage = this.config.entryPagePath || this.routes[0].path || this.basename;
743
1171
  this.mount();
1172
+ this.navigationBarHandler = new NavigationBarHandler(this);
744
1173
  }
745
1174
  get currentPage() {
746
1175
  const routePath = getCurrentPage(this.routerMode, this.basename);
@@ -772,14 +1201,14 @@ class PageHandler {
772
1201
  }
773
1202
  set pathname(p) { this.router.pathname = p; }
774
1203
  get pathname() { return this.router.pathname; }
1204
+ // Note: 把 pathname 转换为原始路径,主要是处理 customRoutes 和 basename
1205
+ get originPathname() { return routesAlias.getOrigin(addLeadingSlash(stripBasename(this.pathname, this.basename))); }
775
1206
  get basename() { return this.router.basename || ''; }
776
1207
  get pageConfig() {
777
- const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
778
1208
  const homePage = addLeadingSlash(this.homePage);
779
1209
  return this.routes.find(r => {
780
- var _a;
781
1210
  const pagePath = addLeadingSlash(r.path);
782
- return [pagePath, homePage].includes(routePath) || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
1211
+ return [pagePath, homePage].includes(this.originPathname);
783
1212
  });
784
1213
  }
785
1214
  isTabBar(pathname) {
@@ -846,7 +1275,7 @@ class PageHandler {
846
1275
  this.pathname = history.location.pathname;
847
1276
  // Note: 注入页面样式
848
1277
  this.animation && loadAnimateStyle(this.animationDuration);
849
- loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
1278
+ loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll, this.router.enhanceAnimation);
850
1279
  }
851
1280
  onReady(page, onLoad = true) {
852
1281
  var _a;
@@ -884,6 +1313,7 @@ class PageHandler {
884
1313
  this.isDefaultNavigationStyle() && pageEl.classList.add('taro_navigation_page');
885
1314
  this.addAnimation(pageEl, pageNo === 0);
886
1315
  (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
1316
+ this.navigationBarHandler.load();
887
1317
  this.bindPageEvents(page, pageConfig);
888
1318
  this.triggerRouterChange();
889
1319
  }
@@ -896,6 +1326,7 @@ class PageHandler {
896
1326
  this.isDefaultNavigationStyle() && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page'));
897
1327
  this.addAnimation(pageEl, pageNo === 0);
898
1328
  (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
1329
+ this.navigationBarHandler.load();
899
1330
  this.onReady(page, true);
900
1331
  this.bindPageEvents(page, pageConfig);
901
1332
  this.triggerRouterChange();
@@ -950,6 +1381,7 @@ class PageHandler {
950
1381
  pageEl.classList.remove('taro_page_shade');
951
1382
  this.addAnimation(pageEl, pageNo === 0);
952
1383
  (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
1384
+ this.navigationBarHandler.load();
953
1385
  this.bindPageEvents(page, pageConfig);
954
1386
  this.triggerRouterChange();
955
1387
  }
@@ -959,30 +1391,43 @@ class PageHandler {
959
1391
  pageEl = this.getPageContainer(page);
960
1392
  this.addAnimation(pageEl, pageNo === 0);
961
1393
  (_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
1394
+ this.navigationBarHandler.load();
962
1395
  this.onReady(page, false);
963
1396
  this.bindPageEvents(page, pageConfig);
964
1397
  this.triggerRouterChange();
965
1398
  });
966
1399
  }
967
1400
  }
968
- hide(page) {
969
- var _a;
1401
+ hide(page, animation = false) {
1402
+ var _a, _b, _c, _d, _e, _f, _g, _h;
970
1403
  if (!page)
971
1404
  return;
972
1405
  // NOTE: 修复多页并发问题,此处可能因为路由跳转过快,执行时页面可能还没有创建成功
973
1406
  const pageEl = this.getPageContainer(page);
974
1407
  if (pageEl) {
975
- if (this.hideTimer) {
976
- clearTimeout(this.hideTimer);
977
- this.hideTimer = null;
978
- pageEl.classList.add('taro_page_shade');
1408
+ if (animation) {
1409
+ if (this.hideTimer) {
1410
+ clearTimeout(this.hideTimer);
1411
+ this.hideTimer = null;
1412
+ (_c = (_b = (_a = this.lastHidePage) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add) === null || _c === void 0 ? void 0 : _c.call(_b, 'taro_page_shade');
1413
+ }
1414
+ this.lastHidePage = pageEl;
1415
+ this.hideTimer = setTimeout(() => {
1416
+ this.hideTimer = null;
1417
+ pageEl.classList.add('taro_page_shade');
1418
+ }, this.animationDuration + this.animationDelay);
1419
+ (_d = page.onHide) === null || _d === void 0 ? void 0 : _d.call(page);
979
1420
  }
980
- this.lastHidePage = pageEl;
981
- this.hideTimer = setTimeout(() => {
982
- this.hideTimer = null;
1421
+ else {
1422
+ if (this.hideTimer) {
1423
+ clearTimeout(this.hideTimer);
1424
+ this.hideTimer = null;
1425
+ (_g = (_f = (_e = this.lastHidePage) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.add) === null || _g === void 0 ? void 0 : _g.call(_f, 'taro_page_shade');
1426
+ }
1427
+ (_h = page.onHide) === null || _h === void 0 ? void 0 : _h.call(page);
983
1428
  pageEl.classList.add('taro_page_shade');
984
- }, this.animationDuration + this.animationDelay);
985
- (_a = page.onHide) === null || _a === void 0 ? void 0 : _a.call(page);
1429
+ this.lastHidePage = pageEl;
1430
+ }
986
1431
  }
987
1432
  else {
988
1433
  setTimeout(() => this.hide(page), 0);
@@ -1053,6 +1498,10 @@ function createRouter(history, app, config, framework) {
1053
1498
  }
1054
1499
  RouterConfig.config = config;
1055
1500
  const handler = new PageHandler(config, history);
1501
+ // Note: 弱网情况下,快速切换 tab,会造成同个页面实例被多次挂在到页面上,原因是资源请求是异步的,短时间内发起多个请求,
1502
+ // 会在资源加载完成后,同时走到挂载的逻辑,造成 pageStampId 更新不及时,两个 page 的Id 相同,后面很多操作是通过 getElementById 来进行的
1503
+ // 所以需要加一个锁来应对这个情况
1504
+ const pageLock = {};
1056
1505
  routesAlias.set(handler.router.customRoutes);
1057
1506
  const basename = handler.router.basename;
1058
1507
  const routes = handler.routes.map(route => {
@@ -1074,29 +1523,35 @@ function createRouter(history, app, config, framework) {
1074
1523
  eventCenter.trigger('__taroRouterLaunch', launchParam);
1075
1524
  (_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
1076
1525
  app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
1077
- const render = ({ location, action }) => __awaiter(this, void 0, void 0, function* () {
1078
- var _c, _d, _e, _f, _g, _h, _j, _k, _l;
1079
- handler.pathname = decodeURI(location.pathname);
1080
- if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
1526
+ const render = (_c) => __awaiter(this, [_c], void 0, function* ({ location, action }) {
1527
+ var _d, _e, _f, _g, _h, _j, _k, _l;
1528
+ // Note: 由于下面有异步加载操作 先不要在这里去设置 handler.pathname
1529
+ const currentPathname = decodeURI(location.pathname);
1530
+ if ((_d = window.__taroAppConfig) === null || _d === void 0 ? void 0 : _d.usingWindowScroll)
1081
1531
  window.scrollTo(0, 0);
1082
1532
  eventCenter.trigger('__taroRouterChange', {
1083
1533
  toLocation: {
1084
- path: handler.pathname
1534
+ path: currentPathname
1085
1535
  }
1086
1536
  });
1087
- let element, params;
1537
+ let element, context, params;
1538
+ const routerPath = handler.router.forcePath || currentPathname;
1539
+ pageLock[routerPath] = typeof pageLock[routerPath] === 'number' ? pageLock[routerPath] + 1 : 1;
1540
+ const currentLock = pageLock[routerPath];
1541
+ let postLock;
1088
1542
  try {
1089
- const result = yield router.resolve(handler.router.forcePath || handler.pathname);
1090
- [element, , params] = yield Promise.all(result);
1543
+ const result = yield router.resolve(routerPath);
1544
+ [element, context, params] = yield Promise.all(result);
1545
+ postLock = pageLock[routerPath];
1091
1546
  }
1092
1547
  catch (error) {
1093
1548
  if (error.status === 404) {
1094
1549
  const notFoundEvent = {
1095
1550
  isEntryPage: stacks.length === 0,
1096
- path: handler.pathname,
1551
+ path: currentPathname,
1097
1552
  query: handler.getQuery(createStampId()),
1098
1553
  };
1099
- (_d = app.onPageNotFound) === null || _d === void 0 ? void 0 : _d.call(app, notFoundEvent);
1554
+ (_e = app.onPageNotFound) === null || _e === void 0 ? void 0 : _e.call(app, notFoundEvent);
1100
1555
  eventCenter.trigger('__taroRouterNotFound', notFoundEvent);
1101
1556
  }
1102
1557
  else if (/Loading hot update .* failed./.test(error.message)) {
@@ -1107,15 +1562,17 @@ function createRouter(history, app, config, framework) {
1107
1562
  throw error;
1108
1563
  }
1109
1564
  }
1110
- if (!element)
1565
+ if (!element || currentLock !== postLock)
1111
1566
  return;
1112
- const pageConfig = handler.pageConfig;
1113
- let enablePullDownRefresh = ((_e = config === null || config === void 0 ? void 0 : config.window) === null || _e === void 0 ? void 0 : _e.enablePullDownRefresh) || false;
1114
- let navigationStyle = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.navigationStyle) || 'default';
1115
- let navigationBarTextStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationBarTextStyle) || 'white';
1116
- let navigationBarBackgroundColor = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarBackgroundColor) || '#000000';
1567
+ // Note: 异步结束后,在设置 handler.pathname
1568
+ // context.pathname universal-router 被处理过了,是发起资源请求的时候传入的 pathname,即 await router.resolve(routerPath) 这个 routerPath
1569
+ handler.pathname = context.pathname;
1570
+ const { pathname, pageConfig } = handler;
1571
+ let enablePullDownRefresh = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.enablePullDownRefresh) || false;
1572
+ let navigationStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationStyle) || 'default';
1573
+ let navigationBarTextStyle = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarTextStyle) || 'white';
1574
+ let navigationBarBackgroundColor = ((_j = config === null || config === void 0 ? void 0 : config.window) === null || _j === void 0 ? void 0 : _j.navigationBarBackgroundColor) || '#000000';
1117
1575
  if (pageConfig) {
1118
- setTitle((_j = pageConfig.navigationBarTitleText) !== null && _j !== void 0 ? _j : document.title);
1119
1576
  if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
1120
1577
  enablePullDownRefresh = pageConfig.enablePullDownRefresh;
1121
1578
  }
@@ -1131,7 +1588,6 @@ function createRouter(history, app, config, framework) {
1131
1588
  }
1132
1589
  eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
1133
1590
  const currentPage = Current.page;
1134
- const pathname = handler.pathname;
1135
1591
  const methodName = (_k = stacks.method) !== null && _k !== void 0 ? _k : '';
1136
1592
  const cacheTabs = stacks.getTabs();
1137
1593
  let shouldLoad = false;
@@ -1147,10 +1603,11 @@ function createRouter(history, app, config, framework) {
1147
1603
  }
1148
1604
  shouldLoad = true;
1149
1605
  }
1150
- else if (currentPage && handler.isTabBar(handler.pathname)) {
1606
+ else if (currentPage && handler.isTabBar(pathname)) {
1151
1607
  if (handler.isSamePage(currentPage))
1152
1608
  return;
1153
1609
  if (handler.isTabBar(currentPage.path)) {
1610
+ // NOTE: 从 tabBar 页面切换到 tabBar 页面
1154
1611
  handler.hide(currentPage);
1155
1612
  stacks.pushTab(currentPage.path.split('?')[0]);
1156
1613
  }
@@ -1164,8 +1621,8 @@ function createRouter(history, app, config, framework) {
1164
1621
  handler.unload(currentPage, stacks.length, true);
1165
1622
  }
1166
1623
  }
1167
- if (cacheTabs[handler.pathname]) {
1168
- stacks.popTab(handler.pathname);
1624
+ if (cacheTabs[pathname]) {
1625
+ stacks.popTab(pathname);
1169
1626
  return handler.show(stacks.getItem(0), pageConfig, 0);
1170
1627
  }
1171
1628
  shouldLoad = true;
@@ -1194,7 +1651,7 @@ function createRouter(history, app, config, framework) {
1194
1651
  shouldLoad = true;
1195
1652
  }
1196
1653
  else if (action === 'PUSH') {
1197
- handler.hide(currentPage);
1654
+ handler.hide(currentPage, true);
1198
1655
  shouldLoad = true;
1199
1656
  }
1200
1657
  if (shouldLoad || stacks.length < 1) {
@@ -1223,6 +1680,26 @@ function createRouter(history, app, config, framework) {
1223
1680
  }
1224
1681
  render({ location: history.location, action: Action.Push });
1225
1682
  (_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
1683
+ window.addEventListener('visibilitychange', () => {
1684
+ var _a, _b, _c, _d, _e, _f, _g;
1685
+ const currentPath = ((_a = Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
1686
+ const path = currentPath.substring(0, currentPath.indexOf('?'));
1687
+ const param = {};
1688
+ // app的 onShow/onHide 生命周期的路径信息为当前页面的路径
1689
+ Object.assign(param, launchParam, { path });
1690
+ if (document.visibilityState === 'visible') {
1691
+ (_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
1692
+ // 单页面app显示后一刻会触发当前 page.onShow 生命周期函数
1693
+ (_d = (_c = Current.page) === null || _c === void 0 ? void 0 : _c.onShow) === null || _d === void 0 ? void 0 : _d.call(_c);
1694
+ }
1695
+ else {
1696
+ // 单页面app隐藏前一刻会触发当前 page.onHide 生命周期函数
1697
+ if ((_e = Current.page) === null || _e === void 0 ? void 0 : _e.path) {
1698
+ safeExecute((_f = Current.page) === null || _f === void 0 ? void 0 : _f.path, 'onHide');
1699
+ }
1700
+ (_g = app.onHide) === null || _g === void 0 ? void 0 : _g.call(app, param);
1701
+ }
1702
+ });
1226
1703
  return history.listen(render);
1227
1704
  }
1228
1705
 
@@ -1234,10 +1711,11 @@ function handleAppMount(config, _, appId = config.appId || 'app') {
1234
1711
  app.id = appId;
1235
1712
  isPosition = false;
1236
1713
  }
1237
- const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
1714
+ const appWrapper = ((app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body);
1238
1715
  app.classList.add('taro_router');
1239
1716
  if (!isPosition)
1240
1717
  appWrapper.appendChild(app);
1718
+ initNavigationBar(config, appWrapper);
1241
1719
  }
1242
1720
  function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
1243
1721
  let app = document.getElementById(appId);
@@ -1247,7 +1725,7 @@ function handleAppMountWithTabbar(config, history, appId = config.appId || 'app'
1247
1725
  app.id = appId;
1248
1726
  isPosition = false;
1249
1727
  }
1250
- const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
1728
+ const appWrapper = ((app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body);
1251
1729
  app.classList.add('taro_router');
1252
1730
  const container = document.createElement('div');
1253
1731
  container.classList.add('taro-tabbar__container');
@@ -1263,6 +1741,7 @@ function handleAppMountWithTabbar(config, history, appId = config.appId || 'app'
1263
1741
  appWrapper.replaceChild(container, app);
1264
1742
  }
1265
1743
  initTabbar(config, history);
1744
+ initNavigationBar(config, container);
1266
1745
  }
1267
1746
 
1268
- export { createMpaHistory, createMultiRouter, createRouter, getCurrentPages, handleAppMount, handleAppMountWithTabbar, history, isDingTalk, isWeixin, navigateBack, navigateTo, prependBasename, reLaunch, redirectTo, routesAlias, setHistory, setHistoryMode, setTitle, switchTab };
1747
+ export { createMpaHistory, createMultiRouter, createRouter, getCurrentPages, handleAppMount, handleAppMountWithTabbar, history, isDingTalk, isWeixin, navigateBack, navigateTo, prependBasename, reLaunch, redirectTo, routesAlias, setHistory, setHistoryMode, setMpaTitle, setNavigationBarLoading, setNavigationBarStyle, setTitle, switchTab };