@tarojs/router 4.0.0-alpha.0 → 4.0.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +11 -4
- package/dist/api.js +30 -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 +767 -321
- package/dist/index.d.ts +6 -1
- package/dist/index.esm.js +727 -293
- 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 +57 -31
- 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.cjs.js
CHANGED
|
@@ -1,44 +1,251 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var history = require('history');
|
|
6
|
-
var runtime = require('@tarojs/runtime');
|
|
7
|
-
var MobileDetect = require('mobile-detect');
|
|
8
|
-
var queryString = require('query-string');
|
|
9
3
|
var components = require('@tarojs/components/dist/components');
|
|
10
4
|
var taro = require('@tarojs/taro');
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var runtime = require('@tarojs/runtime');
|
|
7
|
+
var shared = require('@tarojs/shared');
|
|
8
|
+
var history = require('history');
|
|
9
|
+
var queryString = require('query-string');
|
|
11
10
|
var UniversalRouter = require('universal-router');
|
|
12
11
|
|
|
13
|
-
|
|
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
|
+
}
|
|
14
181
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
182
|
+
const home_svg_str = `
|
|
183
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
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"/>
|
|
185
|
+
</svg>
|
|
186
|
+
`;
|
|
187
|
+
const back_svg_str = `
|
|
188
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
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"/>
|
|
190
|
+
</svg>
|
|
191
|
+
`;
|
|
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');
|
|
199
|
+
navigationBar.classList.add('taro-navigation-bar-no-icon');
|
|
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');
|
|
204
|
+
navigationBarBackBtn.innerHTML = back_svg_str;
|
|
205
|
+
navigationBarHomeBtn.innerHTML = home_svg_str;
|
|
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);
|
|
215
|
+
navigationBar.appendChild(navigationBarHomeBtn);
|
|
216
|
+
navigationBar.appendChild(navigationBarBackBtn);
|
|
217
|
+
navigationBar.appendChild(navigationBarTitleWrap);
|
|
218
|
+
navigationBar.id = 'taro-navigation-bar';
|
|
219
|
+
container.prepend(navigationBar);
|
|
220
|
+
loadNavigationBarStyle();
|
|
221
|
+
}
|
|
18
222
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
223
|
+
function initTabbar(config, history) {
|
|
224
|
+
if (config.tabBar == null || config.tabBar.custom) {
|
|
225
|
+
return;
|
|
226
|
+
}
|
|
227
|
+
// TODO: custom-tab-bar
|
|
228
|
+
components.defineCustomElementTaroTabbar();
|
|
229
|
+
const tabbar = document.createElement('taro-tabbar');
|
|
230
|
+
const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
|
|
231
|
+
tabbar.conf = config.tabBar;
|
|
232
|
+
tabbar.conf.homePage = history.location.pathname === '/' ? homePage : history.location.pathname;
|
|
233
|
+
const routerConfig = config.router;
|
|
234
|
+
tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
|
|
235
|
+
if (routerConfig.customRoutes) {
|
|
236
|
+
tabbar.conf.custom = true;
|
|
237
|
+
tabbar.conf.customRoutes = routerConfig.customRoutes;
|
|
238
|
+
}
|
|
239
|
+
else {
|
|
240
|
+
tabbar.conf.custom = false;
|
|
241
|
+
tabbar.conf.customRoutes = {};
|
|
242
|
+
}
|
|
243
|
+
if (typeof routerConfig.basename !== 'undefined') {
|
|
244
|
+
tabbar.conf.basename = routerConfig.basename;
|
|
245
|
+
}
|
|
246
|
+
const container = document.getElementById('container');
|
|
247
|
+
container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
|
|
248
|
+
taro.initTabBarApis(config);
|
|
42
249
|
}
|
|
43
250
|
|
|
44
251
|
class RouterConfig {
|
|
@@ -58,8 +265,9 @@ class RouterConfig {
|
|
|
58
265
|
return this.router.mode || 'hash';
|
|
59
266
|
}
|
|
60
267
|
static get customRoutes() { return this.router.customRoutes || {}; }
|
|
268
|
+
// 这个方法不考虑 basename 和 customRoutes，只判断原始的 url 是否在 pages 中
|
|
61
269
|
static isPage(url = '') {
|
|
62
|
-
return this.pages.findIndex(e =>
|
|
270
|
+
return this.pages.findIndex(e => runtime.addLeadingSlash(e) === url) !== -1;
|
|
63
271
|
}
|
|
64
272
|
}
|
|
65
273
|
|
|
@@ -86,14 +294,14 @@ class MpaHistory {
|
|
|
86
294
|
}
|
|
87
295
|
parseUrl(to) {
|
|
88
296
|
let url = to.pathname || '';
|
|
89
|
-
if (RouterConfig.isPage(url)) {
|
|
297
|
+
if (RouterConfig.isPage(runtime.addLeadingSlash(url))) {
|
|
90
298
|
url += '.html';
|
|
91
299
|
}
|
|
92
300
|
if (to.search) {
|
|
93
301
|
url += `?${to.search}`;
|
|
94
302
|
}
|
|
95
303
|
if (to.hash) {
|
|
96
|
-
url += `#${to.hash}`;
|
|
304
|
+
url += to.hash.startsWith('#') ? to.hash : `#${to.hash}`;
|
|
97
305
|
}
|
|
98
306
|
return url;
|
|
99
307
|
}
|
|
@@ -142,6 +350,13 @@ class MpaHistory {
|
|
|
142
350
|
};
|
|
143
351
|
}
|
|
144
352
|
}
|
|
353
|
+
function setHistory(h, base = '/') {
|
|
354
|
+
exports.history = h;
|
|
355
|
+
basename = base;
|
|
356
|
+
}
|
|
357
|
+
function createMpaHistory(_) {
|
|
358
|
+
return new MpaHistory();
|
|
359
|
+
}
|
|
145
360
|
function setHistoryMode(mode, base = '/') {
|
|
146
361
|
const options = {
|
|
147
362
|
window
|
|
@@ -151,7 +366,7 @@ function setHistoryMode(mode, base = '/') {
|
|
|
151
366
|
exports.history = history.createBrowserHistory(options);
|
|
152
367
|
}
|
|
153
368
|
else if (mode === 'multi') {
|
|
154
|
-
exports.history =
|
|
369
|
+
exports.history = createMpaHistory();
|
|
155
370
|
}
|
|
156
371
|
else {
|
|
157
372
|
// default is hash
|
|
@@ -243,24 +458,34 @@ class Stacks {
|
|
|
243
458
|
}
|
|
244
459
|
const stacks = new Stacks();
|
|
245
460
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
}
|
|
461
|
+
const isWeixin = () => !!navigator.userAgent.match(/\bMicroMessenger\b/ig);
|
|
462
|
+
const isDingTalk = () => !!navigator.userAgent.match(/\bDingTalk\b/ig);
|
|
463
|
+
let preTitle = document.title;
|
|
464
|
+
let isLoadDdEntry = false;
|
|
465
|
+
function setMpaTitle(title) {
|
|
466
|
+
if (preTitle === title)
|
|
467
|
+
return;
|
|
468
|
+
document.title = title;
|
|
469
|
+
preTitle = title;
|
|
470
|
+
if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
|
|
471
|
+
if (!isLoadDdEntry) {
|
|
472
|
+
isLoadDdEntry = true;
|
|
473
|
+
require('dingtalk-jsapi/platform');
|
|
474
|
+
}
|
|
475
|
+
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
476
|
+
setDingTitle({ title });
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
function setTitle(title) {
|
|
480
|
+
runtime.eventCenter.trigger('__taroH5SetNavigationBarTitle', title);
|
|
481
|
+
}
|
|
482
|
+
function setNavigationBarStyle(option) {
|
|
483
|
+
runtime.eventCenter.trigger('__taroH5setNavigationBarColor', option);
|
|
484
|
+
}
|
|
485
|
+
function setNavigationBarLoading(loading) {
|
|
486
|
+
runtime.eventCenter.trigger('__taroH5setNavigationBarLoading', loading);
|
|
487
|
+
}
|
|
488
|
+
|
|
264
489
|
class RoutesAlias {
|
|
265
490
|
constructor() {
|
|
266
491
|
this.conf = [];
|
|
@@ -290,18 +515,19 @@ class RoutesAlias {
|
|
|
290
515
|
set(customRoutes = {}) {
|
|
291
516
|
for (let key in customRoutes) {
|
|
292
517
|
const path = customRoutes[key];
|
|
293
|
-
key = addLeadingSlash(key);
|
|
518
|
+
key = runtime.addLeadingSlash(key);
|
|
294
519
|
if (typeof path === 'string') {
|
|
295
|
-
this.conf.push([key, addLeadingSlash(path)]);
|
|
520
|
+
this.conf.push([key, runtime.addLeadingSlash(path)]);
|
|
296
521
|
}
|
|
297
522
|
else if ((path === null || path === void 0 ? void 0 : path.length) > 0) {
|
|
298
|
-
this.conf.push(...path.map(p => [key, addLeadingSlash(p)]));
|
|
523
|
+
this.conf.push(...path.map(p => [key, runtime.addLeadingSlash(p)]));
|
|
299
524
|
}
|
|
300
525
|
}
|
|
301
526
|
}
|
|
302
527
|
}
|
|
303
528
|
const routesAlias = new RoutesAlias();
|
|
304
529
|
|
|
530
|
+
const routeEvtChannel = shared.EventChannel.routeChannel;
|
|
305
531
|
function processNavigateUrl(option) {
|
|
306
532
|
var _a;
|
|
307
533
|
const pathPieces = history.parsePath(option.url);
|
|
@@ -310,15 +536,16 @@ function processNavigateUrl(option) {
|
|
|
310
536
|
const parts = routesAlias.getOrigin(exports.history.location.pathname).split('/');
|
|
311
537
|
parts.pop();
|
|
312
538
|
pathPieces.pathname.split('/').forEach((item) => {
|
|
313
|
-
if (item === '.')
|
|
539
|
+
if (item === '.')
|
|
314
540
|
return;
|
|
315
|
-
}
|
|
316
541
|
item === '..' ? parts.pop() : parts.push(item);
|
|
317
542
|
});
|
|
318
543
|
pathPieces.pathname = parts.join('/');
|
|
319
544
|
}
|
|
545
|
+
// 确保是 / 开头的路径
|
|
546
|
+
pathPieces.pathname = runtime.addLeadingSlash(pathPieces.pathname);
|
|
320
547
|
// 处理自定义路由
|
|
321
|
-
pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname));
|
|
548
|
+
pathPieces.pathname = routesAlias.getAlias(runtime.addLeadingSlash(pathPieces.pathname));
|
|
322
549
|
// 处理 basename
|
|
323
550
|
pathPieces.pathname = prependBasename(pathPieces.pathname);
|
|
324
551
|
// hack fix history v5 bug: https://github.com/remix-run/history/issues/814
|
|
@@ -327,12 +554,16 @@ function processNavigateUrl(option) {
|
|
|
327
554
|
return pathPieces;
|
|
328
555
|
}
|
|
329
556
|
function navigate(option, method) {
|
|
330
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
557
|
+
return tslib.__awaiter(this, void 0, void 0, function* () {
|
|
331
558
|
return new Promise((resolve, reject) => {
|
|
332
559
|
stacks.method = method;
|
|
333
560
|
const { success, complete, fail } = option;
|
|
334
561
|
const unListen = exports.history.listen(() => {
|
|
335
562
|
const res = { errMsg: `${method}:ok` };
|
|
563
|
+
if (method === 'navigateTo') {
|
|
564
|
+
res.eventChannel = routeEvtChannel;
|
|
565
|
+
routeEvtChannel.addEvents(option.events);
|
|
566
|
+
}
|
|
336
567
|
success === null || success === void 0 ? void 0 : success(res);
|
|
337
568
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
338
569
|
resolve(res);
|
|
@@ -367,7 +598,12 @@ function navigate(option, method) {
|
|
|
367
598
|
const res = { errMsg: `${method}:fail ${error.message || error}` };
|
|
368
599
|
fail === null || fail === void 0 ? void 0 : fail(res);
|
|
369
600
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
370
|
-
|
|
601
|
+
if (fail || complete) {
|
|
602
|
+
return resolve(res);
|
|
603
|
+
}
|
|
604
|
+
else {
|
|
605
|
+
return reject(res);
|
|
606
|
+
}
|
|
371
607
|
}
|
|
372
608
|
});
|
|
373
609
|
});
|
|
@@ -398,47 +634,22 @@ function getCurrentPages() {
|
|
|
398
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, '')) || '' })); });
|
|
399
635
|
}
|
|
400
636
|
|
|
401
|
-
let md;
|
|
402
|
-
let preTitle = document.title;
|
|
403
|
-
let isLoadDdEntry = false;
|
|
404
|
-
function getMobileDetect() {
|
|
405
|
-
if (!md) {
|
|
406
|
-
md = new MobileDetect__default["default"](navigator.userAgent);
|
|
407
|
-
}
|
|
408
|
-
return md;
|
|
409
|
-
}
|
|
410
|
-
function setTitle(title) {
|
|
411
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
412
|
-
if (preTitle === title)
|
|
413
|
-
return title;
|
|
414
|
-
document.title = title;
|
|
415
|
-
preTitle = title;
|
|
416
|
-
if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
|
|
417
|
-
if (!isLoadDdEntry) {
|
|
418
|
-
isLoadDdEntry = true;
|
|
419
|
-
require('dingtalk-jsapi/platform');
|
|
420
|
-
}
|
|
421
|
-
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
422
|
-
setDingTitle({ title });
|
|
423
|
-
}
|
|
424
|
-
return title;
|
|
425
|
-
});
|
|
426
|
-
}
|
|
427
|
-
function isDingTalk() {
|
|
428
|
-
const md = getMobileDetect();
|
|
429
|
-
return md.match(/DingTalk/ig);
|
|
430
|
-
}
|
|
431
|
-
|
|
432
637
|
let pageResizeFn;
|
|
433
638
|
function bindPageResize(page) {
|
|
434
639
|
pageResizeFn && window.removeEventListener('resize', pageResizeFn);
|
|
435
640
|
pageResizeFn = function () {
|
|
436
|
-
page.onResize
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
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
|
+
}
|
|
442
653
|
};
|
|
443
654
|
window.addEventListener('resize', pageResizeFn, false);
|
|
444
655
|
}
|
|
@@ -477,111 +688,10 @@ function getOffset() {
|
|
|
477
688
|
}
|
|
478
689
|
}
|
|
479
690
|
|
|
480
|
-
/**
|
|
481
|
-
* 插入页面动画需要的样式
|
|
482
|
-
*/
|
|
483
|
-
function loadAnimateStyle(ms = 300) {
|
|
484
|
-
const css = `
|
|
485
|
-
.taro_router > .taro_page {
|
|
486
|
-
position: absolute;
|
|
487
|
-
left: 0;
|
|
488
|
-
top: 0;
|
|
489
|
-
width: 100%;
|
|
490
|
-
height: 100%;
|
|
491
|
-
background-color: #fff;
|
|
492
|
-
transform: translate(100%, 0);
|
|
493
|
-
transition: transform ${ms}ms;
|
|
494
|
-
z-index: 0;
|
|
495
|
-
}
|
|
496
|
-
|
|
497
|
-
.taro_router > .taro_page.taro_tabbar_page,
|
|
498
|
-
.taro_router > .taro_page.taro_page_show.taro_page_stationed {
|
|
499
|
-
transform: none;
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
.taro_router > .taro_page.taro_page_show {
|
|
503
|
-
transform: translate(0, 0);
|
|
504
|
-
}
|
|
505
|
-
`;
|
|
506
|
-
addStyle(css);
|
|
507
|
-
}
|
|
508
|
-
/**
|
|
509
|
-
* 插入路由相关样式
|
|
510
|
-
*/
|
|
511
|
-
function loadRouterStyle(usingWindowScroll) {
|
|
512
|
-
const css = `
|
|
513
|
-
.taro_router {
|
|
514
|
-
position: relative;
|
|
515
|
-
width: 100%;
|
|
516
|
-
height: 100%;
|
|
517
|
-
}
|
|
518
|
-
|
|
519
|
-
.taro_page {
|
|
520
|
-
width: 100%;
|
|
521
|
-
height: 100%;
|
|
522
|
-
${usingWindowScroll ? '' : `
|
|
523
|
-
overflow-x: hidden;
|
|
524
|
-
overflow-y: scroll;
|
|
525
|
-
max-height: 100vh;
|
|
526
|
-
`}
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
.taro-tabbar__container > .taro-tabbar__panel {
|
|
530
|
-
overflow: hidden;
|
|
531
|
-
}
|
|
532
|
-
|
|
533
|
-
.taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
|
|
534
|
-
max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
|
|
535
|
-
max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
|
|
536
|
-
}
|
|
537
|
-
|
|
538
|
-
.taro_page_shade,
|
|
539
|
-
.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
|
|
540
|
-
display: none;
|
|
541
|
-
}
|
|
542
|
-
`;
|
|
543
|
-
addStyle(css);
|
|
544
|
-
}
|
|
545
|
-
function addStyle(css) {
|
|
546
|
-
if (!css)
|
|
547
|
-
return;
|
|
548
|
-
const style = document.createElement('style');
|
|
549
|
-
style.innerHTML = css;
|
|
550
|
-
document.getElementsByTagName('head')[0].appendChild(style);
|
|
551
|
-
}
|
|
552
|
-
|
|
553
|
-
// @ts-nocheck
|
|
554
|
-
function initTabbar(config) {
|
|
555
|
-
if (config.tabBar == null || config.tabBar.custom) {
|
|
556
|
-
return;
|
|
557
|
-
}
|
|
558
|
-
// TODO: custom-tab-bar
|
|
559
|
-
components.defineCustomElementTaroTabbar();
|
|
560
|
-
const tabbar = document.createElement('taro-tabbar');
|
|
561
|
-
const homePage = config.entryPagePath || (config.pages ? config.pages[0] : '');
|
|
562
|
-
tabbar.conf = config.tabBar;
|
|
563
|
-
tabbar.conf.homePage = exports.history.location.pathname === '/' ? homePage : exports.history.location.pathname;
|
|
564
|
-
const routerConfig = config.router;
|
|
565
|
-
tabbar.conf.mode = routerConfig && routerConfig.mode ? routerConfig.mode : 'hash';
|
|
566
|
-
if (routerConfig.customRoutes) {
|
|
567
|
-
tabbar.conf.custom = true;
|
|
568
|
-
tabbar.conf.customRoutes = routerConfig.customRoutes;
|
|
569
|
-
}
|
|
570
|
-
else {
|
|
571
|
-
tabbar.conf.custom = false;
|
|
572
|
-
tabbar.conf.customRoutes = {};
|
|
573
|
-
}
|
|
574
|
-
if (typeof routerConfig.basename !== 'undefined') {
|
|
575
|
-
tabbar.conf.basename = routerConfig.basename;
|
|
576
|
-
}
|
|
577
|
-
const container = document.getElementById('container');
|
|
578
|
-
container === null || container === void 0 ? void 0 : container.appendChild(tabbar);
|
|
579
|
-
taro.initTabBarApis(config);
|
|
580
|
-
}
|
|
581
|
-
|
|
582
691
|
/* eslint-disable dot-notation */
|
|
583
692
|
class MultiPageHandler {
|
|
584
|
-
constructor(config) {
|
|
693
|
+
constructor(config, history) {
|
|
694
|
+
this.history = history;
|
|
585
695
|
this.config = config;
|
|
586
696
|
this.mount();
|
|
587
697
|
}
|
|
@@ -597,7 +707,7 @@ class MultiPageHandler {
|
|
|
597
707
|
get pageConfig() { return this.config.route; }
|
|
598
708
|
get isTabBar() {
|
|
599
709
|
var _a;
|
|
600
|
-
const routePath = addLeadingSlash(stripBasename(this.pathname, this.basename));
|
|
710
|
+
const routePath = runtime.addLeadingSlash(runtime.stripBasename(this.pathname, this.basename));
|
|
601
711
|
const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
|
|
602
712
|
if (typeof target === 'string') {
|
|
603
713
|
return target === routePath;
|
|
@@ -624,43 +734,22 @@ class MultiPageHandler {
|
|
|
624
734
|
getQuery(search = '', options = {}) {
|
|
625
735
|
search = search ? `${search}&${this.search}` : this.search;
|
|
626
736
|
const query = search
|
|
627
|
-
?
|
|
737
|
+
? queryString.parse(search)
|
|
628
738
|
: {};
|
|
629
739
|
return Object.assign(Object.assign({}, query), options);
|
|
630
740
|
}
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
let isPosition = true;
|
|
637
|
-
if (!app) {
|
|
638
|
-
app = document.createElement('div');
|
|
639
|
-
app.id = appId;
|
|
640
|
-
isPosition = false;
|
|
641
|
-
}
|
|
642
|
-
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
643
|
-
app.classList.add('taro_router');
|
|
644
|
-
if (this.tabBarList.length > 1) {
|
|
645
|
-
const container = document.createElement('div');
|
|
646
|
-
container.classList.add('taro-tabbar__container');
|
|
647
|
-
container.id = 'container';
|
|
648
|
-
const panel = document.createElement('div');
|
|
649
|
-
panel.classList.add('taro-tabbar__panel');
|
|
650
|
-
panel.appendChild(app.cloneNode(true));
|
|
651
|
-
container.appendChild(panel);
|
|
652
|
-
if (!isPosition) {
|
|
653
|
-
appWrapper.appendChild(container);
|
|
654
|
-
}
|
|
655
|
-
else {
|
|
656
|
-
appWrapper.replaceChild(container, app);
|
|
657
|
-
}
|
|
658
|
-
initTabbar(this.config);
|
|
659
|
-
}
|
|
660
|
-
else {
|
|
661
|
-
if (!isPosition)
|
|
662
|
-
appWrapper.appendChild(app);
|
|
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;
|
|
663
746
|
}
|
|
747
|
+
return style !== 'custom';
|
|
748
|
+
}
|
|
749
|
+
mount() {
|
|
750
|
+
setHistory(this.history, this.basename);
|
|
751
|
+
// Note: 注入页面样式
|
|
752
|
+
loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
|
|
664
753
|
}
|
|
665
754
|
onReady(page, onLoad = true) {
|
|
666
755
|
var _a;
|
|
@@ -690,10 +779,13 @@ class MultiPageHandler {
|
|
|
690
779
|
return;
|
|
691
780
|
(_a = page.onLoad) === null || _a === void 0 ? void 0 : _a.call(page, this.getQuery('', page.options), () => {
|
|
692
781
|
var _a;
|
|
782
|
+
const pageEl = this.getPageContainer(page);
|
|
693
783
|
if (this.isTabBar) {
|
|
694
|
-
const pageEl = this.getPageContainer(page);
|
|
695
784
|
pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_tabbar_page');
|
|
696
785
|
}
|
|
786
|
+
if (this.isDefaultNavigationStyle()) {
|
|
787
|
+
pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page');
|
|
788
|
+
}
|
|
697
789
|
this.onReady(page, true);
|
|
698
790
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
699
791
|
this.bindPageEvents(page, pageConfig);
|
|
@@ -750,16 +842,17 @@ const launchStampId$1 = createStampId$1();
|
|
|
750
842
|
* - TabBar 会多次加载
|
|
751
843
|
* - 不支持路由动画
|
|
752
844
|
*/
|
|
753
|
-
function createMultiRouter(app, config, framework) {
|
|
754
|
-
|
|
755
|
-
|
|
845
|
+
function createMultiRouter(history, app, config, framework) {
|
|
846
|
+
return tslib.__awaiter(this, void 0, void 0, function* () {
|
|
847
|
+
var _a, _b, _c, _d, _e, _f;
|
|
756
848
|
if (typeof app.onUnhandledRejection === 'function') {
|
|
757
849
|
window.addEventListener('unhandledrejection', app.onUnhandledRejection);
|
|
758
850
|
}
|
|
851
|
+
runtime.eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle);
|
|
759
852
|
RouterConfig.config = config;
|
|
760
|
-
const handler = new MultiPageHandler(config);
|
|
853
|
+
const handler = new MultiPageHandler(config, history);
|
|
761
854
|
const launchParam = {
|
|
762
|
-
path: config.pageName,
|
|
855
|
+
path: config.pageName, // 多页面模式没新开一个页面相当于重启，所以直接使用当前页面路径
|
|
763
856
|
query: handler.getQuery(launchStampId$1),
|
|
764
857
|
scene: 0,
|
|
765
858
|
shareTicket: '',
|
|
@@ -789,7 +882,7 @@ function createMultiRouter(app, config, framework) {
|
|
|
789
882
|
return;
|
|
790
883
|
let enablePullDownRefresh = ((_c = config === null || config === void 0 ? void 0 : config.window) === null || _c === void 0 ? void 0 : _c.enablePullDownRefresh) || false;
|
|
791
884
|
if (pageConfig) {
|
|
792
|
-
|
|
885
|
+
setMpaTitle((_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title);
|
|
793
886
|
if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
|
|
794
887
|
enablePullDownRefresh = pageConfig.enablePullDownRefresh;
|
|
795
888
|
}
|
|
@@ -801,19 +894,281 @@ function createMultiRouter(app, config, framework) {
|
|
|
801
894
|
const page = runtime.createPageConfig(enablePullDownRefresh ? runtime.hooks.call('createPullDownComponent', el, pathName, framework, handler.PullDownRefresh) : el, pathName + runtime.stringify(launchParam), {}, loadConfig);
|
|
802
895
|
handler.load(page, pageConfig);
|
|
803
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 = runtime.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
|
+
});
|
|
804
911
|
});
|
|
805
912
|
}
|
|
806
913
|
|
|
914
|
+
class NavigationBarHandler {
|
|
915
|
+
constructor(pageContext) {
|
|
916
|
+
this.isLoadDdEntry = false;
|
|
917
|
+
this.cache = {};
|
|
918
|
+
this.pageContext = pageContext;
|
|
919
|
+
this.init();
|
|
920
|
+
runtime.eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
|
|
921
|
+
this.setTitle(title);
|
|
922
|
+
});
|
|
923
|
+
runtime.eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
|
|
924
|
+
this.setNavigationLoading(loading);
|
|
925
|
+
});
|
|
926
|
+
runtime.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
|
+
|
|
807
1159
|
/* eslint-disable dot-notation */
|
|
808
1160
|
class PageHandler {
|
|
809
|
-
constructor(config) {
|
|
1161
|
+
constructor(config, history) {
|
|
1162
|
+
this.history = history;
|
|
810
1163
|
this.defaultAnimation = { duration: 300, delay: 50 };
|
|
811
1164
|
this.config = config;
|
|
812
|
-
this.homePage = getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
|
|
1165
|
+
this.homePage = runtime.getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
|
|
1166
|
+
this.originHomePage = this.config.entryPagePath || this.routes[0].path || this.basename;
|
|
813
1167
|
this.mount();
|
|
1168
|
+
this.navigationBarHandler = new NavigationBarHandler(this);
|
|
814
1169
|
}
|
|
815
1170
|
get currentPage() {
|
|
816
|
-
const routePath = getCurrentPage(this.routerMode, this.basename);
|
|
1171
|
+
const routePath = runtime.getCurrentPage(this.routerMode, this.basename);
|
|
817
1172
|
return routePath === '/' ? this.homePage : routePath;
|
|
818
1173
|
}
|
|
819
1174
|
get appId() { return this.config.appId || 'app'; }
|
|
@@ -842,19 +1197,19 @@ class PageHandler {
|
|
|
842
1197
|
}
|
|
843
1198
|
set pathname(p) { this.router.pathname = p; }
|
|
844
1199
|
get pathname() { return this.router.pathname; }
|
|
1200
|
+
// Note: 把 pathname 转换为原始路径，主要是处理 customRoutes 和 basename
|
|
1201
|
+
get originPathname() { return routesAlias.getOrigin(runtime.addLeadingSlash(runtime.stripBasename(this.pathname, this.basename))); }
|
|
845
1202
|
get basename() { return this.router.basename || ''; }
|
|
846
1203
|
get pageConfig() {
|
|
847
|
-
const
|
|
848
|
-
const homePage = addLeadingSlash(this.homePage);
|
|
1204
|
+
const homePage = runtime.addLeadingSlash(this.homePage);
|
|
849
1205
|
return this.routes.find(r => {
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
return [pagePath, homePage].includes(routePath) || ((_a = routesAlias.getConfig(pagePath)) === null || _a === void 0 ? void 0 : _a.includes(routePath));
|
|
1206
|
+
const pagePath = runtime.addLeadingSlash(r.path);
|
|
1207
|
+
return [pagePath, homePage].includes(this.originPathname);
|
|
853
1208
|
});
|
|
854
1209
|
}
|
|
855
1210
|
isTabBar(pathname) {
|
|
856
1211
|
var _a;
|
|
857
|
-
const routePath = addLeadingSlash(stripBasename(pathname, this.basename)).split('?')[0];
|
|
1212
|
+
const routePath = runtime.addLeadingSlash(runtime.stripBasename(pathname, this.basename)).split('?')[0];
|
|
858
1213
|
const pagePath = ((_a = Object.entries(this.customRoutes).find(([, target]) => {
|
|
859
1214
|
if (typeof target === 'string') {
|
|
860
1215
|
return target === routePath;
|
|
@@ -864,11 +1219,19 @@ class PageHandler {
|
|
|
864
1219
|
}
|
|
865
1220
|
return false;
|
|
866
1221
|
})) === null || _a === void 0 ? void 0 : _a[0]) || routePath;
|
|
867
|
-
return !!pagePath && this.tabBarList.some(t => stripTrailing(t.pagePath) === pagePath);
|
|
1222
|
+
return !!pagePath && this.tabBarList.some(t => runtime.stripTrailing(t.pagePath) === pagePath);
|
|
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';
|
|
868
1231
|
}
|
|
869
1232
|
isSamePage(page) {
|
|
870
|
-
const routePath = stripBasename(this.pathname, this.basename);
|
|
871
|
-
const pagePath = stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
|
|
1233
|
+
const routePath = runtime.stripBasename(this.pathname, this.basename);
|
|
1234
|
+
const pagePath = runtime.stripBasename(page === null || page === void 0 ? void 0 : page.path, this.basename);
|
|
872
1235
|
return pagePath.startsWith(routePath + '?');
|
|
873
1236
|
}
|
|
874
1237
|
get search() {
|
|
@@ -898,46 +1261,17 @@ class PageHandler {
|
|
|
898
1261
|
getQuery(stamp = '', search = '', options = {}) {
|
|
899
1262
|
search = search ? `${search}&${this.search}` : this.search;
|
|
900
1263
|
const query = search
|
|
901
|
-
?
|
|
1264
|
+
? queryString.parse(search, { decode: false })
|
|
902
1265
|
: {};
|
|
903
1266
|
query.stamp = stamp;
|
|
904
1267
|
return Object.assign(Object.assign({}, query), options);
|
|
905
1268
|
}
|
|
906
1269
|
mount() {
|
|
907
|
-
|
|
1270
|
+
setHistory(this.history, this.basename);
|
|
908
1271
|
this.pathname = exports.history.location.pathname;
|
|
1272
|
+
// Note: 注入页面样式
|
|
909
1273
|
this.animation && loadAnimateStyle(this.animationDuration);
|
|
910
|
-
loadRouterStyle(this.usingWindowScroll);
|
|
911
|
-
const appId = this.appId;
|
|
912
|
-
let app = document.getElementById(appId);
|
|
913
|
-
let isPosition = true;
|
|
914
|
-
if (!app) {
|
|
915
|
-
app = document.createElement('div');
|
|
916
|
-
app.id = appId;
|
|
917
|
-
isPosition = false;
|
|
918
|
-
}
|
|
919
|
-
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
920
|
-
app.classList.add('taro_router');
|
|
921
|
-
if (this.tabBarList.length > 1) {
|
|
922
|
-
const container = document.createElement('div');
|
|
923
|
-
container.classList.add('taro-tabbar__container');
|
|
924
|
-
container.id = 'container';
|
|
925
|
-
const panel = document.createElement('div');
|
|
926
|
-
panel.classList.add('taro-tabbar__panel');
|
|
927
|
-
panel.appendChild(app.cloneNode(true));
|
|
928
|
-
container.appendChild(panel);
|
|
929
|
-
if (!isPosition) {
|
|
930
|
-
appWrapper.appendChild(container);
|
|
931
|
-
}
|
|
932
|
-
else {
|
|
933
|
-
appWrapper.replaceChild(container, app);
|
|
934
|
-
}
|
|
935
|
-
initTabbar(this.config);
|
|
936
|
-
}
|
|
937
|
-
else {
|
|
938
|
-
if (!isPosition)
|
|
939
|
-
appWrapper.appendChild(app);
|
|
940
|
-
}
|
|
1274
|
+
loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll);
|
|
941
1275
|
}
|
|
942
1276
|
onReady(page, onLoad = true) {
|
|
943
1277
|
var _a;
|
|
@@ -972,19 +1306,24 @@ class PageHandler {
|
|
|
972
1306
|
if (pageEl) {
|
|
973
1307
|
pageEl.classList.remove('taro_page_shade');
|
|
974
1308
|
this.isTabBar(this.pathname) && pageEl.classList.add('taro_tabbar_page');
|
|
1309
|
+
this.isDefaultNavigationStyle() && pageEl.classList.add('taro_navigation_page');
|
|
975
1310
|
this.addAnimation(pageEl, pageNo === 0);
|
|
976
1311
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1312
|
+
this.navigationBarHandler.load();
|
|
977
1313
|
this.bindPageEvents(page, pageConfig);
|
|
978
1314
|
this.triggerRouterChange();
|
|
979
1315
|
}
|
|
980
1316
|
else {
|
|
1317
|
+
// FIXME 在 iOS 端快速切换页面时，可能不会执行回调注入对应类名导致 TabBar 白屏
|
|
981
1318
|
(_b = page.onLoad) === null || _b === void 0 ? void 0 : _b.call(page, param, () => {
|
|
982
1319
|
var _a;
|
|
983
1320
|
pageEl = this.getPageContainer(page);
|
|
984
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'));
|
|
985
1323
|
this.addAnimation(pageEl, pageNo === 0);
|
|
986
|
-
this.onReady(page, true);
|
|
987
1324
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1325
|
+
this.navigationBarHandler.load();
|
|
1326
|
+
this.onReady(page, true);
|
|
988
1327
|
this.bindPageEvents(page, pageConfig);
|
|
989
1328
|
this.triggerRouterChange();
|
|
990
1329
|
});
|
|
@@ -1038,6 +1377,7 @@ class PageHandler {
|
|
|
1038
1377
|
pageEl.classList.remove('taro_page_shade');
|
|
1039
1378
|
this.addAnimation(pageEl, pageNo === 0);
|
|
1040
1379
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1380
|
+
this.navigationBarHandler.load();
|
|
1041
1381
|
this.bindPageEvents(page, pageConfig);
|
|
1042
1382
|
this.triggerRouterChange();
|
|
1043
1383
|
}
|
|
@@ -1046,31 +1386,43 @@ class PageHandler {
|
|
|
1046
1386
|
var _a;
|
|
1047
1387
|
pageEl = this.getPageContainer(page);
|
|
1048
1388
|
this.addAnimation(pageEl, pageNo === 0);
|
|
1049
|
-
this.onReady(page, false);
|
|
1050
1389
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1390
|
+
this.navigationBarHandler.load();
|
|
1391
|
+
this.onReady(page, false);
|
|
1051
1392
|
this.bindPageEvents(page, pageConfig);
|
|
1052
1393
|
this.triggerRouterChange();
|
|
1053
1394
|
});
|
|
1054
1395
|
}
|
|
1055
1396
|
}
|
|
1056
|
-
hide(page) {
|
|
1057
|
-
var _a;
|
|
1397
|
+
hide(page, animation = false) {
|
|
1398
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
1058
1399
|
if (!page)
|
|
1059
1400
|
return;
|
|
1060
1401
|
// NOTE: 修复多页并发问题，此处可能因为路由跳转过快，执行时页面可能还没有创建成功
|
|
1061
1402
|
const pageEl = this.getPageContainer(page);
|
|
1062
1403
|
if (pageEl) {
|
|
1063
|
-
if (
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
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);
|
|
1067
1416
|
}
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
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
|
+
}
|
|
1071
1423
|
pageEl.classList.add('taro_page_shade');
|
|
1072
|
-
|
|
1073
|
-
|
|
1424
|
+
this.lastHidePage = pageEl;
|
|
1425
|
+
}
|
|
1074
1426
|
}
|
|
1075
1427
|
else {
|
|
1076
1428
|
setTimeout(() => this.hide(page), 0);
|
|
@@ -1134,24 +1486,24 @@ class PageHandler {
|
|
|
1134
1486
|
|
|
1135
1487
|
const createStampId = runtime.incrementId();
|
|
1136
1488
|
let launchStampId = createStampId();
|
|
1137
|
-
function createRouter(app, config, framework) {
|
|
1489
|
+
function createRouter(history$1, app, config, framework) {
|
|
1138
1490
|
var _a, _b;
|
|
1139
1491
|
if (typeof app.onUnhandledRejection === 'function') {
|
|
1140
1492
|
window.addEventListener('unhandledrejection', app.onUnhandledRejection);
|
|
1141
1493
|
}
|
|
1142
1494
|
RouterConfig.config = config;
|
|
1143
|
-
const handler = new PageHandler(config);
|
|
1495
|
+
const handler = new PageHandler(config, history$1);
|
|
1144
1496
|
routesAlias.set(handler.router.customRoutes);
|
|
1145
1497
|
const basename = handler.router.basename;
|
|
1146
1498
|
const routes = handler.routes.map(route => {
|
|
1147
|
-
const routePath = addLeadingSlash(route.path);
|
|
1499
|
+
const routePath = runtime.addLeadingSlash(route.path);
|
|
1148
1500
|
const paths = routesAlias.getAll(routePath);
|
|
1149
1501
|
return {
|
|
1150
1502
|
path: paths.length < 1 ? routePath : paths,
|
|
1151
1503
|
action: route.load
|
|
1152
1504
|
};
|
|
1153
1505
|
});
|
|
1154
|
-
const router = new
|
|
1506
|
+
const router = new UniversalRouter(routes, { baseUrl: basename || '' });
|
|
1155
1507
|
const launchParam = {
|
|
1156
1508
|
path: handler.currentPage,
|
|
1157
1509
|
query: handler.getQuery(launchStampId),
|
|
@@ -1162,10 +1514,10 @@ function createRouter(app, config, framework) {
|
|
|
1162
1514
|
runtime.eventCenter.trigger('__taroRouterLaunch', launchParam);
|
|
1163
1515
|
(_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
|
|
1164
1516
|
app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
|
|
1165
|
-
const render = (
|
|
1166
|
-
var
|
|
1517
|
+
const render = (_c) => tslib.__awaiter(this, [_c], void 0, function* ({ location, action }) {
|
|
1518
|
+
var _d, _e, _f, _g, _h, _j, _k, _l;
|
|
1167
1519
|
handler.pathname = decodeURI(location.pathname);
|
|
1168
|
-
if ((
|
|
1520
|
+
if ((_d = window.__taroAppConfig) === null || _d === void 0 ? void 0 : _d.usingWindowScroll)
|
|
1169
1521
|
window.scrollTo(0, 0);
|
|
1170
1522
|
runtime.eventCenter.trigger('__taroRouterChange', {
|
|
1171
1523
|
toLocation: {
|
|
@@ -1184,7 +1536,7 @@ function createRouter(app, config, framework) {
|
|
|
1184
1536
|
path: handler.pathname,
|
|
1185
1537
|
query: handler.getQuery(createStampId()),
|
|
1186
1538
|
};
|
|
1187
|
-
(
|
|
1539
|
+
(_e = app.onPageNotFound) === null || _e === void 0 ? void 0 : _e.call(app, notFoundEvent);
|
|
1188
1540
|
runtime.eventCenter.trigger('__taroRouterNotFound', notFoundEvent);
|
|
1189
1541
|
}
|
|
1190
1542
|
else if (/Loading hot update .* failed./.test(error.message)) {
|
|
@@ -1192,22 +1544,34 @@ function createRouter(app, config, framework) {
|
|
|
1192
1544
|
window.location.reload();
|
|
1193
1545
|
}
|
|
1194
1546
|
else {
|
|
1195
|
-
throw
|
|
1547
|
+
throw error;
|
|
1196
1548
|
}
|
|
1197
1549
|
}
|
|
1198
1550
|
if (!element)
|
|
1199
1551
|
return;
|
|
1200
1552
|
const pageConfig = handler.pageConfig;
|
|
1201
|
-
let enablePullDownRefresh = ((
|
|
1553
|
+
let enablePullDownRefresh = ((_f = config === null || config === void 0 ? void 0 : config.window) === null || _f === void 0 ? void 0 : _f.enablePullDownRefresh) || false;
|
|
1554
|
+
let navigationStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationStyle) || 'default';
|
|
1555
|
+
let navigationBarTextStyle = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarTextStyle) || 'white';
|
|
1556
|
+
let navigationBarBackgroundColor = ((_j = config === null || config === void 0 ? void 0 : config.window) === null || _j === void 0 ? void 0 : _j.navigationBarBackgroundColor) || '#000000';
|
|
1202
1557
|
if (pageConfig) {
|
|
1203
|
-
setTitle((_f = pageConfig.navigationBarTitleText) !== null && _f !== void 0 ? _f : document.title);
|
|
1204
1558
|
if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
|
|
1205
1559
|
enablePullDownRefresh = pageConfig.enablePullDownRefresh;
|
|
1206
1560
|
}
|
|
1561
|
+
if (typeof pageConfig.navigationStyle === 'string') {
|
|
1562
|
+
navigationStyle = pageConfig.navigationStyle;
|
|
1563
|
+
}
|
|
1564
|
+
if (typeof pageConfig.navigationBarTextStyle === 'string') {
|
|
1565
|
+
navigationBarTextStyle = pageConfig.navigationBarTextStyle;
|
|
1566
|
+
}
|
|
1567
|
+
if (typeof pageConfig.navigationBarBackgroundColor === 'string') {
|
|
1568
|
+
navigationBarBackgroundColor = pageConfig.navigationBarBackgroundColor;
|
|
1569
|
+
}
|
|
1207
1570
|
}
|
|
1571
|
+
runtime.eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
|
|
1208
1572
|
const currentPage = runtime.Current.page;
|
|
1209
1573
|
const pathname = handler.pathname;
|
|
1210
|
-
const methodName = (
|
|
1574
|
+
const methodName = (_k = stacks.method) !== null && _k !== void 0 ? _k : '';
|
|
1211
1575
|
const cacheTabs = stacks.getTabs();
|
|
1212
1576
|
let shouldLoad = false;
|
|
1213
1577
|
stacks.method = '';
|
|
@@ -1226,6 +1590,7 @@ function createRouter(app, config, framework) {
|
|
|
1226
1590
|
if (handler.isSamePage(currentPage))
|
|
1227
1591
|
return;
|
|
1228
1592
|
if (handler.isTabBar(currentPage.path)) {
|
|
1593
|
+
// NOTE: 从 tabBar 页面切换到 tabBar 页面
|
|
1229
1594
|
handler.hide(currentPage);
|
|
1230
1595
|
stacks.pushTab(currentPage.path.split('?')[0]);
|
|
1231
1596
|
}
|
|
@@ -1269,11 +1634,11 @@ function createRouter(app, config, framework) {
|
|
|
1269
1634
|
shouldLoad = true;
|
|
1270
1635
|
}
|
|
1271
1636
|
else if (action === 'PUSH') {
|
|
1272
|
-
handler.hide(currentPage);
|
|
1637
|
+
handler.hide(currentPage, true);
|
|
1273
1638
|
shouldLoad = true;
|
|
1274
1639
|
}
|
|
1275
1640
|
if (shouldLoad || stacks.length < 1) {
|
|
1276
|
-
const el = (
|
|
1641
|
+
const el = (_l = element.default) !== null && _l !== void 0 ? _l : element;
|
|
1277
1642
|
const loadConfig = Object.assign({}, pageConfig);
|
|
1278
1643
|
const stacksIndex = stacks.length;
|
|
1279
1644
|
delete loadConfig['path'];
|
|
@@ -1292,21 +1657,102 @@ function createRouter(app, config, framework) {
|
|
|
1292
1657
|
handler.load(page, pageConfig, pageStampId, stacksIndex);
|
|
1293
1658
|
}
|
|
1294
1659
|
});
|
|
1295
|
-
const routePath = addLeadingSlash(stripBasename(
|
|
1660
|
+
const routePath = runtime.addLeadingSlash(runtime.stripBasename(history$1.location.pathname, handler.basename));
|
|
1296
1661
|
if (routePath === '/') {
|
|
1297
|
-
|
|
1662
|
+
history$1.replace(prependBasename(handler.homePage + history$1.location.search));
|
|
1298
1663
|
}
|
|
1299
|
-
render({ location:
|
|
1664
|
+
render({ location: history$1.location, action: history.Action.Push });
|
|
1300
1665
|
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
|
|
1301
|
-
|
|
1666
|
+
window.addEventListener('visibilitychange', () => {
|
|
1667
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
1668
|
+
const currentPath = ((_a = runtime.Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
|
|
1669
|
+
const path = currentPath.substring(0, currentPath.indexOf('?'));
|
|
1670
|
+
const param = {};
|
|
1671
|
+
// app的 onShow/onHide 生命周期的路径信息为当前页面的路径
|
|
1672
|
+
Object.assign(param, launchParam, { path });
|
|
1673
|
+
if (document.visibilityState === 'visible') {
|
|
1674
|
+
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
|
|
1675
|
+
// 单页面app显示后一刻会触发当前 page.onShow 生命周期函数
|
|
1676
|
+
(_d = (_c = runtime.Current.page) === null || _c === void 0 ? void 0 : _c.onShow) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
1677
|
+
}
|
|
1678
|
+
else {
|
|
1679
|
+
// 单页面app隐藏前一刻会触发当前 page.onHide 生命周期函数
|
|
1680
|
+
if ((_e = runtime.Current.page) === null || _e === void 0 ? void 0 : _e.path) {
|
|
1681
|
+
runtime.safeExecute((_f = runtime.Current.page) === null || _f === void 0 ? void 0 : _f.path, 'onHide');
|
|
1682
|
+
}
|
|
1683
|
+
(_g = app.onHide) === null || _g === void 0 ? void 0 : _g.call(app, param);
|
|
1684
|
+
}
|
|
1685
|
+
});
|
|
1686
|
+
return history$1.listen(render);
|
|
1687
|
+
}
|
|
1688
|
+
|
|
1689
|
+
function handleAppMount(config, _, appId = config.appId || 'app') {
|
|
1690
|
+
let app = document.getElementById(appId);
|
|
1691
|
+
let isPosition = true;
|
|
1692
|
+
if (!app) {
|
|
1693
|
+
app = document.createElement('div');
|
|
1694
|
+
app.id = appId;
|
|
1695
|
+
isPosition = false;
|
|
1696
|
+
}
|
|
1697
|
+
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
1698
|
+
app.classList.add('taro_router');
|
|
1699
|
+
if (!isPosition)
|
|
1700
|
+
appWrapper.appendChild(app);
|
|
1701
|
+
initNavigationBar(config, appWrapper);
|
|
1702
|
+
}
|
|
1703
|
+
function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
|
|
1704
|
+
let app = document.getElementById(appId);
|
|
1705
|
+
let isPosition = true;
|
|
1706
|
+
if (!app) {
|
|
1707
|
+
app = document.createElement('div');
|
|
1708
|
+
app.id = appId;
|
|
1709
|
+
isPosition = false;
|
|
1710
|
+
}
|
|
1711
|
+
const appWrapper = (app === null || app === void 0 ? void 0 : app.parentNode) || (app === null || app === void 0 ? void 0 : app.parentElement) || document.body;
|
|
1712
|
+
app.classList.add('taro_router');
|
|
1713
|
+
const container = document.createElement('div');
|
|
1714
|
+
container.classList.add('taro-tabbar__container');
|
|
1715
|
+
container.id = 'container';
|
|
1716
|
+
const panel = document.createElement('div');
|
|
1717
|
+
panel.classList.add('taro-tabbar__panel');
|
|
1718
|
+
panel.appendChild(app.cloneNode(true));
|
|
1719
|
+
container.appendChild(panel);
|
|
1720
|
+
if (!isPosition) {
|
|
1721
|
+
appWrapper.appendChild(container);
|
|
1722
|
+
}
|
|
1723
|
+
else {
|
|
1724
|
+
appWrapper.replaceChild(container, app);
|
|
1725
|
+
}
|
|
1726
|
+
initTabbar(config, history);
|
|
1727
|
+
initNavigationBar(config, container);
|
|
1302
1728
|
}
|
|
1303
1729
|
|
|
1730
|
+
Object.defineProperty(exports, "createBrowserHistory", {
|
|
1731
|
+
enumerable: true,
|
|
1732
|
+
get: function () { return history.createBrowserHistory; }
|
|
1733
|
+
});
|
|
1734
|
+
Object.defineProperty(exports, "createHashHistory", {
|
|
1735
|
+
enumerable: true,
|
|
1736
|
+
get: function () { return history.createHashHistory; }
|
|
1737
|
+
});
|
|
1738
|
+
exports.createMpaHistory = createMpaHistory;
|
|
1304
1739
|
exports.createMultiRouter = createMultiRouter;
|
|
1305
1740
|
exports.createRouter = createRouter;
|
|
1306
1741
|
exports.getCurrentPages = getCurrentPages;
|
|
1742
|
+
exports.handleAppMount = handleAppMount;
|
|
1743
|
+
exports.handleAppMountWithTabbar = handleAppMountWithTabbar;
|
|
1744
|
+
exports.isDingTalk = isDingTalk;
|
|
1745
|
+
exports.isWeixin = isWeixin;
|
|
1307
1746
|
exports.navigateBack = navigateBack;
|
|
1308
1747
|
exports.navigateTo = navigateTo;
|
|
1748
|
+
exports.prependBasename = prependBasename;
|
|
1309
1749
|
exports.reLaunch = reLaunch;
|
|
1310
1750
|
exports.redirectTo = redirectTo;
|
|
1751
|
+
exports.routesAlias = routesAlias;
|
|
1752
|
+
exports.setHistory = setHistory;
|
|
1753
|
+
exports.setHistoryMode = setHistoryMode;
|
|
1754
|
+
exports.setMpaTitle = setMpaTitle;
|
|
1755
|
+
exports.setNavigationBarLoading = setNavigationBarLoading;
|
|
1756
|
+
exports.setNavigationBarStyle = setNavigationBarStyle;
|
|
1757
|
+
exports.setTitle = setTitle;
|
|
1311
1758
|
exports.switchTab = switchTab;
|
|
1312
|
-
//# sourceMappingURL=index.cjs.js.map
|