@tarojs/router 4.0.0-beta.1 → 4.0.0-beta.100
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 +17 -3
- package/dist/api.js +31 -22
- package/dist/events/resize.d.ts +1 -1
- package/dist/events/resize.js +15 -7
- package/dist/events/scroll.d.ts +1 -1
- package/dist/events/scroll.js +4 -1
- package/dist/history.d.ts +22 -1
- package/dist/history.js +20 -8
- package/dist/index.cjs.js +793 -339
- package/dist/index.d.ts +6 -1
- package/dist/index.esm.js +753 -311
- package/dist/index.js +52 -4
- package/dist/navigationBar.d.ts +2 -0
- package/dist/navigationBar.js +44 -0
- package/dist/router/index.js +7 -3
- package/dist/router/mpa.d.ts +2 -1
- package/dist/router/mpa.js +29 -19
- package/dist/router/multi-page.d.ts +5 -2
- package/dist/router/multi-page.js +27 -43
- package/dist/router/navigation-bar.d.ts +36 -0
- package/dist/router/navigation-bar.js +252 -0
- package/dist/router/page.d.ts +11 -4
- package/dist/router/page.js +62 -59
- package/dist/router/spa.d.ts +2 -1
- package/dist/router/spa.js +81 -43
- package/dist/router/stack.d.ts +1 -1
- package/dist/router/stack.js +2 -1
- package/dist/style.d.ts +6 -1
- package/dist/style.js +106 -7
- package/dist/tabbar.d.ts +2 -1
- package/dist/tabbar.js +4 -3
- package/dist/utils/index.d.ts +1 -8
- package/dist/utils/index.js +5 -20
- package/dist/utils/navigate.d.ts +9 -5
- package/dist/utils/navigate.js +24 -37
- package/package.json +28 -27
- package/types/api.d.ts +5 -0
- package/types/component.d.ts +5 -0
- package/types/taro.d.ts +8 -0
- package/dist/index.cjs.d.ts +0 -22
- package/dist/index.cjs.js.map +0 -1
- package/dist/index.esm.d.ts +0 -22
- package/dist/index.esm.js.map +0 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,40 +1,251 @@
|
|
|
1
|
-
import { createBrowserHistory, createHashHistory, Action, parsePath } from 'history';
|
|
2
|
-
import { Current, eventCenter, incrementId, createPageConfig, hooks, stringify, requestAnimationFrame as requestAnimationFrame$1 } from '@tarojs/runtime';
|
|
3
|
-
import MobileDetect from 'mobile-detect';
|
|
4
|
-
import queryString from 'query-string';
|
|
5
1
|
import { defineCustomElementTaroTabbar } from '@tarojs/components/dist/components';
|
|
6
2
|
import { initTabBarApis } from '@tarojs/taro';
|
|
3
|
+
import { __awaiter } from 'tslib';
|
|
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';
|
|
6
|
+
import { createBrowserHistory, createHashHistory, Action, parsePath } from 'history';
|
|
7
|
+
export { createBrowserHistory, createHashHistory } from 'history';
|
|
8
|
+
import queryString from 'query-string';
|
|
7
9
|
import UniversalRouter from 'universal-router';
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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) {
|
|
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
|
+
.taro_page_shade:has(+.taro_page_stationed),
|
|
76
|
+
.taro_page_shade.taro_tabbar_page,
|
|
77
|
+
.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) {
|
|
78
|
+
display: none;
|
|
79
|
+
}
|
|
80
|
+
`;
|
|
81
|
+
addStyle(css);
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* 插入导航栏相关的样式
|
|
85
|
+
*/
|
|
86
|
+
function loadNavigationBarStyle() {
|
|
87
|
+
const css = `
|
|
88
|
+
.taro-navigation-bar-show {
|
|
89
|
+
display: flex;
|
|
90
|
+
background: white;
|
|
91
|
+
position: sticky;
|
|
92
|
+
z-index: 500;
|
|
93
|
+
top: 0;
|
|
94
|
+
padding-bottom: 8px;
|
|
95
|
+
padding-top: calc(env(safe-area-inset-top) + 8px);
|
|
96
|
+
justify-content: center;
|
|
97
|
+
align-items: center;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.taro-navigation-bar-hide {
|
|
101
|
+
display: none;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.taro-navigation-bar-title-wrap {
|
|
105
|
+
display: flex;
|
|
106
|
+
height: 24px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.taro-navigation-bar-title-wrap > .taro-navigation-bar-loading {
|
|
110
|
+
display: none;
|
|
111
|
+
animation: loading 2s linear infinite;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.taro-navigation-bar-title-wrap .taro-navigation-bar-loading.taro-navigation-bar-loading-show {
|
|
115
|
+
display: flex;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.taro-navigation-bar-title-wrap > .taro-navigation-bar-title {
|
|
119
|
+
font-size: 24px;
|
|
120
|
+
height: 24px;
|
|
121
|
+
line-height: 24px;
|
|
122
|
+
max-width: 100px;
|
|
123
|
+
white-space: nowrap;
|
|
124
|
+
overflow: hidden;
|
|
125
|
+
line-height: 24px;
|
|
126
|
+
text-overflow: ellipsis;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@keyframes loading {
|
|
130
|
+
from {
|
|
131
|
+
transform: rotate(0deg);
|
|
132
|
+
}
|
|
133
|
+
to {
|
|
134
|
+
transform: rotate(360deg);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@keyframes loading {
|
|
139
|
+
from {
|
|
140
|
+
transform: rotate(0deg);
|
|
141
|
+
}
|
|
142
|
+
to {
|
|
143
|
+
transform: rotate(360deg);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.taro-navigation-bar-no-icon > .taro-navigation-bar-home {
|
|
148
|
+
display: none;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.taro-navigation-bar-no-icon > .taro-navigation-bar-back {
|
|
152
|
+
display: none;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.taro-navigation-bar-home-icon > .taro-navigation-bar-home {
|
|
156
|
+
display: flex;
|
|
157
|
+
left: 8px;
|
|
158
|
+
position: absolute;
|
|
159
|
+
width: 24px;
|
|
160
|
+
height: 24px;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.taro-navigation-bar-back-icon > .taro-navigation-bar-back {
|
|
164
|
+
display: flex;
|
|
165
|
+
left: 8px;
|
|
166
|
+
position: absolute;
|
|
167
|
+
width: 24px;
|
|
168
|
+
height: 24px;
|
|
169
|
+
}
|
|
170
|
+
`;
|
|
171
|
+
addStyle(css);
|
|
172
|
+
}
|
|
173
|
+
function addStyle(css) {
|
|
174
|
+
if (!css)
|
|
175
|
+
return;
|
|
176
|
+
const style = document.createElement('style');
|
|
177
|
+
style.innerHTML = css;
|
|
178
|
+
document.getElementsByTagName('head')[0].appendChild(style);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
const home_svg_str = `
|
|
182
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
183
|
+
<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"/>
|
|
184
|
+
</svg>
|
|
185
|
+
`;
|
|
186
|
+
const back_svg_str = `
|
|
187
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
188
|
+
<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"/>
|
|
189
|
+
</svg>
|
|
190
|
+
`;
|
|
191
|
+
const loading_svg_str = `
|
|
192
|
+
<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>
|
|
193
|
+
`;
|
|
194
|
+
function initNavigationBar(config, container) {
|
|
195
|
+
if (config.router.mode === 'multi')
|
|
196
|
+
return;
|
|
197
|
+
const navigationBar = document.createElement('div');
|
|
198
|
+
navigationBar.classList.add('taro-navigation-bar-no-icon');
|
|
199
|
+
const navigationBarBackBtn = document.createElement('div');
|
|
200
|
+
navigationBarBackBtn.classList.add('taro-navigation-bar-back');
|
|
201
|
+
const navigationBarHomeBtn = document.createElement('div');
|
|
202
|
+
navigationBarHomeBtn.classList.add('taro-navigation-bar-home');
|
|
203
|
+
navigationBarBackBtn.innerHTML = back_svg_str;
|
|
204
|
+
navigationBarHomeBtn.innerHTML = home_svg_str;
|
|
205
|
+
const navigationBarTitleWrap = document.createElement('div');
|
|
206
|
+
navigationBarTitleWrap.classList.add('taro-navigation-bar-title-wrap');
|
|
207
|
+
const navigationBarLoading = document.createElement('div');
|
|
208
|
+
navigationBarLoading.classList.add('taro-navigation-bar-loading');
|
|
209
|
+
navigationBarLoading.innerHTML = loading_svg_str;
|
|
210
|
+
const navigationBarTitle = document.createElement('div');
|
|
211
|
+
navigationBarTitle.classList.add('taro-navigation-bar-title');
|
|
212
|
+
navigationBarTitleWrap.appendChild(navigationBarLoading);
|
|
213
|
+
navigationBarTitleWrap.appendChild(navigationBarTitle);
|
|
214
|
+
navigationBar.appendChild(navigationBarHomeBtn);
|
|
215
|
+
navigationBar.appendChild(navigationBarBackBtn);
|
|
216
|
+
navigationBar.appendChild(navigationBarTitleWrap);
|
|
217
|
+
navigationBar.id = 'taro-navigation-bar';
|
|
218
|
+
container.prepend(navigationBar);
|
|
219
|
+
loadNavigationBarStyle();
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
function initTabbar(config, history) {
|
|
223
|
+
if (config.tabBar == null || config.tabBar.custom) {
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
// TODO: custom-tab-bar
|
|
227
|
+
defineCustomElementTaroTabbar();
|
|
228
|
+
const tabbar = document.createElement('taro-tabbar');
|
|
229
|
+
const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
|
|
230
|
+
tabbar.conf = config.tabBar;
|
|
231
|
+
tabbar.conf.homePage = history.location.pathname === '/' ? homePage : history.location.pathname;
|
|
232
|
+
const routerConfig = config.router;
|
|
233
|
+
tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
|
|
234
|
+
if (routerConfig.customRoutes) {
|
|
235
|
+
tabbar.conf.custom = true;
|
|
236
|
+
tabbar.conf.customRoutes = routerConfig.customRoutes;
|
|
237
|
+
}
|
|
238
|
+
else {
|
|
239
|
+
tabbar.conf.custom = false;
|
|
240
|
+
tabbar.conf.customRoutes = {};
|
|
241
|
+
}
|
|
242
|
+
if (typeof routerConfig.basename !== 'undefined') {
|
|
243
|
+
tabbar.conf.basename = routerConfig.basename;
|
|
244
|
+
}
|
|
245
|
+
const container = document.getElementById('container');
|
|
246
|
+
container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
|
|
247
|
+
initTabBarApis(config);
|
|
248
|
+
}
|
|
38
249
|
|
|
39
250
|
class RouterConfig {
|
|
40
251
|
static set config(e) {
|
|
@@ -53,8 +264,9 @@ class RouterConfig {
|
|
|
53
264
|
return this.router.mode || 'hash';
|
|
54
265
|
}
|
|
55
266
|
static get customRoutes() { return this.router.customRoutes || {}; }
|
|
267
|
+
// 这个方法不考虑 basename 和 customRoutes，只判断原始的 url 是否在 pages 中
|
|
56
268
|
static isPage(url = '') {
|
|
57
|
-
return this.pages.findIndex(e =>
|
|
269
|
+
return this.pages.findIndex(e => addLeadingSlash(e) === url) !== -1;
|
|
58
270
|
}
|
|
59
271
|
}
|
|
60
272
|
|
|
@@ -81,14 +293,14 @@ class MpaHistory {
|
|
|
81
293
|
}
|
|
82
294
|
parseUrl(to) {
|
|
83
295
|
let url = to.pathname || '';
|
|
84
|
-
if (RouterConfig.isPage(url)) {
|
|
296
|
+
if (RouterConfig.isPage(addLeadingSlash(url))) {
|
|
85
297
|
url += '.html';
|
|
86
298
|
}
|
|
87
299
|
if (to.search) {
|
|
88
300
|
url += `?${to.search}`;
|
|
89
301
|
}
|
|
90
302
|
if (to.hash) {
|
|
91
|
-
url += `#${to.hash}`;
|
|
303
|
+
url += to.hash.startsWith('#') ? to.hash : `#${to.hash}`;
|
|
92
304
|
}
|
|
93
305
|
return url;
|
|
94
306
|
}
|
|
@@ -137,6 +349,13 @@ class MpaHistory {
|
|
|
137
349
|
};
|
|
138
350
|
}
|
|
139
351
|
}
|
|
352
|
+
function setHistory(h, base = '/') {
|
|
353
|
+
history = h;
|
|
354
|
+
basename = base;
|
|
355
|
+
}
|
|
356
|
+
function createMpaHistory(_) {
|
|
357
|
+
return new MpaHistory();
|
|
358
|
+
}
|
|
140
359
|
function setHistoryMode(mode, base = '/') {
|
|
141
360
|
const options = {
|
|
142
361
|
window
|
|
@@ -146,7 +365,7 @@ function setHistoryMode(mode, base = '/') {
|
|
|
146
365
|
history = createBrowserHistory(options);
|
|
147
366
|
}
|
|
148
367
|
else if (mode === 'multi') {
|
|
149
|
-
history =
|
|
368
|
+
history = createMpaHistory();
|
|
150
369
|
}
|
|
151
370
|
else {
|
|
152
371
|
// default is hash
|
|
@@ -238,24 +457,34 @@ class Stacks {
|
|
|
238
457
|
}
|
|
239
458
|
const stacks = new Stacks();
|
|
240
459
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
}
|
|
460
|
+
const isWeixin = () => !!navigator.userAgent.match(/\bMicroMessenger\b/ig);
|
|
461
|
+
const isDingTalk = () => !!navigator.userAgent.match(/\bDingTalk\b/ig);
|
|
462
|
+
let preTitle = document.title;
|
|
463
|
+
let isLoadDdEntry = false;
|
|
464
|
+
function setMpaTitle(title) {
|
|
465
|
+
if (preTitle === title)
|
|
466
|
+
return;
|
|
467
|
+
document.title = title;
|
|
468
|
+
preTitle = title;
|
|
469
|
+
if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
|
|
470
|
+
if (!isLoadDdEntry) {
|
|
471
|
+
isLoadDdEntry = true;
|
|
472
|
+
require('dingtalk-jsapi/platform');
|
|
473
|
+
}
|
|
474
|
+
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
475
|
+
setDingTitle({ title });
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
function setTitle(title) {
|
|
479
|
+
eventCenter.trigger('__taroH5SetNavigationBarTitle', title);
|
|
480
|
+
}
|
|
481
|
+
function setNavigationBarStyle(option) {
|
|
482
|
+
eventCenter.trigger('__taroH5setNavigationBarColor', option);
|
|
483
|
+
}
|
|
484
|
+
function setNavigationBarLoading(loading) {
|
|
485
|
+
eventCenter.trigger('__taroH5setNavigationBarLoading', loading);
|
|
486
|
+
}
|
|
487
|
+
|
|
259
488
|
class RoutesAlias {
|
|
260
489
|
constructor() {
|
|
261
490
|
this.conf = [];
|
|
@@ -297,6 +526,7 @@ class RoutesAlias {
|
|
|
297
526
|
}
|
|
298
527
|
const routesAlias = new RoutesAlias();
|
|
299
528
|
|
|
529
|
+
const routeEvtChannel = EventChannel.routeChannel;
|
|
300
530
|
function processNavigateUrl(option) {
|
|
301
531
|
var _a;
|
|
302
532
|
const pathPieces = parsePath(option.url);
|
|
@@ -305,13 +535,14 @@ function processNavigateUrl(option) {
|
|
|
305
535
|
const parts = routesAlias.getOrigin(history.location.pathname).split('/');
|
|
306
536
|
parts.pop();
|
|
307
537
|
pathPieces.pathname.split('/').forEach((item) => {
|
|
308
|
-
if (item === '.')
|
|
538
|
+
if (item === '.')
|
|
309
539
|
return;
|
|
310
|
-
}
|
|
311
540
|
item === '..' ? parts.pop() : parts.push(item);
|
|
312
541
|
});
|
|
313
542
|
pathPieces.pathname = parts.join('/');
|
|
314
543
|
}
|
|
544
|
+
// 确保是 / 开头的路径
|
|
545
|
+
pathPieces.pathname = addLeadingSlash(pathPieces.pathname);
|
|
315
546
|
// 处理自定义路由
|
|
316
547
|
pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname));
|
|
317
548
|
// 处理 basename
|
|
@@ -328,6 +559,10 @@ function navigate(option, method) {
|
|
|
328
559
|
const { success, complete, fail } = option;
|
|
329
560
|
const unListen = history.listen(() => {
|
|
330
561
|
const res = { errMsg: `${method}:ok` };
|
|
562
|
+
if (method === 'navigateTo') {
|
|
563
|
+
res.eventChannel = routeEvtChannel;
|
|
564
|
+
routeEvtChannel.addEvents(option.events);
|
|
565
|
+
}
|
|
331
566
|
success === null || success === void 0 ? void 0 : success(res);
|
|
332
567
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
333
568
|
resolve(res);
|
|
@@ -338,6 +573,7 @@ function navigate(option, method) {
|
|
|
338
573
|
const pathPieces = processNavigateUrl(option);
|
|
339
574
|
const state = { timestamp: Date.now() };
|
|
340
575
|
if (method === 'navigateTo') {
|
|
576
|
+
// Note: 由于 spa 会针对弱网情况下，短时间内多次跳转同一个页面跳转加了锁，后续如果有用户反馈返回无效，那可能是这个问题
|
|
341
577
|
history.push(pathPieces, state);
|
|
342
578
|
}
|
|
343
579
|
else if (method === 'redirectTo' || method === 'switchTab') {
|
|
@@ -362,7 +598,12 @@ function navigate(option, method) {
|
|
|
362
598
|
const res = { errMsg: `${method}:fail ${error.message || error}` };
|
|
363
599
|
fail === null || fail === void 0 ? void 0 : fail(res);
|
|
364
600
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
365
|
-
|
|
601
|
+
if (fail || complete) {
|
|
602
|
+
return resolve(res);
|
|
603
|
+
}
|
|
604
|
+
else {
|
|
605
|
+
return reject(res);
|
|
606
|
+
}
|
|
366
607
|
}
|
|
367
608
|
});
|
|
368
609
|
});
|
|
@@ -393,47 +634,22 @@ function getCurrentPages() {
|
|
|
393
634
|
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, '')) || '' })); });
|
|
394
635
|
}
|
|
395
636
|
|
|
396
|
-
let md;
|
|
397
|
-
let preTitle = document.title;
|
|
398
|
-
let isLoadDdEntry = false;
|
|
399
|
-
function getMobileDetect() {
|
|
400
|
-
if (!md) {
|
|
401
|
-
md = new MobileDetect(navigator.userAgent);
|
|
402
|
-
}
|
|
403
|
-
return md;
|
|
404
|
-
}
|
|
405
|
-
function setTitle(title) {
|
|
406
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
407
|
-
if (preTitle === title)
|
|
408
|
-
return title;
|
|
409
|
-
document.title = title;
|
|
410
|
-
preTitle = title;
|
|
411
|
-
if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
|
|
412
|
-
if (!isLoadDdEntry) {
|
|
413
|
-
isLoadDdEntry = true;
|
|
414
|
-
require('dingtalk-jsapi/platform');
|
|
415
|
-
}
|
|
416
|
-
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
417
|
-
setDingTitle({ title });
|
|
418
|
-
}
|
|
419
|
-
return title;
|
|
420
|
-
});
|
|
421
|
-
}
|
|
422
|
-
function isDingTalk() {
|
|
423
|
-
const md = getMobileDetect();
|
|
424
|
-
return md.match(/DingTalk/ig);
|
|
425
|
-
}
|
|
426
|
-
|
|
427
637
|
let pageResizeFn;
|
|
428
638
|
function bindPageResize(page) {
|
|
429
639
|
pageResizeFn && window.removeEventListener('resize', pageResizeFn);
|
|
430
640
|
pageResizeFn = function () {
|
|
431
|
-
page.onResize
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
641
|
+
if (page.onResize) {
|
|
642
|
+
const mediaQuery = window.matchMedia('(orientation: portrait)');
|
|
643
|
+
page.onResize({
|
|
644
|
+
deviceOrientation: mediaQuery.matches ? 'portrait' : 'landscape',
|
|
645
|
+
size: {
|
|
646
|
+
windowHeight: window.innerHeight,
|
|
647
|
+
windowWidth: window.innerWidth,
|
|
648
|
+
screenHeight: window.screen.height,
|
|
649
|
+
screenWidth: window.screen.width,
|
|
650
|
+
}
|
|
651
|
+
});
|
|
652
|
+
}
|
|
437
653
|
};
|
|
438
654
|
window.addEventListener('resize', pageResizeFn, false);
|
|
439
655
|
}
|
|
@@ -472,111 +688,10 @@ function getOffset() {
|
|
|
472
688
|
}
|
|
473
689
|
}
|
|
474
690
|
|
|
475
|
-
/**
|
|
476
|
-
* 插入页面动画需要的样式
|
|
477
|
-
*/
|
|
478
|
-
function loadAnimateStyle(ms = 300) {
|
|
479
|
-
const css = `
|
|
480
|
-
.taro_router > .taro_page {
|
|
481
|
-
position: absolute;
|
|
482
|
-
left: 0;
|
|
483
|
-
top: 0;
|
|
484
|
-
width: 100%;
|
|
485
|
-
height: 100%;
|
|
486
|
-
background-color: #fff;
|
|
487
|
-
transform: translate(100%, 0);
|
|
488
|
-
transition: transform ${ms}ms;
|
|
489
|
-
z-index: 0;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
.taro_router > .taro_page.taro_tabbar_page,
|
|
493
|
-
.taro_router > .taro_page.taro_page_show.taro_page_stationed {
|
|
494
|
-
transform: none;
|
|
495
|
-
}
|
|
496
|
-
|
|
497
|
-
.taro_router > .taro_page.taro_page_show {
|
|
498
|
-
transform: translate(0, 0);
|
|
499
|
-
}
|
|
500
|
-
`;
|
|
501
|
-
addStyle(css);
|
|
502
|
-
}
|
|
503
|
-
/**
|
|
504
|
-
* 插入路由相关样式
|
|
505
|
-
*/
|
|
506
|
-
function loadRouterStyle(usingWindowScroll) {
|
|
507
|
-
const css = `
|
|
508
|
-
.taro_router {
|
|
509
|
-
position: relative;
|
|
510
|
-
width: 100%;
|
|
511
|
-
height: 100%;
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
.taro_page {
|
|
515
|
-
width: 100%;
|
|
516
|
-
height: 100%;
|
|
517
|
-
${usingWindowScroll ? '' : `
|
|
518
|
-
overflow-x: hidden;
|
|
519
|
-
overflow-y: scroll;
|
|
520
|
-
max-height: 100vh;
|
|
521
|
-
`}
|
|
522
|
-
}
|
|
523
|
-
|
|
524
|
-
.taro-tabbar__container > .taro-tabbar__panel {
|
|
525
|
-
overflow: hidden;
|
|
526
|
-
}
|
|
527
|
-
|
|
528
|
-
.taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
|
|
529
|
-
max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
|
|
530
|
-
max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
|
|
531
|
-
}
|
|
532
|
-
|
|
533
|
-
.taro_page_shade,
|
|
534
|
-
.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
|
|
535
|
-
display: none;
|
|
536
|
-
}
|
|
537
|
-
`;
|
|
538
|
-
addStyle(css);
|
|
539
|
-
}
|
|
540
|
-
function addStyle(css) {
|
|
541
|
-
if (!css)
|
|
542
|
-
return;
|
|
543
|
-
const style = document.createElement('style');
|
|
544
|
-
style.innerHTML = css;
|
|
545
|
-
document.getElementsByTagName('head')[0].appendChild(style);
|
|
546
|
-
}
|
|
547
|
-
|
|
548
|
-
// @ts-nocheck
|
|
549
|
-
function initTabbar(config) {
|
|
550
|
-
if (config.tabBar == null || config.tabBar.custom) {
|
|
551
|
-
return;
|
|
552
|
-
}
|
|
553
|
-
// TODO: custom-tab-bar
|
|
554
|
-
defineCustomElementTaroTabbar();
|
|
555
|
-
const tabbar = document.createElement('taro-tabbar');
|
|
556
|
-
const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
|
|
557
|
-
tabbar.conf = config.tabBar;
|
|
558
|
-
tabbar.conf.homePage = history.location.pathname === '/' ? homePage : history.location.pathname;
|
|
559
|
-
const routerConfig = config.router;
|
|
560
|
-
tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
|
|
561
|
-
if (routerConfig.customRoutes) {
|
|
562
|
-
tabbar.conf.custom = true;
|
|
563
|
-
tabbar.conf.customRoutes = routerConfig.customRoutes;
|
|
564
|
-
}
|
|
565
|
-
else {
|
|
566
|
-
tabbar.conf.custom = false;
|
|
567
|
-
tabbar.conf.customRoutes = {};
|
|
568
|
-
}
|
|
569
|
-
if (typeof routerConfig.basename !== 'undefined') {
|
|
570
|
-
tabbar.conf.basename = routerConfig.basename;
|
|
571
|
-
}
|
|
572
|
-
const container = document.getElementById('container');
|
|
573
|
-
container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
|
|
574
|
-
initTabBarApis(config);
|
|
575
|
-
}
|
|
576
|
-
|
|
577
691
|
/* eslint-disable dot-notation */
|
|
578
692
|
class MultiPageHandler {
|
|
579
|
-
constructor(config) {
|
|
693
|
+
constructor(config, history) {
|
|
694
|
+
this.history = history;
|
|
580
695
|
this.config = config;
|
|
581
696
|
this.mount();
|
|
582
697
|
}
|
|
@@ -623,39 +738,18 @@ class MultiPageHandler {
|
|
|
623
738
|
: {};
|
|
624
739
|
return Object.assign(Object.assign({}, query), options);
|
|
625
740
|
}
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
let isPosition = true;
|
|
632
|
-
if (!app) {
|
|
633
|
-
app = document.createElement('div');
|
|
634
|
-
app.id = appId;
|
|
635
|
-
isPosition = false;
|
|
636
|
-
}
|
|
637
|
-
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
638
|
-
app.classList.add('taro_router');
|
|
639
|
-
if (this.tabBarList.length > 1) {
|
|
640
|
-
const container = document.createElement('div');
|
|
641
|
-
container.classList.add('taro-tabbar__container');
|
|
642
|
-
container.id = 'container';
|
|
643
|
-
const panel = document.createElement('div');
|
|
644
|
-
panel.classList.add('taro-tabbar__panel');
|
|
645
|
-
panel.appendChild(app.cloneNode(true));
|
|
646
|
-
container.appendChild(panel);
|
|
647
|
-
if (!isPosition) {
|
|
648
|
-
appWrapper.appendChild(container);
|
|
649
|
-
}
|
|
650
|
-
else {
|
|
651
|
-
appWrapper.replaceChild(container, app);
|
|
652
|
-
}
|
|
653
|
-
initTabbar(this.config);
|
|
654
|
-
}
|
|
655
|
-
else {
|
|
656
|
-
if (!isPosition)
|
|
657
|
-
appWrapper.appendChild(app);
|
|
741
|
+
isDefaultNavigationStyle() {
|
|
742
|
+
var _a, _b;
|
|
743
|
+
let style = (_a = this.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
|
|
744
|
+
if (typeof ((_b = this.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
|
|
745
|
+
style = this.pageConfig.navigationStyle;
|
|
658
746
|
}
|
|
747
|
+
return style !== 'custom';
|
|
748
|
+
}
|
|
749
|
+
mount() {
|
|
750
|
+
setHistory(this.history, this.basename);
|
|
751
|
+
// Note: 注入页面样式
|
|
752
|
+
loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
|
|
659
753
|
}
|
|
660
754
|
onReady(page, onLoad = true) {
|
|
661
755
|
var _a;
|
|
@@ -685,10 +779,13 @@ class MultiPageHandler {
|
|
|
685
779
|
return;
|
|
686
780
|
(_a = page.onLoad) === null || _a === void 0 ? void 0 : _a.call(page, this.getQuery('', page.options), () => {
|
|
687
781
|
var _a;
|
|
782
|
+
const pageEl = this.getPageContainer(page);
|
|
688
783
|
if (this.isTabBar) {
|
|
689
|
-
const pageEl = this.getPageContainer(page);
|
|
690
784
|
pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page');
|
|
691
785
|
}
|
|
786
|
+
if (this.isDefaultNavigationStyle()) {
|
|
787
|
+
pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page');
|
|
788
|
+
}
|
|
692
789
|
this.onReady(page, true);
|
|
693
790
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
694
791
|
this.bindPageEvents(page, pageConfig);
|
|
@@ -745,16 +842,17 @@ const launchStampId$1 = createStampId$1();
|
|
|
745
842
|
* - TabBar 会多次加载
|
|
746
843
|
* - 不支持路由动画
|
|
747
844
|
*/
|
|
748
|
-
function createMultiRouter(app, config, framework) {
|
|
749
|
-
var _a, _b, _c, _d, _e, _f;
|
|
845
|
+
function createMultiRouter(history, app, config, framework) {
|
|
750
846
|
return __awaiter(this, void 0, void 0, function* () {
|
|
847
|
+
var _a, _b, _c, _d, _e, _f;
|
|
751
848
|
if (typeof app.onUnhandledRejection === 'function') {
|
|
752
849
|
window.addEventListener('unhandledrejection', app.onUnhandledRejection);
|
|
753
850
|
}
|
|
851
|
+
eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle);
|
|
754
852
|
RouterConfig.config = config;
|
|
755
|
-
const handler = new MultiPageHandler(config);
|
|
853
|
+
const handler = new MultiPageHandler(config, history);
|
|
756
854
|
const launchParam = {
|
|
757
|
-
path: config.pageName,
|
|
855
|
+
path: config.pageName, // 多页面模式没新开一个页面相当于重启，所以直接使用当前页面路径
|
|
758
856
|
query: handler.getQuery(launchStampId$1),
|
|
759
857
|
scene: 0,
|
|
760
858
|
shareTicket: '',
|
|
@@ -784,7 +882,7 @@ function createMultiRouter(app, config, framework) {
|
|
|
784
882
|
return;
|
|
785
883
|
let enablePullDownRefresh = ((_c = config === null || config === void 0 ? void 0 : config.window) === null || _c === void 0 ? void 0 : _c.enablePullDownRefresh) || false;
|
|
786
884
|
if (pageConfig) {
|
|
787
|
-
|
|
885
|
+
setMpaTitle((_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title);
|
|
788
886
|
if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
|
|
789
887
|
enablePullDownRefresh = pageConfig.enablePullDownRefresh;
|
|
790
888
|
}
|
|
@@ -796,16 +894,278 @@ function createMultiRouter(app, config, framework) {
|
|
|
796
894
|
const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, pathName, framework, handler.PullDownRefresh) : el, pathName + stringify(launchParam), {}, loadConfig);
|
|
797
895
|
handler.load(page, pageConfig);
|
|
798
896
|
(_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
|
|
897
|
+
window.addEventListener('visibilitychange', () => {
|
|
898
|
+
var _a, _b, _c;
|
|
899
|
+
const currentPath = ((_a = Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
|
|
900
|
+
const path = currentPath.substring(0, currentPath.indexOf('?'));
|
|
901
|
+
const param = {};
|
|
902
|
+
// app的 onShow/onHide 生命周期的路径信息为当前页面的路径
|
|
903
|
+
Object.assign(param, launchParam, { path });
|
|
904
|
+
if (document.visibilityState === 'visible') {
|
|
905
|
+
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
|
|
906
|
+
}
|
|
907
|
+
else {
|
|
908
|
+
(_c = app.onHide) === null || _c === void 0 ? void 0 : _c.call(app, param);
|
|
909
|
+
}
|
|
910
|
+
});
|
|
799
911
|
});
|
|
800
912
|
}
|
|
801
913
|
|
|
914
|
+
class NavigationBarHandler {
|
|
915
|
+
constructor(pageContext) {
|
|
916
|
+
this.isLoadDdEntry = false;
|
|
917
|
+
this.cache = {};
|
|
918
|
+
this.pageContext = pageContext;
|
|
919
|
+
this.init();
|
|
920
|
+
eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
|
|
921
|
+
this.setTitle(title);
|
|
922
|
+
});
|
|
923
|
+
eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
|
|
924
|
+
this.setNavigationLoading(loading);
|
|
925
|
+
});
|
|
926
|
+
eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
|
|
927
|
+
if (typeof backgroundColor === 'string')
|
|
928
|
+
this.setNavigationBarBackground(backgroundColor);
|
|
929
|
+
if (typeof frontColor === 'string')
|
|
930
|
+
this.setNavigationBarTextStyle(frontColor);
|
|
931
|
+
});
|
|
932
|
+
}
|
|
933
|
+
toHomeFn() {
|
|
934
|
+
reLaunch({ url: this.pageContext.originHomePage });
|
|
935
|
+
}
|
|
936
|
+
backFn() {
|
|
937
|
+
navigateBack();
|
|
938
|
+
}
|
|
939
|
+
get homeBtnElement() {
|
|
940
|
+
var _a;
|
|
941
|
+
if (!this.navigationBarElement)
|
|
942
|
+
return null;
|
|
943
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-home')) === null || _a === void 0 ? void 0 : _a[0];
|
|
944
|
+
}
|
|
945
|
+
get backBtnElement() {
|
|
946
|
+
var _a;
|
|
947
|
+
if (!this.navigationBarElement)
|
|
948
|
+
return null;
|
|
949
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-back')) === null || _a === void 0 ? void 0 : _a[0];
|
|
950
|
+
}
|
|
951
|
+
get titleElement() {
|
|
952
|
+
var _a;
|
|
953
|
+
if (!this.navigationBarElement)
|
|
954
|
+
return null;
|
|
955
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-title')) === null || _a === void 0 ? void 0 : _a[0];
|
|
956
|
+
}
|
|
957
|
+
get loadingElement() {
|
|
958
|
+
if (!this.navigationBarElement)
|
|
959
|
+
return null;
|
|
960
|
+
return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-loading')[0];
|
|
961
|
+
}
|
|
962
|
+
init() {
|
|
963
|
+
var _a, _b;
|
|
964
|
+
this.setNavigationBarElement();
|
|
965
|
+
if (!this.navigationBarElement)
|
|
966
|
+
return;
|
|
967
|
+
(_a = this.homeBtnElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.toHomeFn.bind(this));
|
|
968
|
+
(_b = this.backBtnElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.backFn.bind(this));
|
|
969
|
+
}
|
|
970
|
+
setNavigationBarElement() {
|
|
971
|
+
this.navigationBarElement = document.getElementById('taro-navigation-bar');
|
|
972
|
+
}
|
|
973
|
+
load() {
|
|
974
|
+
this.setCacheValue();
|
|
975
|
+
this.setTitle();
|
|
976
|
+
this.setNavigationBarVisible();
|
|
977
|
+
this.setFnBtnState();
|
|
978
|
+
this.setNavigationBarBackground();
|
|
979
|
+
this.setNavigationBarTextStyle();
|
|
980
|
+
this.setNavigationLoading();
|
|
981
|
+
}
|
|
982
|
+
setCacheValue() {
|
|
983
|
+
const currentPage = this.pageContext.originPathname;
|
|
984
|
+
if (typeof this.cache[currentPage] !== 'object') {
|
|
985
|
+
this.cache[currentPage] = {};
|
|
986
|
+
}
|
|
987
|
+
}
|
|
988
|
+
setFnBtnState() {
|
|
989
|
+
const currentRouter = this.pageContext.currentPage;
|
|
990
|
+
if (this.pageContext.isTabBar(currentRouter) || this.pageContext.homePage === currentRouter) {
|
|
991
|
+
this.fnBtnToggleToNone();
|
|
992
|
+
}
|
|
993
|
+
else if (stacks.length > 1) {
|
|
994
|
+
this.fnBtnToggleToBack();
|
|
995
|
+
}
|
|
996
|
+
else {
|
|
997
|
+
this.fnBtnToggleToHome();
|
|
998
|
+
}
|
|
999
|
+
}
|
|
1000
|
+
shiftLoadingState(show) {
|
|
1001
|
+
if (!this.loadingElement)
|
|
1002
|
+
return;
|
|
1003
|
+
if (show) {
|
|
1004
|
+
this.loadingElement.classList.add('taro-navigation-bar-loading-show');
|
|
1005
|
+
}
|
|
1006
|
+
else {
|
|
1007
|
+
this.loadingElement.classList.remove('taro-navigation-bar-loading-show');
|
|
1008
|
+
}
|
|
1009
|
+
}
|
|
1010
|
+
setNavigationLoading(show) {
|
|
1011
|
+
var _a;
|
|
1012
|
+
if (!this.navigationBarElement)
|
|
1013
|
+
return;
|
|
1014
|
+
const currentPage = this.pageContext.originPathname;
|
|
1015
|
+
let isShow;
|
|
1016
|
+
if (typeof show === 'boolean') {
|
|
1017
|
+
isShow = show;
|
|
1018
|
+
this.cache[currentPage] &&
|
|
1019
|
+
(this.cache[currentPage].loading = isShow);
|
|
1020
|
+
}
|
|
1021
|
+
else {
|
|
1022
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.loading;
|
|
1023
|
+
if (typeof cacheValue === 'boolean') {
|
|
1024
|
+
isShow = cacheValue;
|
|
1025
|
+
}
|
|
1026
|
+
else {
|
|
1027
|
+
// 默认值为 false
|
|
1028
|
+
isShow = false;
|
|
1029
|
+
this.cache[currentPage] &&
|
|
1030
|
+
(this.cache[currentPage].loading = isShow);
|
|
1031
|
+
}
|
|
1032
|
+
}
|
|
1033
|
+
this.shiftLoadingState(isShow);
|
|
1034
|
+
}
|
|
1035
|
+
setNavigationBarBackground(backgroundColor) {
|
|
1036
|
+
var _a, _b, _c;
|
|
1037
|
+
if (!this.navigationBarElement)
|
|
1038
|
+
return;
|
|
1039
|
+
const currentPage = this.pageContext.originPathname;
|
|
1040
|
+
let color;
|
|
1041
|
+
if (typeof backgroundColor === 'string') {
|
|
1042
|
+
color = backgroundColor;
|
|
1043
|
+
this.cache[currentPage] &&
|
|
1044
|
+
(this.cache[currentPage].backgroundColor = color);
|
|
1045
|
+
}
|
|
1046
|
+
else {
|
|
1047
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.backgroundColor;
|
|
1048
|
+
if (typeof cacheValue === 'string') {
|
|
1049
|
+
color = cacheValue;
|
|
1050
|
+
}
|
|
1051
|
+
else {
|
|
1052
|
+
color = ((_c = (_b = this.pageContext.config) === null || _b === void 0 ? void 0 : _b.window) === null || _c === void 0 ? void 0 : _c.navigationBarBackgroundColor) || '#000000';
|
|
1053
|
+
this.cache[currentPage] &&
|
|
1054
|
+
(this.cache[currentPage].backgroundColor = color);
|
|
1055
|
+
}
|
|
1056
|
+
}
|
|
1057
|
+
this.navigationBarElement.style.background = color;
|
|
1058
|
+
}
|
|
1059
|
+
setNavigationBarTextStyle(fontColor) {
|
|
1060
|
+
var _a, _b, _c;
|
|
1061
|
+
if (!this.navigationBarElement)
|
|
1062
|
+
return;
|
|
1063
|
+
const currentPage = this.pageContext.originPathname;
|
|
1064
|
+
let color;
|
|
1065
|
+
if (typeof fontColor === 'string') {
|
|
1066
|
+
color = fontColor;
|
|
1067
|
+
this.cache[currentPage] &&
|
|
1068
|
+
(this.cache[currentPage].fontColor = color);
|
|
1069
|
+
}
|
|
1070
|
+
else {
|
|
1071
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.fontColor;
|
|
1072
|
+
if (typeof cacheValue === 'string') {
|
|
1073
|
+
color = cacheValue;
|
|
1074
|
+
}
|
|
1075
|
+
else {
|
|
1076
|
+
color = ((_c = (_b = this.pageContext.config) === null || _b === void 0 ? void 0 : _b.window) === null || _c === void 0 ? void 0 : _c.navigationBarTextStyle) || 'white';
|
|
1077
|
+
this.cache[currentPage] &&
|
|
1078
|
+
(this.cache[currentPage].fontColor = color);
|
|
1079
|
+
}
|
|
1080
|
+
}
|
|
1081
|
+
this.navigationBarElement.style.color = color;
|
|
1082
|
+
}
|
|
1083
|
+
setTitle(title) {
|
|
1084
|
+
var _a, _b, _c;
|
|
1085
|
+
const currentPage = this.pageContext.originPathname;
|
|
1086
|
+
let proceedTitle;
|
|
1087
|
+
if (typeof title === 'string') {
|
|
1088
|
+
proceedTitle = title;
|
|
1089
|
+
this.cache[currentPage] &&
|
|
1090
|
+
(this.cache[currentPage].title = proceedTitle);
|
|
1091
|
+
}
|
|
1092
|
+
else {
|
|
1093
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.title;
|
|
1094
|
+
if (typeof cacheValue === 'string') {
|
|
1095
|
+
proceedTitle = cacheValue;
|
|
1096
|
+
}
|
|
1097
|
+
else {
|
|
1098
|
+
proceedTitle = (_c = (_b = this.pageContext.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationBarTitleText) !== null && _c !== void 0 ? _c : document.title;
|
|
1099
|
+
this.cache[currentPage] &&
|
|
1100
|
+
(this.cache[currentPage].title = proceedTitle);
|
|
1101
|
+
}
|
|
1102
|
+
}
|
|
1103
|
+
if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
|
|
1104
|
+
if (!this.isLoadDdEntry) {
|
|
1105
|
+
this.isLoadDdEntry = true;
|
|
1106
|
+
require('dingtalk-jsapi/platform');
|
|
1107
|
+
}
|
|
1108
|
+
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
1109
|
+
setDingTitle({ proceedTitle });
|
|
1110
|
+
}
|
|
1111
|
+
document.title = proceedTitle;
|
|
1112
|
+
if (!this.titleElement)
|
|
1113
|
+
return;
|
|
1114
|
+
this.titleElement.innerHTML = proceedTitle;
|
|
1115
|
+
}
|
|
1116
|
+
fnBtnToggleToHome() {
|
|
1117
|
+
if (!this.navigationBarElement)
|
|
1118
|
+
return;
|
|
1119
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-home-icon');
|
|
1120
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
|
|
1121
|
+
}
|
|
1122
|
+
fnBtnToggleToBack() {
|
|
1123
|
+
if (!this.navigationBarElement)
|
|
1124
|
+
return;
|
|
1125
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
|
|
1126
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-back-icon');
|
|
1127
|
+
}
|
|
1128
|
+
fnBtnToggleToNone() {
|
|
1129
|
+
if (!this.navigationBarElement)
|
|
1130
|
+
return;
|
|
1131
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
|
|
1132
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
|
|
1133
|
+
}
|
|
1134
|
+
setNavigationBarVisible(show) {
|
|
1135
|
+
var _a, _b;
|
|
1136
|
+
if (!this.navigationBarElement)
|
|
1137
|
+
return;
|
|
1138
|
+
let shouldShow;
|
|
1139
|
+
if (typeof show === 'boolean') {
|
|
1140
|
+
shouldShow = show;
|
|
1141
|
+
}
|
|
1142
|
+
else {
|
|
1143
|
+
shouldShow = (_a = this.pageContext.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
|
|
1144
|
+
if (typeof ((_b = this.pageContext.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
|
|
1145
|
+
shouldShow = this.pageContext.pageConfig.navigationStyle;
|
|
1146
|
+
}
|
|
1147
|
+
}
|
|
1148
|
+
if (shouldShow === 'default') {
|
|
1149
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-show');
|
|
1150
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-hide');
|
|
1151
|
+
}
|
|
1152
|
+
else {
|
|
1153
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-hide');
|
|
1154
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-show');
|
|
1155
|
+
}
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
|
|
802
1159
|
/* eslint-disable dot-notation */
|
|
803
1160
|
class PageHandler {
|
|
804
|
-
constructor(config) {
|
|
1161
|
+
constructor(config, history) {
|
|
1162
|
+
this.history = history;
|
|
805
1163
|
this.defaultAnimation = { duration: 300, delay: 50 };
|
|
806
1164
|
this.config = config;
|
|
807
1165
|
this.homePage = getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
|
|
1166
|
+
this.originHomePage = this.config.entryPagePath || this.routes[0].path || this.basename;
|
|
808
1167
|
this.mount();
|
|
1168
|
+
this.navigationBarHandler = new NavigationBarHandler(this);
|
|
809
1169
|
}
|
|
810
1170
|
get currentPage() {
|
|
811
1171
|
const routePath = getCurrentPage(this.routerMode, this.basename);
|
|
@@ -837,14 +1197,14 @@ class PageHandler {
|
|
|
837
1197
|
}
|
|
838
1198
|
set pathname(p) { this.router.pathname = p; }
|
|
839
1199
|
get pathname() { return this.router.pathname; }
|
|
1200
|
+
// Note: 把 pathname 转换为原始路径，主要是处理 customRoutes 和 basename
|
|
1201
|
+
get originPathname() { return routesAlias.getOrigin(addLeadingSlash(stripBasename(this.pathname, this.basename))); }
|
|
840
1202
|
get basename() { return this.router.basename || ''; }
|
|
841
1203
|
get pageConfig() {
|
|
842
|
-
const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
|
|
843
1204
|
const homePage = addLeadingSlash(this.homePage);
|
|
844
1205
|
return this.routes.find(r => {
|
|
845
|
-
var _a;
|
|
846
1206
|
const pagePath = addLeadingSlash(r.path);
|
|
847
|
-
return [pagePath, homePage].includes(
|
|
1207
|
+
return [pagePath, homePage].includes(this.originPathname);
|
|
848
1208
|
});
|
|
849
1209
|
}
|
|
850
1210
|
isTabBar(pathname) {
|
|
@@ -861,6 +1221,14 @@ class PageHandler {
|
|
|
861
1221
|
})) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
|
|
862
1222
|
return !!pagePath && this.tabBarList.some(t => stripTrailing(t.pagePath) === pagePath);
|
|
863
1223
|
}
|
|
1224
|
+
isDefaultNavigationStyle() {
|
|
1225
|
+
var _a, _b;
|
|
1226
|
+
let style = (_a = this.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
|
|
1227
|
+
if (typeof ((_b = this.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
|
|
1228
|
+
style = this.pageConfig.navigationStyle;
|
|
1229
|
+
}
|
|
1230
|
+
return style !== 'custom';
|
|
1231
|
+
}
|
|
864
1232
|
isSamePage(page) {
|
|
865
1233
|
const routePath = stripBasename(this.pathname, this.basename);
|
|
866
1234
|
const pagePath = stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
|
|
@@ -899,40 +1267,11 @@ class PageHandler {
|
|
|
899
1267
|
return Object.assign(Object.assign({}, query), options);
|
|
900
1268
|
}
|
|
901
1269
|
mount() {
|
|
902
|
-
|
|
1270
|
+
setHistory(this.history, this.basename);
|
|
903
1271
|
this.pathname = history.location.pathname;
|
|
1272
|
+
// Note: 注入页面样式
|
|
904
1273
|
this.animation && loadAnimateStyle(this.animationDuration);
|
|
905
|
-
loadRouterStyle(this.usingWindowScroll);
|
|
906
|
-
const appId = this.appId;
|
|
907
|
-
let app = document.getElementById(appId);
|
|
908
|
-
let isPosition = true;
|
|
909
|
-
if (!app) {
|
|
910
|
-
app = document.createElement('div');
|
|
911
|
-
app.id = appId;
|
|
912
|
-
isPosition = false;
|
|
913
|
-
}
|
|
914
|
-
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
915
|
-
app.classList.add('taro_router');
|
|
916
|
-
if (this.tabBarList.length > 1) {
|
|
917
|
-
const container = document.createElement('div');
|
|
918
|
-
container.classList.add('taro-tabbar__container');
|
|
919
|
-
container.id = 'container';
|
|
920
|
-
const panel = document.createElement('div');
|
|
921
|
-
panel.classList.add('taro-tabbar__panel');
|
|
922
|
-
panel.appendChild(app.cloneNode(true));
|
|
923
|
-
container.appendChild(panel);
|
|
924
|
-
if (!isPosition) {
|
|
925
|
-
appWrapper.appendChild(container);
|
|
926
|
-
}
|
|
927
|
-
else {
|
|
928
|
-
appWrapper.replaceChild(container, app);
|
|
929
|
-
}
|
|
930
|
-
initTabbar(this.config);
|
|
931
|
-
}
|
|
932
|
-
else {
|
|
933
|
-
if (!isPosition)
|
|
934
|
-
appWrapper.appendChild(app);
|
|
935
|
-
}
|
|
1274
|
+
loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
|
|
936
1275
|
}
|
|
937
1276
|
onReady(page, onLoad = true) {
|
|
938
1277
|
var _a;
|
|
@@ -967,19 +1306,24 @@ class PageHandler {
|
|
|
967
1306
|
if (pageEl) {
|
|
968
1307
|
pageEl.classList.remove('taro_page_shade');
|
|
969
1308
|
this.isTabBar(this.pathname) && pageEl.classList.add('taro_tabbar_page');
|
|
1309
|
+
this.isDefaultNavigationStyle() && pageEl.classList.add('taro_navigation_page');
|
|
970
1310
|
this.addAnimation(pageEl, pageNo === 0);
|
|
971
1311
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1312
|
+
this.navigationBarHandler.load();
|
|
972
1313
|
this.bindPageEvents(page, pageConfig);
|
|
973
1314
|
this.triggerRouterChange();
|
|
974
1315
|
}
|
|
975
1316
|
else {
|
|
1317
|
+
// FIXME 在 iOS 端快速切换页面时，可能不会执行回调注入对应类名导致 TabBar 白屏
|
|
976
1318
|
(_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
|
|
977
1319
|
var _a;
|
|
978
1320
|
pageEl = this.getPageContainer(page);
|
|
979
1321
|
this.isTabBar(this.pathname) && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page'));
|
|
1322
|
+
this.isDefaultNavigationStyle() && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page'));
|
|
980
1323
|
this.addAnimation(pageEl, pageNo === 0);
|
|
981
|
-
this.onReady(page, true);
|
|
982
1324
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1325
|
+
this.navigationBarHandler.load();
|
|
1326
|
+
this.onReady(page, true);
|
|
983
1327
|
this.bindPageEvents(page, pageConfig);
|
|
984
1328
|
this.triggerRouterChange();
|
|
985
1329
|
});
|
|
@@ -1033,6 +1377,7 @@ class PageHandler {
|
|
|
1033
1377
|
pageEl.classList.remove('taro_page_shade');
|
|
1034
1378
|
this.addAnimation(pageEl, pageNo === 0);
|
|
1035
1379
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1380
|
+
this.navigationBarHandler.load();
|
|
1036
1381
|
this.bindPageEvents(page, pageConfig);
|
|
1037
1382
|
this.triggerRouterChange();
|
|
1038
1383
|
}
|
|
@@ -1041,31 +1386,43 @@ class PageHandler {
|
|
|
1041
1386
|
var _a;
|
|
1042
1387
|
pageEl = this.getPageContainer(page);
|
|
1043
1388
|
this.addAnimation(pageEl, pageNo === 0);
|
|
1044
|
-
this.onReady(page, false);
|
|
1045
1389
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1390
|
+
this.navigationBarHandler.load();
|
|
1391
|
+
this.onReady(page, false);
|
|
1046
1392
|
this.bindPageEvents(page, pageConfig);
|
|
1047
1393
|
this.triggerRouterChange();
|
|
1048
1394
|
});
|
|
1049
1395
|
}
|
|
1050
1396
|
}
|
|
1051
|
-
hide(page) {
|
|
1052
|
-
var _a;
|
|
1397
|
+
hide(page, animation = false) {
|
|
1398
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
1053
1399
|
if (!page)
|
|
1054
1400
|
return;
|
|
1055
1401
|
// NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
|
|
1056
1402
|
const pageEl = this.getPageContainer(page);
|
|
1057
1403
|
if (pageEl) {
|
|
1058
|
-
if (
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1404
|
+
if (animation) {
|
|
1405
|
+
if (this.hideTimer) {
|
|
1406
|
+
clearTimeout(this.hideTimer);
|
|
1407
|
+
this.hideTimer = null;
|
|
1408
|
+
(_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');
|
|
1409
|
+
}
|
|
1410
|
+
this.lastHidePage = pageEl;
|
|
1411
|
+
this.hideTimer = setTimeout(() => {
|
|
1412
|
+
this.hideTimer = null;
|
|
1413
|
+
pageEl.classList.add('taro_page_shade');
|
|
1414
|
+
}, this.animationDuration + this.animationDelay);
|
|
1415
|
+
(_d = page.onHide) === null || _d === void 0 ? void 0 : _d.call(page);
|
|
1062
1416
|
}
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1417
|
+
else {
|
|
1418
|
+
if (this.hideTimer) {
|
|
1419
|
+
clearTimeout(this.hideTimer);
|
|
1420
|
+
this.hideTimer = null;
|
|
1421
|
+
(_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');
|
|
1422
|
+
}
|
|
1066
1423
|
pageEl.classList.add('taro_page_shade');
|
|
1067
|
-
|
|
1068
|
-
|
|
1424
|
+
this.lastHidePage = pageEl;
|
|
1425
|
+
}
|
|
1069
1426
|
}
|
|
1070
1427
|
else {
|
|
1071
1428
|
setTimeout(() => this.hide(page), 0);
|
|
@@ -1129,13 +1486,17 @@ class PageHandler {
|
|
|
1129
1486
|
|
|
1130
1487
|
const createStampId = incrementId();
|
|
1131
1488
|
let launchStampId = createStampId();
|
|
1132
|
-
function createRouter(app, config, framework) {
|
|
1489
|
+
function createRouter(history, app, config, framework) {
|
|
1133
1490
|
var _a, _b;
|
|
1134
1491
|
if (typeof app.onUnhandledRejection === 'function') {
|
|
1135
1492
|
window.addEventListener('unhandledrejection', app.onUnhandledRejection);
|
|
1136
1493
|
}
|
|
1137
1494
|
RouterConfig.config = config;
|
|
1138
|
-
const handler = new PageHandler(config);
|
|
1495
|
+
const handler = new PageHandler(config, history);
|
|
1496
|
+
// Note: 弱网情况下，快速切换 tab，会造成同个页面实例被多次挂在到页面上，原因是资源请求是异步的，短时间内发起多个请求，
|
|
1497
|
+
// 会在资源加载完成后，同时走到挂载的逻辑，造成 pageStampId 更新不及时，两个 page 的Id 相同，后面很多操作是通过 getElementById 来进行的
|
|
1498
|
+
// 所以需要加一个锁来应对这个情况
|
|
1499
|
+
const pageLock = {};
|
|
1139
1500
|
routesAlias.set(handler.router.customRoutes);
|
|
1140
1501
|
const basename = handler.router.basename;
|
|
1141
1502
|
const routes = handler.routes.map(route => {
|
|
@@ -1157,29 +1518,35 @@ function createRouter(app, config, framework) {
|
|
|
1157
1518
|
eventCenter.trigger('__taroRouterLaunch', launchParam);
|
|
1158
1519
|
(_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
|
|
1159
1520
|
app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
|
|
1160
|
-
const render = (
|
|
1161
|
-
var
|
|
1162
|
-
|
|
1163
|
-
|
|
1521
|
+
const render = (_c) => __awaiter(this, [_c], void 0, function* ({ location, action }) {
|
|
1522
|
+
var _d, _e, _f, _g, _h, _j, _k, _l;
|
|
1523
|
+
// Note: 由于下面有异步加载操作 先不要在这里去设置 handler.pathname
|
|
1524
|
+
const currentPathname = decodeURI(location.pathname);
|
|
1525
|
+
if ((_d = window.__taroAppConfig) === null || _d === void 0 ? void 0 : _d.usingWindowScroll)
|
|
1164
1526
|
window.scrollTo(0, 0);
|
|
1165
1527
|
eventCenter.trigger('__taroRouterChange', {
|
|
1166
1528
|
toLocation: {
|
|
1167
|
-
path:
|
|
1529
|
+
path: currentPathname
|
|
1168
1530
|
}
|
|
1169
1531
|
});
|
|
1170
|
-
let element, params;
|
|
1532
|
+
let element, context, params;
|
|
1533
|
+
const routerPath = handler.router.forcePath || currentPathname;
|
|
1534
|
+
pageLock[routerPath] = typeof pageLock[routerPath] === 'number' ? pageLock[routerPath] + 1 : 1;
|
|
1535
|
+
const currentLock = pageLock[routerPath];
|
|
1536
|
+
let postLock;
|
|
1171
1537
|
try {
|
|
1172
|
-
const result = yield router.resolve(
|
|
1173
|
-
[element, , params] = yield Promise.all(result);
|
|
1538
|
+
const result = yield router.resolve(routerPath);
|
|
1539
|
+
[element, context, params] = yield Promise.all(result);
|
|
1540
|
+
postLock = pageLock[routerPath];
|
|
1174
1541
|
}
|
|
1175
1542
|
catch (error) {
|
|
1176
1543
|
if (error.status === 404) {
|
|
1177
1544
|
const notFoundEvent = {
|
|
1178
1545
|
isEntryPage: stacks.length === 0,
|
|
1179
|
-
path:
|
|
1546
|
+
path: currentPathname,
|
|
1180
1547
|
query: handler.getQuery(createStampId()),
|
|
1181
1548
|
};
|
|
1182
|
-
(
|
|
1549
|
+
(_e = app.onPageNotFound) === null || _e === void 0 ? void 0 : _e.call(app, notFoundEvent);
|
|
1183
1550
|
eventCenter.trigger('__taroRouterNotFound', notFoundEvent);
|
|
1184
1551
|
}
|
|
1185
1552
|
else if (/Loading hot update .* failed./.test(error.message)) {
|
|
@@ -1187,22 +1554,36 @@ function createRouter(app, config, framework) {
|
|
|
1187
1554
|
window.location.reload();
|
|
1188
1555
|
}
|
|
1189
1556
|
else {
|
|
1190
|
-
throw
|
|
1557
|
+
throw error;
|
|
1191
1558
|
}
|
|
1192
1559
|
}
|
|
1193
|
-
if (!element)
|
|
1560
|
+
if (!element || currentLock !== postLock)
|
|
1194
1561
|
return;
|
|
1195
|
-
|
|
1196
|
-
|
|
1562
|
+
// Note: 异步结束后，在设置 handler.pathname
|
|
1563
|
+
// context.pathname 在 universal-router 被处理过了，是发起资源请求的时候传入的 pathname，即 await router.resolve(routerPath) 这个 routerPath
|
|
1564
|
+
handler.pathname = context.pathname;
|
|
1565
|
+
const { pathname, pageConfig } = handler;
|
|
1566
|
+
let enablePullDownRefresh = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.enablePullDownRefresh) || false;
|
|
1567
|
+
let navigationStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationStyle) || 'default';
|
|
1568
|
+
let navigationBarTextStyle = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarTextStyle) || 'white';
|
|
1569
|
+
let navigationBarBackgroundColor = ((_j = config === null || config === void 0 ? void 0 : config.window) === null || _j === void 0 ? void 0 : _j.navigationBarBackgroundColor) || '#000000';
|
|
1197
1570
|
if (pageConfig) {
|
|
1198
|
-
setTitle((_f = pageConfig.navigationBarTitleText) !== null && _f !== void 0 ? _f : document.title);
|
|
1199
1571
|
if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
|
|
1200
1572
|
enablePullDownRefresh = pageConfig.enablePullDownRefresh;
|
|
1201
1573
|
}
|
|
1574
|
+
if (typeof pageConfig.navigationStyle === 'string') {
|
|
1575
|
+
navigationStyle = pageConfig.navigationStyle;
|
|
1576
|
+
}
|
|
1577
|
+
if (typeof pageConfig.navigationBarTextStyle === 'string') {
|
|
1578
|
+
navigationBarTextStyle = pageConfig.navigationBarTextStyle;
|
|
1579
|
+
}
|
|
1580
|
+
if (typeof pageConfig.navigationBarBackgroundColor === 'string') {
|
|
1581
|
+
navigationBarBackgroundColor = pageConfig.navigationBarBackgroundColor;
|
|
1582
|
+
}
|
|
1202
1583
|
}
|
|
1584
|
+
eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
|
|
1203
1585
|
const currentPage = Current.page;
|
|
1204
|
-
const
|
|
1205
|
-
const methodName = (_g = stacks.method) !== null && _g !== void 0 ? _g : '';
|
|
1586
|
+
const methodName = (_k = stacks.method) !== null && _k !== void 0 ? _k : '';
|
|
1206
1587
|
const cacheTabs = stacks.getTabs();
|
|
1207
1588
|
let shouldLoad = false;
|
|
1208
1589
|
stacks.method = '';
|
|
@@ -1217,10 +1598,11 @@ function createRouter(app, config, framework) {
|
|
|
1217
1598
|
}
|
|
1218
1599
|
shouldLoad = true;
|
|
1219
1600
|
}
|
|
1220
|
-
else if (currentPage && handler.isTabBar(
|
|
1601
|
+
else if (currentPage && handler.isTabBar(pathname)) {
|
|
1221
1602
|
if (handler.isSamePage(currentPage))
|
|
1222
1603
|
return;
|
|
1223
1604
|
if (handler.isTabBar(currentPage.path)) {
|
|
1605
|
+
// NOTE: 从 tabBar 页面切换到 tabBar 页面
|
|
1224
1606
|
handler.hide(currentPage);
|
|
1225
1607
|
stacks.pushTab(currentPage.path.split('?')[0]);
|
|
1226
1608
|
}
|
|
@@ -1234,8 +1616,8 @@ function createRouter(app, config, framework) {
|
|
|
1234
1616
|
handler.unload(currentPage, stacks.length, true);
|
|
1235
1617
|
}
|
|
1236
1618
|
}
|
|
1237
|
-
if (cacheTabs[
|
|
1238
|
-
stacks.popTab(
|
|
1619
|
+
if (cacheTabs[pathname]) {
|
|
1620
|
+
stacks.popTab(pathname);
|
|
1239
1621
|
return handler.show(stacks.getItem(0), pageConfig, 0);
|
|
1240
1622
|
}
|
|
1241
1623
|
shouldLoad = true;
|
|
@@ -1264,11 +1646,11 @@ function createRouter(app, config, framework) {
|
|
|
1264
1646
|
shouldLoad = true;
|
|
1265
1647
|
}
|
|
1266
1648
|
else if (action === 'PUSH') {
|
|
1267
|
-
handler.hide(currentPage);
|
|
1649
|
+
handler.hide(currentPage, true);
|
|
1268
1650
|
shouldLoad = true;
|
|
1269
1651
|
}
|
|
1270
1652
|
if (shouldLoad || stacks.length < 1) {
|
|
1271
|
-
const el = (
|
|
1653
|
+
const el = (_l = element.default) !== null && _l !== void 0 ? _l : element;
|
|
1272
1654
|
const loadConfig = Object.assign({}, pageConfig);
|
|
1273
1655
|
const stacksIndex = stacks.length;
|
|
1274
1656
|
delete loadConfig['path'];
|
|
@@ -1293,8 +1675,68 @@ function createRouter(app, config, framework) {
|
|
|
1293
1675
|
}
|
|
1294
1676
|
render({ location: history.location, action: Action.Push });
|
|
1295
1677
|
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
|
|
1678
|
+
window.addEventListener('visibilitychange', () => {
|
|
1679
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
1680
|
+
const currentPath = ((_a = Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
|
|
1681
|
+
const path = currentPath.substring(0, currentPath.indexOf('?'));
|
|
1682
|
+
const param = {};
|
|
1683
|
+
// app的 onShow/onHide 生命周期的路径信息为当前页面的路径
|
|
1684
|
+
Object.assign(param, launchParam, { path });
|
|
1685
|
+
if (document.visibilityState === 'visible') {
|
|
1686
|
+
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
|
|
1687
|
+
// 单页面app显示后一刻会触发当前 page.onShow 生命周期函数
|
|
1688
|
+
(_d = (_c = Current.page) === null || _c === void 0 ? void 0 : _c.onShow) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
1689
|
+
}
|
|
1690
|
+
else {
|
|
1691
|
+
// 单页面app隐藏前一刻会触发当前 page.onHide 生命周期函数
|
|
1692
|
+
if ((_e = Current.page) === null || _e === void 0 ? void 0 : _e.path) {
|
|
1693
|
+
safeExecute((_f = Current.page) === null || _f === void 0 ? void 0 : _f.path, 'onHide');
|
|
1694
|
+
}
|
|
1695
|
+
(_g = app.onHide) === null || _g === void 0 ? void 0 : _g.call(app, param);
|
|
1696
|
+
}
|
|
1697
|
+
});
|
|
1296
1698
|
return history.listen(render);
|
|
1297
1699
|
}
|
|
1298
1700
|
|
|
1299
|
-
|
|
1300
|
-
|
|
1701
|
+
function handleAppMount(config, _, appId = config.appId || 'app') {
|
|
1702
|
+
let app = document.getElementById(appId);
|
|
1703
|
+
let isPosition = true;
|
|
1704
|
+
if (!app) {
|
|
1705
|
+
app = document.createElement('div');
|
|
1706
|
+
app.id = appId;
|
|
1707
|
+
isPosition = false;
|
|
1708
|
+
}
|
|
1709
|
+
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
1710
|
+
app.classList.add('taro_router');
|
|
1711
|
+
if (!isPosition)
|
|
1712
|
+
appWrapper.appendChild(app);
|
|
1713
|
+
initNavigationBar(config, appWrapper);
|
|
1714
|
+
}
|
|
1715
|
+
function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
|
|
1716
|
+
let app = document.getElementById(appId);
|
|
1717
|
+
let isPosition = true;
|
|
1718
|
+
if (!app) {
|
|
1719
|
+
app = document.createElement('div');
|
|
1720
|
+
app.id = appId;
|
|
1721
|
+
isPosition = false;
|
|
1722
|
+
}
|
|
1723
|
+
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
1724
|
+
app.classList.add('taro_router');
|
|
1725
|
+
const container = document.createElement('div');
|
|
1726
|
+
container.classList.add('taro-tabbar__container');
|
|
1727
|
+
container.id = 'container';
|
|
1728
|
+
const panel = document.createElement('div');
|
|
1729
|
+
panel.classList.add('taro-tabbar__panel');
|
|
1730
|
+
panel.appendChild(app.cloneNode(true));
|
|
1731
|
+
container.appendChild(panel);
|
|
1732
|
+
if (!isPosition) {
|
|
1733
|
+
appWrapper.appendChild(container);
|
|
1734
|
+
}
|
|
1735
|
+
else {
|
|
1736
|
+
appWrapper.replaceChild(container, app);
|
|
1737
|
+
}
|
|
1738
|
+
initTabbar(config, history);
|
|
1739
|
+
initNavigationBar(config, container);
|
|
1740
|
+
}
|
|
1741
|
+
|
|
1742
|
+
export { createMpaHistory, createMultiRouter, createRouter, getCurrentPages, handleAppMount, handleAppMountWithTabbar, history, isDingTalk, isWeixin, navigateBack, navigateTo, prependBasename, reLaunch, redirectTo, routesAlias, setHistory, setHistoryMode, setMpaTitle, setNavigationBarLoading, setNavigationBarStyle, setTitle, switchTab };
|