@tarojs/router 4.0.0-beta.9 → 4.0.0-beta.90
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/api.js +8 -3
- package/dist/history.js +2 -1
- package/dist/index.cjs.d.ts +2 -1
- package/dist/index.cjs.js +286 -165
- package/dist/index.esm.d.ts +2 -1
- package/dist/index.esm.js +287 -167
- package/dist/index.js +3 -3
- package/dist/navigationBar.d.ts +2 -1
- package/dist/navigationBar.js +24 -7
- package/dist/router/mpa.js +10 -5
- package/dist/router/navigation-bar.d.ts +5 -1
- package/dist/router/navigation-bar.js +57 -14
- package/dist/router/spa.js +15 -4
- package/dist/style.js +47 -10
- package/dist/utils/navigate.d.ts +2 -1
- package/dist/utils/navigate.js +5 -2
- package/package.json +7 -5
- package/types/api.d.ts +5 -0
package/dist/index.cjs.js
CHANGED
|
@@ -4,10 +4,179 @@ 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
|
+
overflow: hidden; // 防止 iOS 页面滚动
|
|
19
|
+
}
|
|
20
|
+
.taro_router > .taro_page {
|
|
21
|
+
position: absolute;
|
|
22
|
+
left: 0;
|
|
23
|
+
top: 0;
|
|
24
|
+
width: 100%;
|
|
25
|
+
height: 100%;
|
|
26
|
+
background-color: #fff;
|
|
27
|
+
transform: translate(100%, 0);
|
|
28
|
+
transition: transform ${ms}ms;
|
|
29
|
+
z-index: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.taro_router > .taro_page.taro_tabbar_page,
|
|
33
|
+
.taro_router > .taro_page.taro_page_show.taro_page_stationed {
|
|
34
|
+
transform: none;
|
|
35
|
+
transition: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.taro_router > .taro_page.taro_page_show {
|
|
39
|
+
transform: translate(0, 0);
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
42
|
+
addStyle(css);
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* 插入路由相关样式
|
|
46
|
+
*/
|
|
47
|
+
function loadRouterStyle(enableTabBar, enableWindowScroll) {
|
|
48
|
+
const css = `
|
|
49
|
+
.taro_router {
|
|
50
|
+
position: relative;
|
|
51
|
+
width: 100%;
|
|
52
|
+
height: 100%;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.taro_page {
|
|
56
|
+
width: 100%;
|
|
57
|
+
height: 100%;
|
|
58
|
+
${enableWindowScroll ? '' : `
|
|
59
|
+
overflow-x: hidden;
|
|
60
|
+
overflow-y: scroll;
|
|
61
|
+
max-height: 100vh;
|
|
62
|
+
`}
|
|
63
|
+
}
|
|
64
|
+
${enableTabBar ? `
|
|
65
|
+
.taro-tabbar__container > .taro-tabbar__panel {
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
|
|
70
|
+
max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
|
|
71
|
+
max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
` : ''}
|
|
75
|
+
.taro_page_shade,
|
|
76
|
+
.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
|
|
77
|
+
display: none;
|
|
78
|
+
}
|
|
79
|
+
`;
|
|
80
|
+
addStyle(css);
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* 插入导航栏相关的样式
|
|
84
|
+
*/
|
|
85
|
+
function loadNavigationBarStyle() {
|
|
86
|
+
const css = `
|
|
87
|
+
.taro-navigation-bar-show {
|
|
88
|
+
display: flex;
|
|
89
|
+
background: white;
|
|
90
|
+
position: sticky;
|
|
91
|
+
z-index: 500;
|
|
92
|
+
top: 0;
|
|
93
|
+
padding-bottom: 8px;
|
|
94
|
+
padding-top: calc(env(safe-area-inset-top) + 8px);
|
|
95
|
+
justify-content: center;
|
|
96
|
+
align-items: center;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.taro-navigation-bar-hide {
|
|
100
|
+
display: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.taro-navigation-bar-title-wrap {
|
|
104
|
+
display: flex;
|
|
105
|
+
height: 24px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.taro-navigation-bar-title-wrap > .taro-navigation-bar-loading {
|
|
109
|
+
display: none;
|
|
110
|
+
animation: loading 2s linear infinite;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.taro-navigation-bar-title-wrap .taro-navigation-bar-loading.taro-navigation-bar-loading-show {
|
|
114
|
+
display: flex;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.taro-navigation-bar-title-wrap > .taro-navigation-bar-title {
|
|
118
|
+
font-size: 24px;
|
|
119
|
+
height: 24px;
|
|
120
|
+
line-height: 24px;
|
|
121
|
+
max-width: 100px;
|
|
122
|
+
white-space: nowrap;
|
|
123
|
+
overflow: hidden;
|
|
124
|
+
line-height: 24px;
|
|
125
|
+
text-overflow: ellipsis;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@keyframes loading {
|
|
129
|
+
from {
|
|
130
|
+
transform: rotate(0deg);
|
|
131
|
+
}
|
|
132
|
+
to {
|
|
133
|
+
transform: rotate(360deg);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@keyframes loading {
|
|
138
|
+
from {
|
|
139
|
+
transform: rotate(0deg);
|
|
140
|
+
}
|
|
141
|
+
to {
|
|
142
|
+
transform: rotate(360deg);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.taro-navigation-bar-no-icon > .taro-navigation-bar-home {
|
|
147
|
+
display: none;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.taro-navigation-bar-no-icon > .taro-navigation-bar-back {
|
|
151
|
+
display: none;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.taro-navigation-bar-home-icon > .taro-navigation-bar-home {
|
|
155
|
+
display: flex;
|
|
156
|
+
left: 8px;
|
|
157
|
+
position: absolute;
|
|
158
|
+
width: 24px;
|
|
159
|
+
height: 24px;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.taro-navigation-bar-back-icon > .taro-navigation-bar-back {
|
|
163
|
+
display: flex;
|
|
164
|
+
left: 8px;
|
|
165
|
+
position: absolute;
|
|
166
|
+
width: 24px;
|
|
167
|
+
height: 24px;
|
|
168
|
+
}
|
|
169
|
+
`;
|
|
170
|
+
addStyle(css);
|
|
171
|
+
}
|
|
172
|
+
function addStyle(css) {
|
|
173
|
+
if (!css)
|
|
174
|
+
return;
|
|
175
|
+
const style = document.createElement('style');
|
|
176
|
+
style.innerHTML = css;
|
|
177
|
+
document.getElementsByTagName('head')[0].appendChild(style);
|
|
178
|
+
}
|
|
179
|
+
|
|
11
180
|
const home_svg_str = `
|
|
12
181
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
13
182
|
<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 +186,36 @@ const back_svg_str = `
|
|
|
17
186
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
18
187
|
<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
188
|
</svg>
|
|
20
|
-
|
|
21
189
|
`;
|
|
22
|
-
|
|
23
|
-
|
|
190
|
+
const loading_svg_str = `
|
|
191
|
+
<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>
|
|
192
|
+
`;
|
|
193
|
+
function initNavigationBar(config, container) {
|
|
194
|
+
if (config.router.mode === 'multi')
|
|
195
|
+
return;
|
|
196
|
+
const navigationBar = document.createElement('div');
|
|
24
197
|
navigationBar.classList.add('taro-navigation-bar-no-icon');
|
|
25
|
-
const navigationBarBackBtn = document.createElement('
|
|
26
|
-
|
|
198
|
+
const navigationBarBackBtn = document.createElement('div');
|
|
199
|
+
navigationBarBackBtn.classList.add('taro-navigation-bar-back');
|
|
200
|
+
const navigationBarHomeBtn = document.createElement('div');
|
|
201
|
+
navigationBarHomeBtn.classList.add('taro-navigation-bar-home');
|
|
27
202
|
navigationBarBackBtn.innerHTML = back_svg_str;
|
|
28
203
|
navigationBarHomeBtn.innerHTML = home_svg_str;
|
|
29
|
-
const
|
|
204
|
+
const navigationBarTitleWrap = document.createElement('div');
|
|
205
|
+
navigationBarTitleWrap.classList.add('taro-navigation-bar-title-wrap');
|
|
206
|
+
const navigationBarLoading = document.createElement('div');
|
|
207
|
+
navigationBarLoading.classList.add('taro-navigation-bar-loading');
|
|
208
|
+
navigationBarLoading.innerHTML = loading_svg_str;
|
|
209
|
+
const navigationBarTitle = document.createElement('div');
|
|
210
|
+
navigationBarTitle.classList.add('taro-navigation-bar-title');
|
|
211
|
+
navigationBarTitleWrap.appendChild(navigationBarLoading);
|
|
212
|
+
navigationBarTitleWrap.appendChild(navigationBarTitle);
|
|
30
213
|
navigationBar.appendChild(navigationBarHomeBtn);
|
|
31
214
|
navigationBar.appendChild(navigationBarBackBtn);
|
|
32
|
-
navigationBar.appendChild(
|
|
215
|
+
navigationBar.appendChild(navigationBarTitleWrap);
|
|
33
216
|
navigationBar.id = 'taro-navigation-bar';
|
|
34
217
|
container.prepend(navigationBar);
|
|
218
|
+
loadNavigationBarStyle();
|
|
35
219
|
}
|
|
36
220
|
|
|
37
221
|
function initTabbar(config, history) {
|
|
@@ -107,7 +291,7 @@ class MpaHistory {
|
|
|
107
291
|
}
|
|
108
292
|
parseUrl(to) {
|
|
109
293
|
let url = to.pathname || '';
|
|
110
|
-
if (RouterConfig.isPage(url)) {
|
|
294
|
+
if (RouterConfig.isPage(runtime.addLeadingSlash(url))) {
|
|
111
295
|
url += '.html';
|
|
112
296
|
}
|
|
113
297
|
if (to.search) {
|
|
@@ -290,11 +474,14 @@ function setMpaTitle(title) {
|
|
|
290
474
|
}
|
|
291
475
|
}
|
|
292
476
|
function setTitle(title) {
|
|
293
|
-
runtime.eventCenter.trigger('
|
|
477
|
+
runtime.eventCenter.trigger('__taroH5SetNavigationBarTitle', title);
|
|
294
478
|
}
|
|
295
479
|
function setNavigationBarStyle(option) {
|
|
296
480
|
runtime.eventCenter.trigger('__taroH5setNavigationBarColor', option);
|
|
297
481
|
}
|
|
482
|
+
function setNavigationBarLoading(loading) {
|
|
483
|
+
runtime.eventCenter.trigger('__taroH5setNavigationBarLoading', loading);
|
|
484
|
+
}
|
|
298
485
|
|
|
299
486
|
class RoutesAlias {
|
|
300
487
|
constructor() {
|
|
@@ -337,6 +524,7 @@ class RoutesAlias {
|
|
|
337
524
|
}
|
|
338
525
|
const routesAlias = new RoutesAlias();
|
|
339
526
|
|
|
527
|
+
const routeEvtChannel = shared.EventChannel.routeChannel;
|
|
340
528
|
function processNavigateUrl(option) {
|
|
341
529
|
var _a;
|
|
342
530
|
const pathPieces = history.parsePath(option.url);
|
|
@@ -368,6 +556,10 @@ function navigate(option, method) {
|
|
|
368
556
|
const { success, complete, fail } = option;
|
|
369
557
|
const unListen = exports.history.listen(() => {
|
|
370
558
|
const res = { errMsg: `${method}:ok` };
|
|
559
|
+
if (method === 'navigateTo') {
|
|
560
|
+
res.eventChannel = routeEvtChannel;
|
|
561
|
+
routeEvtChannel.addEvents(option.events);
|
|
562
|
+
}
|
|
371
563
|
success === null || success === void 0 ? void 0 : success(res);
|
|
372
564
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
373
565
|
resolve(res);
|
|
@@ -379,9 +571,8 @@ function navigate(option, method) {
|
|
|
379
571
|
const state = { timestamp: Date.now() };
|
|
380
572
|
if (pathPieces.pathname) {
|
|
381
573
|
const originPath = routesAlias.getOrigin(pathPieces.pathname);
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
const res = { errMsg: `${method}:fail page ${pagePath} is not found` };
|
|
574
|
+
if (!RouterConfig.isPage(runtime.addLeadingSlash(originPath)) && !RouterConfig.isPage(runtime.addLeadingSlash(pathPieces.pathname))) {
|
|
575
|
+
const res = { errMsg: `${method}:fail page ${originPath} is not found` };
|
|
385
576
|
fail === null || fail === void 0 ? void 0 : fail(res);
|
|
386
577
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
387
578
|
if (fail || complete) {
|
|
@@ -507,137 +698,6 @@ function getOffset() {
|
|
|
507
698
|
}
|
|
508
699
|
}
|
|
509
700
|
|
|
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
701
|
/* eslint-disable dot-notation */
|
|
642
702
|
class MultiPageHandler {
|
|
643
703
|
constructor(config, history) {
|
|
@@ -798,7 +858,7 @@ function createMultiRouter(history, app, config, framework) {
|
|
|
798
858
|
if (typeof app.onUnhandledRejection === 'function') {
|
|
799
859
|
window.addEventListener('unhandledrejection', app.onUnhandledRejection);
|
|
800
860
|
}
|
|
801
|
-
runtime.eventCenter.on('
|
|
861
|
+
runtime.eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle);
|
|
802
862
|
RouterConfig.config = config;
|
|
803
863
|
const handler = new MultiPageHandler(config, history);
|
|
804
864
|
const launchParam = {
|
|
@@ -845,12 +905,17 @@ function createMultiRouter(history, app, config, framework) {
|
|
|
845
905
|
handler.load(page, pageConfig);
|
|
846
906
|
(_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
|
|
847
907
|
window.addEventListener('visibilitychange', () => {
|
|
848
|
-
var _a, _b;
|
|
908
|
+
var _a, _b, _c;
|
|
909
|
+
const currentPath = ((_a = runtime.Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
|
|
910
|
+
const path = currentPath.substring(0, currentPath.indexOf('?'));
|
|
911
|
+
const param = {};
|
|
912
|
+
// app的 onShow/onHide 生命周期的路径信息为当前页面的路径
|
|
913
|
+
Object.assign(param, launchParam, { path });
|
|
849
914
|
if (document.visibilityState === 'visible') {
|
|
850
|
-
(
|
|
915
|
+
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
|
|
851
916
|
}
|
|
852
917
|
else {
|
|
853
|
-
(
|
|
918
|
+
(_c = app.onHide) === null || _c === void 0 ? void 0 : _c.call(app, param);
|
|
854
919
|
}
|
|
855
920
|
});
|
|
856
921
|
});
|
|
@@ -862,10 +927,12 @@ class NavigationBarHandler {
|
|
|
862
927
|
this.cache = {};
|
|
863
928
|
this.pageContext = pageContext;
|
|
864
929
|
this.init();
|
|
865
|
-
|
|
866
|
-
runtime.eventCenter.on('__taroH5SetNavigationTitle', (title) => {
|
|
930
|
+
runtime.eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
|
|
867
931
|
this.setTitle(title);
|
|
868
932
|
});
|
|
933
|
+
runtime.eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
|
|
934
|
+
this.setNavigationLoading(loading);
|
|
935
|
+
});
|
|
869
936
|
runtime.eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
|
|
870
937
|
if (typeof backgroundColor === 'string')
|
|
871
938
|
this.setNavigationBarBackground(backgroundColor);
|
|
@@ -883,19 +950,24 @@ class NavigationBarHandler {
|
|
|
883
950
|
var _a;
|
|
884
951
|
if (!this.navigationBarElement)
|
|
885
952
|
return null;
|
|
886
|
-
return (_a = this.navigationBarElement.
|
|
953
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-home')) === null || _a === void 0 ? void 0 : _a[0];
|
|
887
954
|
}
|
|
888
955
|
get backBtnElement() {
|
|
889
956
|
var _a;
|
|
890
957
|
if (!this.navigationBarElement)
|
|
891
958
|
return null;
|
|
892
|
-
return (_a = this.navigationBarElement.
|
|
959
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-back')) === null || _a === void 0 ? void 0 : _a[0];
|
|
893
960
|
}
|
|
894
961
|
get titleElement() {
|
|
895
962
|
var _a;
|
|
896
963
|
if (!this.navigationBarElement)
|
|
897
964
|
return null;
|
|
898
|
-
return (_a = this.navigationBarElement.
|
|
965
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-title')) === null || _a === void 0 ? void 0 : _a[0];
|
|
966
|
+
}
|
|
967
|
+
get loadingElement() {
|
|
968
|
+
if (!this.navigationBarElement)
|
|
969
|
+
return null;
|
|
970
|
+
return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-loading')[0];
|
|
899
971
|
}
|
|
900
972
|
init() {
|
|
901
973
|
var _a, _b;
|
|
@@ -906,8 +978,7 @@ class NavigationBarHandler {
|
|
|
906
978
|
(_b = this.backBtnElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.backFn.bind(this));
|
|
907
979
|
}
|
|
908
980
|
setNavigationBarElement() {
|
|
909
|
-
|
|
910
|
-
this.navigationBarElement = (_a = document.getElementsByTagName('taro-navigation-bar-wrap')) === null || _a === void 0 ? void 0 : _a[0];
|
|
981
|
+
this.navigationBarElement = document.getElementById('taro-navigation-bar');
|
|
911
982
|
}
|
|
912
983
|
load() {
|
|
913
984
|
this.setCacheValue();
|
|
@@ -916,6 +987,7 @@ class NavigationBarHandler {
|
|
|
916
987
|
this.setFnBtnState();
|
|
917
988
|
this.setNavigationBarBackground();
|
|
918
989
|
this.setNavigationBarTextStyle();
|
|
990
|
+
this.setNavigationLoading();
|
|
919
991
|
}
|
|
920
992
|
setCacheValue() {
|
|
921
993
|
const currentPage = this.pageContext.currentPage;
|
|
@@ -935,6 +1007,41 @@ class NavigationBarHandler {
|
|
|
935
1007
|
this.fnBtnToggleToHome();
|
|
936
1008
|
}
|
|
937
1009
|
}
|
|
1010
|
+
shiftLoadingState(show) {
|
|
1011
|
+
if (!this.loadingElement)
|
|
1012
|
+
return;
|
|
1013
|
+
if (show) {
|
|
1014
|
+
this.loadingElement.classList.add('taro-navigation-bar-loading-show');
|
|
1015
|
+
}
|
|
1016
|
+
else {
|
|
1017
|
+
this.loadingElement.classList.remove('taro-navigation-bar-loading-show');
|
|
1018
|
+
}
|
|
1019
|
+
}
|
|
1020
|
+
setNavigationLoading(show) {
|
|
1021
|
+
var _a;
|
|
1022
|
+
if (!this.navigationBarElement)
|
|
1023
|
+
return;
|
|
1024
|
+
const currentPage = this.pageContext.currentPage;
|
|
1025
|
+
let isShow;
|
|
1026
|
+
if (typeof show === 'boolean') {
|
|
1027
|
+
isShow = show;
|
|
1028
|
+
this.cache[currentPage] &&
|
|
1029
|
+
(this.cache[currentPage].loading = isShow);
|
|
1030
|
+
}
|
|
1031
|
+
else {
|
|
1032
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.loading;
|
|
1033
|
+
if (typeof cacheValue === 'boolean') {
|
|
1034
|
+
isShow = cacheValue;
|
|
1035
|
+
}
|
|
1036
|
+
else {
|
|
1037
|
+
// 默认值为 false
|
|
1038
|
+
isShow = false;
|
|
1039
|
+
this.cache[currentPage] &&
|
|
1040
|
+
(this.cache[currentPage].loading = isShow);
|
|
1041
|
+
}
|
|
1042
|
+
}
|
|
1043
|
+
this.shiftLoadingState(isShow);
|
|
1044
|
+
}
|
|
938
1045
|
setNavigationBarBackground(backgroundColor) {
|
|
939
1046
|
var _a, _b, _c;
|
|
940
1047
|
if (!this.navigationBarElement)
|
|
@@ -1019,23 +1126,25 @@ class NavigationBarHandler {
|
|
|
1019
1126
|
fnBtnToggleToHome() {
|
|
1020
1127
|
if (!this.navigationBarElement)
|
|
1021
1128
|
return;
|
|
1022
|
-
this.navigationBarElement.classList.add('taro-navigation-bar-home');
|
|
1023
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-back');
|
|
1129
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-home-icon');
|
|
1130
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
|
|
1024
1131
|
}
|
|
1025
1132
|
fnBtnToggleToBack() {
|
|
1026
1133
|
if (!this.navigationBarElement)
|
|
1027
1134
|
return;
|
|
1028
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-home');
|
|
1029
|
-
this.navigationBarElement.classList.add('taro-navigation-bar-back');
|
|
1135
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
|
|
1136
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-back-icon');
|
|
1030
1137
|
}
|
|
1031
1138
|
fnBtnToggleToNone() {
|
|
1032
1139
|
if (!this.navigationBarElement)
|
|
1033
1140
|
return;
|
|
1034
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-home');
|
|
1035
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-back');
|
|
1141
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
|
|
1142
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
|
|
1036
1143
|
}
|
|
1037
1144
|
setNavigationBarVisible(show) {
|
|
1038
1145
|
var _a, _b;
|
|
1146
|
+
if (!this.navigationBarElement)
|
|
1147
|
+
return;
|
|
1039
1148
|
let shouldShow;
|
|
1040
1149
|
if (typeof show === 'boolean') {
|
|
1041
1150
|
shouldShow = show;
|
|
@@ -1552,12 +1661,23 @@ function createRouter(history$1, app, config, framework) {
|
|
|
1552
1661
|
render({ location: history$1.location, action: history.Action.Push });
|
|
1553
1662
|
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
|
|
1554
1663
|
window.addEventListener('visibilitychange', () => {
|
|
1555
|
-
var _a, _b;
|
|
1664
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
1665
|
+
const currentPath = ((_a = runtime.Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
|
|
1666
|
+
const path = currentPath.substring(0, currentPath.indexOf('?'));
|
|
1667
|
+
const param = {};
|
|
1668
|
+
// app的 onShow/onHide 生命周期的路径信息为当前页面的路径
|
|
1669
|
+
Object.assign(param, launchParam, { path });
|
|
1556
1670
|
if (document.visibilityState === 'visible') {
|
|
1557
|
-
(
|
|
1671
|
+
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
|
|
1672
|
+
// 单页面app显示后一刻会触发当前 page.onShow 生命周期函数
|
|
1673
|
+
(_d = (_c = runtime.Current.page) === null || _c === void 0 ? void 0 : _c.onShow) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
1558
1674
|
}
|
|
1559
1675
|
else {
|
|
1560
|
-
|
|
1676
|
+
// 单页面app隐藏前一刻会触发当前 page.onHide 生命周期函数
|
|
1677
|
+
if ((_e = runtime.Current.page) === null || _e === void 0 ? void 0 : _e.path) {
|
|
1678
|
+
runtime.safeExecute((_f = runtime.Current.page) === null || _f === void 0 ? void 0 : _f.path, 'onHide');
|
|
1679
|
+
}
|
|
1680
|
+
(_g = app.onHide) === null || _g === void 0 ? void 0 : _g.call(app, param);
|
|
1561
1681
|
}
|
|
1562
1682
|
});
|
|
1563
1683
|
return history$1.listen(render);
|
|
@@ -1575,7 +1695,7 @@ function handleAppMount(config, _, appId = config.appId || 'app') {
|
|
|
1575
1695
|
app.classList.add('taro_router');
|
|
1576
1696
|
if (!isPosition)
|
|
1577
1697
|
appWrapper.appendChild(app);
|
|
1578
|
-
initNavigationBar(appWrapper);
|
|
1698
|
+
initNavigationBar(config, appWrapper);
|
|
1579
1699
|
}
|
|
1580
1700
|
function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
|
|
1581
1701
|
let app = document.getElementById(appId);
|
|
@@ -1601,7 +1721,7 @@ function handleAppMountWithTabbar(config, history, appId = config.appId || 'app'
|
|
|
1601
1721
|
appWrapper.replaceChild(container, app);
|
|
1602
1722
|
}
|
|
1603
1723
|
initTabbar(config, history);
|
|
1604
|
-
initNavigationBar(container);
|
|
1724
|
+
initNavigationBar(config, container);
|
|
1605
1725
|
}
|
|
1606
1726
|
|
|
1607
1727
|
Object.defineProperty(exports, 'createBrowserHistory', {
|
|
@@ -1629,6 +1749,7 @@ exports.routesAlias = routesAlias;
|
|
|
1629
1749
|
exports.setHistory = setHistory;
|
|
1630
1750
|
exports.setHistoryMode = setHistoryMode;
|
|
1631
1751
|
exports.setMpaTitle = setMpaTitle;
|
|
1752
|
+
exports.setNavigationBarLoading = setNavigationBarLoading;
|
|
1632
1753
|
exports.setNavigationBarStyle = setNavigationBarStyle;
|
|
1633
1754
|
exports.setTitle = setTitle;
|
|
1634
1755
|
exports.switchTab = switchTab;
|
package/dist/index.esm.d.ts
CHANGED
|
@@ -60,6 +60,7 @@ declare function setNavigationBarStyle(option: {
|
|
|
60
60
|
backgroundColor: string;
|
|
61
61
|
frontColor: string;
|
|
62
62
|
}): void;
|
|
63
|
+
declare function setNavigationBarLoading(loading: boolean): void;
|
|
63
64
|
declare function handleAppMount(config: SpaRouterConfig | MpaRouterConfig, _: History, appId?: string): void;
|
|
64
65
|
declare function handleAppMountWithTabbar(config: SpaRouterConfig | MpaRouterConfig, history: History, appId?: string): void;
|
|
65
|
-
export { navigateTo, redirectTo, navigateBack, switchTab, reLaunch, getCurrentPages, history, setHistory, createMpaHistory, createBrowserHistory, createHashHistory, setHistoryMode, prependBasename, createMultiRouter, createRouter, routesAlias, isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle, handleAppMount, handleAppMountWithTabbar };
|
|
66
|
+
export { navigateTo, redirectTo, navigateBack, switchTab, reLaunch, getCurrentPages, history, setHistory, createMpaHistory, createBrowserHistory, createHashHistory, setHistoryMode, prependBasename, createMultiRouter, createRouter, routesAlias, isWeixin, isDingTalk, setMpaTitle, setTitle, setNavigationBarStyle, setNavigationBarLoading, handleAppMount, handleAppMountWithTabbar };
|