forked from RubyLouvre/anu
-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathpage2.html
251 lines (246 loc) · 35.6 KB
/
page2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html><html lang="zh-CN"><head><meta charSet="UTF-8"/><meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><link rel="icon" type="image/png" sizes="32x32" href="../images/titleLogo.png"/><link rel="icon" type="image/png" sizes="16x16" href="../images/titleLogo.png"/><meta name="theme-color" content="#ffffff"/><meta http-equiv="Cache-Control" content="no-transform"/><meta http-equiv="Cache-Control" content="no-siteapp"/><title>页面的各个功能讲解-文档</title><link rel="stylesheet" href="../ydoc/styles/style.css"/><meta name="author" content="司徒正美"/><meta name="keywords"/><meta name="description" content="使用Reac微信小程序"/><meta id="releativePath" content=".."/><link rel="stylesheet" href="../ydoc/ydoc-plugin-search/search.css"/><link rel="stylesheet" href="../style/index.css"/></head><body><div class="g-doc"><div class="m-aside"><div class="m-summary" id="js-menu"><div class="m-summary-content" id="js-menu-content"><div class="m-summary-block"><ul class="m-summary-list"><li class="item"><a href="intro.html#" class="href">介绍</a></li><li class="item"><a href="install.html" class="href">安装与使用cli各种命令</a></li><li class="item"><a href="update.html" class="href">升级</a></li><li class="item"><a href="app.html" class="href">全局对象</a></li><li class="item"><a href="lifetimes.html" class="href">页面组件与生命周期</a></li><li class="item"><a href="" class="href">页面的各个功能讲解</a></li><li class="item"><a href="component.html" class="href">页面上的子组件使用</a></li><li class="item"><a href="standard.html" class="href">小程序组件规范</a></li><li class="item"><a href="jsx.html" class="href">使用 JSX 的注意事项</a></li><li class="item"><a href="style.html" class="href">使用 CSS 的注意事项</a></li><li class="item"><a href="hooks.html" class="href">React Hooks的支持</a></li><li class="item"><a href="publish.html" class="href">目录结构与输出目录</a></li><li class="item"><a href="import_js.html" class="href">按平台打包代码或样式</a></li><li class="item"><a href="tabBar.html" class="href">据平台设置tabBar</a></li><li class="item"><a href="titleBar.html" class="href">隐藏标题栏</a></li><li class="item"><a href="redux.html" class="href">Redux/Mobx的使用</a></li><li class="item"><a href="webview.html" class="href">智能 webview 化</a></li><li class="item"><a href="customConfig.html" class="href">自定义项目配置</a></li><li class="item"><a href="customBuildConfig.html" class="href">自定义打包配置</a></li><li class="item"><a href="nativeComponents.html" class="href">不转译某些标签名</a></li><li class="item"><a href="chaika.html" class="href">拆库开发</a></li><li class="item"><a href="alias.html" class="href">别名配置</a></li><li class="item"><a href="vscode.html" class="href">vscode插件</a></li><li class="item"><a href="report.html" class="href">日志收集与上传</a></li><li class="item"><a href="npm.html" class="href">npm支持</a></li><li class="item"><a href="wxplugin.html" class="href">微信插件支持</a></li><li class="item"><a href="iconfont.html" class="href">iconfont 支持</a></li><li class="item"><a href="async.html" class="href">async/await 支持</a></li><li class="item"><a href="lesssass.html" class="href">Sass、Less、PostCSS支持</a></li><li class="item"><a href="patchComponent.html" class="href">内置 UI 库</a></li><li class="item"><a href="units.html" class="href">rpx与px互转</a></li><li class="item"><a href="event.html" class="href">事件系统</a></li><li class="item"><a href="size.html" class="href">包大小限制</a></li><li class="item"><a href="subpackages.html" class="href">分包加载</a></li><li class="item"><a href="preload.html" class="href">分包预加载</a></li><li class="item"><a href="debug.html" class="href">真机调试</a></li><li class="item"><a href="bu.html" class="href">百度小程序环境判定</a></li><li class="item"><a href="tt.html" class="href">字节小程序相关</a></li><li class="item"><div class="m-summary-block"><a href="" class="href">快应用相关</a><ul class="m-summary-list indent"><li class="item"><a href="quicklist.html" class="href">快应用的scroll-view兼容</a></li><li class="item"><a href="quickstorage.html" class="href">快应用的同步Storage API兼容</a></li><li class="item"><a href="boxDifferent.html" class="href">快应用与小程序盒子模型的区别</a></li><li class="item"><a href="query.html" class="href">小米快应用获取页面参数</a></li><li class="item"><a href="huaweiQuery.html" class="href">华为快应用获取页面参数</a></li><li class="item"><a href="share.html" class="href">快应用与小程序转发分享</a></li><li class="item"><a href="onblur.html" class="href">快应用onblur</a></li><li class="item"><a href="scene.html" class="href">场景值的兼容</a></li><li class="item"><a href="card.html" class="href">卡片</a></li><li class="item"><a href="movable.html" class="href">movable-area与movable-view的模拟</a></li></ul></div></li><li class="item"><a href="diff.html" class="href">各种小程序的比较</a></li><li class="item"><a href="link.html" class="href">各种小程序的官网</a></li><li class="item"><div class="m-summary-block"><a href="feedback.html" class="href">反馈收集</a><ul class="m-summary-list indent"><li class="item"><a href="two-threaded.html" class="href">微信小程序的双线程架构</a></li></ul></div></li><li class="item"><a href="questions.html" class="href">常见问题</a></li><li class="item"><a href="about.html" class="href">关于</a></li></ul></div></div></div><div class="m-summary-switch" id="js-summary-switch"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="bottom"><g transform="translate(904.92214,-879.1482)"><path d="m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,-55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,-174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,-174.68583 0.6895,0 26.281,25.03215 56.8701,55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864-231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,-104.0616 -231.873,-231.248 z" fill="#fff"></path></g></svg><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="top"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="aaa" fill="#fff" fill-rule="nonzero"><path d="M231.2455,342.502 L0,111.25397 L55.6165,55.62697 C86.2056,25.03212 111.7971,-2.99999998e-05 112.4866,-2.99999998e-05 C113.176,-2.99999998e-05 192.3503,78.60859 288.4293,174.6858 L463.1185,349.3716 L637.8077,174.6858 C733.8867,78.60859 813.060896,-2.99999997e-05 813.750396,-2.99999997e-05 C814.439896,-2.99999997e-05 840.031396,25.03212 870.620496,55.62697 L926.236996,111.25397 L694.9915,342.502 C567.8065,469.6884 463.4636,573.75 463.1185,573.75 C462.7734,573.75 358.4305,469.6884 231.2455,342.502 Z" id="Shape" transform="translate(463.118498, 286.874985) scale(1, -1) translate(-463.118498, -286.874985) "></path></g></g></svg></div></div><div class="m-main" id="js-panel"><header class="m-header" id="js-header"><div class="m-header-title js-logo"><a href="../index.html" target="_self"><img class="logo" width="36" src="../images/logo@2x.png"/></a></div><div><div class="m-search">
<div class="icon"></div>
<input type="text" class="input js-input" placeholder="搜索" />
<div class="m-search-result js-search-result"></div>
</div></div><nav class="m-header-nav js-nav"><ul class="m-header-items"><li class="item active"><a class="href" href="intro.html">文档</a></li><li class="item "><a class="href" href="../apis/index.html">已兼容处理的API</a></li><li class="item "><a class="href" href="logo.html">谁在用nanachi</a></li><li class="item "><a class="href" href="about.html">关于</a></li></ul></nav><div id="js-nav-btn" class="m-header-btn ui-font-ydoc"></div></header><div class="m-content" id="js-content"><div id="markdown-body" class="m-content-container markdown-body"><h1>页面的各个功能讲解</h1>
<p>在娜娜奇中，页面的许多功能是由配置对象与钩子提供。</p>
<p><img src="./page2.png" alt="page2.jpg"></p>
<p>从上到下，划分成几个功能区，标题栏（titleBar）, 右上角按钮（会弹出菜单，里面包含转发，创建快捷方式到桌面，关于等功能），内容区（这是由页面组件的JSX渲染出来的），切换栏(tabBar, 切换小程序、快应用的页面)， 系统导航栏（手机系统级别，放虚拟HOME键, 返回按钮, 切换抽屉）</p>
<h2 id="标题栏">标题栏</h2>
<pre><code class="language-jsx"><span class="token keyword">class</span> <span class="token class-name">P</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token punctuation">{</span>
<span class="token keyword">static</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">navigationBarBackgroundColor</span><span class="token operator">:</span> <span class="token string">"#a9ea00"</span><span class="token punctuation">,</span>
<span class="token literal-property property">navigationBarTextStyle</span><span class="token operator">:</span> <span class="token string">"back"</span><span class="token punctuation">,</span>
<span class="token literal-property property">navigationBarTitleText</span><span class="token operator">:</span> <span class="token string">"用户中心"</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">.....</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>如果页面没有配置标题栏，那么它就会使用app.js中的标题栏。
如果想隐藏标题栏，可以在配置对象 navigationStyle:custom， 那么它就会自动消失。</p>
<p>在快应用要隐藏某一个页面的titleBar, 需要manifest.json中配置。但放心，娜娜奇已经帮你屏蔽掉。</p>
<pre><code class="language-json"> <span class="token property">"display"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"backgroundColor"</span><span class="token operator">:</span> <span class="token string">"#ffffff"</span><span class="token punctuation">,</span>
<span class="token property">"fullScreen"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token property">"menu"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//右上角菜单</span>
<span class="token property">"titleBar"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//app级别</span>
<span class="token property">"titleBarBackgroundColor"</span><span class="token operator">:</span> <span class="token string">"#000000"</span><span class="token punctuation">,</span> <span class="token comment">//app级别</span>
<span class="token property">"titleBarTextColor"</span><span class="token operator">:</span> <span class="token string">"#fffff"</span><span class="token punctuation">,</span> <span class="token comment">//app级别</span>
<span class="token property">"pages"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"Hello"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//对应某一个页面的ID</span>
<span class="token property">"backgroundColor"</span><span class="token operator">:</span> <span class="token string">"#eeeeee"</span><span class="token punctuation">,</span>
<span class="token property">"fullScreen"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token property">"titleBarBackgroundColor"</span><span class="token operator">:</span> <span class="token string">"#0000ff"</span><span class="token punctuation">,</span> <span class="token comment">//page级别</span>
<span class="token property">"titleBarText"</span><span class="token operator">:</span> <span class="token string">"Hello"</span><span class="token punctuation">,</span> <span class="token comment">//page级别</span>
<span class="token property">"orientation"</span><span class="token operator">:</span> <span class="token string">"landscape"</span> <span class="token comment">//page级别</span>
<span class="token comment">// "titleBar": true/false</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre>
<table>
<thead>
<tr>
<th>与标题栏相关的配置项</th>
<th>类型</th>
<th>默认值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>navigationBarBackgroundColor</td>
<td>HexColor</td>
<td>#000000</td>
<td>导航栏背景颜色，如 #000000</td>
</tr>
<tr>
<td>navigationBarTextStyle</td>
<td>string white 导航栏标题颜色，仅支持 black / white</td>
<td></td>
<td></td>
</tr>
<tr>
<td>navigationBarTitleText</td>
<td>string</td>
<td>导航栏标题文字内容</td>
<td></td>
</tr>
<tr>
<td>navigationStyle</td>
<td>string</td>
<td>default</td>
<td>显示标题用default，隐藏用custom，这时只保留右上角按钮</td>
</tr>
</tbody>
</table>
<p>想动态设置页面的标题栏可以使用下面API</p>
<ul>
<li><code>React.api.setNavigationBarTitle({title})</code></li>
<li><code>React.api.setNavigationBarColor({frontColor, backgroundColor})</code></li>
</ul>
<p>微信客户端 6.7.2 版本开始，navigationStyle: custom 对 <code><web-view></code> 组件无效</p>
<p>webview里面的相关操作</p>
<pre><code class="language-javascript"><span class="token comment">//仅支持微信小程序</span>
document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'WeixinJSBridgeReady'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">onBridgeReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 通过下面这个API隐藏底部导航栏</span>
<span class="token function">WeixinJSBridge</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">'hideToolbar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'WeixinJSBridgeReady'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">onBridgeReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 通过下面这个API显示底部导航栏</span>
<span class="token function">WeixinJSBridge</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">'showToolbar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>）
</code></pre>
<h2 id="右上角按钮">右上角按钮</h2>
<p>在原生微信小程序中，只要onShareAppMessage定义就会出现右上角菜单。在娜娜奇中，右上角菜单则总是存在， 并且这个钩子也改名，简化为更好记的onShare, 如果页面没有定义onShare钩子, 它就会使用app.js的全局钩子onGlobalShare</p>
<pre><code class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">P</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token punctuation">{</span>
<span class="token keyword">static</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">navigationBarBackgroundColor</span><span class="token operator">:</span> <span class="token string">"#a9ea00"</span><span class="token punctuation">,</span>
<span class="token literal-property property">navigationBarTextStyle</span><span class="token operator">:</span> <span class="token string">"back"</span><span class="token punctuation">,</span>
<span class="token literal-property property">navigationBarTitleText</span><span class="token operator">:</span> <span class="token string">"用户中心"</span>
<span class="token punctuation">}</span>
<span class="token function">onShare</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'预订火车票 - 去哪儿旅行'</span><span class="token punctuation">,</span>
<span class="token literal-property property">imageUrl</span><span class="token operator">:</span> <span class="token string">'https://s.aaa.com/bbb/ccc.jpg'</span><span class="token punctuation">,</span>
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">xx/yy</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator"><</span>div<span class="token operator">></span><span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>如果想兼容快应用， 还需要在app.js添加一个onShowMenu钩子， 详见<a href="./share.html">转发分享</a></p>
<p>想动态设置右上角按钮可以使用下面API</p>
<ul>
<li><code>React.api.showShareMenu()</code> 快应用不支持</li>
<li><code>React.api.hideShareMenu()</code> 快应用不支持</li>
</ul>
<p>隐藏微信网页右上角按钮</p>
<pre><code class="language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'WeixinJSBridgeReady'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">onBridgeReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 通过下面这个API隐藏右上角按钮</span>
<span class="token function">WeixinJSBridge</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">'hideOptionMenu'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'WeixinJSBridgeReady'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">onBridgeReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 通过下面这个API显示右上角按钮</span>
<span class="token function">WeixinJSBridge</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">'showOptionMenu'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
<h2 id="切换栏">切换栏</h2>
<p>这是一个非常复杂的功能，涉及众多配置项，但我们要求遵循微信的配置名。如果当前页面config没有tabBar配置对象， 那么我们就使用app.js中的tabBar配置对象。</p>
<pre><code class="language-javascript"><span class="token comment">//app.js</span>
<span class="token keyword">class</span> <span class="token class-name">Global</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token keyword">static</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">window</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">backgroundTextStyle</span><span class="token operator">:</span> <span class="token string">'light'</span><span class="token punctuation">,</span>
<span class="token literal-property property">navigationBarTitleText</span><span class="token operator">:</span> <span class="token string">'mpreact'</span><span class="token punctuation">,</span>
<span class="token literal-property property">navigationBarTextStyle</span><span class="token operator">:</span> <span class="token string">'white'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">tabBar</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#929292'</span><span class="token punctuation">,</span>
<span class="token literal-property property">selectedColor</span><span class="token operator">:</span> <span class="token string">'#00bcd4'</span><span class="token punctuation">,</span>
<span class="token literal-property property">borderStyle</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span>
<span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#ffffff'</span><span class="token punctuation">,</span>
<span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">pagePath</span><span class="token operator">:</span> <span class="token string">'pages/index/index'</span><span class="token punctuation">,</span>
<span class="token literal-property property">iconPath</span><span class="token operator">:</span> <span class="token string">'/assets/image/homepage_normal.png'</span><span class="token punctuation">,</span>
<span class="token literal-property property">selectedIconPath</span><span class="token operator">:</span> <span class="token string">'/assets/image/homepage_select.png'</span><span class="token punctuation">,</span>
<span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'首页'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">pagePath</span><span class="token operator">:</span> <span class="token string">'pages/demo/question/index/index'</span><span class="token punctuation">,</span>
<span class="token literal-property property">iconPath</span><span class="token operator">:</span> <span class="token string">'/assets/image/question_normal.png'</span><span class="token punctuation">,</span>
<span class="token literal-property property">selectedIconPath</span><span class="token operator">:</span> <span class="token string">'/assets/image/question_select.png'</span><span class="token punctuation">,</span>
<span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'问答社区'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">pagePath</span><span class="token operator">:</span> <span class="token string">'pages/demo/userCenter/index'</span><span class="token punctuation">,</span>
<span class="token literal-property property">iconPath</span><span class="token operator">:</span> <span class="token string">'/assets/image/uc_normal.png'</span><span class="token punctuation">,</span>
<span class="token literal-property property">selectedIconPath</span><span class="token operator">:</span> <span class="token string">'/assets/image/uc_select.png'</span><span class="token punctuation">,</span>
<span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'我的'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>
<span class="token comment">// pages/page1/index.js 由于存在tabBar配置对象，但是list的长度为零，不会显示 tabBar</span>
<span class="token keyword">class</span> <span class="token class-name">P1</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token keyword">static</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">tabBar</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#929292'</span><span class="token punctuation">,</span>
<span class="token literal-property property">selectedColor</span><span class="token operator">:</span> <span class="token string">'#00bcd4'</span><span class="token punctuation">,</span>
<span class="token literal-property property">borderStyle</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span>
<span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#ffffff'</span><span class="token punctuation">,</span>
<span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator"><</span>div<span class="token operator">></span>page1<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// pages/page2/index.js 由于没有tabBar配置对象，这时此页面有tabBar,为app.js所定义的那样</span>
<span class="token keyword">class</span> <span class="token class-name">P2</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token keyword">static</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator"><</span>div<span class="token operator">></span>page2<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>想动态设置tabBar可以使用下面API</p>
<ul>
<li>React.api.showTabBar() 快应用不支持</li>
<li>React.api.hideTabBar() 快应用不支持</li>
</ul>
<h2 id="系统导航栏">系统导航栏</h2>
<p>它只与快应用页面的onBackPress钩子有关。</p>
<p>当用户点击返回实体按键、左上角返回菜单、调用返回API时触发该事件</p>
<p>如果事件响应方法最后返回true表示不返回，自己处理业务逻辑（完毕后开发者自行调用 API 返回）；否则：不返回数据，或者返回其它数据：表示遵循系统逻辑：返回到上一页</p>
<pre><code class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">P2</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token keyword">static</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token function">onBackPress</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment">//让用户操作无效</span>
<span class="token keyword">return</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator"><</span>div<span class="token operator">></span>page2<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="m-content-container m-paging"><div class="m-paging-prev m-paging-item"><a href="lifetimes.html" class="href"><span class="ui-font-ydoc"></span>页面组件与生命周期</a></div><div class="m-paging-next m-paging-item"><a href="component.html" class="href">页面上的子组件使用<span class="ui-font-ydoc"></span></a></div></div></div></div></div><div></div><script>
var $content = document.getElementById('js-content');
var $summaryItems = Array.prototype.slice.call(document.querySelectorAll('#js-menu .href'));
var $menu = document.getElementById('js-menu');
if (sessionStorage.prevPathname) {
sessionStorage.setItem('prevPrevPathname', sessionStorage.prevPathname);
sessionStorage.setItem('prevPrevMenuScrollTop', sessionStorage.prevMenuScrollTop);
sessionStorage.setItem('prevPrevContentScrollTop', sessionStorage.prevContentScrollTop);
}
if (sessionStorage.locationPathname) {
sessionStorage.setItem('prevPathname', sessionStorage.locationPathname);
sessionStorage.setItem('prevMenuScrollTop', sessionStorage.menuScrollTop);
sessionStorage.setItem('prevContentScrollTop', sessionStorage.contentScrollTop);
}
if ($menu && sessionStorage.menuScrollTop) {
$menu.scrollTop = sessionStorage.menuScrollTop;
}
// 刷新页面但不切换 pathname 的时候，内容区恢复到记忆的高度
if ($content && sessionStorage.contentScrollTop && window.location.pathname == sessionStorage.locationPathname) {
$content.scrollTop = sessionStorage.contentScrollTop;
} else if (sessionStorage.prevPrevPathname && sessionStorage.prevPrevPathname === window.location.pathname) {
if ($menu && sessionStorage.prevPrevMenuScrollTop) {
$menu.scrollTop = sessionStorage.prevPrevMenuScrollTop;
}
if ($content && sessionStorage.prevPrevContentScrollTop) {
$content.scrollTop = sessionStorage.prevPrevContentScrollTop;
}
}
sessionStorage.setItem('locationPathname', window.location.pathname);
</script><script src="../ydoc/scripts/plugins/dollar.min.js"></script><script src="../ydoc/scripts/plugins/responsive-nav.min.js"></script><script src="../ydoc/scripts/plugins/slideout.min.js"></script><script src="../ydoc/scripts/app.js"></script><script src="../ydoc/ydoc-plugin-search/core.js"></script><script src="../ydoc/ydoc-plugin-search/search.js"></script><script src="../search_json.js"></script></body></html>