@tarojs/router 4.0.0-beta.60 → 4.0.0-beta.62
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.esm.js
CHANGED
|
@@ -1,12 +1,181 @@
|
|
|
1
1
|
import { defineCustomElementTaroTabbar } from '@tarojs/components/dist/components';
|
|
2
2
|
import { initTabBarApis } from '@tarojs/taro';
|
|
3
3
|
import { __awaiter } from 'tslib';
|
|
4
|
-
import {
|
|
4
|
+
import { addLeadingSlash, eventCenter, Current, stripBasename, incrementId, createPageConfig, hooks, stringify, getHomePage, getCurrentPage, stripTrailing, requestAnimationFrame as requestAnimationFrame$1, safeExecute } from '@tarojs/runtime';
|
|
5
|
+
import { EventChannel } from '@tarojs/shared';
|
|
5
6
|
import { createBrowserHistory, createHashHistory, Action, parsePath } from 'history';
|
|
6
7
|
export { createBrowserHistory, createHashHistory } from 'history';
|
|
7
8
|
import queryString from 'query-string';
|
|
8
9
|
import UniversalRouter from 'universal-router';
|
|
9
10
|
|
|
11
|
+
/**
|
|
12
|
+
* 插入页面动画需要的样式
|
|
13
|
+
*/
|
|
14
|
+
function loadAnimateStyle(ms = 300) {
|
|
15
|
+
const css = `
|
|
16
|
+
body {
|
|
17
|
+
overflow: hidden; // 防止 iOS 页面滚动
|
|
18
|
+
}
|
|
19
|
+
.taro_router > .taro_page {
|
|
20
|
+
position: absolute;
|
|
21
|
+
left: 0;
|
|
22
|
+
top: 0;
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: 100%;
|
|
25
|
+
background-color: #fff;
|
|
26
|
+
transform: translate(100%, 0);
|
|
27
|
+
transition: transform ${ms}ms;
|
|
28
|
+
z-index: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.taro_router > .taro_page.taro_tabbar_page,
|
|
32
|
+
.taro_router > .taro_page.taro_page_show.taro_page_stationed {
|
|
33
|
+
transform: none;
|
|
34
|
+
transition: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.taro_router > .taro_page.taro_page_show {
|
|
38
|
+
transform: translate(0, 0);
|
|
39
|
+
}
|
|
40
|
+
`;
|
|
41
|
+
addStyle(css);
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* 插入路由相关样式
|
|
45
|
+
*/
|
|
46
|
+
function loadRouterStyle(enableTabBar, enableWindowScroll) {
|
|
47
|
+
const css = `
|
|
48
|
+
.taro_router {
|
|
49
|
+
position: relative;
|
|
50
|
+
width: 100%;
|
|
51
|
+
height: 100%;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.taro_page {
|
|
55
|
+
width: 100%;
|
|
56
|
+
height: 100%;
|
|
57
|
+
${enableWindowScroll ? '' : `
|
|
58
|
+
overflow-x: hidden;
|
|
59
|
+
overflow-y: scroll;
|
|
60
|
+
max-height: 100vh;
|
|
61
|
+
`}
|
|
62
|
+
}
|
|
63
|
+
${enableTabBar ? `
|
|
64
|
+
.taro-tabbar__container > .taro-tabbar__panel {
|
|
65
|
+
overflow: hidden;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
|
|
69
|
+
max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
|
|
70
|
+
max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
` : ''}
|
|
74
|
+
.taro_page_shade,
|
|
75
|
+
.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
|
|
76
|
+
display: none;
|
|
77
|
+
}
|
|
78
|
+
`;
|
|
79
|
+
addStyle(css);
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* 插入导航栏相关的样式
|
|
83
|
+
*/
|
|
84
|
+
function loadNavigationBarStyle() {
|
|
85
|
+
const css = `
|
|
86
|
+
.taro-navigation-bar-show {
|
|
87
|
+
display: flex;
|
|
88
|
+
background: white;
|
|
89
|
+
position: sticky;
|
|
90
|
+
z-index: 500;
|
|
91
|
+
top: 0;
|
|
92
|
+
padding-bottom: 8px;
|
|
93
|
+
padding-top: calc(env(safe-area-inset-top) + 8px);
|
|
94
|
+
justify-content: center;
|
|
95
|
+
align-items: center;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.taro-navigation-bar-hide {
|
|
99
|
+
display: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.taro-navigation-bar-title-wrap {
|
|
103
|
+
display: flex;
|
|
104
|
+
height: 24px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.taro-navigation-bar-title-wrap > .taro-navigation-bar-loading {
|
|
108
|
+
display: none;
|
|
109
|
+
animation: loading 2s linear infinite;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.taro-navigation-bar-title-wrap .taro-navigation-bar-loading.taro-navigation-bar-loading-show {
|
|
113
|
+
display: flex;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.taro-navigation-bar-title-wrap > .taro-navigation-bar-title {
|
|
117
|
+
font-size: 24px;
|
|
118
|
+
height: 24px;
|
|
119
|
+
line-height: 24px;
|
|
120
|
+
max-width: 100px;
|
|
121
|
+
white-space: nowrap;
|
|
122
|
+
overflow: hidden;
|
|
123
|
+
line-height: 24px;
|
|
124
|
+
text-overflow: ellipsis;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@keyframes loading {
|
|
128
|
+
from {
|
|
129
|
+
transform: rotate(0deg);
|
|
130
|
+
}
|
|
131
|
+
to {
|
|
132
|
+
transform: rotate(360deg);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@keyframes loading {
|
|
137
|
+
from {
|
|
138
|
+
transform: rotate(0deg);
|
|
139
|
+
}
|
|
140
|
+
to {
|
|
141
|
+
transform: rotate(360deg);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.taro-navigation-bar-no-icon > .taro-navigation-bar-home {
|
|
146
|
+
display: none;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.taro-navigation-bar-no-icon > .taro-navigation-bar-back {
|
|
150
|
+
display: none;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.taro-navigation-bar-home-icon > .taro-navigation-bar-home {
|
|
154
|
+
display: flex;
|
|
155
|
+
left: 8px;
|
|
156
|
+
position: absolute;
|
|
157
|
+
width: 24px;
|
|
158
|
+
height: 24px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.taro-navigation-bar-back-icon > .taro-navigation-bar-back {
|
|
162
|
+
display: flex;
|
|
163
|
+
left: 8px;
|
|
164
|
+
position: absolute;
|
|
165
|
+
width: 24px;
|
|
166
|
+
height: 24px;
|
|
167
|
+
}
|
|
168
|
+
`;
|
|
169
|
+
addStyle(css);
|
|
170
|
+
}
|
|
171
|
+
function addStyle(css) {
|
|
172
|
+
if (!css)
|
|
173
|
+
return;
|
|
174
|
+
const style = document.createElement('style');
|
|
175
|
+
style.innerHTML = css;
|
|
176
|
+
document.getElementsByTagName('head')[0].appendChild(style);
|
|
177
|
+
}
|
|
178
|
+
|
|
10
179
|
const home_svg_str = `
|
|
11
180
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
12
181
|
<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"/>
|
|
@@ -16,21 +185,36 @@ const back_svg_str = `
|
|
|
16
185
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
17
186
|
<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"/>
|
|
18
187
|
</svg>
|
|
19
|
-
|
|
20
188
|
`;
|
|
21
|
-
|
|
22
|
-
|
|
189
|
+
const loading_svg_str = `
|
|
190
|
+
<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>
|
|
191
|
+
`;
|
|
192
|
+
function initNavigationBar(config, container) {
|
|
193
|
+
if (config.router.mode === 'multi')
|
|
194
|
+
return;
|
|
195
|
+
const navigationBar = document.createElement('div');
|
|
23
196
|
navigationBar.classList.add('taro-navigation-bar-no-icon');
|
|
24
|
-
const navigationBarBackBtn = document.createElement('
|
|
25
|
-
|
|
197
|
+
const navigationBarBackBtn = document.createElement('div');
|
|
198
|
+
navigationBarBackBtn.classList.add('taro-navigation-bar-back');
|
|
199
|
+
const navigationBarHomeBtn = document.createElement('div');
|
|
200
|
+
navigationBarHomeBtn.classList.add('taro-navigation-bar-home');
|
|
26
201
|
navigationBarBackBtn.innerHTML = back_svg_str;
|
|
27
202
|
navigationBarHomeBtn.innerHTML = home_svg_str;
|
|
28
|
-
const
|
|
203
|
+
const navigationBarTitleWrap = document.createElement('div');
|
|
204
|
+
navigationBarTitleWrap.classList.add('taro-navigation-bar-title-wrap');
|
|
205
|
+
const navigationBarLoading = document.createElement('div');
|
|
206
|
+
navigationBarLoading.classList.add('taro-navigation-bar-loading');
|
|
207
|
+
navigationBarLoading.innerHTML = loading_svg_str;
|
|
208
|
+
const navigationBarTitle = document.createElement('div');
|
|
209
|
+
navigationBarTitle.classList.add('taro-navigation-bar-title');
|
|
210
|
+
navigationBarTitleWrap.appendChild(navigationBarLoading);
|
|
211
|
+
navigationBarTitleWrap.appendChild(navigationBarTitle);
|
|
29
212
|
navigationBar.appendChild(navigationBarHomeBtn);
|
|
30
213
|
navigationBar.appendChild(navigationBarBackBtn);
|
|
31
|
-
navigationBar.appendChild(
|
|
214
|
+
navigationBar.appendChild(navigationBarTitleWrap);
|
|
32
215
|
navigationBar.id = 'taro-navigation-bar';
|
|
33
216
|
container.prepend(navigationBar);
|
|
217
|
+
loadNavigationBarStyle();
|
|
34
218
|
}
|
|
35
219
|
|
|
36
220
|
function initTabbar(config, history) {
|
|
@@ -106,7 +290,7 @@ class MpaHistory {
|
|
|
106
290
|
}
|
|
107
291
|
parseUrl(to) {
|
|
108
292
|
let url = to.pathname || '';
|
|
109
|
-
if (RouterConfig.isPage(url)) {
|
|
293
|
+
if (RouterConfig.isPage(addLeadingSlash(url))) {
|
|
110
294
|
url += '.html';
|
|
111
295
|
}
|
|
112
296
|
if (to.search) {
|
|
@@ -289,11 +473,14 @@ function setMpaTitle(title) {
|
|
|
289
473
|
}
|
|
290
474
|
}
|
|
291
475
|
function setTitle(title) {
|
|
292
|
-
eventCenter.trigger('
|
|
476
|
+
eventCenter.trigger('__taroH5SetNavigationBarTitle', title);
|
|
293
477
|
}
|
|
294
478
|
function setNavigationBarStyle(option) {
|
|
295
479
|
eventCenter.trigger('__taroH5setNavigationBarColor', option);
|
|
296
480
|
}
|
|
481
|
+
function setNavigationBarLoading(loading) {
|
|
482
|
+
eventCenter.trigger('__taroH5setNavigationBarLoading', loading);
|
|
483
|
+
}
|
|
297
484
|
|
|
298
485
|
class RoutesAlias {
|
|
299
486
|
constructor() {
|
|
@@ -336,6 +523,7 @@ class RoutesAlias {
|
|
|
336
523
|
}
|
|
337
524
|
const routesAlias = new RoutesAlias();
|
|
338
525
|
|
|
526
|
+
const routeEvtChannel = EventChannel.routeChannel;
|
|
339
527
|
function processNavigateUrl(option) {
|
|
340
528
|
var _a;
|
|
341
529
|
const pathPieces = parsePath(option.url);
|
|
@@ -367,6 +555,10 @@ function navigate(option, method) {
|
|
|
367
555
|
const { success, complete, fail } = option;
|
|
368
556
|
const unListen = history.listen(() => {
|
|
369
557
|
const res = { errMsg: `${method}:ok` };
|
|
558
|
+
if (method === 'navigateTo') {
|
|
559
|
+
res.eventChannel = routeEvtChannel;
|
|
560
|
+
routeEvtChannel.addEvents(option.events);
|
|
561
|
+
}
|
|
370
562
|
success === null || success === void 0 ? void 0 : success(res);
|
|
371
563
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
372
564
|
resolve(res);
|
|
@@ -378,9 +570,8 @@ function navigate(option, method) {
|
|
|
378
570
|
const state = { timestamp: Date.now() };
|
|
379
571
|
if (pathPieces.pathname) {
|
|
380
572
|
const originPath = routesAlias.getOrigin(pathPieces.pathname);
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
const res = { errMsg: `${method}:fail page ${pagePath} is not found` };
|
|
573
|
+
if (!RouterConfig.isPage(addLeadingSlash(originPath)) && !RouterConfig.isPage(addLeadingSlash(pathPieces.pathname))) {
|
|
574
|
+
const res = { errMsg: `${method}:fail page ${originPath} is not found` };
|
|
384
575
|
fail === null || fail === void 0 ? void 0 : fail(res);
|
|
385
576
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
386
577
|
if (fail || complete) {
|
|
@@ -506,137 +697,6 @@ function getOffset() {
|
|
|
506
697
|
}
|
|
507
698
|
}
|
|
508
699
|
|
|
509
|
-
/**
|
|
510
|
-
* 插入页面动画需要的样式
|
|
511
|
-
*/
|
|
512
|
-
function loadAnimateStyle(ms = 300) {
|
|
513
|
-
const css = `
|
|
514
|
-
body {
|
|
515
|
-
overflow: hidden; // 防止 iOS 页面滚动
|
|
516
|
-
}
|
|
517
|
-
.taro_router > .taro_page {
|
|
518
|
-
position: absolute;
|
|
519
|
-
left: 0;
|
|
520
|
-
top: 0;
|
|
521
|
-
width: 100%;
|
|
522
|
-
height: 100%;
|
|
523
|
-
background-color: #fff;
|
|
524
|
-
transform: translate(100%, 0);
|
|
525
|
-
transition: transform ${ms}ms;
|
|
526
|
-
z-index: 0;
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
.taro_router > .taro_page.taro_tabbar_page,
|
|
530
|
-
.taro_router > .taro_page.taro_page_show.taro_page_stationed {
|
|
531
|
-
transform: none;
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
.taro_router > .taro_page.taro_page_show {
|
|
535
|
-
transform: translate(0, 0);
|
|
536
|
-
}
|
|
537
|
-
`;
|
|
538
|
-
addStyle(css);
|
|
539
|
-
}
|
|
540
|
-
/**
|
|
541
|
-
* 插入路由相关样式
|
|
542
|
-
*/
|
|
543
|
-
function loadRouterStyle(enableTabBar, enableWindowScroll) {
|
|
544
|
-
const css = `
|
|
545
|
-
.taro_router {
|
|
546
|
-
position: relative;
|
|
547
|
-
width: 100%;
|
|
548
|
-
height: 100%;
|
|
549
|
-
}
|
|
550
|
-
|
|
551
|
-
.taro_page {
|
|
552
|
-
width: 100%;
|
|
553
|
-
height: 100%;
|
|
554
|
-
${enableWindowScroll ? '' : `
|
|
555
|
-
overflow-x: hidden;
|
|
556
|
-
overflow-y: scroll;
|
|
557
|
-
max-height: 100vh;
|
|
558
|
-
`}
|
|
559
|
-
}
|
|
560
|
-
${enableTabBar ? `
|
|
561
|
-
.taro-tabbar__container > .taro-tabbar__panel {
|
|
562
|
-
overflow: hidden;
|
|
563
|
-
}
|
|
564
|
-
|
|
565
|
-
.taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
|
|
566
|
-
max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
|
|
567
|
-
max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
` : ''}
|
|
571
|
-
.taro_page_shade,
|
|
572
|
-
.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
|
|
573
|
-
display: none;
|
|
574
|
-
}
|
|
575
|
-
`;
|
|
576
|
-
addStyle(css);
|
|
577
|
-
}
|
|
578
|
-
/**
|
|
579
|
-
* 插入导航栏相关的样式
|
|
580
|
-
*/
|
|
581
|
-
function loadNavigationBarStyle() {
|
|
582
|
-
const css = `
|
|
583
|
-
.taro-navigation-bar-show {
|
|
584
|
-
background: white;
|
|
585
|
-
position: sticky;
|
|
586
|
-
z-index: 500;
|
|
587
|
-
top: 0;
|
|
588
|
-
padding-bottom: 8px;
|
|
589
|
-
padding-top: calc(env(safe-area-inset-top) + 8px);
|
|
590
|
-
display: flex;
|
|
591
|
-
justify-content: center;
|
|
592
|
-
align-items: center;
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
.taro-navigation-bar-hide {
|
|
596
|
-
display: none;
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
taro-navigation-bar-title {
|
|
600
|
-
font-size: 24px;
|
|
601
|
-
height: 24px;
|
|
602
|
-
line-height: 24px;
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
.taro-navigation-bar-no-icon > taro-navigation-bar-home {
|
|
606
|
-
display: none;
|
|
607
|
-
}
|
|
608
|
-
|
|
609
|
-
.taro-navigation-bar-no-icon > taro-navigation-bar-back {
|
|
610
|
-
display: none;
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
.taro-navigation-bar-home > taro-navigation-bar-home {
|
|
614
|
-
display: block;
|
|
615
|
-
left: 8px;
|
|
616
|
-
position: absolute;
|
|
617
|
-
width: 24px;
|
|
618
|
-
height: 24px;
|
|
619
|
-
}
|
|
620
|
-
|
|
621
|
-
.taro-navigation-bar-back > taro-navigation-bar-back {
|
|
622
|
-
display: block;
|
|
623
|
-
left: 8px;
|
|
624
|
-
position: absolute;
|
|
625
|
-
width: 24px;
|
|
626
|
-
height: 24px;
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
`;
|
|
630
|
-
addStyle(css);
|
|
631
|
-
}
|
|
632
|
-
function addStyle(css) {
|
|
633
|
-
if (!css)
|
|
634
|
-
return;
|
|
635
|
-
const style = document.createElement('style');
|
|
636
|
-
style.innerHTML = css;
|
|
637
|
-
document.getElementsByTagName('head')[0].appendChild(style);
|
|
638
|
-
}
|
|
639
|
-
|
|
640
700
|
/* eslint-disable dot-notation */
|
|
641
701
|
class MultiPageHandler {
|
|
642
702
|
constructor(config, history) {
|
|
@@ -797,7 +857,7 @@ function createMultiRouter(history, app, config, framework) {
|
|
|
797
857
|
if (typeof app.onUnhandledRejection === 'function') {
|
|
798
858
|
window.addEventListener('unhandledrejection', app.onUnhandledRejection);
|
|
799
859
|
}
|
|
800
|
-
eventCenter.on('
|
|
860
|
+
eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle);
|
|
801
861
|
RouterConfig.config = config;
|
|
802
862
|
const handler = new MultiPageHandler(config, history);
|
|
803
863
|
const launchParam = {
|
|
@@ -844,12 +904,17 @@ function createMultiRouter(history, app, config, framework) {
|
|
|
844
904
|
handler.load(page, pageConfig);
|
|
845
905
|
(_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
|
|
846
906
|
window.addEventListener('visibilitychange', () => {
|
|
847
|
-
var _a, _b;
|
|
907
|
+
var _a, _b, _c;
|
|
908
|
+
const currentPath = ((_a = Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
|
|
909
|
+
const path = currentPath.substring(0, currentPath.indexOf('?'));
|
|
910
|
+
const param = {};
|
|
911
|
+
// app的 onShow/onHide 生命周期的路径信息为当前页面的路径
|
|
912
|
+
Object.assign(param, launchParam, { path });
|
|
848
913
|
if (document.visibilityState === 'visible') {
|
|
849
|
-
(
|
|
914
|
+
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
|
|
850
915
|
}
|
|
851
916
|
else {
|
|
852
|
-
(
|
|
917
|
+
(_c = app.onHide) === null || _c === void 0 ? void 0 : _c.call(app, param);
|
|
853
918
|
}
|
|
854
919
|
});
|
|
855
920
|
});
|
|
@@ -861,10 +926,12 @@ class NavigationBarHandler {
|
|
|
861
926
|
this.cache = {};
|
|
862
927
|
this.pageContext = pageContext;
|
|
863
928
|
this.init();
|
|
864
|
-
|
|
865
|
-
eventCenter.on('__taroH5SetNavigationTitle', (title) => {
|
|
929
|
+
eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
|
|
866
930
|
this.setTitle(title);
|
|
867
931
|
});
|
|
932
|
+
eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
|
|
933
|
+
this.setNavigationLoading(loading);
|
|
934
|
+
});
|
|
868
935
|
eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
|
|
869
936
|
if (typeof backgroundColor === 'string')
|
|
870
937
|
this.setNavigationBarBackground(backgroundColor);
|
|
@@ -882,19 +949,24 @@ class NavigationBarHandler {
|
|
|
882
949
|
var _a;
|
|
883
950
|
if (!this.navigationBarElement)
|
|
884
951
|
return null;
|
|
885
|
-
return (_a = this.navigationBarElement.
|
|
952
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-home')) === null || _a === void 0 ? void 0 : _a[0];
|
|
886
953
|
}
|
|
887
954
|
get backBtnElement() {
|
|
888
955
|
var _a;
|
|
889
956
|
if (!this.navigationBarElement)
|
|
890
957
|
return null;
|
|
891
|
-
return (_a = this.navigationBarElement.
|
|
958
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-back')) === null || _a === void 0 ? void 0 : _a[0];
|
|
892
959
|
}
|
|
893
960
|
get titleElement() {
|
|
894
961
|
var _a;
|
|
895
962
|
if (!this.navigationBarElement)
|
|
896
963
|
return null;
|
|
897
|
-
return (_a = this.navigationBarElement.
|
|
964
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-title')) === null || _a === void 0 ? void 0 : _a[0];
|
|
965
|
+
}
|
|
966
|
+
get loadingElement() {
|
|
967
|
+
if (!this.navigationBarElement)
|
|
968
|
+
return null;
|
|
969
|
+
return this.navigationBarElement.getElementsByClassName('taro-navigation-bar-loading')[0];
|
|
898
970
|
}
|
|
899
971
|
init() {
|
|
900
972
|
var _a, _b;
|
|
@@ -905,8 +977,7 @@ class NavigationBarHandler {
|
|
|
905
977
|
(_b = this.backBtnElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.backFn.bind(this));
|
|
906
978
|
}
|
|
907
979
|
setNavigationBarElement() {
|
|
908
|
-
|
|
909
|
-
this.navigationBarElement = (_a = document.getElementsByTagName('taro-navigation-bar-wrap')) === null || _a === void 0 ? void 0 : _a[0];
|
|
980
|
+
this.navigationBarElement = document.getElementById('taro-navigation-bar');
|
|
910
981
|
}
|
|
911
982
|
load() {
|
|
912
983
|
this.setCacheValue();
|
|
@@ -915,6 +986,7 @@ class NavigationBarHandler {
|
|
|
915
986
|
this.setFnBtnState();
|
|
916
987
|
this.setNavigationBarBackground();
|
|
917
988
|
this.setNavigationBarTextStyle();
|
|
989
|
+
this.setNavigationLoading();
|
|
918
990
|
}
|
|
919
991
|
setCacheValue() {
|
|
920
992
|
const currentPage = this.pageContext.currentPage;
|
|
@@ -934,6 +1006,41 @@ class NavigationBarHandler {
|
|
|
934
1006
|
this.fnBtnToggleToHome();
|
|
935
1007
|
}
|
|
936
1008
|
}
|
|
1009
|
+
shiftLoadingState(show) {
|
|
1010
|
+
if (!this.loadingElement)
|
|
1011
|
+
return;
|
|
1012
|
+
if (show) {
|
|
1013
|
+
this.loadingElement.classList.add('taro-navigation-bar-loading-show');
|
|
1014
|
+
}
|
|
1015
|
+
else {
|
|
1016
|
+
this.loadingElement.classList.remove('taro-navigation-bar-loading-show');
|
|
1017
|
+
}
|
|
1018
|
+
}
|
|
1019
|
+
setNavigationLoading(show) {
|
|
1020
|
+
var _a;
|
|
1021
|
+
if (!this.navigationBarElement)
|
|
1022
|
+
return;
|
|
1023
|
+
const currentPage = this.pageContext.currentPage;
|
|
1024
|
+
let isShow;
|
|
1025
|
+
if (typeof show === 'boolean') {
|
|
1026
|
+
isShow = show;
|
|
1027
|
+
this.cache[currentPage] &&
|
|
1028
|
+
(this.cache[currentPage].loading = isShow);
|
|
1029
|
+
}
|
|
1030
|
+
else {
|
|
1031
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.loading;
|
|
1032
|
+
if (typeof cacheValue === 'boolean') {
|
|
1033
|
+
isShow = cacheValue;
|
|
1034
|
+
}
|
|
1035
|
+
else {
|
|
1036
|
+
// 默认值为 false
|
|
1037
|
+
isShow = false;
|
|
1038
|
+
this.cache[currentPage] &&
|
|
1039
|
+
(this.cache[currentPage].loading = isShow);
|
|
1040
|
+
}
|
|
1041
|
+
}
|
|
1042
|
+
this.shiftLoadingState(isShow);
|
|
1043
|
+
}
|
|
937
1044
|
setNavigationBarBackground(backgroundColor) {
|
|
938
1045
|
var _a, _b, _c;
|
|
939
1046
|
if (!this.navigationBarElement)
|
|
@@ -1018,23 +1125,25 @@ class NavigationBarHandler {
|
|
|
1018
1125
|
fnBtnToggleToHome() {
|
|
1019
1126
|
if (!this.navigationBarElement)
|
|
1020
1127
|
return;
|
|
1021
|
-
this.navigationBarElement.classList.add('taro-navigation-bar-home');
|
|
1022
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-back');
|
|
1128
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-home-icon');
|
|
1129
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
|
|
1023
1130
|
}
|
|
1024
1131
|
fnBtnToggleToBack() {
|
|
1025
1132
|
if (!this.navigationBarElement)
|
|
1026
1133
|
return;
|
|
1027
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-home');
|
|
1028
|
-
this.navigationBarElement.classList.add('taro-navigation-bar-back');
|
|
1134
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
|
|
1135
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-back-icon');
|
|
1029
1136
|
}
|
|
1030
1137
|
fnBtnToggleToNone() {
|
|
1031
1138
|
if (!this.navigationBarElement)
|
|
1032
1139
|
return;
|
|
1033
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-home');
|
|
1034
|
-
this.navigationBarElement.classList.remove('taro-navigation-bar-back');
|
|
1140
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
|
|
1141
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
|
|
1035
1142
|
}
|
|
1036
1143
|
setNavigationBarVisible(show) {
|
|
1037
1144
|
var _a, _b;
|
|
1145
|
+
if (!this.navigationBarElement)
|
|
1146
|
+
return;
|
|
1038
1147
|
let shouldShow;
|
|
1039
1148
|
if (typeof show === 'boolean') {
|
|
1040
1149
|
shouldShow = show;
|
|
@@ -1551,12 +1660,23 @@ function createRouter(history, app, config, framework) {
|
|
|
1551
1660
|
render({ location: history.location, action: Action.Push });
|
|
1552
1661
|
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
|
|
1553
1662
|
window.addEventListener('visibilitychange', () => {
|
|
1554
|
-
var _a, _b;
|
|
1663
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
1664
|
+
const currentPath = ((_a = Current.page) === null || _a === void 0 ? void 0 : _a.path) || '';
|
|
1665
|
+
const path = currentPath.substring(0, currentPath.indexOf('?'));
|
|
1666
|
+
const param = {};
|
|
1667
|
+
// app的 onShow/onHide 生命周期的路径信息为当前页面的路径
|
|
1668
|
+
Object.assign(param, launchParam, { path });
|
|
1555
1669
|
if (document.visibilityState === 'visible') {
|
|
1556
|
-
(
|
|
1670
|
+
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
|
|
1671
|
+
// 单页面app显示后一刻会触发当前 page.onShow 生命周期函数
|
|
1672
|
+
(_d = (_c = Current.page) === null || _c === void 0 ? void 0 : _c.onShow) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
1557
1673
|
}
|
|
1558
1674
|
else {
|
|
1559
|
-
|
|
1675
|
+
// 单页面app隐藏前一刻会触发当前 page.onHide 生命周期函数
|
|
1676
|
+
if ((_e = Current.page) === null || _e === void 0 ? void 0 : _e.path) {
|
|
1677
|
+
safeExecute((_f = Current.page) === null || _f === void 0 ? void 0 : _f.path, 'onHide');
|
|
1678
|
+
}
|
|
1679
|
+
(_g = app.onHide) === null || _g === void 0 ? void 0 : _g.call(app, param);
|
|
1560
1680
|
}
|
|
1561
1681
|
});
|
|
1562
1682
|
return history.listen(render);
|
|
@@ -1574,7 +1694,7 @@ function handleAppMount(config, _, appId = config.appId || 'app') {
|
|
|
1574
1694
|
app.classList.add('taro_router');
|
|
1575
1695
|
if (!isPosition)
|
|
1576
1696
|
appWrapper.appendChild(app);
|
|
1577
|
-
initNavigationBar(appWrapper);
|
|
1697
|
+
initNavigationBar(config, appWrapper);
|
|
1578
1698
|
}
|
|
1579
1699
|
function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
|
|
1580
1700
|
let app = document.getElementById(appId);
|
|
@@ -1600,7 +1720,7 @@ function handleAppMountWithTabbar(config, history, appId = config.appId || 'app'
|
|
|
1600
1720
|
appWrapper.replaceChild(container, app);
|
|
1601
1721
|
}
|
|
1602
1722
|
initTabbar(config, history);
|
|
1603
|
-
initNavigationBar(container);
|
|
1723
|
+
initNavigationBar(config, container);
|
|
1604
1724
|
}
|
|
1605
1725
|
|
|
1606
|
-
export { createMpaHistory, createMultiRouter, createRouter, getCurrentPages, handleAppMount, handleAppMountWithTabbar, history, isDingTalk, isWeixin, navigateBack, navigateTo, prependBasename, reLaunch, redirectTo, routesAlias, setHistory, setHistoryMode, setMpaTitle, setNavigationBarStyle, setTitle, switchTab };
|
|
1726
|
+
export { createMpaHistory, createMultiRouter, createRouter, getCurrentPages, handleAppMount, handleAppMountWithTabbar, history, isDingTalk, isWeixin, navigateBack, navigateTo, prependBasename, reLaunch, redirectTo, routesAlias, setHistory, setHistoryMode, setMpaTitle, setNavigationBarLoading, setNavigationBarStyle, setTitle, switchTab };
|
package/dist/index.js
CHANGED
|
@@ -6,7 +6,7 @@ export { createMultiRouter } from './router/mpa.js';
|
|
|
6
6
|
export { createRouter } from './router/spa.js';
|
|
7
7
|
export { routesAlias } from './utils/index.js';
|
|
8
8
|
export { createBrowserHistory, createHashHistory } from 'history';
|
|
9
|
-
export { isDingTalk, isWeixin, setMpaTitle, setNavigationBarStyle, setTitle } from './utils/navigate.js';
|
|
9
|
+
export { isDingTalk, isWeixin, setMpaTitle, setNavigationBarLoading, setNavigationBarStyle, setTitle } from './utils/navigate.js';
|
|
10
10
|
|
|
11
11
|
function handleAppMount(config, _, appId = config.appId || 'app') {
|
|
12
12
|
let app = document.getElementById(appId);
|
|
@@ -20,7 +20,7 @@ function handleAppMount(config, _, appId = config.appId || 'app') {
|
|
|
20
20
|
app.classList.add('taro_router');
|
|
21
21
|
if (!isPosition)
|
|
22
22
|
appWrapper.appendChild(app);
|
|
23
|
-
initNavigationBar(appWrapper);
|
|
23
|
+
initNavigationBar(config, appWrapper);
|
|
24
24
|
}
|
|
25
25
|
function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
|
|
26
26
|
let app = document.getElementById(appId);
|
|
@@ -46,7 +46,7 @@ function handleAppMountWithTabbar(config, history, appId = config.appId || 'app'
|
|
|
46
46
|
appWrapper.replaceChild(container, app);
|
|
47
47
|
}
|
|
48
48
|
initTabbar(config, history);
|
|
49
|
-
initNavigationBar(container);
|
|
49
|
+
initNavigationBar(config, container);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
export { handleAppMount, handleAppMountWithTabbar };
|
package/dist/navigationBar.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
import { MpaRouterConfig, SpaRouterConfig } from '../types/router';
|
|
2
|
+
declare function initNavigationBar(config: SpaRouterConfig | MpaRouterConfig, container: HTMLElement): void;
|
|
2
3
|
export { initNavigationBar };
|