@tarojs/router 4.0.0-beta.8 → 4.0.0-beta.80
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 +26 -1
- package/dist/events/resize.js +12 -6
- package/dist/history.js +3 -2
- package/dist/index.cjs.d.ts +8 -2
- package/dist/index.cjs.js +566 -105
- package/dist/index.esm.d.ts +8 -2
- package/dist/index.esm.js +565 -107
- package/dist/index.js +4 -1
- package/dist/navigationBar.d.ts +3 -0
- package/dist/navigationBar.js +44 -0
- package/dist/router/mpa.js +19 -3
- package/dist/router/navigation-bar.d.ts +36 -0
- package/dist/router/navigation-bar.js +252 -0
- package/dist/router/page.d.ts +3 -1
- package/dist/router/page.js +6 -0
- package/dist/router/spa.js +24 -6
- package/dist/style.d.ts +5 -1
- package/dist/style.js +95 -1
- package/dist/utils/index.js +0 -1
- package/dist/utils/navigate.d.ts +8 -2
- package/dist/utils/navigate.js +25 -19
- package/package.json +7 -5
- package/types/api.d.ts +5 -0
package/dist/index.esm.js
CHANGED
|
@@ -1,12 +1,222 @@
|
|
|
1
1
|
import { defineCustomElementTaroTabbar } from '@tarojs/components/dist/components';
|
|
2
2
|
import { initTabBarApis } from '@tarojs/taro';
|
|
3
3
|
import { __awaiter } from 'tslib';
|
|
4
|
-
import { addLeadingSlash, Current, stripBasename,
|
|
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
|
+
|
|
179
|
+
const home_svg_str = `
|
|
180
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
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"/>
|
|
182
|
+
</svg>
|
|
183
|
+
`;
|
|
184
|
+
const back_svg_str = `
|
|
185
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
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"/>
|
|
187
|
+
</svg>
|
|
188
|
+
`;
|
|
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');
|
|
196
|
+
navigationBar.classList.add('taro-navigation-bar-no-icon');
|
|
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');
|
|
201
|
+
navigationBarBackBtn.innerHTML = back_svg_str;
|
|
202
|
+
navigationBarHomeBtn.innerHTML = home_svg_str;
|
|
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);
|
|
212
|
+
navigationBar.appendChild(navigationBarHomeBtn);
|
|
213
|
+
navigationBar.appendChild(navigationBarBackBtn);
|
|
214
|
+
navigationBar.appendChild(navigationBarTitleWrap);
|
|
215
|
+
navigationBar.id = 'taro-navigation-bar';
|
|
216
|
+
container.prepend(navigationBar);
|
|
217
|
+
loadNavigationBarStyle();
|
|
218
|
+
}
|
|
219
|
+
|
|
10
220
|
function initTabbar(config, history) {
|
|
11
221
|
if (config.tabBar == null || config.tabBar.custom) {
|
|
12
222
|
return;
|
|
@@ -80,14 +290,14 @@ class MpaHistory {
|
|
|
80
290
|
}
|
|
81
291
|
parseUrl(to) {
|
|
82
292
|
let url = to.pathname || '';
|
|
83
|
-
if (RouterConfig.isPage(url)) {
|
|
293
|
+
if (RouterConfig.isPage(addLeadingSlash(url))) {
|
|
84
294
|
url += '.html';
|
|
85
295
|
}
|
|
86
296
|
if (to.search) {
|
|
87
297
|
url += `?${to.search}`;
|
|
88
298
|
}
|
|
89
299
|
if (to.hash) {
|
|
90
|
-
url += `#${to.hash}`;
|
|
300
|
+
url += to.hash.startsWith('#') ? to.hash : `#${to.hash}`;
|
|
91
301
|
}
|
|
92
302
|
return url;
|
|
93
303
|
}
|
|
@@ -244,26 +454,32 @@ class Stacks {
|
|
|
244
454
|
}
|
|
245
455
|
const stacks = new Stacks();
|
|
246
456
|
|
|
247
|
-
let preTitle = document.title;
|
|
248
|
-
let isLoadDdEntry = false;
|
|
249
457
|
const isWeixin = () => !!navigator.userAgent.match(/\bMicroMessenger\b/ig);
|
|
250
458
|
const isDingTalk = () => !!navigator.userAgent.match(/\bDingTalk\b/ig);
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
263
|
-
setDingTitle({ title });
|
|
459
|
+
let preTitle = document.title;
|
|
460
|
+
let isLoadDdEntry = false;
|
|
461
|
+
function setMpaTitle(title) {
|
|
462
|
+
if (preTitle === title)
|
|
463
|
+
return;
|
|
464
|
+
document.title = title;
|
|
465
|
+
preTitle = title;
|
|
466
|
+
if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
|
|
467
|
+
if (!isLoadDdEntry) {
|
|
468
|
+
isLoadDdEntry = true;
|
|
469
|
+
require('dingtalk-jsapi/platform');
|
|
264
470
|
}
|
|
265
|
-
|
|
266
|
-
|
|
471
|
+
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
472
|
+
setDingTitle({ title });
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
function setTitle(title) {
|
|
476
|
+
eventCenter.trigger('__taroH5SetNavigationBarTitle', title);
|
|
477
|
+
}
|
|
478
|
+
function setNavigationBarStyle(option) {
|
|
479
|
+
eventCenter.trigger('__taroH5setNavigationBarColor', option);
|
|
480
|
+
}
|
|
481
|
+
function setNavigationBarLoading(loading) {
|
|
482
|
+
eventCenter.trigger('__taroH5setNavigationBarLoading', loading);
|
|
267
483
|
}
|
|
268
484
|
|
|
269
485
|
class RoutesAlias {
|
|
@@ -307,6 +523,7 @@ class RoutesAlias {
|
|
|
307
523
|
}
|
|
308
524
|
const routesAlias = new RoutesAlias();
|
|
309
525
|
|
|
526
|
+
const routeEvtChannel = EventChannel.routeChannel;
|
|
310
527
|
function processNavigateUrl(option) {
|
|
311
528
|
var _a;
|
|
312
529
|
const pathPieces = parsePath(option.url);
|
|
@@ -338,6 +555,10 @@ function navigate(option, method) {
|
|
|
338
555
|
const { success, complete, fail } = option;
|
|
339
556
|
const unListen = history.listen(() => {
|
|
340
557
|
const res = { errMsg: `${method}:ok` };
|
|
558
|
+
if (method === 'navigateTo') {
|
|
559
|
+
res.eventChannel = routeEvtChannel;
|
|
560
|
+
routeEvtChannel.addEvents(option.events);
|
|
561
|
+
}
|
|
341
562
|
success === null || success === void 0 ? void 0 : success(res);
|
|
342
563
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
343
564
|
resolve(res);
|
|
@@ -347,6 +568,20 @@ function navigate(option, method) {
|
|
|
347
568
|
if ('url' in option) {
|
|
348
569
|
const pathPieces = processNavigateUrl(option);
|
|
349
570
|
const state = { timestamp: Date.now() };
|
|
571
|
+
if (pathPieces.pathname) {
|
|
572
|
+
const originPath = routesAlias.getOrigin(pathPieces.pathname);
|
|
573
|
+
if (!RouterConfig.isPage(addLeadingSlash(originPath)) && !RouterConfig.isPage(addLeadingSlash(pathPieces.pathname))) {
|
|
574
|
+
const res = { errMsg: `${method}:fail page ${originPath} is not found` };
|
|
575
|
+
fail === null || fail === void 0 ? void 0 : fail(res);
|
|
576
|
+
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
577
|
+
if (fail || complete) {
|
|
578
|
+
return resolve(res);
|
|
579
|
+
}
|
|
580
|
+
else {
|
|
581
|
+
return reject(res);
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
}
|
|
350
585
|
if (method === 'navigateTo') {
|
|
351
586
|
history.push(pathPieces, state);
|
|
352
587
|
}
|
|
@@ -372,7 +607,12 @@ function navigate(option, method) {
|
|
|
372
607
|
const res = { errMsg: `${method}:fail ${error.message || error}` };
|
|
373
608
|
fail === null || fail === void 0 ? void 0 : fail(res);
|
|
374
609
|
complete === null || complete === void 0 ? void 0 : complete(res);
|
|
375
|
-
|
|
610
|
+
if (fail || complete) {
|
|
611
|
+
return resolve(res);
|
|
612
|
+
}
|
|
613
|
+
else {
|
|
614
|
+
return reject(res);
|
|
615
|
+
}
|
|
376
616
|
}
|
|
377
617
|
});
|
|
378
618
|
});
|
|
@@ -407,12 +647,18 @@ let pageResizeFn;
|
|
|
407
647
|
function bindPageResize(page) {
|
|
408
648
|
pageResizeFn && window.removeEventListener('resize', pageResizeFn);
|
|
409
649
|
pageResizeFn = function () {
|
|
410
|
-
page.onResize
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
650
|
+
if (page.onResize) {
|
|
651
|
+
const mediaQuery = window.matchMedia('(orientation: portrait)');
|
|
652
|
+
page.onResize({
|
|
653
|
+
deviceOrientation: mediaQuery.matches ? 'portrait' : 'landscape',
|
|
654
|
+
size: {
|
|
655
|
+
windowHeight: window.innerHeight,
|
|
656
|
+
windowWidth: window.innerWidth,
|
|
657
|
+
screenHeight: window.screen.height,
|
|
658
|
+
screenWidth: window.screen.width,
|
|
659
|
+
}
|
|
660
|
+
});
|
|
661
|
+
}
|
|
416
662
|
};
|
|
417
663
|
window.addEventListener('resize', pageResizeFn, false);
|
|
418
664
|
}
|
|
@@ -451,80 +697,6 @@ function getOffset() {
|
|
|
451
697
|
}
|
|
452
698
|
}
|
|
453
699
|
|
|
454
|
-
/**
|
|
455
|
-
* 插入页面动画需要的样式
|
|
456
|
-
*/
|
|
457
|
-
function loadAnimateStyle(ms = 300) {
|
|
458
|
-
const css = `
|
|
459
|
-
.taro_router > .taro_page {
|
|
460
|
-
position: absolute;
|
|
461
|
-
left: 0;
|
|
462
|
-
top: 0;
|
|
463
|
-
width: 100%;
|
|
464
|
-
height: 100%;
|
|
465
|
-
background-color: #fff;
|
|
466
|
-
transform: translate(100%, 0);
|
|
467
|
-
transition: transform ${ms}ms;
|
|
468
|
-
z-index: 0;
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
.taro_router > .taro_page.taro_tabbar_page,
|
|
472
|
-
.taro_router > .taro_page.taro_page_show.taro_page_stationed {
|
|
473
|
-
transform: none;
|
|
474
|
-
}
|
|
475
|
-
|
|
476
|
-
.taro_router > .taro_page.taro_page_show {
|
|
477
|
-
transform: translate(0, 0);
|
|
478
|
-
}
|
|
479
|
-
`;
|
|
480
|
-
addStyle(css);
|
|
481
|
-
}
|
|
482
|
-
/**
|
|
483
|
-
* 插入路由相关样式
|
|
484
|
-
*/
|
|
485
|
-
function loadRouterStyle(enableTabBar, enableWindowScroll) {
|
|
486
|
-
const css = `
|
|
487
|
-
.taro_router {
|
|
488
|
-
position: relative;
|
|
489
|
-
width: 100%;
|
|
490
|
-
height: 100%;
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
.taro_page {
|
|
494
|
-
width: 100%;
|
|
495
|
-
height: 100%;
|
|
496
|
-
${enableWindowScroll ? '' : `
|
|
497
|
-
overflow-x: hidden;
|
|
498
|
-
overflow-y: scroll;
|
|
499
|
-
max-height: 100vh;
|
|
500
|
-
`}
|
|
501
|
-
}
|
|
502
|
-
${enableTabBar ? `
|
|
503
|
-
.taro-tabbar__container > .taro-tabbar__panel {
|
|
504
|
-
overflow: hidden;
|
|
505
|
-
}
|
|
506
|
-
|
|
507
|
-
.taro-tabbar__container > .taro-tabbar__panel > .taro_page.taro_tabbar_page {
|
|
508
|
-
max-height: calc(100vh - var(--taro-tabbar-height) - constant(safe-area-inset-bottom));
|
|
509
|
-
max-height: calc(100vh - var(--taro-tabbar-height) - env(safe-area-inset-bottom));
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
` : ''}
|
|
513
|
-
.taro_page_shade,
|
|
514
|
-
.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
|
|
515
|
-
display: none;
|
|
516
|
-
}
|
|
517
|
-
`;
|
|
518
|
-
addStyle(css);
|
|
519
|
-
}
|
|
520
|
-
function addStyle(css) {
|
|
521
|
-
if (!css)
|
|
522
|
-
return;
|
|
523
|
-
const style = document.createElement('style');
|
|
524
|
-
style.innerHTML = css;
|
|
525
|
-
document.getElementsByTagName('head')[0].appendChild(style);
|
|
526
|
-
}
|
|
527
|
-
|
|
528
700
|
/* eslint-disable dot-notation */
|
|
529
701
|
class MultiPageHandler {
|
|
530
702
|
constructor(config, history) {
|
|
@@ -685,6 +857,7 @@ function createMultiRouter(history, app, config, framework) {
|
|
|
685
857
|
if (typeof app.onUnhandledRejection === 'function') {
|
|
686
858
|
window.addEventListener('unhandledrejection', app.onUnhandledRejection);
|
|
687
859
|
}
|
|
860
|
+
eventCenter.on('__taroH5SetNavigationBarTitle', setMpaTitle);
|
|
688
861
|
RouterConfig.config = config;
|
|
689
862
|
const handler = new MultiPageHandler(config, history);
|
|
690
863
|
const launchParam = {
|
|
@@ -718,7 +891,7 @@ function createMultiRouter(history, app, config, framework) {
|
|
|
718
891
|
return;
|
|
719
892
|
let enablePullDownRefresh = ((_c = config === null || config === void 0 ? void 0 : config.window) === null || _c === void 0 ? void 0 : _c.enablePullDownRefresh) || false;
|
|
720
893
|
if (pageConfig) {
|
|
721
|
-
|
|
894
|
+
setMpaTitle((_d = pageConfig.navigationBarTitleText) !== null && _d !== void 0 ? _d : document.title);
|
|
722
895
|
if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
|
|
723
896
|
enablePullDownRefresh = pageConfig.enablePullDownRefresh;
|
|
724
897
|
}
|
|
@@ -730,9 +903,268 @@ function createMultiRouter(history, app, config, framework) {
|
|
|
730
903
|
const page = createPageConfig(enablePullDownRefresh ? hooks.call('createPullDownComponent', el, pathName, framework, handler.PullDownRefresh) : el, pathName + stringify(launchParam), {}, loadConfig);
|
|
731
904
|
handler.load(page, pageConfig);
|
|
732
905
|
(_f = app.onShow) === null || _f === void 0 ? void 0 : _f.call(app, launchParam);
|
|
906
|
+
window.addEventListener('visibilitychange', () => {
|
|
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 });
|
|
913
|
+
if (document.visibilityState === 'visible') {
|
|
914
|
+
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, param);
|
|
915
|
+
}
|
|
916
|
+
else {
|
|
917
|
+
(_c = app.onHide) === null || _c === void 0 ? void 0 : _c.call(app, param);
|
|
918
|
+
}
|
|
919
|
+
});
|
|
733
920
|
});
|
|
734
921
|
}
|
|
735
922
|
|
|
923
|
+
class NavigationBarHandler {
|
|
924
|
+
constructor(pageContext) {
|
|
925
|
+
this.isLoadDdEntry = false;
|
|
926
|
+
this.cache = {};
|
|
927
|
+
this.pageContext = pageContext;
|
|
928
|
+
this.init();
|
|
929
|
+
eventCenter.on('__taroH5SetNavigationBarTitle', (title) => {
|
|
930
|
+
this.setTitle(title);
|
|
931
|
+
});
|
|
932
|
+
eventCenter.on('__taroH5setNavigationBarLoading', (loading) => {
|
|
933
|
+
this.setNavigationLoading(loading);
|
|
934
|
+
});
|
|
935
|
+
eventCenter.on('__taroH5setNavigationBarColor', ({ backgroundColor, frontColor }) => {
|
|
936
|
+
if (typeof backgroundColor === 'string')
|
|
937
|
+
this.setNavigationBarBackground(backgroundColor);
|
|
938
|
+
if (typeof frontColor === 'string')
|
|
939
|
+
this.setNavigationBarTextStyle(frontColor);
|
|
940
|
+
});
|
|
941
|
+
}
|
|
942
|
+
toHomeFn() {
|
|
943
|
+
reLaunch({ url: this.pageContext.homePage });
|
|
944
|
+
}
|
|
945
|
+
backFn() {
|
|
946
|
+
navigateBack();
|
|
947
|
+
}
|
|
948
|
+
get homeBtnElement() {
|
|
949
|
+
var _a;
|
|
950
|
+
if (!this.navigationBarElement)
|
|
951
|
+
return null;
|
|
952
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-home')) === null || _a === void 0 ? void 0 : _a[0];
|
|
953
|
+
}
|
|
954
|
+
get backBtnElement() {
|
|
955
|
+
var _a;
|
|
956
|
+
if (!this.navigationBarElement)
|
|
957
|
+
return null;
|
|
958
|
+
return (_a = this.navigationBarElement.getElementsByClassName('taro-navigation-bar-back')) === null || _a === void 0 ? void 0 : _a[0];
|
|
959
|
+
}
|
|
960
|
+
get titleElement() {
|
|
961
|
+
var _a;
|
|
962
|
+
if (!this.navigationBarElement)
|
|
963
|
+
return null;
|
|
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];
|
|
970
|
+
}
|
|
971
|
+
init() {
|
|
972
|
+
var _a, _b;
|
|
973
|
+
this.setNavigationBarElement();
|
|
974
|
+
if (!this.navigationBarElement)
|
|
975
|
+
return;
|
|
976
|
+
(_a = this.homeBtnElement) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.toHomeFn.bind(this));
|
|
977
|
+
(_b = this.backBtnElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.backFn.bind(this));
|
|
978
|
+
}
|
|
979
|
+
setNavigationBarElement() {
|
|
980
|
+
this.navigationBarElement = document.getElementById('taro-navigation-bar');
|
|
981
|
+
}
|
|
982
|
+
load() {
|
|
983
|
+
this.setCacheValue();
|
|
984
|
+
this.setTitle();
|
|
985
|
+
this.setNavigationBarVisible();
|
|
986
|
+
this.setFnBtnState();
|
|
987
|
+
this.setNavigationBarBackground();
|
|
988
|
+
this.setNavigationBarTextStyle();
|
|
989
|
+
this.setNavigationLoading();
|
|
990
|
+
}
|
|
991
|
+
setCacheValue() {
|
|
992
|
+
const currentPage = this.pageContext.currentPage;
|
|
993
|
+
if (typeof this.cache[currentPage] !== 'object') {
|
|
994
|
+
this.cache[currentPage] = {};
|
|
995
|
+
}
|
|
996
|
+
}
|
|
997
|
+
setFnBtnState() {
|
|
998
|
+
const currentRouter = this.pageContext.currentPage;
|
|
999
|
+
if (this.pageContext.isTabBar(currentRouter) || this.pageContext.homePage === currentRouter) {
|
|
1000
|
+
this.fnBtnToggleToNone();
|
|
1001
|
+
}
|
|
1002
|
+
else if (stacks.length > 1) {
|
|
1003
|
+
this.fnBtnToggleToBack();
|
|
1004
|
+
}
|
|
1005
|
+
else {
|
|
1006
|
+
this.fnBtnToggleToHome();
|
|
1007
|
+
}
|
|
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
|
+
}
|
|
1044
|
+
setNavigationBarBackground(backgroundColor) {
|
|
1045
|
+
var _a, _b, _c;
|
|
1046
|
+
if (!this.navigationBarElement)
|
|
1047
|
+
return;
|
|
1048
|
+
const currentPage = this.pageContext.currentPage;
|
|
1049
|
+
let color;
|
|
1050
|
+
if (typeof backgroundColor === 'string') {
|
|
1051
|
+
color = backgroundColor;
|
|
1052
|
+
this.cache[currentPage] &&
|
|
1053
|
+
(this.cache[currentPage].backgroundColor = color);
|
|
1054
|
+
}
|
|
1055
|
+
else {
|
|
1056
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.backgroundColor;
|
|
1057
|
+
if (typeof cacheValue === 'string') {
|
|
1058
|
+
color = cacheValue;
|
|
1059
|
+
}
|
|
1060
|
+
else {
|
|
1061
|
+
color = ((_c = (_b = this.pageContext.config) === null || _b === void 0 ? void 0 : _b.window) === null || _c === void 0 ? void 0 : _c.navigationBarBackgroundColor) || '#000000';
|
|
1062
|
+
this.cache[currentPage] &&
|
|
1063
|
+
(this.cache[currentPage].backgroundColor = color);
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
this.navigationBarElement.style.background = color;
|
|
1067
|
+
}
|
|
1068
|
+
setNavigationBarTextStyle(fontColor) {
|
|
1069
|
+
var _a, _b, _c;
|
|
1070
|
+
if (!this.navigationBarElement)
|
|
1071
|
+
return;
|
|
1072
|
+
const currentPage = this.pageContext.currentPage;
|
|
1073
|
+
let color;
|
|
1074
|
+
if (typeof fontColor === 'string') {
|
|
1075
|
+
color = fontColor;
|
|
1076
|
+
this.cache[currentPage] &&
|
|
1077
|
+
(this.cache[currentPage].fontColor = color);
|
|
1078
|
+
}
|
|
1079
|
+
else {
|
|
1080
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.fontColor;
|
|
1081
|
+
if (typeof cacheValue === 'string') {
|
|
1082
|
+
color = cacheValue;
|
|
1083
|
+
}
|
|
1084
|
+
else {
|
|
1085
|
+
color = ((_c = (_b = this.pageContext.config) === null || _b === void 0 ? void 0 : _b.window) === null || _c === void 0 ? void 0 : _c.navigationBarTextStyle) || 'white';
|
|
1086
|
+
this.cache[currentPage] &&
|
|
1087
|
+
(this.cache[currentPage].fontColor = color);
|
|
1088
|
+
}
|
|
1089
|
+
}
|
|
1090
|
+
this.navigationBarElement.style.color = color;
|
|
1091
|
+
}
|
|
1092
|
+
setTitle(title) {
|
|
1093
|
+
var _a, _b, _c;
|
|
1094
|
+
const currentPage = this.pageContext.currentPage;
|
|
1095
|
+
let proceedTitle;
|
|
1096
|
+
if (typeof title === 'string') {
|
|
1097
|
+
proceedTitle = title;
|
|
1098
|
+
this.cache[currentPage] &&
|
|
1099
|
+
(this.cache[currentPage].title = proceedTitle);
|
|
1100
|
+
}
|
|
1101
|
+
else {
|
|
1102
|
+
const cacheValue = (_a = this.cache[currentPage]) === null || _a === void 0 ? void 0 : _a.title;
|
|
1103
|
+
if (typeof cacheValue === 'string') {
|
|
1104
|
+
proceedTitle = cacheValue;
|
|
1105
|
+
}
|
|
1106
|
+
else {
|
|
1107
|
+
proceedTitle = (_c = (_b = this.pageContext.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationBarTitleText) !== null && _c !== void 0 ? _c : document.title;
|
|
1108
|
+
this.cache[currentPage] &&
|
|
1109
|
+
(this.cache[currentPage].title = proceedTitle);
|
|
1110
|
+
}
|
|
1111
|
+
}
|
|
1112
|
+
if (process.env.SUPPORT_DINGTALK_NAVIGATE !== 'disabled' && isDingTalk()) {
|
|
1113
|
+
if (!this.isLoadDdEntry) {
|
|
1114
|
+
this.isLoadDdEntry = true;
|
|
1115
|
+
require('dingtalk-jsapi/platform');
|
|
1116
|
+
}
|
|
1117
|
+
const setDingTitle = require('dingtalk-jsapi/api/biz/navigation/setTitle').default;
|
|
1118
|
+
setDingTitle({ proceedTitle });
|
|
1119
|
+
}
|
|
1120
|
+
document.title = proceedTitle;
|
|
1121
|
+
if (!this.titleElement)
|
|
1122
|
+
return;
|
|
1123
|
+
this.titleElement.innerHTML = proceedTitle;
|
|
1124
|
+
}
|
|
1125
|
+
fnBtnToggleToHome() {
|
|
1126
|
+
if (!this.navigationBarElement)
|
|
1127
|
+
return;
|
|
1128
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-home-icon');
|
|
1129
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
|
|
1130
|
+
}
|
|
1131
|
+
fnBtnToggleToBack() {
|
|
1132
|
+
if (!this.navigationBarElement)
|
|
1133
|
+
return;
|
|
1134
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
|
|
1135
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-back-icon');
|
|
1136
|
+
}
|
|
1137
|
+
fnBtnToggleToNone() {
|
|
1138
|
+
if (!this.navigationBarElement)
|
|
1139
|
+
return;
|
|
1140
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-home-icon');
|
|
1141
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-back-icon');
|
|
1142
|
+
}
|
|
1143
|
+
setNavigationBarVisible(show) {
|
|
1144
|
+
var _a, _b;
|
|
1145
|
+
if (!this.navigationBarElement)
|
|
1146
|
+
return;
|
|
1147
|
+
let shouldShow;
|
|
1148
|
+
if (typeof show === 'boolean') {
|
|
1149
|
+
shouldShow = show;
|
|
1150
|
+
}
|
|
1151
|
+
else {
|
|
1152
|
+
shouldShow = (_a = this.pageContext.config.window) === null || _a === void 0 ? void 0 : _a.navigationStyle;
|
|
1153
|
+
if (typeof ((_b = this.pageContext.pageConfig) === null || _b === void 0 ? void 0 : _b.navigationStyle) === 'string') {
|
|
1154
|
+
shouldShow = this.pageContext.pageConfig.navigationStyle;
|
|
1155
|
+
}
|
|
1156
|
+
}
|
|
1157
|
+
if (shouldShow === 'default') {
|
|
1158
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-show');
|
|
1159
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-hide');
|
|
1160
|
+
}
|
|
1161
|
+
else {
|
|
1162
|
+
this.navigationBarElement.classList.add('taro-navigation-bar-hide');
|
|
1163
|
+
this.navigationBarElement.classList.remove('taro-navigation-bar-show');
|
|
1164
|
+
}
|
|
1165
|
+
}
|
|
1166
|
+
}
|
|
1167
|
+
|
|
736
1168
|
/* eslint-disable dot-notation */
|
|
737
1169
|
class PageHandler {
|
|
738
1170
|
constructor(config, history) {
|
|
@@ -741,6 +1173,7 @@ class PageHandler {
|
|
|
741
1173
|
this.config = config;
|
|
742
1174
|
this.homePage = getHomePage(this.routes[0].path, this.basename, this.customRoutes, this.config.entryPagePath);
|
|
743
1175
|
this.mount();
|
|
1176
|
+
this.navigationBarHandler = new NavigationBarHandler(this);
|
|
744
1177
|
}
|
|
745
1178
|
get currentPage() {
|
|
746
1179
|
const routePath = getCurrentPage(this.routerMode, this.basename);
|
|
@@ -884,6 +1317,7 @@ class PageHandler {
|
|
|
884
1317
|
this.isDefaultNavigationStyle() && pageEl.classList.add('taro_navigation_page');
|
|
885
1318
|
this.addAnimation(pageEl, pageNo === 0);
|
|
886
1319
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1320
|
+
this.navigationBarHandler.load();
|
|
887
1321
|
this.bindPageEvents(page, pageConfig);
|
|
888
1322
|
this.triggerRouterChange();
|
|
889
1323
|
}
|
|
@@ -896,6 +1330,7 @@ class PageHandler {
|
|
|
896
1330
|
this.isDefaultNavigationStyle() && (pageEl === null || pageEl === void 0 ? void 0 : pageEl.classList.add('taro_navigation_page'));
|
|
897
1331
|
this.addAnimation(pageEl, pageNo === 0);
|
|
898
1332
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1333
|
+
this.navigationBarHandler.load();
|
|
899
1334
|
this.onReady(page, true);
|
|
900
1335
|
this.bindPageEvents(page, pageConfig);
|
|
901
1336
|
this.triggerRouterChange();
|
|
@@ -950,6 +1385,7 @@ class PageHandler {
|
|
|
950
1385
|
pageEl.classList.remove('taro_page_shade');
|
|
951
1386
|
this.addAnimation(pageEl, pageNo === 0);
|
|
952
1387
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1388
|
+
this.navigationBarHandler.load();
|
|
953
1389
|
this.bindPageEvents(page, pageConfig);
|
|
954
1390
|
this.triggerRouterChange();
|
|
955
1391
|
}
|
|
@@ -959,6 +1395,7 @@ class PageHandler {
|
|
|
959
1395
|
pageEl = this.getPageContainer(page);
|
|
960
1396
|
this.addAnimation(pageEl, pageNo === 0);
|
|
961
1397
|
(_a = page.onShow) === null || _a === void 0 ? void 0 : _a.call(page);
|
|
1398
|
+
this.navigationBarHandler.load();
|
|
962
1399
|
this.onReady(page, false);
|
|
963
1400
|
this.bindPageEvents(page, pageConfig);
|
|
964
1401
|
this.triggerRouterChange();
|
|
@@ -1075,7 +1512,7 @@ function createRouter(history, app, config, framework) {
|
|
|
1075
1512
|
(_a = app.onLaunch) === null || _a === void 0 ? void 0 : _a.call(app, launchParam);
|
|
1076
1513
|
app.onError && window.addEventListener('error', e => { var _a; return (_a = app.onError) === null || _a === void 0 ? void 0 : _a.call(app, e.message); });
|
|
1077
1514
|
const render = ({ location, action }) => __awaiter(this, void 0, void 0, function* () {
|
|
1078
|
-
var _c, _d, _e, _f, _g, _h, _j, _k
|
|
1515
|
+
var _c, _d, _e, _f, _g, _h, _j, _k;
|
|
1079
1516
|
handler.pathname = decodeURI(location.pathname);
|
|
1080
1517
|
if ((_c = window.__taroAppConfig) === null || _c === void 0 ? void 0 : _c.usingWindowScroll)
|
|
1081
1518
|
window.scrollTo(0, 0);
|
|
@@ -1115,7 +1552,6 @@ function createRouter(history, app, config, framework) {
|
|
|
1115
1552
|
let navigationBarTextStyle = ((_g = config === null || config === void 0 ? void 0 : config.window) === null || _g === void 0 ? void 0 : _g.navigationBarTextStyle) || 'white';
|
|
1116
1553
|
let navigationBarBackgroundColor = ((_h = config === null || config === void 0 ? void 0 : config.window) === null || _h === void 0 ? void 0 : _h.navigationBarBackgroundColor) || '#000000';
|
|
1117
1554
|
if (pageConfig) {
|
|
1118
|
-
setTitle((_j = pageConfig.navigationBarTitleText) !== null && _j !== void 0 ? _j : document.title);
|
|
1119
1555
|
if (typeof pageConfig.enablePullDownRefresh === 'boolean') {
|
|
1120
1556
|
enablePullDownRefresh = pageConfig.enablePullDownRefresh;
|
|
1121
1557
|
}
|
|
@@ -1132,7 +1568,7 @@ function createRouter(history, app, config, framework) {
|
|
|
1132
1568
|
eventCenter.trigger('__taroSetNavigationStyle', navigationStyle, navigationBarTextStyle, navigationBarBackgroundColor);
|
|
1133
1569
|
const currentPage = Current.page;
|
|
1134
1570
|
const pathname = handler.pathname;
|
|
1135
|
-
const methodName = (
|
|
1571
|
+
const methodName = (_j = stacks.method) !== null && _j !== void 0 ? _j : '';
|
|
1136
1572
|
const cacheTabs = stacks.getTabs();
|
|
1137
1573
|
let shouldLoad = false;
|
|
1138
1574
|
stacks.method = '';
|
|
@@ -1198,7 +1634,7 @@ function createRouter(history, app, config, framework) {
|
|
|
1198
1634
|
shouldLoad = true;
|
|
1199
1635
|
}
|
|
1200
1636
|
if (shouldLoad || stacks.length < 1) {
|
|
1201
|
-
const el = (
|
|
1637
|
+
const el = (_k = element.default) !== null && _k !== void 0 ? _k : element;
|
|
1202
1638
|
const loadConfig = Object.assign({}, pageConfig);
|
|
1203
1639
|
const stacksIndex = stacks.length;
|
|
1204
1640
|
delete loadConfig['path'];
|
|
@@ -1223,6 +1659,26 @@ function createRouter(history, app, config, framework) {
|
|
|
1223
1659
|
}
|
|
1224
1660
|
render({ location: history.location, action: Action.Push });
|
|
1225
1661
|
(_b = app.onShow) === null || _b === void 0 ? void 0 : _b.call(app, launchParam);
|
|
1662
|
+
window.addEventListener('visibilitychange', () => {
|
|
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 });
|
|
1669
|
+
if (document.visibilityState === 'visible') {
|
|
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);
|
|
1673
|
+
}
|
|
1674
|
+
else {
|
|
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);
|
|
1680
|
+
}
|
|
1681
|
+
});
|
|
1226
1682
|
return history.listen(render);
|
|
1227
1683
|
}
|
|
1228
1684
|
|
|
@@ -1238,6 +1694,7 @@ function handleAppMount(config, _, appId = config.appId || 'app') {
|
|
|
1238
1694
|
app.classList.add('taro_router');
|
|
1239
1695
|
if (!isPosition)
|
|
1240
1696
|
appWrapper.appendChild(app);
|
|
1697
|
+
initNavigationBar(config, appWrapper);
|
|
1241
1698
|
}
|
|
1242
1699
|
function handleAppMountWithTabbar(config, history, appId = config.appId || 'app') {
|
|
1243
1700
|
let app = document.getElementById(appId);
|
|
@@ -1263,6 +1720,7 @@ function handleAppMountWithTabbar(config, history, appId = config.appId || 'app'
|
|
|
1263
1720
|
appWrapper.replaceChild(container, app);
|
|
1264
1721
|
}
|
|
1265
1722
|
initTabbar(config, history);
|
|
1723
|
+
initNavigationBar(config, container);
|
|
1266
1724
|
}
|
|
1267
1725
|
|
|
1268
|
-
export { createMpaHistory, createMultiRouter, createRouter, getCurrentPages, handleAppMount, handleAppMountWithTabbar, history, isDingTalk, isWeixin, navigateBack, navigateTo, prependBasename, reLaunch, redirectTo, routesAlias, setHistory, setHistoryMode, 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 };
|