@tarojs/router 4.0.0-alpha.2 → 4.0.0-alpha.21
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 +8 -8
- package/dist/api.d.ts +6 -7
- package/dist/api.js +10 -17
- package/dist/events/resize.d.ts +2 -3
- package/dist/events/scroll.d.ts +2 -3
- package/dist/history.d.ts +10 -8
- package/dist/history.js +2 -1
- package/dist/index.cjs.js +363 -226
- package/dist/index.d.ts +9 -10
- package/dist/index.esm.js +362 -226
- package/dist/index.js +3 -3
- package/dist/navigationBar.d.ts +2 -2
- package/dist/navigationBar.js +24 -7
- package/dist/router/index.d.ts +3 -4
- package/dist/router/index.js +3 -2
- package/dist/router/mpa.d.ts +4 -5
- package/dist/router/mpa.js +12 -7
- package/dist/router/multi-page.d.ts +7 -8
- package/dist/router/navigation-bar.d.ts +8 -4
- package/dist/router/navigation-bar.js +62 -19
- package/dist/router/page.d.ts +11 -10
- package/dist/router/page.js +26 -14
- package/dist/router/spa.d.ts +4 -5
- package/dist/router/spa.js +51 -27
- package/dist/router/stack.d.ts +2 -2
- package/dist/style.d.ts +4 -5
- package/dist/style.js +52 -13
- package/dist/tabbar.d.ts +2 -3
- package/dist/utils/index.d.ts +2 -3
- package/dist/utils/navigate.d.ts +6 -6
- package/dist/utils/navigate.js +5 -2
- package/package.json +18 -27
- package/types/api.d.ts +5 -0
- package/dist/index.cjs.d.ts +0 -65
- package/dist/index.esm.d.ts +0 -65
package/dist/index.cjs.js
CHANGED
|
@@ -4,10 +4,181 @@ var components = require('@tarojs/components/dist/components');
|
|
|
4
4
|
var taro = require('@tarojs/taro');
|
|
5
5
|
var tslib = require('tslib');
|
|
6
6
|
var runtime = require('@tarojs/runtime');
|
|
7
|
+
var shared = require('@tarojs/shared');
|
|
7
8
|
var history = require('history');
|
|
8
9
|
var queryString = require('query-string');
|
|
9
10
|
var UniversalRouter = require('universal-router');
|
|
10
11
|
|
|
12
|
+
/**
|
|
13
|
+
* 插入页面动画需要的样式
|
|
14
|
+
*/
|
|
15
|
+
function loadAnimateStyle(ms = 300) {
|
|
16
|
+
const css = `
|
|
17
|
+
body {
|
|
18
|
+
/* 防止 iOS 页面滚动 */
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
}
|
|
21
|
+
.taro_router > .taro_page {
|
|
22
|
+
position: absolute;
|
|
23
|
+
left: 0;
|
|
24
|
+
top: 0;
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
background-color: #fff;
|
|
28
|
+
transform: translate(100%, 0);
|
|
29
|
+
transition: transform ${ms}ms;
|
|
30
|
+
z-index: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.taro_router > .taro_page.taro_tabbar_page,
|
|
34
|
+
.taro_router > .taro_page.taro_page_show.taro_page_stationed {
|
|
35
|
+
transform: none;
|
|
36
|
+
transition: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.taro_router > .taro_page.taro_page_show {
|
|
40
|
+
transform: translate(0, 0);
|
|
41
|
+
}
|
|
42
|
+
`;
|
|
43
|
+
addStyle(css);
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* 插入路由相关样式
|
|
47
|
+
*/
|
|
48
|
+
function loadRouterStyle(enableTabBar, enableWindowScroll) {
|
|
49
|
+
const css = `
|
|
50
|
+
.taro_router {
|
|
51
|
+
position: relative;
|
|
52
|
+
width: 100%;
|
|
53
|
+
height: 100%;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.taro_page {
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: 100%;
|
|
59
|
+
${enableWindowScroll ? '' : `
|
|
60
|
+
overflow-x: hidden;
|
|
61
|
+
overflow-y: scroll;
|
|
62
|
+
max-height: 100vh;
|
|
63
|
+
`}
|
|
64
|
+
}
|
|
65
|
+
${enableTabBar ? `
|
|
66
|
+
.taro-tabbar__container > .taro-tabbar__panel {
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
|
|
71
|
+
max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
|
|
72
|
+
max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
` : ''}
|
|
76
|
+
.taro_page_shade:has(+.taro_page_stationed),
|
|
77
|
+
.taro_page_shade.taro_tabbar_page,
|
|
78
|
+
.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child):has(+.taro_page_stationed) {
|
|
79
|
+
display: none;
|
|
80
|
+
}
|
|
81
|
+
`;
|
|
82
|
+
addStyle(css);
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* 插入导航栏相关的样式
|
|
86
|
+
*/
|
|
87
|
+
function loadNavigationBarStyle() {
|
|
88
|
+
const css = `
|
|
89
|
+
.taro-navigation-bar-show {
|
|
90
|
+
display: flex;
|
|
91
|
+
background: white;
|
|
92
|
+
position: sticky;
|
|
93
|
+
z-index: 500;
|
|
94
|
+
top: 0;
|
|
95
|
+
padding-bottom: 8px;
|
|
96
|
+
padding-top: calc(env(safe-area-inset-top) + 8px);
|
|
97
|
+
justify-content: center;
|
|
98
|
+
align-items: center;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.taro-navigation-bar-hide {
|
|
102
|
+
display: none;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.taro-navigation-bar-title-wrap {
|
|
106
|
+
display: flex;
|
|
107
|
+
height: 24px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.taro-navigation-bar-title-wrap > .taro-navigation-bar-loading {
|
|
111
|
+
display: none;
|
|
112
|
+
animation: loading 2s linear infinite;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.taro-navigation-bar-title-wrap .taro-navigation-bar-loading.taro-navigation-bar-loading-show {
|
|
116
|
+
display: flex;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.taro-navigation-bar-title-wrap > .taro-navigation-bar-title {
|
|
120
|
+
font-size: 24px;
|
|
121
|
+
height: 24px;
|
|
122
|
+
line-height: 24px;
|
|
123
|
+
max-width: 100px;
|
|
124
|
+
white-space: nowrap;
|
|
125
|
+
overflow: hidden;
|
|
126
|
+
line-height: 24px;
|
|
127
|
+
text-overflow: ellipsis;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
@keyframes loading {
|
|
131
|
+
from {
|
|
132
|
+
transform: rotate(0deg);
|
|
133
|
+
}
|
|
134
|
+
to {
|
|
135
|
+
transform: rotate(360deg);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
@keyframes loading {
|
|
140
|
+
from {
|
|
141
|
+
transform: rotate(0deg);
|
|
142
|
+
}
|
|
143
|
+
to {
|
|
144
|
+
transform: rotate(360deg);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.taro-navigation-bar-no-icon > .taro-navigation-bar-home {
|
|
149
|
+
display: none;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.taro-navigation-bar-no-icon > .taro-navigation-bar-back {
|
|
153
|
+
display: none;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.taro-navigation-bar-home-icon > .taro-navigation-bar-home {
|
|
157
|
+
display: flex;
|
|
158
|
+
left: 8px;
|
|
159
|
+
position: absolute;
|
|
160
|
+
width: 24px;
|
|
161
|
+
height: 24px;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.taro-navigation-bar-back-icon > .taro-navigation-bar-back {
|
|
165
|
+
display: flex;
|
|
166
|
+
left: 8px;
|
|
167
|
+
position: absolute;
|
|
168
|
+
width: 24px;
|
|
169
|
+
height: 24px;
|
|
170
|
+
}
|
|
171
|
+
`;
|
|
172
|
+
addStyle(css);
|
|
173
|
+
}
|
|
174
|
+
function addStyle(css) {
|
|
175
|
+
if (!css)
|
|
176
|
+
return;
|
|
177
|
+
const style = document.createElement('style');
|
|
178
|
+
style.innerHTML = css;
|
|
179
|
+
document.getElementsByTagName('head')[0].appendChild(style);
|
|
180
|
+
}
|
|
181
|
+
|
|
11
182
|
const home_svg_str = `
|
|
12
183
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
13
184
|
<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"/>
|
|
@@ -17,21 +188,36 @@ const back_svg_str = `
|
|
|
17
188
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
18
189
|
<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
190
|
</svg>
|
|
20
|
-
|
|
21
191
|
`;
|
|
22
|
-
|
|
23
|
-
|
|
192
|
+
const loading_svg_str = `
|
|
193
|
+
<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>
|
|
194
|
+
`;
|
|
195
|
+
function initNavigationBar(config, container) {
|
|
196
|
+
if (config.router.mode === 'multi')
|
|
197
|
+
return;
|
|
198
|
+
const navigationBar = document.createElement('div');
|
|
24
199
|
navigationBar.classList.add('taro-navigation-bar-no-icon');
|
|
25
|
-
const navigationBarBackBtn = document.createElement('
|
|
26
|
-
|
|
200
|
+
const navigationBarBackBtn = document.createElement('div');
|
|
201
|
+
navigationBarBackBtn.classList.add('taro-navigation-bar-back');
|
|
202
|
+
const navigationBarHomeBtn = document.createElement('div');
|
|
203
|
+
navigationBarHomeBtn.classList.add('taro-navigation-bar-home');
|
|
27
204
|
navigationBarBackBtn.innerHTML = back_svg_str;
|
|
28
205
|
navigationBarHomeBtn.innerHTML = home_svg_str;
|
|
29
|
-
const
|
|
206
|
+
const navigationBarTitleWrap = document.createElement('div');
|
|
207
|
+
navigationBarTitleWrap.classList.add('taro-navigation-bar-title-wrap');
|
|
208
|
+
const navigationBarLoading = document.createElement('div');
|
|
209
|
+
navigationBarLoading.classList.add('taro-navigation-bar-loading');
|
|
210
|
+
navigationBarLoading.innerHTML = loading_svg_str;
|
|
211
|
+
const navigationBarTitle = document.createElement('div');
|
|
212
|
+
navigationBarTitle.classList.add('taro-navigation-bar-title');
|
|
213
|
+
navigationBarTitleWrap.appendChild(navigationBarLoading);
|
|
214
|
+
navigationBarTitleWrap.appendChild(navigationBarTitle);
|
|
30
215
|
navigationBar.appendChild(navigationBarHomeBtn);
|
|
31
216
|
navigationBar.appendChild(navigationBarBackBtn);
|
|
32
|
-
navigationBar.appendChild(
|
|
217
|
+
navigationBar.appendChild(navigationBarTitleWrap);
|
|
33
218
|
navigationBar.id = 'taro-navigation-bar';
|
|
34
219
|
container.prepend(navigationBar);
|
|
220
|
+
loadNavigationBarStyle();
|
|
35
221
|
}
|
|
36
222
|
|
|
37
223
|
function initTabbar(config, history) {
|
|
@@ -79,8 +265,9 @@ class RouterConfig {
|
|
|
79
265
|
return this.router.mode || 'hash';
|
|
80
266
|
}
|
|
81
267
|
static get customRoutes() { return this.router.customRoutes || {}; }
|
|
268
|
+
// 这个方法不考虑 basename 和 customRoutes，只判断原始的 url 是否在 pages 中
|
|
82
269
|
static isPage(url = '') {
|
|
83
|
-
return this.pages.findIndex(e =>
|
|
270
|
+
return this.pages.findIndex(e => runtime.addLeadingSlash(e) === url) !== -1;
|
|
84
271
|
}
|
|
85
272
|
}
|
|
86
273
|
|
|
@@ -107,7 +294,7 @@ class MpaHistory {
|
|
|
107
294
|
}
|
|
108
295
|
parseUrl(to) {
|
|
109
296
|
let url = to.pathname || '';
|
|
110
|
-
if (RouterConfig.isPage(url)) {
|
|
297
|
+
if (RouterConfig.isPage(runtime.addLeadingSlash(url))) {
|
|
111
298
|
url += '.html';
|
|
112
299
|
}
|
|
113
300
|
if (to.search) {
|
|
@@ -290,11 +477,14 @@ function setMpaTitle(title) {
|
|
|
290
477
|
}
|
|
291
478
|
}
|
|
292
479
|
function setTitle(title) {
|
|
293
|
-
runtime.eventCenter.trigger('
|
|
480
|
+
runtime.eventCenter.trigger('__taroH5SetNavigationBarTitle', title);
|
|
294
481
|
}
|
|
295
482
|
function setNavigationBarStyle(option) {
|
|
296
483
|
runtime.eventCenter.trigger('__taroH5setNavigationBarColor', option);
|
|
297
484
|
}
|
|
485
|
+
function setNavigationBarLoading(loading) {
|
|
486
|
+
runtime.eventCenter.trigger('__taroH5setNavigationBarLoading', loading);
|
|
487
|
+
}
|
|
298
488
|
|
|
299
489
|
class RoutesAlias {
|
|
300
490
|
constructor() {
|
|
@@ -337,6 +527,7 @@ class RoutesAlias {
|
|
|
337
527
|
}
|
|
338
528
|
const routesAlias = new RoutesAlias();
|
|
339
529
|
|
|
530
|
+
const routeEvtChannel = shared.EventChannel.routeChannel;
|
|
340
531
|
function processNavigateUrl(option) {
|
|
341
532
|
var _a;
|
|
342
533
|
const pathPieces = history.parsePath(option.url);
|
|
@@ -345,13 +536,14 @@ function processNavigateUrl(option) {
|
|
|
345
536
|
const parts = routesAlias.getOrigin(exports.history.location.pathname).split('/');
|
|
346
537
|
parts.pop();
|
|
347
538
|
pathPieces.pathname.split('/').forEach((item) => {
|
|
348
|
-
if (item === '.')
|
|
539
|
+
if (item === '.')
|
|
349
540
|
return;
|
|
350
|
-
}
|
|
351
541
|
item === '..' ? parts.pop() : parts.push(item);
|
|
352
542
|
});
|
|
353
543
|
pathPieces.pathname = parts.join('/');
|
|
354
544
|
}
|
|
545
|
+
// 确保是 / 开头的路径
|
|
546
|
+
pathPieces.pathname = runtime.addLeadingSlash(pathPieces.pathname);
|
|
355
547
|
// 处理自定义路由
|
|
356
548
|
pathPieces.pathname = routesAlias.getAlias(runtime.addLeadingSlash(pathPieces.pathname));
|
|
357
549
|
// 处理 basename
|
|
@@ -368,6 +560,10 @@ function navigate(option, method) {
|
|
|
368
560
|
const { success, complete, fail } = option;
|
|
369
561
|
const unListen = exports.history.listen(() => {
|
|
370
562
|
const res = { errMsg: `${method}:ok` };
|
|
563
|
+
if (method === 'navigateTo') {
|
|
564
|
+
res.eventChannel = routeEvtChannel;
|
|
565
|
+
routeEvtChannel.addEvents(option.events);
|
|
566
|
+
}
|
|
371
567
|
success === null || success === void 0 ? void 0 : success(res);
|
|
372
568
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
373
569
|
resolve(res);
|
|
@@ -377,22 +573,8 @@ function navigate(option, method) {
|
|
|
377
573
|
if ('url' in option) {
|
|
378
574
|
const pathPieces = processNavigateUrl(option);
|
|
379
575
|
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
|
-
}
|
|
395
576
|
if (method === 'navigateTo') {
|
|
577
|
+
// Note: 由于 spa 会针对弱网情况下，短时间内多次跳转同一个页面跳转加了锁，后续如果有用户反馈返回无效，那可能是这个问题
|
|
396
578
|
exports.history.push(pathPieces, state);
|
|
397
579
|
}
|
|
398
580
|
else if (method === 'redirectTo' || method === 'switchTab') {
|
|
@@ -507,137 +689,6 @@ function getOffset() {
|
|
|
507
689
|
}
|
|
508
690
|
}
|
|
509
691
|
|
|
510
|
-
/**
|
|
511
|
-
* 插入页面动画需要的样式
|
|
512
|
-
*/
|
|
513
|
-
function loadAnimateStyle(ms = 300) {
|
|
514
|
-
const css = `
|
|
515
|
-
body {
|
|
516
|
-
overflow: hidden; // 防止 iOS 页面滚动
|
|
517
|
-
}
|
|
518
|
-
.taro_router > .taro_page {
|
|
519
|
-
position: absolute;
|
|
520
|
-
left: 0;
|
|
521
|
-
top: 0;
|
|
522
|
-
width: 100%;
|
|
523
|
-
height: 100%;
|
|
524
|
-
background-color: #fff;
|
|
525
|
-
transform: translate(100%, 0);
|
|
526
|
-
transition: transform ${ms}ms;
|
|
527
|
-
z-index: 0;
|
|
528
|
-
}
|
|
529
|
-
|
|
530
|
-
.taro_router > .taro_page.taro_tabbar_page,
|
|
531
|
-
.taro_router > .taro_page.taro_page_show.taro_page_stationed {
|
|
532
|
-
transform: none;
|
|
533
|
-
}
|
|
534
|
-
|
|
535
|
-
.taro_router > .taro_page.taro_page_show {
|
|
536
|
-
transform: translate(0, 0);
|
|
537
|
-
}
|
|
538
|
-
`;
|
|
539
|
-
addStyle(css);
|
|
540
|
-
}
|
|
541
|
-
/**
|
|
542
|
-
* 插入路由相关样式
|
|
543
|
-
*/
|
|
544
|
-
function loadRouterStyle(enableTabBar, enableWindowScroll) {
|
|
545
|
-
const css = `
|
|
546
|
-
.taro_router {
|
|
547
|
-
position: relative;
|
|
548
|
-
width: 100%;
|
|
549
|
-
height: 100%;
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
-
.taro_page {
|
|
553
|
-
width: 100%;
|
|
554
|
-
height: 100%;
|
|
555
|
-
${enableWindowScroll ? '' : `
|
|
556
|
-
overflow-x: hidden;
|
|
557
|
-
overflow-y: scroll;
|
|
558
|
-
max-height: 100vh;
|
|
559
|
-
`}
|
|
560
|
-
}
|
|
561
|
-
${enableTabBar ? `
|
|
562
|
-
.taro-tabbar__container > .taro-tabbar__panel {
|
|
563
|
-
overflow: hidden;
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
.taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
|
|
567
|
-
max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
|
|
568
|
-
max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
` : ''}
|
|
572
|
-
.taro_page_shade,
|
|
573
|
-
.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
|
|
574
|
-
display: none;
|
|
575
|
-
}
|
|
576
|
-
`;
|
|
577
|
-
addStyle(css);
|
|
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
|
-
}
|
|
633
|
-
function addStyle(css) {
|
|
634
|
-
if (!css)
|
|
635
|
-
return;
|
|
636
|
-
const style = document.createElement('style');
|
|
637
|
-
style.innerHTML = css;
|
|
638
|
-
document.getElementsByTagName('head')[0].appendChild(style);
|
|
639
|
-
}
|
|
640
|
-
|
|
641
692
|
/* eslint-disable dot-notation */
|
|
642
693
|
class MultiPageHandler {
|
|
643
694
|
constructor(config, history) {
|
|
@@ -793,16 +844,16 @@ const launchStampId$1 = createStampId$1();
|
|
|
793
844
|
* - 不支持路由动画
|
|
794
845
|
*/
|
|
795
846
|
function createMultiRouter(history, app, config, framework) {
|
|
796
|
-
var _a, _b, _c, _d, _e, _f;
|
|
797
847
|
return tslib.__awaiter(this, void 0, void 0, function* () {
|
|
848
|
+
var _a, _b, _c, _d, _e, _f;
|
|
798
849
|
if (typeof app.onUnhandledRejection === 'function') {
|
|
799
850
|
window.addEventListener('unhandledrejection', app.onUnhandledRejection);
|
|
800
851
|
}
|
|
801
|
-
runtime.eventCenter.on('
|
|
852
|
+
runtime.eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle);
|
|
802
853
|
RouterConfig.config = config;
|
|
803
854
|
const handler = new MultiPageHandler(config, history);
|
|
804
855
|
const launchParam = {
|
|
805
|
-
path: config.pageName,
|
|
856
|
+
path: config.pageName, // 多页面模式没新开一个页面相当于重启，所以直接使用当前页面路径
|
|
806
857
|
query: handler.getQuery(launchStampId$1),
|
|
807
858
|
scene: 0,
|
|
808
859
|
shareTicket: '',
|
|
@@ -845,12 +896,17 @@ function createMultiRouter(history, app, config, framework) {
|
|
|
845
896
|
handler.load(page, pageConfig);
|
|
846
897
|
(_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
|
|
847
898
|
window.addEventListener('visibilitychange', () => {
|
|
848
|
-
var _a, _b;
|
|
899
|
+
var _a, _b, _c;
|
|
900
|
+
const currentPath = ((_a = runtime.Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
|
|
901
|
+
const path = currentPath.substring(0, currentPath.indexOf('?'));
|
|
902
|
+
const param = {};
|
|
903
|
+
// app的 onShow/onHide 生命周期的路径信息为当前页面的路径
|
|
904
|
+
Object.assign(param, launchParam, { path });
|
|
849
905
|
if (document.visibilityState === 'visible') {
|
|
850
|
-
(
|
|
906
|
+
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
|
|
851
907
|
}
|
|
852
908
|
else {
|
|
853
|
-
(
|
|
909
|
+
(_c = app.onHide) === null || _c === void 0 ? void 0 : _c.call(app, param);
|
|
854
910
|
}
|
|
855
911
|
});
|
|
856
912
|
});
|
|
@@ -862,10 +918,12 @@ class NavigationBarHandler {
|
|
|
862
918
|
this.cache = {};
|
|
863
919
|
this.pageContext = pageContext;
|
|
864
920
|
this.init();
|
|
865
|
-
|
|
866
|
-
runtime.eventCenter.on('__taroH5SetNavigationTitle', (title) => {
|
|
921
|
+
runtime.eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
|
|
867
922
|
this.setTitle(title);
|
|
868
923
|
});
|
|
924
|
+
runtime.eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
|
|
925
|
+
this.setNavigationLoading(loading);
|
|
926
|
+
});
|
|
869
927
|
runtime.eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
|
|
870
928
|
if (typeof backgroundColor === 'string')
|
|
871
929
|
this.setNavigationBarBackground(backgroundColor);
|
|
@@ -874,7 +932,7 @@ class NavigationBarHandler {
|
|
|
874
932
|
});
|
|
875
933
|
}
|
|
876
934
|
toHomeFn() {
|
|
877
|
-
reLaunch({ url: this.pageContext.
|
|
935
|
+
reLaunch({ url: this.pageContext.originHomePage });
|
|
878
936
|
}
|
|
879
937
|
backFn() {
|
|
880
938
|
navigateBack();
|
|
@@ -883,19 +941,24 @@ class NavigationBarHandler {
|
|
|
883
941
|
var _a;
|
|
884
942
|
if (!this.navigationBarElement)
|
|
885
943
|
return null;
|
|
886
|
-
return (_a = this.navigationBarElement.
|
|
944
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-home')) === null || _a === void 0 ? void 0 : _a[0];
|
|
887
945
|
}
|
|
888
946
|
get backBtnElement() {
|
|
889
947
|
var _a;
|
|
890
948
|
if (!this.navigationBarElement)
|
|
891
949
|
return null;
|
|
892
|
-
return (_a = this.navigationBarElement.
|
|
950
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-back')) === null || _a === void 0 ? void 0 : _a[0];
|
|
893
951
|
}
|
|
894
952
|
get titleElement() {
|
|
895
953
|
var _a;
|
|
896
954
|
if (!this.navigationBarElement)
|
|
897
955
|
return null;
|
|
898
|
-
return (_a = this.navigationBarElement.
|
|
956
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-title')) === null || _a === void 0 ? void 0 : _a[0];
|
|
957
|
+
}
|
|
958
|
+
get loadingElement() {
|
|
959
|
+
if (!this.navigationBarElement)
|
|
960
|
+
return null;
|
|
961
|
+
return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-loading')[0];
|
|
899
962
|
}
|
|
900
963
|
init() {
|
|
901
964
|
var _a, _b;
|
|
@@ -906,8 +969,7 @@ class NavigationBarHandler {
|
|
|
906
969
|
(_b = this.backBtnElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.backFn.bind(this));
|
|
907
970
|
}
|
|
908
971
|
setNavigationBarElement() {
|
|
909
|
-
|
|
910
|
-
this.navigationBarElement = (_a = document.getElementsByTagName('taro-navigation-bar-wrap')) === null || _a === void 0 ? void 0 : _a[0];
|
|
972
|
+
this.navigationBarElement = document.getElementById('taro-navigation-bar');
|
|
911
973
|
}
|
|
912
974
|
load() {
|
|
913
975
|
this.setCacheValue();
|
|
@@ -916,9 +978,10 @@ class NavigationBarHandler {
|
|
|
916
978
|
this.setFnBtnState();
|
|
917
979
|
this.setNavigationBarBackground();
|
|
918
980
|
this.setNavigationBarTextStyle();
|
|
981
|
+
this.setNavigationLoading();
|
|
919
982
|
}
|
|
920
983
|
setCacheValue() {
|
|
921
|
-
const currentPage = this.pageContext.
|
|
984
|
+
const currentPage = this.pageContext.originPathname;
|
|
922
985
|
if (typeof this.cache[currentPage] !== 'object') {
|
|
923
986
|
this.cache[currentPage] = {};
|
|
924
987
|
}
|
|
@@ -935,11 +998,46 @@ class NavigationBarHandler {
|
|
|
935
998
|
this.fnBtnToggleToHome();
|
|
936
999
|
}
|
|
937
1000
|
}
|
|
1001
|
+
shiftLoadingState(show) {
|
|
1002
|
+
if (!this.loadingElement)
|
|
1003
|
+
return;
|
|
1004
|
+
if (show) {
|
|
1005
|
+
this.loadingElement.classList.add('taro-navigation-bar-loading-show');
|
|
1006
|
+
}
|
|
1007
|
+
else {
|
|
1008
|
+
this.loadingElement.classList.remove('taro-navigation-bar-loading-show');
|
|
1009
|
+
}
|
|
1010
|
+
}
|
|
1011
|
+
setNavigationLoading(show) {
|
|
1012
|
+
var _a;
|
|
1013
|
+
if (!this.navigationBarElement)
|
|
1014
|
+
return;
|
|
1015
|
+
const currentPage = this.pageContext.originPathname;
|
|
1016
|
+
let isShow;
|
|
1017
|
+
if (typeof show === 'boolean') {
|
|
1018
|
+
isShow = show;
|
|
1019
|
+
this.cache[currentPage] &&
|
|
1020
|
+
(this.cache[currentPage].loading = isShow);
|
|
1021
|
+
}
|
|
1022
|
+
else {
|
|
1023
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.loading;
|
|
1024
|
+
if (typeof cacheValue === 'boolean') {
|
|
1025
|
+
isShow = cacheValue;
|
|
1026
|
+
}
|
|
1027
|
+
else {
|
|
1028
|
+
// 默认值为 false
|
|
1029
|
+
isShow = false;
|
|
1030
|
+
this.cache[currentPage] &&
|
|
1031
|
+
(this.cache[currentPage].loading = isShow);
|
|
1032
|
+
}
|
|
1033
|
+
}
|
|
1034
|
+
this.shiftLoadingState(isShow);
|
|
1035
|
+
}
|
|
938
1036
|
setNavigationBarBackground(backgroundColor) {
|
|
939
1037
|
var _a, _b, _c;
|
|
940
1038
|
if (!this.navigationBarElement)
|
|
941
1039
|
return;
|
|
942
|
-
const currentPage = this.pageContext.
|
|
1040
|
+
const currentPage = this.pageContext.originPathname;
|
|
943
1041
|
let color;
|
|
944
1042
|
if (typeof backgroundColor === 'string') {
|
|
945
1043
|
color = backgroundColor;
|
|
@@ -963,7 +1061,7 @@ class NavigationBarHandler {
|
|
|
963
1061
|
var _a, _b, _c;
|
|
964
1062
|
if (!this.navigationBarElement)
|
|
965
1063
|
return;
|
|
966
|
-
const currentPage = this.pageContext.
|
|
1064
|
+
const currentPage = this.pageContext.originPathname;
|
|
967
1065
|
let color;
|
|
968
1066
|
if (typeof fontColor === 'string') {
|
|
969
1067
|
color = fontColor;
|
|
@@ -985,7 +1083,7 @@ class NavigationBarHandler {
|
|
|
985
1083
|
}
|
|
986
1084
|
setTitle(title) {
|
|
987
1085
|
var _a, _b, _c;
|
|
988
|
-
const currentPage = this.pageContext.
|
|
1086
|
+
const currentPage = this.pageContext.originPathname;
|
|
989
1087
|
let proceedTitle;
|
|
990
1088
|
if (typeof title === 'string') {
|
|
991
1089
|
proceedTitle = title;
|
|
@@ -1019,23 +1117,25 @@ class NavigationBarHandler {
|
|
|
1019
1117
|
fnBtnToggleToHome() {
|
|
1020
1118
|
if (!this.navigationBarElement)
|
|
1021
1119
|
return;
|
|
1022
|
-
this.navigationBarElement.classList.add('taro-navigation-bar-home');
|
|
1023
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-back');
|
|
1120
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-home-icon');
|
|
1121
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
|
|
1024
1122
|
}
|
|
1025
1123
|
fnBtnToggleToBack() {
|
|
1026
1124
|
if (!this.navigationBarElement)
|
|
1027
1125
|
return;
|
|
1028
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-home');
|
|
1029
|
-
this.navigationBarElement.classList.add('taro-navigation-bar-back');
|
|
1126
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
|
|
1127
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-back-icon');
|
|
1030
1128
|
}
|
|
1031
1129
|
fnBtnToggleToNone() {
|
|
1032
1130
|
if (!this.navigationBarElement)
|
|
1033
1131
|
return;
|
|
1034
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-home');
|
|
1035
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-back');
|
|
1132
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
|
|
1133
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
|
|
1036
1134
|
}
|
|
1037
1135
|
setNavigationBarVisible(show) {
|
|
1038
1136
|
var _a, _b;
|
|
1137
|
+
if (!this.navigationBarElement)
|
|
1138
|
+
return;
|
|
1039
1139
|
let shouldShow;
|
|
1040
1140
|
if (typeof show === 'boolean') {
|
|
1041
1141
|
shouldShow = show;
|
|
@@ -1064,6 +1164,7 @@ class PageHandler {
|
|
|
1064
1164
|
this.defaultAnimation = { duration: 300, delay: 50 };
|
|
1065
1165
|
this.config = config;
|
|
1066
1166
|
this.homePage = runtime.getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
|
|
1167
|
+
this.originHomePage = this.config.entryPagePath || this.routes[0].path || this.basename;
|
|
1067
1168
|
this.mount();
|
|
1068
1169
|
this.navigationBarHandler = new NavigationBarHandler(this);
|
|
1069
1170
|
}
|
|
@@ -1097,14 +1198,14 @@ class PageHandler {
|
|
|
1097
1198
|
}
|
|
1098
1199
|
set pathname(p) { this.router.pathname = p; }
|
|
1099
1200
|
get pathname() { return this.router.pathname; }
|
|
1201
|
+
// Note: 把 pathname 转换为原始路径，主要是处理 customRoutes 和 basename
|
|
1202
|
+
get originPathname() { return routesAlias.getOrigin(runtime.addLeadingSlash(runtime.stripBasename(this.pathname, this.basename))); }
|
|
1100
1203
|
get basename() { return this.router.basename || ''; }
|
|
1101
1204
|
get pageConfig() {
|
|
1102
|
-
const routePath = runtime.addLeadingSlash(runtime.stripBasename(this.pathname, this.basename));
|
|
1103
1205
|
const homePage = runtime.addLeadingSlash(this.homePage);
|
|
1104
1206
|
return this.routes.find(r => {
|
|
1105
|
-
var _a;
|
|
1106
1207
|
const pagePath = runtime.addLeadingSlash(r.path);
|
|
1107
|
-
return [pagePath, homePage].includes(
|
|
1208
|
+
return [pagePath, homePage].includes(this.originPathname);
|
|
1108
1209
|
});
|
|
1109
1210
|
}
|
|
1110
1211
|
isTabBar(pathname) {
|
|
@@ -1294,24 +1395,35 @@ class PageHandler {
|
|
|
1294
1395
|
});
|
|
1295
1396
|
}
|
|
1296
1397
|
}
|
|
1297
|
-
hide(page) {
|
|
1298
|
-
var _a;
|
|
1398
|
+
hide(page, animation = false) {
|
|
1399
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
1299
1400
|
if (!page)
|
|
1300
1401
|
return;
|
|
1301
1402
|
// NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
|
|
1302
1403
|
const pageEl = this.getPageContainer(page);
|
|
1303
1404
|
if (pageEl) {
|
|
1304
|
-
if (
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1405
|
+
if (animation) {
|
|
1406
|
+
if (this.hideTimer) {
|
|
1407
|
+
clearTimeout(this.hideTimer);
|
|
1408
|
+
this.hideTimer = null;
|
|
1409
|
+
(_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');
|
|
1410
|
+
}
|
|
1411
|
+
this.lastHidePage = pageEl;
|
|
1412
|
+
this.hideTimer = setTimeout(() => {
|
|
1413
|
+
this.hideTimer = null;
|
|
1414
|
+
pageEl.classList.add('taro_page_shade');
|
|
1415
|
+
}, this.animationDuration + this.animationDelay);
|
|
1416
|
+
(_d = page.onHide) === null || _d === void 0 ? void 0 : _d.call(page);
|
|
1308
1417
|
}
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1418
|
+
else {
|
|
1419
|
+
if (this.hideTimer) {
|
|
1420
|
+
clearTimeout(this.hideTimer);
|
|
1421
|
+
this.hideTimer = null;
|
|
1422
|
+
(_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');
|
|
1423
|
+
}
|
|
1312
1424
|
pageEl.classList.add('taro_page_shade');
|
|
1313
|
-
|
|
1314
|
-
|
|
1425
|
+
this.lastHidePage = pageEl;
|
|
1426
|
+
}
|
|
1315
1427
|
}
|
|
1316
1428
|
else {
|
|
1317
1429
|
setTimeout(() => this.hide(page), 0);
|
|
@@ -1382,6 +1494,10 @@ function createRouter(history$1, app, config, framework) {
|
|
|
1382
1494
|
}
|
|
1383
1495
|
RouterConfig.config = config;
|
|
1384
1496
|
const handler = new PageHandler(config, history$1);
|
|
1497
|
+
// Note: 弱网情况下，快速切换 tab，会造成同个页面实例被多次挂在到页面上，原因是资源请求是异步的，短时间内发起多个请求，
|
|
1498
|
+
// 会在资源加载完成后，同时走到挂载的逻辑，造成 pageStampId 更新不及时，两个 page 的Id 相同，后面很多操作是通过 getElementById 来进行的
|
|
1499
|
+
// 所以需要加一个锁来应对这个情况
|
|
1500
|
+
const pageLock = {};
|
|
1385
1501
|
routesAlias.set(handler.router.customRoutes);
|
|
1386
1502
|
const basename = handler.router.basename;
|
|
1387
1503
|
const routes = handler.routes.map(route => {
|
|
@@ -1403,29 +1519,35 @@ function createRouter(history$1, app, config, framework) {
|
|
|
1403
1519
|
runtime.eventCenter.trigger('__taroRouterLaunch', launchParam);
|
|
1404
1520
|
(_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
|
|
1405
1521
|
app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
|
|
1406
|
-
const render = (
|
|
1407
|
-
var
|
|
1408
|
-
|
|
1409
|
-
|
|
1522
|
+
const render = (_c) => tslib.__awaiter(this, [_c], void 0, function* ({ location, action }) {
|
|
1523
|
+
var _d, _e, _f, _g, _h, _j, _k, _l;
|
|
1524
|
+
// Note: 由于下面有异步加载操作 先不要在这里去设置 handler.pathname
|
|
1525
|
+
const currentPathname = decodeURI(location.pathname);
|
|
1526
|
+
if ((_d = window.__taroAppConfig) === null || _d === void 0 ? void 0 : _d.usingWindowScroll)
|
|
1410
1527
|
window.scrollTo(0, 0);
|
|
1411
1528
|
runtime.eventCenter.trigger('__taroRouterChange', {
|
|
1412
1529
|
toLocation: {
|
|
1413
|
-
path:
|
|
1530
|
+
path: currentPathname
|
|
1414
1531
|
}
|
|
1415
1532
|
});
|
|
1416
|
-
let element, params;
|
|
1533
|
+
let element, context, params;
|
|
1534
|
+
const routerPath = handler.router.forcePath || currentPathname;
|
|
1535
|
+
pageLock[routerPath] = typeof pageLock[routerPath] === 'number' ? pageLock[routerPath] + 1 : 1;
|
|
1536
|
+
const currentLock = pageLock[routerPath];
|
|
1537
|
+
let postLock;
|
|
1417
1538
|
try {
|
|
1418
|
-
const result = yield router.resolve(
|
|
1419
|
-
[element, , params] = yield Promise.all(result);
|
|
1539
|
+
const result = yield router.resolve(routerPath);
|
|
1540
|
+
[element, context, params] = yield Promise.all(result);
|
|
1541
|
+
postLock = pageLock[routerPath];
|
|
1420
1542
|
}
|
|
1421
1543
|
catch (error) {
|
|
1422
1544
|
if (error.status === 404) {
|
|
1423
1545
|
const notFoundEvent = {
|
|
1424
1546
|
isEntryPage: stacks.length === 0,
|
|
1425
|
-
path:
|
|
1547
|
+
path: currentPathname,
|
|
1426
1548
|
query: handler.getQuery(createStampId()),
|
|
1427
1549
|
};
|
|
1428
|
-
(
|
|
1550
|
+
(_e = app.onPageNotFound) === null || _e === void 0 ? void 0 : _e.call(app, notFoundEvent);
|
|
1429
1551
|
runtime.eventCenter.trigger('__taroRouterNotFound', notFoundEvent);
|
|
1430
1552
|
}
|
|
1431
1553
|
else if (/Loading hot update .* failed./.test(error.message)) {
|
|
@@ -1436,13 +1558,16 @@ function createRouter(history$1, app, config, framework) {
|
|
|
1436
1558
|
throw error;
|
|
1437
1559
|
}
|
|
1438
1560
|
}
|
|
1439
|
-
if (!element)
|
|
1561
|
+
if (!element || currentLock !== postLock)
|
|
1440
1562
|
return;
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
let
|
|
1563
|
+
// Note: 异步结束后，在设置 handler.pathname
|
|
1564
|
+
// context.pathname 在 universal-router 被处理过了，是发起资源请求的时候传入的 pathname，即 await router.resolve(routerPath) 这个 routerPath
|
|
1565
|
+
handler.pathname = context.pathname;
|
|
1566
|
+
const { pathname, pageConfig } = handler;
|
|
1567
|
+
let enablePullDownRefresh = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.enablePullDownRefresh) || false;
|
|
1568
|
+
let navigationStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationStyle) || 'default';
|
|
1569
|
+
let navigationBarTextStyle = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarTextStyle) || 'white';
|
|
1570
|
+
let navigationBarBackgroundColor = ((_j = config === null || config === void 0 ? void 0 : config.window) === null || _j === void 0 ? void 0 : _j.navigationBarBackgroundColor) || '#000000';
|
|
1446
1571
|
if (pageConfig) {
|
|
1447
1572
|
if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
|
|
1448
1573
|
enablePullDownRefresh = pageConfig.enablePullDownRefresh;
|
|
@@ -1459,8 +1584,7 @@ function createRouter(history$1, app, config, framework) {
|
|
|
1459
1584
|
}
|
|
1460
1585
|
runtime.eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
|
|
1461
1586
|
const currentPage = runtime.Current.page;
|
|
1462
|
-
const
|
|
1463
|
-
const methodName = (_j = stacks.method) !== null && _j !== void 0 ? _j : '';
|
|
1587
|
+
const methodName = (_k = stacks.method) !== null && _k !== void 0 ? _k : '';
|
|
1464
1588
|
const cacheTabs = stacks.getTabs();
|
|
1465
1589
|
let shouldLoad = false;
|
|
1466
1590
|
stacks.method = '';
|
|
@@ -1475,10 +1599,11 @@ function createRouter(history$1, app, config, framework) {
|
|
|
1475
1599
|
}
|
|
1476
1600
|
shouldLoad = true;
|
|
1477
1601
|
}
|
|
1478
|
-
else if (currentPage && handler.isTabBar(
|
|
1602
|
+
else if (currentPage && handler.isTabBar(pathname)) {
|
|
1479
1603
|
if (handler.isSamePage(currentPage))
|
|
1480
1604
|
return;
|
|
1481
1605
|
if (handler.isTabBar(currentPage.path)) {
|
|
1606
|
+
// NOTE: 从 tabBar 页面切换到 tabBar 页面
|
|
1482
1607
|
handler.hide(currentPage);
|
|
1483
1608
|
stacks.pushTab(currentPage.path.split('?')[0]);
|
|
1484
1609
|
}
|
|
@@ -1492,8 +1617,8 @@ function createRouter(history$1, app, config, framework) {
|
|
|
1492
1617
|
handler.unload(currentPage, stacks.length, true);
|
|
1493
1618
|
}
|
|
1494
1619
|
}
|
|
1495
|
-
if (cacheTabs[
|
|
1496
|
-
stacks.popTab(
|
|
1620
|
+
if (cacheTabs[pathname]) {
|
|
1621
|
+
stacks.popTab(pathname);
|
|
1497
1622
|
return handler.show(stacks.getItem(0), pageConfig, 0);
|
|
1498
1623
|
}
|
|
1499
1624
|
shouldLoad = true;
|
|
@@ -1522,11 +1647,11 @@ function createRouter(history$1, app, config, framework) {
|
|
|
1522
1647
|
shouldLoad = true;
|
|
1523
1648
|
}
|
|
1524
1649
|
else if (action === 'PUSH') {
|
|
1525
|
-
handler.hide(currentPage);
|
|
1650
|
+
handler.hide(currentPage, true);
|
|
1526
1651
|
shouldLoad = true;
|
|
1527
1652
|
}
|
|
1528
1653
|
if (shouldLoad || stacks.length < 1) {
|
|
1529
|
-
const el = (
|
|
1654
|
+
const el = (_l = element.default) !== null && _l !== void 0 ? _l : element;
|
|
1530
1655
|
const loadConfig = Object.assign({}, pageConfig);
|
|
1531
1656
|
const stacksIndex = stacks.length;
|
|
1532
1657
|
delete loadConfig['path'];
|
|
@@ -1552,12 +1677,23 @@ function createRouter(history$1, app, config, framework) {
|
|
|
1552
1677
|
render({ location: history$1.location, action: history.Action.Push });
|
|
1553
1678
|
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
|
|
1554
1679
|
window.addEventListener('visibilitychange', () => {
|
|
1555
|
-
var _a, _b;
|
|
1680
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
1681
|
+
const currentPath = ((_a = runtime.Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
|
|
1682
|
+
const path = currentPath.substring(0, currentPath.indexOf('?'));
|
|
1683
|
+
const param = {};
|
|
1684
|
+
// app的 onShow/onHide 生命周期的路径信息为当前页面的路径
|
|
1685
|
+
Object.assign(param, launchParam, { path });
|
|
1556
1686
|
if (document.visibilityState === 'visible') {
|
|
1557
|
-
(
|
|
1687
|
+
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
|
|
1688
|
+
// 单页面app显示后一刻会触发当前 page.onShow 生命周期函数
|
|
1689
|
+
(_d = (_c = runtime.Current.page) === null || _c === void 0 ? void 0 : _c.onShow) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
1558
1690
|
}
|
|
1559
1691
|
else {
|
|
1560
|
-
|
|
1692
|
+
// 单页面app隐藏前一刻会触发当前 page.onHide 生命周期函数
|
|
1693
|
+
if ((_e = runtime.Current.page) === null || _e === void 0 ? void 0 : _e.path) {
|
|
1694
|
+
runtime.safeExecute((_f = runtime.Current.page) === null || _f === void 0 ? void 0 : _f.path, 'onHide');
|
|
1695
|
+
}
|
|
1696
|
+
(_g = app.onHide) === null || _g === void 0 ? void 0 : _g.call(app, param);
|
|
1561
1697
|
}
|
|
1562
1698
|
});
|
|
1563
1699
|
return history$1.listen(render);
|
|
@@ -1575,7 +1711,7 @@ function handleAppMount(config, _, appId = config.appId || 'app') {
|
|
|
1575
1711
|
app.classList.add('taro_router');
|
|
1576
1712
|
if (!isPosition)
|
|
1577
1713
|
appWrapper.appendChild(app);
|
|
1578
|
-
initNavigationBar(appWrapper);
|
|
1714
|
+
initNavigationBar(config, appWrapper);
|
|
1579
1715
|
}
|
|
1580
1716
|
function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
|
|
1581
1717
|
let app = document.getElementById(appId);
|
|
@@ -1601,14 +1737,14 @@ function handleAppMountWithTabbar(config, history, appId = config.appId || 'app'
|
|
|
1601
1737
|
appWrapper.replaceChild(container, app);
|
|
1602
1738
|
}
|
|
1603
1739
|
initTabbar(config, history);
|
|
1604
|
-
initNavigationBar(container);
|
|
1740
|
+
initNavigationBar(config, container);
|
|
1605
1741
|
}
|
|
1606
1742
|
|
|
1607
|
-
Object.defineProperty(exports,
|
|
1743
|
+
Object.defineProperty(exports, "createBrowserHistory", {
|
|
1608
1744
|
enumerable: true,
|
|
1609
1745
|
get: function () { return history.createBrowserHistory; }
|
|
1610
1746
|
});
|
|
1611
|
-
Object.defineProperty(exports,
|
|
1747
|
+
Object.defineProperty(exports, "createHashHistory", {
|
|
1612
1748
|
enumerable: true,
|
|
1613
1749
|
get: function () { return history.createHashHistory; }
|
|
1614
1750
|
});
|
|
@@ -1629,6 +1765,7 @@ exports.routesAlias = routesAlias;
|
|
|
1629
1765
|
exports.setHistory = setHistory;
|
|
1630
1766
|
exports.setHistoryMode = setHistoryMode;
|
|
1631
1767
|
exports.setMpaTitle = setMpaTitle;
|
|
1768
|
+
exports.setNavigationBarLoading = setNavigationBarLoading;
|
|
1632
1769
|
exports.setNavigationBarStyle = setNavigationBarStyle;
|
|
1633
1770
|
exports.setTitle = setTitle;
|
|
1634
1771
|
exports.switchTab = switchTab;
|