@tarojs/router 4.0.0-beta.0 → 4.0.0-beta.10
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/LICENSE +14 -0
- package/dist/api.d.ts +7 -6
- package/dist/api.js +36 -20
- package/dist/events/resize.d.ts +2 -1
- package/dist/events/resize.js +15 -7
- package/dist/events/scroll.d.ts +2 -1
- package/dist/events/scroll.js +4 -1
- package/dist/history.d.ts +24 -5
- package/dist/history.js +18 -7
- package/dist/index.cjs.d.ts +49 -6
- package/dist/index.cjs.js +551 -229
- package/dist/index.d.ts +10 -4
- package/dist/index.esm.d.ts +49 -6
- package/dist/index.esm.js +510 -199
- package/dist/index.js +52 -4
- package/dist/navigationBar.d.ts +2 -0
- package/dist/navigationBar.js +27 -0
- package/dist/router/index.d.ts +4 -3
- package/dist/router/index.js +5 -2
- package/dist/router/mpa.d.ts +5 -3
- package/dist/router/mpa.js +22 -17
- package/dist/router/multi-page.d.ts +10 -6
- package/dist/router/multi-page.js +27 -43
- package/dist/router/navigation-bar.d.ts +32 -0
- package/dist/router/navigation-bar.js +209 -0
- package/dist/router/page.d.ts +13 -7
- package/dist/router/page.js +36 -45
- package/dist/router/spa.d.ts +5 -3
- package/dist/router/spa.js +40 -26
- package/dist/router/stack.d.ts +1 -1
- package/dist/router/stack.js +2 -1
- package/dist/style.d.ts +8 -2
- package/dist/style.js +65 -5
- package/dist/tabbar.d.ts +3 -1
- package/dist/tabbar.js +4 -3
- package/dist/utils/index.d.ts +3 -9
- package/dist/utils/index.js +5 -20
- package/dist/utils/navigate.d.ts +9 -5
- package/dist/utils/navigate.js +22 -38
- package/package.json +21 -11
- package/types/component.d.ts +5 -0
- package/types/taro.d.ts +8 -0
- package/dist/index.cjs.js.map +0 -1
- package/dist/index.esm.js.map +0 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,44 +1,65 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var history = require('history');
|
|
6
|
-
var runtime = require('@tarojs/runtime');
|
|
7
|
-
var MobileDetect = require('mobile-detect');
|
|
8
|
-
var queryString = require('query-string');
|
|
9
3
|
var components = require('@tarojs/components/dist/components');
|
|
10
4
|
var taro = require('@tarojs/taro');
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var runtime = require('@tarojs/runtime');
|
|
7
|
+
var history = require('history');
|
|
8
|
+
var queryString = require('query-string');
|
|
11
9
|
var UniversalRouter = require('universal-router');
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
const home_svg_str = `
|
|
12
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
13
|
+
<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"/>
|
|
14
|
+
</svg>
|
|
15
|
+
`;
|
|
16
|
+
const back_svg_str = `
|
|
17
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
18
|
+
<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"/>
|
|
19
|
+
</svg>
|
|
14
20
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
21
|
+
`;
|
|
22
|
+
function initNavigationBar(container) {
|
|
23
|
+
const navigationBar = document.createElement('taro-navigation-bar-wrap');
|
|
24
|
+
navigationBar.classList.add('taro-navigation-bar-no-icon');
|
|
25
|
+
const navigationBarBackBtn = document.createElement('taro-navigation-bar-back');
|
|
26
|
+
const navigationBarHomeBtn = document.createElement('taro-navigation-bar-home');
|
|
27
|
+
navigationBarBackBtn.innerHTML = back_svg_str;
|
|
28
|
+
navigationBarHomeBtn.innerHTML = home_svg_str;
|
|
29
|
+
const navigationBarTitle = document.createElement('taro-navigation-bar-title');
|
|
30
|
+
navigationBar.appendChild(navigationBarHomeBtn);
|
|
31
|
+
navigationBar.appendChild(navigationBarBackBtn);
|
|
32
|
+
navigationBar.appendChild(navigationBarTitle);
|
|
33
|
+
navigationBar.id = 'taro-navigation-bar';
|
|
34
|
+
container.prepend(navigationBar);
|
|
35
|
+
}
|
|
18
36
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
37
|
+
function initTabbar(config, history) {
|
|
38
|
+
if (config.tabBar == null || config.tabBar.custom) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
// TODO: custom-tab-bar
|
|
42
|
+
components.defineCustomElementTaroTabbar();
|
|
43
|
+
const tabbar = document.createElement('taro-tabbar');
|
|
44
|
+
const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
|
|
45
|
+
tabbar.conf = config.tabBar;
|
|
46
|
+
tabbar.conf.homePage = history.location.pathname === '/' ? homePage : history.location.pathname;
|
|
47
|
+
const routerConfig = config.router;
|
|
48
|
+
tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
|
|
49
|
+
if (routerConfig.customRoutes) {
|
|
50
|
+
tabbar.conf.custom = true;
|
|
51
|
+
tabbar.conf.customRoutes = routerConfig.customRoutes;
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
tabbar.conf.custom = false;
|
|
55
|
+
tabbar.conf.customRoutes = {};
|
|
56
|
+
}
|
|
57
|
+
if (typeof routerConfig.basename !== 'undefined') {
|
|
58
|
+
tabbar.conf.basename = routerConfig.basename;
|
|
59
|
+
}
|
|
60
|
+
const container = document.getElementById('container');
|
|
61
|
+
container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
|
|
62
|
+
taro.initTabBarApis(config);
|
|
42
63
|
}
|
|
43
64
|
|
|
44
65
|
class RouterConfig {
|
|
@@ -93,7 +114,7 @@ class MpaHistory {
|
|
|
93
114
|
url += `?${to.search}`;
|
|
94
115
|
}
|
|
95
116
|
if (to.hash) {
|
|
96
|
-
url += `#${to.hash}`;
|
|
117
|
+
url += to.hash.startsWith('#') ? to.hash : `#${to.hash}`;
|
|
97
118
|
}
|
|
98
119
|
return url;
|
|
99
120
|
}
|
|
@@ -142,6 +163,13 @@ class MpaHistory {
|
|
|
142
163
|
};
|
|
143
164
|
}
|
|
144
165
|
}
|
|
166
|
+
function setHistory(h, base = '/') {
|
|
167
|
+
exports.history = h;
|
|
168
|
+
basename = base;
|
|
169
|
+
}
|
|
170
|
+
function createMpaHistory(_) {
|
|
171
|
+
return new MpaHistory();
|
|
172
|
+
}
|
|
145
173
|
function setHistoryMode(mode, base = '/') {
|
|
146
174
|
const options = {
|
|
147
175
|
window
|
|
@@ -151,7 +179,7 @@ function setHistoryMode(mode, base = '/') {
|
|
|
151
179
|
exports.history = history.createBrowserHistory(options);
|
|
152
180
|
}
|
|
153
181
|
else if (mode === 'multi') {
|
|
154
|
-
exports.history =
|
|
182
|
+
exports.history = createMpaHistory();
|
|
155
183
|
}
|
|
156
184
|
else {
|
|
157
185
|
// default is hash
|
|
@@ -243,24 +271,31 @@ class Stacks {
|
|
|
243
271
|
}
|
|
244
272
|
const stacks = new Stacks();
|
|
245
273
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
}
|
|
274
|
+
const isWeixin = () => !!navigator.userAgent.match(/\bMicroMessenger\b/ig);
|
|
275
|
+
const isDingTalk = () => !!navigator.userAgent.match(/\bDingTalk\b/ig);
|
|
276
|
+
let preTitle = document.title;
|
|
277
|
+
let isLoadDdEntry = false;
|
|
278
|
+
function setMpaTitle(title) {
|
|
279
|
+
if (preTitle === title)
|
|
280
|
+
return;
|
|
281
|
+
document.title = title;
|
|
282
|
+
preTitle = title;
|
|
283
|
+
if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
|
|
284
|
+
if (!isLoadDdEntry) {
|
|
285
|
+
isLoadDdEntry = true;
|
|
286
|
+
require('dingtalk-jsapi/platform');
|
|
287
|
+
}
|
|
288
|
+
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
289
|
+
setDingTitle({ title });
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
function setTitle(title) {
|
|
293
|
+
runtime.eventCenter.trigger('__taroH5SetNavigationTitle', title);
|
|
294
|
+
}
|
|
295
|
+
function setNavigationBarStyle(option) {
|
|
296
|
+
runtime.eventCenter.trigger('__taroH5setNavigationBarColor', option);
|
|
297
|
+
}
|
|
298
|
+
|
|
264
299
|
class RoutesAlias {
|
|
265
300
|
constructor() {
|
|
266
301
|
this.conf = [];
|
|
@@ -290,12 +325,12 @@ class RoutesAlias {
|
|
|
290
325
|
set(customRoutes = {}) {
|
|
291
326
|
for (let key in customRoutes) {
|
|
292
327
|
const path = customRoutes[key];
|
|
293
|
-
key = addLeadingSlash(key);
|
|
328
|
+
key = runtime.addLeadingSlash(key);
|
|
294
329
|
if (typeof path === 'string') {
|
|
295
|
-
this.conf.push([key, addLeadingSlash(path)]);
|
|
330
|
+
this.conf.push([key, runtime.addLeadingSlash(path)]);
|
|
296
331
|
}
|
|
297
332
|
else if ((path === null || path === void 0 ? void 0 : path.length) > 0) {
|
|
298
|
-
this.conf.push(...path.map(p => [key, addLeadingSlash(p)]));
|
|
333
|
+
this.conf.push(...path.map(p => [key, runtime.addLeadingSlash(p)]));
|
|
299
334
|
}
|
|
300
335
|
}
|
|
301
336
|
}
|
|
@@ -318,7 +353,7 @@ function processNavigateUrl(option) {
|
|
|
318
353
|
pathPieces.pathname = parts.join('/');
|
|
319
354
|
}
|
|
320
355
|
// 处理自定义路由
|
|
321
|
-
pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname));
|
|
356
|
+
pathPieces.pathname = routesAlias.getAlias(runtime.addLeadingSlash(pathPieces.pathname));
|
|
322
357
|
// 处理 basename
|
|
323
358
|
pathPieces.pathname = prependBasename(pathPieces.pathname);
|
|
324
359
|
// hack fix history v5 bug: https://github.com/remix-run/history/issues/814
|
|
@@ -327,7 +362,7 @@ function processNavigateUrl(option) {
|
|
|
327
362
|
return pathPieces;
|
|
328
363
|
}
|
|
329
364
|
function navigate(option, method) {
|
|
330
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
365
|
+
return tslib.__awaiter(this, void 0, void 0, function* () {
|
|
331
366
|
return new Promise((resolve, reject) => {
|
|
332
367
|
stacks.method = method;
|
|
333
368
|
const { success, complete, fail } = option;
|
|
@@ -342,6 +377,21 @@ function navigate(option, method) {
|
|
|
342
377
|
if ('url' in option) {
|
|
343
378
|
const pathPieces = processNavigateUrl(option);
|
|
344
379
|
const state = { timestamp: Date.now() };
|
|
380
|
+
if (pathPieces.pathname) {
|
|
381
|
+
const originPath = routesAlias.getOrigin(pathPieces.pathname);
|
|
382
|
+
const pagePath = originPath.startsWith('/') ? originPath.substring(1) : originPath;
|
|
383
|
+
if (!RouterConfig.pages.includes(pagePath)) {
|
|
384
|
+
const res = { errMsg: `${method}:fail page ${pagePath} is not found` };
|
|
385
|
+
fail === null || fail === void 0 ? void 0 : fail(res);
|
|
386
|
+
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
387
|
+
if (fail || complete) {
|
|
388
|
+
return resolve(res);
|
|
389
|
+
}
|
|
390
|
+
else {
|
|
391
|
+
return reject(res);
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
}
|
|
345
395
|
if (method === 'navigateTo') {
|
|
346
396
|
exports.history.push(pathPieces, state);
|
|
347
397
|
}
|
|
@@ -367,7 +417,12 @@ function navigate(option, method) {
|
|
|
367
417
|
const res = { errMsg: `${method}:fail ${error.message || error}` };
|
|
368
418
|
fail === null || fail === void 0 ? void 0 : fail(res);
|
|
369
419
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
370
|
-
|
|
420
|
+
if (fail || complete) {
|
|
421
|
+
return resolve(res);
|
|
422
|
+
}
|
|
423
|
+
else {
|
|
424
|
+
return reject(res);
|
|
425
|
+
}
|
|
371
426
|
}
|
|
372
427
|
});
|
|
373
428
|
});
|
|
@@ -398,47 +453,22 @@ function getCurrentPages() {
|
|
|
398
453
|
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, '')) || '' })); });
|
|
399
454
|
}
|
|
400
455
|
|
|
401
|
-
let md;
|
|
402
|
-
let preTitle = document.title;
|
|
403
|
-
let isLoadDdEntry = false;
|
|
404
|
-
function getMobileDetect() {
|
|
405
|
-
if (!md) {
|
|
406
|
-
md = new MobileDetect__default["default"](navigator.userAgent);
|
|
407
|
-
}
|
|
408
|
-
return md;
|
|
409
|
-
}
|
|
410
|
-
function setTitle(title) {
|
|
411
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
412
|
-
if (preTitle === title)
|
|
413
|
-
return title;
|
|
414
|
-
document.title = title;
|
|
415
|
-
preTitle = title;
|
|
416
|
-
if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
|
|
417
|
-
if (!isLoadDdEntry) {
|
|
418
|
-
isLoadDdEntry = true;
|
|
419
|
-
require('dingtalk-jsapi/platform');
|
|
420
|
-
}
|
|
421
|
-
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
422
|
-
setDingTitle({ title });
|
|
423
|
-
}
|
|
424
|
-
return title;
|
|
425
|
-
});
|
|
426
|
-
}
|
|
427
|
-
function isDingTalk() {
|
|
428
|
-
const md = getMobileDetect();
|
|
429
|
-
return md.match(/DingTalk/ig);
|
|
430
|
-
}
|
|
431
|
-
|
|
432
456
|
let pageResizeFn;
|
|
433
457
|
function bindPageResize(page) {
|
|
434
458
|
pageResizeFn && window.removeEventListener('resize', pageResizeFn);
|
|
435
459
|
pageResizeFn = function () {
|
|
436
|
-
page.onResize
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
460
|
+
if (page.onResize) {
|
|
461
|
+
const mediaQuery = window.matchMedia('(orientation: portrait)');
|
|
462
|
+
page.onResize({
|
|
463
|
+
deviceOrientation: mediaQuery.matches ? 'portrait' : 'landscape',
|
|
464
|
+
size: {
|
|
465
|
+
windowHeight: window.innerHeight,
|
|
466
|
+
windowWidth: window.innerWidth,
|
|
467
|
+
screenHeight: window.screen.height,
|
|
468
|
+
screenWidth: window.screen.width,
|
|
469
|
+
}
|
|
470
|
+
});
|
|
471
|
+
}
|
|
442
472
|
};
|
|
443
473
|
window.addEventListener('resize', pageResizeFn, false);
|
|
444
474
|
}
|
|
@@ -482,6 +512,9 @@ function getOffset() {
|
|
|
482
512
|
*/
|
|
483
513
|
function loadAnimateStyle(ms = 300) {
|
|
484
514
|
const css = `
|
|
515
|
+
body {
|
|
516
|
+
overflow: hidden; // 防止 iOS 页面滚动
|
|
517
|
+
}
|
|
485
518
|
.taro_router > .taro_page {
|
|
486
519
|
position: absolute;
|
|
487
520
|
left: 0;
|
|
@@ -508,7 +541,7 @@ function loadAnimateStyle(ms = 300) {
|
|
|
508
541
|
/**
|
|
509
542
|
* 插入路由相关样式
|
|
510
543
|
*/
|
|
511
|
-
function loadRouterStyle(
|
|
544
|
+
function loadRouterStyle(enableTabBar, enableWindowScroll) {
|
|
512
545
|
const css = `
|
|
513
546
|
.taro_router {
|
|
514
547
|
position: relative;
|
|
@@ -519,13 +552,13 @@ function loadRouterStyle(usingWindowScroll) {
|
|
|
519
552
|
.taro_page {
|
|
520
553
|
width: 100%;
|
|
521
554
|
height: 100%;
|
|
522
|
-
|
|
555
|
+
${enableWindowScroll ? '' : `
|
|
523
556
|
overflow-x: hidden;
|
|
524
557
|
overflow-y: scroll;
|
|
525
558
|
max-height: 100vh;
|
|
526
|
-
|
|
559
|
+
`}
|
|
527
560
|
}
|
|
528
|
-
|
|
561
|
+
${enableTabBar ? `
|
|
529
562
|
.taro-tabbar__container > .taro-tabbar__panel {
|
|
530
563
|
overflow: hidden;
|
|
531
564
|
}
|
|
@@ -535,6 +568,7 @@ function loadRouterStyle(usingWindowScroll) {
|
|
|
535
568
|
max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
|
|
536
569
|
}
|
|
537
570
|
|
|
571
|
+
` : ''}
|
|
538
572
|
.taro_page_shade,
|
|
539
573
|
.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
|
|
540
574
|
display: none;
|
|
@@ -542,6 +576,60 @@ function loadRouterStyle(usingWindowScroll) {
|
|
|
542
576
|
`;
|
|
543
577
|
addStyle(css);
|
|
544
578
|
}
|
|
579
|
+
/**
|
|
580
|
+
* 插入导航栏相关的样式
|
|
581
|
+
*/
|
|
582
|
+
function loadNavigationBarStyle() {
|
|
583
|
+
const css = `
|
|
584
|
+
.taro-navigation-bar-show {
|
|
585
|
+
background: white;
|
|
586
|
+
position: sticky;
|
|
587
|
+
z-index: 500;
|
|
588
|
+
top: 0;
|
|
589
|
+
padding-bottom: 8px;
|
|
590
|
+
padding-top: calc(env(safe-area-inset-top) + 8px);
|
|
591
|
+
display: flex;
|
|
592
|
+
justify-content: center;
|
|
593
|
+
align-items: center;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.taro-navigation-bar-hide {
|
|
597
|
+
display: none;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
taro-navigation-bar-title {
|
|
601
|
+
font-size: 24px;
|
|
602
|
+
height: 24px;
|
|
603
|
+
line-height: 24px;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.taro-navigation-bar-no-icon > taro-navigation-bar-home {
|
|
607
|
+
display: none;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.taro-navigation-bar-no-icon > taro-navigation-bar-back {
|
|
611
|
+
display: none;
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
.taro-navigation-bar-home > taro-navigation-bar-home {
|
|
615
|
+
display: block;
|
|
616
|
+
left: 8px;
|
|
617
|
+
position: absolute;
|
|
618
|
+
width: 24px;
|
|
619
|
+
height: 24px;
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
.taro-navigation-bar-back > taro-navigation-bar-back {
|
|
623
|
+
display: block;
|
|
624
|
+
left: 8px;
|
|
625
|
+
position: absolute;
|
|
626
|
+
width: 24px;
|
|
627
|
+
height: 24px;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
`;
|
|
631
|
+
addStyle(css);
|
|
632
|
+
}
|
|
545
633
|
function addStyle(css) {
|
|
546
634
|
if (!css)
|
|
547
635
|
return;
|
|
@@ -550,38 +638,10 @@ function addStyle(css) {
|
|
|
550
638
|
document.getElementsByTagName('head')[0].appendChild(style);
|
|
551
639
|
}
|
|
552
640
|
|
|
553
|
-
// @ts-nocheck
|
|
554
|
-
function initTabbar(config) {
|
|
555
|
-
if (config.tabBar == null || config.tabBar.custom) {
|
|
556
|
-
return;
|
|
557
|
-
}
|
|
558
|
-
// TODO: custom-tab-bar
|
|
559
|
-
components.defineCustomElementTaroTabbar();
|
|
560
|
-
const tabbar = document.createElement('taro-tabbar');
|
|
561
|
-
const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
|
|
562
|
-
tabbar.conf = config.tabBar;
|
|
563
|
-
tabbar.conf.homePage = exports.history.location.pathname === '/' ? homePage : exports.history.location.pathname;
|
|
564
|
-
const routerConfig = config.router;
|
|
565
|
-
tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
|
|
566
|
-
if (routerConfig.customRoutes) {
|
|
567
|
-
tabbar.conf.custom = true;
|
|
568
|
-
tabbar.conf.customRoutes = routerConfig.customRoutes;
|
|
569
|
-
}
|
|
570
|
-
else {
|
|
571
|
-
tabbar.conf.custom = false;
|
|
572
|
-
tabbar.conf.customRoutes = {};
|
|
573
|
-
}
|
|
574
|
-
if (typeof routerConfig.basename !== 'undefined') {
|
|
575
|
-
tabbar.conf.basename = routerConfig.basename;
|
|
576
|
-
}
|
|
577
|
-
const container = document.getElementById('container');
|
|
578
|
-
container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
|
|
579
|
-
taro.initTabBarApis(config);
|
|
580
|
-
}
|
|
581
|
-
|
|
582
641
|
/* eslint-disable dot-notation */
|
|
583
642
|
class MultiPageHandler {
|
|
584
|
-
constructor(config) {
|
|
643
|
+
constructor(config, history) {
|
|
644
|
+
this.history = history;
|
|
585
645
|
this.config = config;
|
|
586
646
|
this.mount();
|
|
587
647
|
}
|
|
@@ -597,7 +657,7 @@ class MultiPageHandler {
|
|
|
597
657
|
get pageConfig() { return this.config.route; }
|
|
598
658
|
get isTabBar() {
|
|
599
659
|
var _a;
|
|
600
|
-
const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
|
|
660
|
+
const routePath = runtime.addLeadingSlash(runtime.stripBasename(this.pathname, this.basename));
|
|
601
661
|
const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
|
|
602
662
|
if (typeof target === 'string') {
|
|
603
663
|
return target === routePath;
|
|
@@ -624,43 +684,22 @@ class MultiPageHandler {
|
|
|
624
684
|
getQuery(search = '', options = {}) {
|
|
625
685
|
search = search ? `${search}&${this.search}` : this.search;
|
|
626
686
|
const query = search
|
|
627
|
-
?
|
|
687
|
+
? queryString.parse(search)
|
|
628
688
|
: {};
|
|
629
689
|
return Object.assign(Object.assign({}, query), options);
|
|
630
690
|
}
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
let isPosition = true;
|
|
637
|
-
if (!app) {
|
|
638
|
-
app = document.createElement('div');
|
|
639
|
-
app.id = appId;
|
|
640
|
-
isPosition = false;
|
|
641
|
-
}
|
|
642
|
-
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
643
|
-
app.classList.add('taro_router');
|
|
644
|
-
if (this.tabBarList.length > 1) {
|
|
645
|
-
const container = document.createElement('div');
|
|
646
|
-
container.classList.add('taro-tabbar__container');
|
|
647
|
-
container.id = 'container';
|
|
648
|
-
const panel = document.createElement('div');
|
|
649
|
-
panel.classList.add('taro-tabbar__panel');
|
|
650
|
-
panel.appendChild(app.cloneNode(true));
|
|
651
|
-
container.appendChild(panel);
|
|
652
|
-
if (!isPosition) {
|
|
653
|
-
appWrapper.appendChild(container);
|
|
654
|
-
}
|
|
655
|
-
else {
|
|
656
|
-
appWrapper.replaceChild(container, app);
|
|
657
|
-
}
|
|
658
|
-
initTabbar(this.config);
|
|
659
|
-
}
|
|
660
|
-
else {
|
|
661
|
-
if (!isPosition)
|
|
662
|
-
appWrapper.appendChild(app);
|
|
691
|
+
isDefaultNavigationStyle() {
|
|
692
|
+
var _a, _b;
|
|
693
|
+
let style = (_a = this.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
|
|
694
|
+
if (typeof ((_b = this.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
|
|
695
|
+
style = this.pageConfig.navigationStyle;
|
|
663
696
|
}
|
|
697
|
+
return style !== 'custom';
|
|
698
|
+
}
|
|
699
|
+
mount() {
|
|
700
|
+
setHistory(this.history, this.basename);
|
|
701
|
+
// Note: 注入页面样式
|
|
702
|
+
loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
|
|
664
703
|
}
|
|
665
704
|
onReady(page, onLoad = true) {
|
|
666
705
|
var _a;
|
|
@@ -690,10 +729,13 @@ class MultiPageHandler {
|
|
|
690
729
|
return;
|
|
691
730
|
(_a = page.onLoad) === null || _a === void 0 ? void 0 : _a.call(page, this.getQuery('', page.options), () => {
|
|
692
731
|
var _a;
|
|
732
|
+
const pageEl = this.getPageContainer(page);
|
|
693
733
|
if (this.isTabBar) {
|
|
694
|
-
const pageEl = this.getPageContainer(page);
|
|
695
734
|
pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page');
|
|
696
735
|
}
|
|
736
|
+
if (this.isDefaultNavigationStyle()) {
|
|
737
|
+
pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page');
|
|
738
|
+
}
|
|
697
739
|
this.onReady(page, true);
|
|
698
740
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
699
741
|
this.bindPageEvents(page, pageConfig);
|
|
@@ -750,14 +792,15 @@ const launchStampId$1 = createStampId$1();
|
|
|
750
792
|
* - TabBar 会多次加载
|
|
751
793
|
* - 不支持路由动画
|
|
752
794
|
*/
|
|
753
|
-
function createMultiRouter(app, config, framework) {
|
|
795
|
+
function createMultiRouter(history, app, config, framework) {
|
|
754
796
|
var _a, _b, _c, _d, _e, _f;
|
|
755
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
797
|
+
return tslib.__awaiter(this, void 0, void 0, function* () {
|
|
756
798
|
if (typeof app.onUnhandledRejection === 'function') {
|
|
757
799
|
window.addEventListener('unhandledrejection', app.onUnhandledRejection);
|
|
758
800
|
}
|
|
801
|
+
runtime.eventCenter.on('__taroH5SetNavigationTitle', setMpaTitle);
|
|
759
802
|
RouterConfig.config = config;
|
|
760
|
-
const handler = new MultiPageHandler(config);
|
|
803
|
+
const handler = new MultiPageHandler(config, history);
|
|
761
804
|
const launchParam = {
|
|
762
805
|
path: config.pageName,
|
|
763
806
|
query: handler.getQuery(launchStampId$1),
|
|
@@ -789,7 +832,7 @@ function createMultiRouter(app, config, framework) {
|
|
|
789
832
|
return;
|
|
790
833
|
let enablePullDownRefresh = ((_c = config === null || config === void 0 ? void 0 : config.window) === null || _c === void 0 ? void 0 : _c.enablePullDownRefresh) || false;
|
|
791
834
|
if (pageConfig) {
|
|
792
|
-
|
|
835
|
+
setMpaTitle((_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title);
|
|
793
836
|
if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
|
|
794
837
|
enablePullDownRefresh = pageConfig.enablePullDownRefresh;
|
|
795
838
|
}
|
|
@@ -801,19 +844,231 @@ function createMultiRouter(app, config, framework) {
|
|
|
801
844
|
const page = runtime.createPageConfig(enablePullDownRefresh ? runtime.hooks.call('createPullDownComponent', el, pathName, framework, handler.PullDownRefresh) : el, pathName + runtime.stringify(launchParam), {}, loadConfig);
|
|
802
845
|
handler.load(page, pageConfig);
|
|
803
846
|
(_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
|
|
847
|
+
window.addEventListener('visibilitychange', () => {
|
|
848
|
+
var _a, _b;
|
|
849
|
+
if (document.visibilityState === 'visible') {
|
|
850
|
+
(_a = app.onShow) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
|
|
851
|
+
}
|
|
852
|
+
else {
|
|
853
|
+
(_b = app.onHide) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
|
|
854
|
+
}
|
|
855
|
+
});
|
|
804
856
|
});
|
|
805
857
|
}
|
|
806
858
|
|
|
859
|
+
class NavigationBarHandler {
|
|
860
|
+
constructor(pageContext) {
|
|
861
|
+
this.isLoadDdEntry = false;
|
|
862
|
+
this.cache = {};
|
|
863
|
+
this.pageContext = pageContext;
|
|
864
|
+
this.init();
|
|
865
|
+
loadNavigationBarStyle();
|
|
866
|
+
runtime.eventCenter.on('__taroH5SetNavigationTitle', (title) => {
|
|
867
|
+
this.setTitle(title);
|
|
868
|
+
});
|
|
869
|
+
runtime.eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
|
|
870
|
+
if (typeof backgroundColor === 'string')
|
|
871
|
+
this.setNavigationBarBackground(backgroundColor);
|
|
872
|
+
if (typeof frontColor === 'string')
|
|
873
|
+
this.setNavigationBarTextStyle(frontColor);
|
|
874
|
+
});
|
|
875
|
+
}
|
|
876
|
+
toHomeFn() {
|
|
877
|
+
reLaunch({ url: this.pageContext.homePage });
|
|
878
|
+
}
|
|
879
|
+
backFn() {
|
|
880
|
+
navigateBack();
|
|
881
|
+
}
|
|
882
|
+
get homeBtnElement() {
|
|
883
|
+
var _a;
|
|
884
|
+
if (!this.navigationBarElement)
|
|
885
|
+
return null;
|
|
886
|
+
return (_a = this.navigationBarElement.getElementsByTagName('taro-navigation-bar-home')) === null || _a === void 0 ? void 0 : _a[0];
|
|
887
|
+
}
|
|
888
|
+
get backBtnElement() {
|
|
889
|
+
var _a;
|
|
890
|
+
if (!this.navigationBarElement)
|
|
891
|
+
return null;
|
|
892
|
+
return (_a = this.navigationBarElement.getElementsByTagName('taro-navigation-bar-back')) === null || _a === void 0 ? void 0 : _a[0];
|
|
893
|
+
}
|
|
894
|
+
get titleElement() {
|
|
895
|
+
var _a;
|
|
896
|
+
if (!this.navigationBarElement)
|
|
897
|
+
return null;
|
|
898
|
+
return (_a = this.navigationBarElement.getElementsByTagName('taro-navigation-bar-title')) === null || _a === void 0 ? void 0 : _a[0];
|
|
899
|
+
}
|
|
900
|
+
init() {
|
|
901
|
+
var _a, _b;
|
|
902
|
+
this.setNavigationBarElement();
|
|
903
|
+
if (!this.navigationBarElement)
|
|
904
|
+
return;
|
|
905
|
+
(_a = this.homeBtnElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.toHomeFn.bind(this));
|
|
906
|
+
(_b = this.backBtnElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.backFn.bind(this));
|
|
907
|
+
}
|
|
908
|
+
setNavigationBarElement() {
|
|
909
|
+
var _a;
|
|
910
|
+
this.navigationBarElement = (_a = document.getElementsByTagName('taro-navigation-bar-wrap')) === null || _a === void 0 ? void 0 : _a[0];
|
|
911
|
+
}
|
|
912
|
+
load() {
|
|
913
|
+
this.setCacheValue();
|
|
914
|
+
this.setTitle();
|
|
915
|
+
this.setNavigationBarVisible();
|
|
916
|
+
this.setFnBtnState();
|
|
917
|
+
this.setNavigationBarBackground();
|
|
918
|
+
this.setNavigationBarTextStyle();
|
|
919
|
+
}
|
|
920
|
+
setCacheValue() {
|
|
921
|
+
const currentPage = this.pageContext.currentPage;
|
|
922
|
+
if (typeof this.cache[currentPage] !== 'object') {
|
|
923
|
+
this.cache[currentPage] = {};
|
|
924
|
+
}
|
|
925
|
+
}
|
|
926
|
+
setFnBtnState() {
|
|
927
|
+
const currentRouter = this.pageContext.currentPage;
|
|
928
|
+
if (this.pageContext.isTabBar(currentRouter) || this.pageContext.homePage === currentRouter) {
|
|
929
|
+
this.fnBtnToggleToNone();
|
|
930
|
+
}
|
|
931
|
+
else if (stacks.length > 1) {
|
|
932
|
+
this.fnBtnToggleToBack();
|
|
933
|
+
}
|
|
934
|
+
else {
|
|
935
|
+
this.fnBtnToggleToHome();
|
|
936
|
+
}
|
|
937
|
+
}
|
|
938
|
+
setNavigationBarBackground(backgroundColor) {
|
|
939
|
+
var _a, _b, _c;
|
|
940
|
+
if (!this.navigationBarElement)
|
|
941
|
+
return;
|
|
942
|
+
const currentPage = this.pageContext.currentPage;
|
|
943
|
+
let color;
|
|
944
|
+
if (typeof backgroundColor === 'string') {
|
|
945
|
+
color = backgroundColor;
|
|
946
|
+
this.cache[currentPage] &&
|
|
947
|
+
(this.cache[currentPage].backgroundColor = color);
|
|
948
|
+
}
|
|
949
|
+
else {
|
|
950
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.backgroundColor;
|
|
951
|
+
if (typeof cacheValue === 'string') {
|
|
952
|
+
color = cacheValue;
|
|
953
|
+
}
|
|
954
|
+
else {
|
|
955
|
+
color = ((_c = (_b = this.pageContext.config) === null || _b === void 0 ? void 0 : _b.window) === null || _c === void 0 ? void 0 : _c.navigationBarBackgroundColor) || '#000000';
|
|
956
|
+
this.cache[currentPage] &&
|
|
957
|
+
(this.cache[currentPage].backgroundColor = color);
|
|
958
|
+
}
|
|
959
|
+
}
|
|
960
|
+
this.navigationBarElement.style.background = color;
|
|
961
|
+
}
|
|
962
|
+
setNavigationBarTextStyle(fontColor) {
|
|
963
|
+
var _a, _b, _c;
|
|
964
|
+
if (!this.navigationBarElement)
|
|
965
|
+
return;
|
|
966
|
+
const currentPage = this.pageContext.currentPage;
|
|
967
|
+
let color;
|
|
968
|
+
if (typeof fontColor === 'string') {
|
|
969
|
+
color = fontColor;
|
|
970
|
+
this.cache[currentPage] &&
|
|
971
|
+
(this.cache[currentPage].fontColor = color);
|
|
972
|
+
}
|
|
973
|
+
else {
|
|
974
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.fontColor;
|
|
975
|
+
if (typeof cacheValue === 'string') {
|
|
976
|
+
color = cacheValue;
|
|
977
|
+
}
|
|
978
|
+
else {
|
|
979
|
+
color = ((_c = (_b = this.pageContext.config) === null || _b === void 0 ? void 0 : _b.window) === null || _c === void 0 ? void 0 : _c.navigationBarTextStyle) || 'white';
|
|
980
|
+
this.cache[currentPage] &&
|
|
981
|
+
(this.cache[currentPage].fontColor = color);
|
|
982
|
+
}
|
|
983
|
+
}
|
|
984
|
+
this.navigationBarElement.style.color = color;
|
|
985
|
+
}
|
|
986
|
+
setTitle(title) {
|
|
987
|
+
var _a, _b, _c;
|
|
988
|
+
const currentPage = this.pageContext.currentPage;
|
|
989
|
+
let proceedTitle;
|
|
990
|
+
if (typeof title === 'string') {
|
|
991
|
+
proceedTitle = title;
|
|
992
|
+
this.cache[currentPage] &&
|
|
993
|
+
(this.cache[currentPage].title = proceedTitle);
|
|
994
|
+
}
|
|
995
|
+
else {
|
|
996
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.title;
|
|
997
|
+
if (typeof cacheValue === 'string') {
|
|
998
|
+
proceedTitle = cacheValue;
|
|
999
|
+
}
|
|
1000
|
+
else {
|
|
1001
|
+
proceedTitle = (_c = (_b = this.pageContext.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationBarTitleText) !== null && _c !== void 0 ? _c : document.title;
|
|
1002
|
+
this.cache[currentPage] &&
|
|
1003
|
+
(this.cache[currentPage].title = proceedTitle);
|
|
1004
|
+
}
|
|
1005
|
+
}
|
|
1006
|
+
if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
|
|
1007
|
+
if (!this.isLoadDdEntry) {
|
|
1008
|
+
this.isLoadDdEntry = true;
|
|
1009
|
+
require('dingtalk-jsapi/platform');
|
|
1010
|
+
}
|
|
1011
|
+
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
1012
|
+
setDingTitle({ proceedTitle });
|
|
1013
|
+
}
|
|
1014
|
+
document.title = proceedTitle;
|
|
1015
|
+
if (!this.titleElement)
|
|
1016
|
+
return;
|
|
1017
|
+
this.titleElement.innerHTML = proceedTitle;
|
|
1018
|
+
}
|
|
1019
|
+
fnBtnToggleToHome() {
|
|
1020
|
+
if (!this.navigationBarElement)
|
|
1021
|
+
return;
|
|
1022
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-home');
|
|
1023
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back');
|
|
1024
|
+
}
|
|
1025
|
+
fnBtnToggleToBack() {
|
|
1026
|
+
if (!this.navigationBarElement)
|
|
1027
|
+
return;
|
|
1028
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home');
|
|
1029
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-back');
|
|
1030
|
+
}
|
|
1031
|
+
fnBtnToggleToNone() {
|
|
1032
|
+
if (!this.navigationBarElement)
|
|
1033
|
+
return;
|
|
1034
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home');
|
|
1035
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back');
|
|
1036
|
+
}
|
|
1037
|
+
setNavigationBarVisible(show) {
|
|
1038
|
+
var _a, _b;
|
|
1039
|
+
let shouldShow;
|
|
1040
|
+
if (typeof show === 'boolean') {
|
|
1041
|
+
shouldShow = show;
|
|
1042
|
+
}
|
|
1043
|
+
else {
|
|
1044
|
+
shouldShow = (_a = this.pageContext.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
|
|
1045
|
+
if (typeof ((_b = this.pageContext.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
|
|
1046
|
+
shouldShow = this.pageContext.pageConfig.navigationStyle;
|
|
1047
|
+
}
|
|
1048
|
+
}
|
|
1049
|
+
if (shouldShow === 'default') {
|
|
1050
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-show');
|
|
1051
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-hide');
|
|
1052
|
+
}
|
|
1053
|
+
else {
|
|
1054
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-hide');
|
|
1055
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-show');
|
|
1056
|
+
}
|
|
1057
|
+
}
|
|
1058
|
+
}
|
|
1059
|
+
|
|
807
1060
|
/* eslint-disable dot-notation */
|
|
808
1061
|
class PageHandler {
|
|
809
|
-
constructor(config) {
|
|
1062
|
+
constructor(config, history) {
|
|
1063
|
+
this.history = history;
|
|
810
1064
|
this.defaultAnimation = { duration: 300, delay: 50 };
|
|
811
1065
|
this.config = config;
|
|
812
|
-
this.homePage = getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
|
|
1066
|
+
this.homePage = runtime.getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
|
|
813
1067
|
this.mount();
|
|
1068
|
+
this.navigationBarHandler = new NavigationBarHandler(this);
|
|
814
1069
|
}
|
|
815
1070
|
get currentPage() {
|
|
816
|
-
const routePath = getCurrentPage(this.routerMode, this.basename);
|
|
1071
|
+
const routePath = runtime.getCurrentPage(this.routerMode, this.basename);
|
|
817
1072
|
return routePath === '/' ? this.homePage : routePath;
|
|
818
1073
|
}
|
|
819
1074
|
get appId() { return this.config.appId || 'app'; }
|
|
@@ -844,17 +1099,17 @@ class PageHandler {
|
|
|
844
1099
|
get pathname() { return this.router.pathname; }
|
|
845
1100
|
get basename() { return this.router.basename || ''; }
|
|
846
1101
|
get pageConfig() {
|
|
847
|
-
const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
|
|
848
|
-
const homePage = addLeadingSlash(this.homePage);
|
|
1102
|
+
const routePath = runtime.addLeadingSlash(runtime.stripBasename(this.pathname, this.basename));
|
|
1103
|
+
const homePage = runtime.addLeadingSlash(this.homePage);
|
|
849
1104
|
return this.routes.find(r => {
|
|
850
1105
|
var _a;
|
|
851
|
-
const pagePath = addLeadingSlash(r.path);
|
|
1106
|
+
const pagePath = runtime.addLeadingSlash(r.path);
|
|
852
1107
|
return [pagePath, homePage].includes(routePath) || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
|
|
853
1108
|
});
|
|
854
1109
|
}
|
|
855
1110
|
isTabBar(pathname) {
|
|
856
1111
|
var _a;
|
|
857
|
-
const routePath = addLeadingSlash(stripBasename(pathname, this.basename)).split('?')[0];
|
|
1112
|
+
const routePath = runtime.addLeadingSlash(runtime.stripBasename(pathname, this.basename)).split('?')[0];
|
|
858
1113
|
const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
|
|
859
1114
|
if (typeof target === 'string') {
|
|
860
1115
|
return target === routePath;
|
|
@@ -864,11 +1119,19 @@ class PageHandler {
|
|
|
864
1119
|
}
|
|
865
1120
|
return false;
|
|
866
1121
|
})) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
|
|
867
|
-
return !!pagePath && this.tabBarList.some(t => stripTrailing(t.pagePath) === pagePath);
|
|
1122
|
+
return !!pagePath && this.tabBarList.some(t => runtime.stripTrailing(t.pagePath) === pagePath);
|
|
1123
|
+
}
|
|
1124
|
+
isDefaultNavigationStyle() {
|
|
1125
|
+
var _a, _b;
|
|
1126
|
+
let style = (_a = this.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
|
|
1127
|
+
if (typeof ((_b = this.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
|
|
1128
|
+
style = this.pageConfig.navigationStyle;
|
|
1129
|
+
}
|
|
1130
|
+
return style !== 'custom';
|
|
868
1131
|
}
|
|
869
1132
|
isSamePage(page) {
|
|
870
|
-
const routePath = stripBasename(this.pathname, this.basename);
|
|
871
|
-
const pagePath = stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
|
|
1133
|
+
const routePath = runtime.stripBasename(this.pathname, this.basename);
|
|
1134
|
+
const pagePath = runtime.stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
|
|
872
1135
|
return pagePath.startsWith(routePath + '?');
|
|
873
1136
|
}
|
|
874
1137
|
get search() {
|
|
@@ -898,46 +1161,17 @@ class PageHandler {
|
|
|
898
1161
|
getQuery(stamp = '', search = '', options = {}) {
|
|
899
1162
|
search = search ? `${search}&${this.search}` : this.search;
|
|
900
1163
|
const query = search
|
|
901
|
-
?
|
|
1164
|
+
? queryString.parse(search, { decode: false })
|
|
902
1165
|
: {};
|
|
903
1166
|
query.stamp = stamp;
|
|
904
1167
|
return Object.assign(Object.assign({}, query), options);
|
|
905
1168
|
}
|
|
906
1169
|
mount() {
|
|
907
|
-
|
|
1170
|
+
setHistory(this.history, this.basename);
|
|
908
1171
|
this.pathname = exports.history.location.pathname;
|
|
1172
|
+
// Note: 注入页面样式
|
|
909
1173
|
this.animation && loadAnimateStyle(this.animationDuration);
|
|
910
|
-
loadRouterStyle(this.usingWindowScroll);
|
|
911
|
-
const appId = this.appId;
|
|
912
|
-
let app = document.getElementById(appId);
|
|
913
|
-
let isPosition = true;
|
|
914
|
-
if (!app) {
|
|
915
|
-
app = document.createElement('div');
|
|
916
|
-
app.id = appId;
|
|
917
|
-
isPosition = false;
|
|
918
|
-
}
|
|
919
|
-
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
920
|
-
app.classList.add('taro_router');
|
|
921
|
-
if (this.tabBarList.length > 1) {
|
|
922
|
-
const container = document.createElement('div');
|
|
923
|
-
container.classList.add('taro-tabbar__container');
|
|
924
|
-
container.id = 'container';
|
|
925
|
-
const panel = document.createElement('div');
|
|
926
|
-
panel.classList.add('taro-tabbar__panel');
|
|
927
|
-
panel.appendChild(app.cloneNode(true));
|
|
928
|
-
container.appendChild(panel);
|
|
929
|
-
if (!isPosition) {
|
|
930
|
-
appWrapper.appendChild(container);
|
|
931
|
-
}
|
|
932
|
-
else {
|
|
933
|
-
appWrapper.replaceChild(container, app);
|
|
934
|
-
}
|
|
935
|
-
initTabbar(this.config);
|
|
936
|
-
}
|
|
937
|
-
else {
|
|
938
|
-
if (!isPosition)
|
|
939
|
-
appWrapper.appendChild(app);
|
|
940
|
-
}
|
|
1174
|
+
loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
|
|
941
1175
|
}
|
|
942
1176
|
onReady(page, onLoad = true) {
|
|
943
1177
|
var _a;
|
|
@@ -972,19 +1206,24 @@ class PageHandler {
|
|
|
972
1206
|
if (pageEl) {
|
|
973
1207
|
pageEl.classList.remove('taro_page_shade');
|
|
974
1208
|
this.isTabBar(this.pathname) && pageEl.classList.add('taro_tabbar_page');
|
|
1209
|
+
this.isDefaultNavigationStyle() && pageEl.classList.add('taro_navigation_page');
|
|
975
1210
|
this.addAnimation(pageEl, pageNo === 0);
|
|
976
1211
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1212
|
+
this.navigationBarHandler.load();
|
|
977
1213
|
this.bindPageEvents(page, pageConfig);
|
|
978
1214
|
this.triggerRouterChange();
|
|
979
1215
|
}
|
|
980
1216
|
else {
|
|
1217
|
+
// FIXME 在 iOS 端快速切换页面时,可能不会执行回调注入对应类名导致 TabBar 白屏
|
|
981
1218
|
(_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
|
|
982
1219
|
var _a;
|
|
983
1220
|
pageEl = this.getPageContainer(page);
|
|
984
1221
|
this.isTabBar(this.pathname) && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
|
|
1222
|
+
this.isDefaultNavigationStyle() && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page'));
|
|
985
1223
|
this.addAnimation(pageEl, pageNo === 0);
|
|
986
|
-
this.onReady(page, true);
|
|
987
1224
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1225
|
+
this.navigationBarHandler.load();
|
|
1226
|
+
this.onReady(page, true);
|
|
988
1227
|
this.bindPageEvents(page, pageConfig);
|
|
989
1228
|
this.triggerRouterChange();
|
|
990
1229
|
});
|
|
@@ -1038,6 +1277,7 @@ class PageHandler {
|
|
|
1038
1277
|
pageEl.classList.remove('taro_page_shade');
|
|
1039
1278
|
this.addAnimation(pageEl, pageNo === 0);
|
|
1040
1279
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1280
|
+
this.navigationBarHandler.load();
|
|
1041
1281
|
this.bindPageEvents(page, pageConfig);
|
|
1042
1282
|
this.triggerRouterChange();
|
|
1043
1283
|
}
|
|
@@ -1046,8 +1286,9 @@ class PageHandler {
|
|
|
1046
1286
|
var _a;
|
|
1047
1287
|
pageEl = this.getPageContainer(page);
|
|
1048
1288
|
this.addAnimation(pageEl, pageNo === 0);
|
|
1049
|
-
this.onReady(page, false);
|
|
1050
1289
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1290
|
+
this.navigationBarHandler.load();
|
|
1291
|
+
this.onReady(page, false);
|
|
1051
1292
|
this.bindPageEvents(page, pageConfig);
|
|
1052
1293
|
this.triggerRouterChange();
|
|
1053
1294
|
});
|
|
@@ -1134,24 +1375,24 @@ class PageHandler {
|
|
|
1134
1375
|
|
|
1135
1376
|
const createStampId = runtime.incrementId();
|
|
1136
1377
|
let launchStampId = createStampId();
|
|
1137
|
-
function createRouter(app, config, framework) {
|
|
1378
|
+
function createRouter(history$1, app, config, framework) {
|
|
1138
1379
|
var _a, _b;
|
|
1139
1380
|
if (typeof app.onUnhandledRejection === 'function') {
|
|
1140
1381
|
window.addEventListener('unhandledrejection', app.onUnhandledRejection);
|
|
1141
1382
|
}
|
|
1142
1383
|
RouterConfig.config = config;
|
|
1143
|
-
const handler = new PageHandler(config);
|
|
1384
|
+
const handler = new PageHandler(config, history$1);
|
|
1144
1385
|
routesAlias.set(handler.router.customRoutes);
|
|
1145
1386
|
const basename = handler.router.basename;
|
|
1146
1387
|
const routes = handler.routes.map(route => {
|
|
1147
|
-
const routePath = addLeadingSlash(route.path);
|
|
1388
|
+
const routePath = runtime.addLeadingSlash(route.path);
|
|
1148
1389
|
const paths = routesAlias.getAll(routePath);
|
|
1149
1390
|
return {
|
|
1150
1391
|
path: paths.length < 1 ? routePath : paths,
|
|
1151
1392
|
action: route.load
|
|
1152
1393
|
};
|
|
1153
1394
|
});
|
|
1154
|
-
const router = new
|
|
1395
|
+
const router = new UniversalRouter(routes, { baseUrl: basename || '' });
|
|
1155
1396
|
const launchParam = {
|
|
1156
1397
|
path: handler.currentPage,
|
|
1157
1398
|
query: handler.getQuery(launchStampId),
|
|
@@ -1162,8 +1403,8 @@ function createRouter(app, config, framework) {
|
|
|
1162
1403
|
runtime.eventCenter.trigger('__taroRouterLaunch', launchParam);
|
|
1163
1404
|
(_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
|
|
1164
1405
|
app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
|
|
1165
|
-
const render = ({ location, action }) => __awaiter(this, void 0, void 0, function* () {
|
|
1166
|
-
var _c, _d, _e, _f, _g, _h;
|
|
1406
|
+
const render = ({ location, action }) => tslib.__awaiter(this, void 0, void 0, function* () {
|
|
1407
|
+
var _c, _d, _e, _f, _g, _h, _j, _k;
|
|
1167
1408
|
handler.pathname = decodeURI(location.pathname);
|
|
1168
1409
|
if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
|
|
1169
1410
|
window.scrollTo(0, 0);
|
|
@@ -1192,22 +1433,34 @@ function createRouter(app, config, framework) {
|
|
|
1192
1433
|
window.location.reload();
|
|
1193
1434
|
}
|
|
1194
1435
|
else {
|
|
1195
|
-
throw
|
|
1436
|
+
throw error;
|
|
1196
1437
|
}
|
|
1197
1438
|
}
|
|
1198
1439
|
if (!element)
|
|
1199
1440
|
return;
|
|
1200
1441
|
const pageConfig = handler.pageConfig;
|
|
1201
1442
|
let enablePullDownRefresh = ((_e = config === null || config === void 0 ? void 0 : config.window) === null || _e === void 0 ? void 0 : _e.enablePullDownRefresh) || false;
|
|
1443
|
+
let navigationStyle = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.navigationStyle) || 'default';
|
|
1444
|
+
let navigationBarTextStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationBarTextStyle) || 'white';
|
|
1445
|
+
let navigationBarBackgroundColor = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarBackgroundColor) || '#000000';
|
|
1202
1446
|
if (pageConfig) {
|
|
1203
|
-
setTitle((_f = pageConfig.navigationBarTitleText) !== null && _f !== void 0 ? _f : document.title);
|
|
1204
1447
|
if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
|
|
1205
1448
|
enablePullDownRefresh = pageConfig.enablePullDownRefresh;
|
|
1206
1449
|
}
|
|
1450
|
+
if (typeof pageConfig.navigationStyle === 'string') {
|
|
1451
|
+
navigationStyle = pageConfig.navigationStyle;
|
|
1452
|
+
}
|
|
1453
|
+
if (typeof pageConfig.navigationBarTextStyle === 'string') {
|
|
1454
|
+
navigationBarTextStyle = pageConfig.navigationBarTextStyle;
|
|
1455
|
+
}
|
|
1456
|
+
if (typeof pageConfig.navigationBarBackgroundColor === 'string') {
|
|
1457
|
+
navigationBarBackgroundColor = pageConfig.navigationBarBackgroundColor;
|
|
1458
|
+
}
|
|
1207
1459
|
}
|
|
1460
|
+
runtime.eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
|
|
1208
1461
|
const currentPage = runtime.Current.page;
|
|
1209
1462
|
const pathname = handler.pathname;
|
|
1210
|
-
const methodName = (
|
|
1463
|
+
const methodName = (_j = stacks.method) !== null && _j !== void 0 ? _j : '';
|
|
1211
1464
|
const cacheTabs = stacks.getTabs();
|
|
1212
1465
|
let shouldLoad = false;
|
|
1213
1466
|
stacks.method = '';
|
|
@@ -1273,7 +1526,7 @@ function createRouter(app, config, framework) {
|
|
|
1273
1526
|
shouldLoad = true;
|
|
1274
1527
|
}
|
|
1275
1528
|
if (shouldLoad || stacks.length < 1) {
|
|
1276
|
-
const el = (
|
|
1529
|
+
const el = (_k = element.default) !== null && _k !== void 0 ? _k : element;
|
|
1277
1530
|
const loadConfig = Object.assign({}, pageConfig);
|
|
1278
1531
|
const stacksIndex = stacks.length;
|
|
1279
1532
|
delete loadConfig['path'];
|
|
@@ -1292,21 +1545,90 @@ function createRouter(app, config, framework) {
|
|
|
1292
1545
|
handler.load(page, pageConfig, pageStampId, stacksIndex);
|
|
1293
1546
|
}
|
|
1294
1547
|
});
|
|
1295
|
-
const routePath = addLeadingSlash(stripBasename(
|
|
1548
|
+
const routePath = runtime.addLeadingSlash(runtime.stripBasename(history$1.location.pathname, handler.basename));
|
|
1296
1549
|
if (routePath === '/') {
|
|
1297
|
-
|
|
1550
|
+
history$1.replace(prependBasename(handler.homePage + history$1.location.search));
|
|
1298
1551
|
}
|
|
1299
|
-
render({ location:
|
|
1552
|
+
render({ location: history$1.location, action: history.Action.Push });
|
|
1300
1553
|
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
|
|
1301
|
-
|
|
1554
|
+
window.addEventListener('visibilitychange', () => {
|
|
1555
|
+
var _a, _b;
|
|
1556
|
+
if (document.visibilityState === 'visible') {
|
|
1557
|
+
(_a = app.onShow) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
|
|
1558
|
+
}
|
|
1559
|
+
else {
|
|
1560
|
+
(_b = app.onHide) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
|
|
1561
|
+
}
|
|
1562
|
+
});
|
|
1563
|
+
return history$1.listen(render);
|
|
1564
|
+
}
|
|
1565
|
+
|
|
1566
|
+
function handleAppMount(config, _, appId = config.appId || 'app') {
|
|
1567
|
+
let app = document.getElementById(appId);
|
|
1568
|
+
let isPosition = true;
|
|
1569
|
+
if (!app) {
|
|
1570
|
+
app = document.createElement('div');
|
|
1571
|
+
app.id = appId;
|
|
1572
|
+
isPosition = false;
|
|
1573
|
+
}
|
|
1574
|
+
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
1575
|
+
app.classList.add('taro_router');
|
|
1576
|
+
if (!isPosition)
|
|
1577
|
+
appWrapper.appendChild(app);
|
|
1578
|
+
initNavigationBar(appWrapper);
|
|
1579
|
+
}
|
|
1580
|
+
function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
|
|
1581
|
+
let app = document.getElementById(appId);
|
|
1582
|
+
let isPosition = true;
|
|
1583
|
+
if (!app) {
|
|
1584
|
+
app = document.createElement('div');
|
|
1585
|
+
app.id = appId;
|
|
1586
|
+
isPosition = false;
|
|
1587
|
+
}
|
|
1588
|
+
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
1589
|
+
app.classList.add('taro_router');
|
|
1590
|
+
const container = document.createElement('div');
|
|
1591
|
+
container.classList.add('taro-tabbar__container');
|
|
1592
|
+
container.id = 'container';
|
|
1593
|
+
const panel = document.createElement('div');
|
|
1594
|
+
panel.classList.add('taro-tabbar__panel');
|
|
1595
|
+
panel.appendChild(app.cloneNode(true));
|
|
1596
|
+
container.appendChild(panel);
|
|
1597
|
+
if (!isPosition) {
|
|
1598
|
+
appWrapper.appendChild(container);
|
|
1599
|
+
}
|
|
1600
|
+
else {
|
|
1601
|
+
appWrapper.replaceChild(container, app);
|
|
1602
|
+
}
|
|
1603
|
+
initTabbar(config, history);
|
|
1604
|
+
initNavigationBar(container);
|
|
1302
1605
|
}
|
|
1303
1606
|
|
|
1607
|
+
Object.defineProperty(exports, 'createBrowserHistory', {
|
|
1608
|
+
enumerable: true,
|
|
1609
|
+
get: function () { return history.createBrowserHistory; }
|
|
1610
|
+
});
|
|
1611
|
+
Object.defineProperty(exports, 'createHashHistory', {
|
|
1612
|
+
enumerable: true,
|
|
1613
|
+
get: function () { return history.createHashHistory; }
|
|
1614
|
+
});
|
|
1615
|
+
exports.createMpaHistory = createMpaHistory;
|
|
1304
1616
|
exports.createMultiRouter = createMultiRouter;
|
|
1305
1617
|
exports.createRouter = createRouter;
|
|
1306
1618
|
exports.getCurrentPages = getCurrentPages;
|
|
1619
|
+
exports.handleAppMount = handleAppMount;
|
|
1620
|
+
exports.handleAppMountWithTabbar = handleAppMountWithTabbar;
|
|
1621
|
+
exports.isDingTalk = isDingTalk;
|
|
1622
|
+
exports.isWeixin = isWeixin;
|
|
1307
1623
|
exports.navigateBack = navigateBack;
|
|
1308
1624
|
exports.navigateTo = navigateTo;
|
|
1625
|
+
exports.prependBasename = prependBasename;
|
|
1309
1626
|
exports.reLaunch = reLaunch;
|
|
1310
1627
|
exports.redirectTo = redirectTo;
|
|
1628
|
+
exports.routesAlias = routesAlias;
|
|
1629
|
+
exports.setHistory = setHistory;
|
|
1630
|
+
exports.setHistoryMode = setHistoryMode;
|
|
1631
|
+
exports.setMpaTitle = setMpaTitle;
|
|
1632
|
+
exports.setNavigationBarStyle = setNavigationBarStyle;
|
|
1633
|
+
exports.setTitle = setTitle;
|
|
1311
1634
|
exports.switchTab = switchTab;
|
|
1312
|
-
//# sourceMappingURL=index.cjs.js.map
|