-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathtcb01.html
551 lines (525 loc) · 94.4 KB
/
tcb01.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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/style.css" type="text/css" media="all">
<link rel="icon" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/icon.jpg">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script>
window.location.href="https://cloudbase.net/community/guides/handbook/index.html"
</script>
<script src="https://hm.baidu.com/hm.js?c74df1b3bfef646324c832a4c59aa5df"></script><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c74df1b3bfef646324c832a4c59aa5df";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//s.w.org">
<link href="https://fonts.gstatic.com" crossorigin="" rel="preconnect">
<link rel="alternate" type="application/rss+xml" title="云开发技术训练营 » Feed" href="https://cloudbasegroup.org/feed">
<link rel="alternate" type="application/rss+xml" title="云开发技术训练营 » 评论Feed" href="https://cloudbasegroup.org/comments/feed">
<link rel="alternate" type="application/rss+xml" title="云开发技术训练营 » 小程序开发入门评论Feed" href="https://cloudbasegroup.org/handbook/weapp/10/feed">
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/cloudbasegroup.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.2.2"}};
!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
</script><script src="https://cloudbasegroup.org/wp-includes/js/wp-emoji-release.min.js?ver=5.2.2" type="text/javascript" defer=""></script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel="stylesheet" id="crayon-theme-monokai-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/plugins/crayon-syntax-highlighter/themes/monokai/monokai.css?ver=_2.7.2_beta" type="text/css" media="all">
<link rel="stylesheet" id="crayon-font-monaco-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/plugins/crayon-syntax-highlighter/fonts/monaco.css?ver=_2.7.2_beta" type="text/css" media="all">
<link rel="stylesheet" id="wp-block-library-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/css/dist/block-library/style.min.css?ver=5.2.2" type="text/css" media="all">
<link rel="stylesheet" id="dashicons-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/css/dashicons.min.css?ver=5.2.2" type="text/css" media="all">
<link rel="stylesheet" id="post-views-counter-frontend-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/plugins/post-views-counter/css/frontend.css?ver=1.3.1" type="text/css" media="all">
<link rel="stylesheet" id="twentyfourteen-lato-css" href="https://fonts.googleapis.com/css?family=Lato%3A300%2C400%2C700%2C900%2C300italic%2C400italic%2C700italic&subset=latin%2Clatin-ext" type="text/css" media="all">
<link rel="stylesheet" id="genericons-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/themes/twentyfourteen/genericons/genericons.css?ver=3.0.3" type="text/css" media="all">
<link rel="stylesheet" id="twentyfourteen-style-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/themes/twentyfourteen/style.css?ver=5.2.2" type="text/css" media="all">
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyfourteen-ie-css' href='https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/themes/twentyfourteen/css/ie.css?ver=20131205' type='text/css' media='all' />
<![endif]-->
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp"></script>
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>
<link rel="https://api.w.org/" href="https://cloudbasegroup.org/wp-json/">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://cloudbasegroup.org/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/wlwmanifest.xml">
<link rel="prev" title="WXML与WXSS" href="https://cloudbasegroup.org/handbook/weapp/13">
<meta name="generator" content="WordPress 5.2.2">
<link rel="canonical" href="https://cloudbasegroup.org/handbook/weapp/10">
<link rel="shortlink" href="https://cloudbasegroup.org/?p=10">
<link rel="alternate" type="application/json+oembed" href="https://cloudbasegroup.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcloudbasegroup.org%2Fhandbook%2Fweapp%2F10">
<link rel="alternate" type="text/xml+oembed" href="https://cloudbasegroup.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcloudbasegroup.org%2Fhandbook%2Fweapp%2F10&format=xml">
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<script src="chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/prompt.js"></script></head>
<body class="post-template-default single single-post postid-10 single-format-standard logged-in masthead-fixed full-width singular">
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<nav id="header-db" class="row navbar navbar-default">
<div class="navbar-header">
<div class="logotop fleft">
<a style="margin-top: 15px;" href="https://tencentcloudbase.github.io/handbook/tcb01.html" target="_blank"><img
src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/icon.svg"></a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="flex nav-items">
<h1 class="flex-item navbar-link">
云开发技术训练营</h1>
<div class="tcb-header__col tcb-header__col-right">
<ul class="tcb-header-nav">
<li class="tcb-header-nav__item ">
<a target="_blank" href="https://cloudbase.net/tools.html">工具</a></li>
<li class="tcb-header-nav__item "><a target="_blank"
href="https://cloudbase.net/sdk.html">SDK</a></li>
<li class="tcb-header-nav__item "><a href="https://docs.cloudbase.net" target="_blank">文档</a></li>
<li class="tcb-header-nav__item "><a target="_blank"
href="https://cloudbase.net/community.html">社区</a></li>
<li class="tcb-header-nav__item "><a target="_blank"
href="https://console.cloud.tencent.com/tcb?from=12341">去控制台</a></li>
</ul>
</div>
</div>
</div>
<div class="collapse navbar-collapse sop-sider" id="bs-example-navbar-collapse-1">
<div class="sop-menu">
<ul>
<li class="page_item no_current_page_item"><a href="./index.html">云开发训练营说明</a></li>
<li class="page_item no_current_page_item"><a><strong>小程序技术训练营</strong></a></li>
<li class="page_item current_page_item"><a href="./tcb01.html">小程序开发入门</a></li>
<li class="page_item no_current_page_item"><a href="./tcb02.html">WXML与WXSS</a></li>
<li class="page_item no_current_page_item"><a href="./tcb03.html">链接与图片</a></li>
<li class="page_item no_current_page_item"><a href="./tcb04.html">WeUI框架</a></li>
<li class="page_item no_current_page_item"><a href="./tcb05.html">渐变与动画</a></li>
<li class="page_item no_current_page_item"><a href="./tcb06.html">数据绑定</a></li>
<li class="page_item no_current_page_item"><a href="./tcb07.html">列表渲染与条件渲染</a></li>
<li class="page_item no_current_page_item"><a href="./tcb08.html">小程序组件</a></li>
<li class="page_item no_current_page_item"><a href="./tcb09.html">优化与部署上线</a></li>
<li class="page_item no_current_page_item"><a><strong>小程序与JavaScript</strong></a></li>
<li class="page_item no_current_page_item"><a href="./tcb11.html">JavaScript入门</a></li>
<li class="page_item no_current_page_item"><a href="./tcb12.html">点击事件</a></li>
<li class="page_item no_current_page_item"><a href="./tcb13.html">页面渲染</a></li>
<li class="page_item no_current_page_item"><a href="./tcb14.html">生命周期</a></li>
<li class="page_item no_current_page_item"><a href="./tcb15.html">数据表单</a></li>
<li class="page_item no_current_page_item"><a href="./tcb16.html">图片、缓存与文件</a></li>
<li class="page_item no_current_page_item"><a href="./tcb17.html">网络API</a></li>
<li class="page_item no_current_page_item"><a><strong>云开发技术训练营</strong></a></li>
<li class="page_item no_current_page_item"><a href="./tcb21.html">云开发快速入门</a></li>
<li class="page_item no_current_page_item"><a href="./tcb22.html">云开发能力</a></li>
<li class="page_item no_current_page_item"><a href="./tcb23.html">云数据库入门</a></li>
<li class="page_item no_current_page_item"><a href="./tcb24.html">存储、数组、对象</a></li>
<li class="page_item no_current_page_item"><a href="./tcb25.html">云开发与Nodejs</a></li>
</ul>
</div>
</div>
</nav>
<div class="sop-content">
<header class="entry-header">
<h1 class="entry-title">小程序开发入门</h1>
</header><!-- .entry-header -->
<div class="entry-content">
<p>学习技术不要光看视频、教材，一定要动手实践。只有实战，技术才会变得简单。小程序相比其他编程语言来说，可以让我们更快做出一些技术产品。</p>
<h4>开始前的准备</h4>
<p>小程序的开发有两样东西必不可少，一个是小程序开发的<strong>技术文档</strong>；还有一个就是小程序的<strong>开发者工具</strong>。</p>
<p><strong>开发者工具</strong>：<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html" target="_blank" rel="noopener noreferrer">小程序开发者工具下载地址</a></p>
<p>大家可以根据自己电脑的操作系统来下载对应的<span style="color: #800000;"><strong>稳定版安装包</strong></span>进行安装。就和我们写Word、PPT文档要用Office的软件一样，我们要在开发者工具上多多动手，技术才能掌握的更加真切。</p>
<p><strong>技术文档</strong>：<a href="https://developers.weixin.qq.com/miniprogram/dev/index.html" target="_blank" rel="noopener noreferrer">官方小程序技术文档</a></p>
<p>技术文档大家先只需要<strong><span style="color: #800000;">花五分钟左右的时间</span></strong>了解大致的结构即可，<span style="color: #800000;"><strong>先按照我们的教学步骤学完之后</strong></span>再来看也不迟。官方的小程序技术文档过于全面而且详细，对于初学者或者零基础的朋友来说，我们会引导大家如何循序渐进的学习文档里的技术知识。</p>
<blockquote class="danger"><p><strong>多看技术文档</strong>和<strong>多用开发工具</strong>也是我们学习其他编程语言或技术最为重要的两点，凡是脱离技术文档和开发工具看视频、看文章以及搜集再多的资料都是舍本求末的错误做法，而这也是很多初学者的一个通病。</p>
<p>值得注意的是小程序的开发功能更新非常频繁，很多网上的教程内容都比较过时，而只有技术文档才是同步最新的。无论你是初学者还是高手，技术文档都是我们技术开发的基础与落脚点，常读常新。</p></blockquote>
<h4>注册微信小程序</h4>
<p>小程序的注册非常方便，打开小程序注册页面，按照要求填入个人的信息，验证邮箱和手机号，扫描二维码绑定你的微信号即可，3分钟左右的时间即可搞定。</p>
<p><strong>注册页面：</strong><a href="https://mp.weixin.qq.com/wxopen/waregister?action=step1" target="_blank" rel="noopener noreferrer">小程序注册页面</a></p>
<blockquote class="danger"><p>注册小程序时不能使用注册过微信公众号、微信开放平台的邮箱哦，也就是需要你使用一个其他邮箱才行。</p></blockquote>
<p>当我们注册成功后，就可以自动登入到小程序的后台管理页面啦，如果你不小心关掉了后台页面，也可以点击小程序后台管理登录页进行登录。</p>
<p><strong>后台管理页：</strong><a href="https://mp.weixin.qq.com/cgi-bin/home?t=home/index&lang=zh_CN" target="_blank" rel="noopener noreferrer">小程序后台管理登录页</a></p>
<blockquote><p>小程序和微信公众号的登录页都是同一个页面，他们会根据你的不同的注册邮箱来进行跳转。</p></blockquote>
<p>进入到小程序的后台管理页后，点击左侧菜单的<b>开发</b>进入设置页，然后再点击<strong>开发设置</strong>，在<strong>开发者ID</strong>里就可以看到<strong>AppID(小程序ID)</strong>，这个待会我们有用。</p>
<blockquote class="danger"><p>注意小程序的ID（AppID）不是你注册的邮箱和用户名，你需要到后台查看才行哦~</p></blockquote>
<p> </p>
<h4>新建一个模板小程序</h4>
<p>安装完开发者工具之后，我们使用微信扫码登录开发者工具，然后使用开发者工具新建一个小程序的项目，</p>
<ul>
<li><strong>项目名称：</strong>这个可以根据自己的需要任意填写，可以是中文；</li>
<li><strong>目录：</strong>大家需要先在电脑上新建一个空文件夹，然后选择这个空文件夹；</li>
<li><strong>AppID：</strong>就是之前我们找到的<strong>AppID(小程序ID)</strong>（也可以点击右边的下拉框，下拉选择AppID）</li>
<li><strong>开发模式</strong>为小程序</li>
<li><strong>后端服务</strong>选择<span style="color: #800000;"><strong>不使用云服务</strong></span>，<span style="color: #800000;"><strong>注意为了教学的需要，先选择不使用云服务</strong></span></li>
<li><strong>语言</strong>为JavaScript</li>
</ul>
<p>点击<strong>新建</strong>确认之后就能在开发者工具的<strong>模拟器</strong>里看到一个简单的<strong>Hello World模板小程序</strong>，在编辑器里看到这个小程序的源代码。</p>
<blockquote class="task"><p><strong>小任务： </strong>分别点击开发者工具<strong>工具栏</strong>上的<strong>模拟器</strong>、<strong>编辑器</strong>、<strong>调试器</strong>，以及下面的手机下拉框、显示百分比，看看有什么效果。找到开发者工具的<strong>菜单栏</strong>，在<strong>项目</strong>菜单栏里找到查看所有项目，在<strong>设置</strong>菜单栏里找到<strong>外观设置</strong>，切换一下主题、调试器主题（深色、浅色）。</p></blockquote>
<p>接下来，我们点击开发者工具的工具栏里的<strong>预览</strong>图标，就会弹出一个二维码，使用你的手机微信扫描这个二维码就能在微信里看到这个小程序啦。<strong><span style="color: #008000;">以后我们要自己开发一个小程序都可以按照上面的操作新建一个模板小程序，然后在这个的基础上修改开发</span></strong>。</p>
<blockquote><p>如果你没有使用微信登录开发者工具，以及你的微信不是该小程序的开发者是没法预览的哦。这个<strong>Hello World模板小程序</strong>非常简单，但是它的文件结构却是完整的。</p></blockquote>
<h4>开通云开发服务</h4>
<p>点击微信开发者工具的“<strong>云开发</strong>”图标，在弹出框里点击“<strong>开通</strong>”，同意协议后，会弹出<strong>创建环境</strong>的对话框。这时会要求你输入<strong>环境名称</strong>和<strong>环境ID</strong>，以及当前云开发的基础环境配额（基础配额免费，而且足够你使用哦）。</p>
<blockquote><p>建议你<strong>环境名称</strong>可以使用
<span id="crayon-5dabdc2d384d3933118485" class="crayon-syntax crayon-syntax-inline crayon-theme-monokai crayon-theme-monokai-inline crayon-font-monaco" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important;"><span class="crayon-pre crayon-code" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><span class="crayon-v">xly</span></span></span>、<strong>环境ID</strong>自动生成即可，当你的云开发环境出现问题的时候，你可以提供你的环境ID，云开发团队会有专人为你解答。</p></blockquote>
<p>按照对话框提示的要求填写完之后，点击<strong>创建</strong>，会初始化环境，环境初始化成功后会自动弹出云开发控制台，这样我们的云开发服务就开通啦。大家可以花<strong>两分钟左右</strong>的时间熟悉一下云开发控制台的界面。</p>
<h4>文件结构与页面组成</h4>
<blockquote><p>在了解以下知识时，大家只需要结合开发者工具的编辑器对照着介绍，一一展开文件夹、用编辑器查看文件的源代码，<span style="color: #800000;"><strong>大致浏览一下即可</strong></span>。这就是<strong><span style="color: #008000;">实战学习的方法</span></strong>（和看书、看视频的学习方法不同），千万不要死记硬背哦，你以后用多了自然就记住啦~</p></blockquote>
<p><strong>小程序的文件结构</strong></p>
<p>在开发者工具的<strong>编辑器</strong>里可以看到小程序源文件的<strong>根目录</strong>下有app.js、app.json和app.wxss，这是小程序必不可少的<span style="color: #800000;"><strong>三个主体文件</strong></span>，下面我们来大致了解一下小程序文件结构（<span style="color: #008000;"><strong>只需要大致了解就可以啦~不理解也没有关系</strong></span>）。</p>
<ul>
<li><strong>app.json</strong>：小程序的<strong>公共设置</strong>，可以对小程序进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等；</li>
<li><strong>app.wxss</strong>：小程序的<strong>公共样式表</strong>，可以配置整个小程序的文字的字体、颜色、背景，图片的大小等<strong>样式</strong>；</li>
<li><strong>app.js</strong>：小程序的逻辑（这个可以先放着，不用管）</li>
<li><strong>pages文件夹</strong>：这里存放着小程序的所有页面，展开pages文件夹就可以看到有index和logs两个<strong>页面文件夹</strong>；</li>
</ul>
<blockquote class="task"><p><strong>小任务：</strong>在结合开发者工具实战了解了上面的知识之后，你明白了哪个文件夹是<strong>小程序的根目录</strong>吗？</p></blockquote>
<p><strong>小程序的页面组成</strong></p>
<p>在每一个页面文件夹里都有<strong>四个文件</strong>，这四个文件的名称都是一样的，它们分别为：</p>
<ul>
<li><strong>json文件</strong>，和上面的app.json作用基本相同，只是app.json控制的是整个小程序的设置，而页面的json文件只控制单个页面的配置（因为有时候全局配置就够用了，所以页面配置有时候是空的）；</li>
<li><strong>wxml文件</strong>，小程序的页面结构，文字、图片、音乐、视频、地图、轮播等组件都会放在这里；</li>
<li><strong>wxss文件</strong>，小程序的页面样式，和app.wxss一样是控制样式，而页面的wxss文件是控制单个页面的样式；</li>
<li><strong>js文件</strong>，这个是控制小程序页面的逻辑（这个可以先放着，不用管）</li>
</ul>
<h4>小程序的全局配置</h4>
<p>在前面我们已经提到，<strong>app.json</strong>可以对整个小程序进行<strong>全局配置</strong>，而配置的依据就需要我们参考技术文档了。</p>
<p><strong>技术文档</strong>：<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html" target="_blank" rel="noopener noreferrer">小程序全局配置</a></p>
<blockquote><p>打开上面的小程序全局配置技术文档，里面会有很多你看不懂的名称，这是非常正常的，大家也不需要记，<span style="color: #800000;"><strong>只需要花两三分钟时间</strong></span>快速浏览一下即可，后面我们会教大家如何结合技术文档来实战学习。</p></blockquote>
<p><strong>json语法</strong></p>
<p>在对小程序进行配置之前，<span style="color: #800000;"><strong>可以使用开发者工具打开app.json文件，对照着下面的json语法来进行理解</strong></span>：</p>
<ul>
<li>大括号<strong>{}保存对象</strong>，我们来看一下app.json，哪些地方用到了大括号{}，{}里面就是对象；</li>
<li>中括号<strong>[]保存数组</strong>，我们可以看到中括号[]里有
<div>
<div>“pages/index/index”等（这是小程序页面的路径），那这些页面路径就是数组啦；数组里的值都是平级的关系；</div>
</div>
</li>
<li>各个数据之间由<strong><span style="color: #800000;">英文字符</span>逗号,</strong>隔开，注意这里的数据包括对象、数据、单条属性与值，大家可以结合app.json<span style="color: #800000;"><strong>仔细比对逗号,出现的位置</strong></span>，<strong><span style="color: #800000;">平级数据的最后一条数据不要加逗号,</span></strong>，也就是只有数据之间才有逗号。</li>
<li>字段名称（<strong>属性名</strong>）与值之间用<strong>冒号:</strong>隔开，字段名称在前，字段的取值在后；</li>
<li>字段名称用<strong>双引号””</strong>给包着；</li>
</ul>
<blockquote class="danger"><p>注意，这里所有的标点符号都需要是<span style="color: #800000;"><strong>英文状态</strong></span>下的，也就是我们经常听说的全角半角里的半角状态，不然会报错哦。<span style="color: #800000;"><strong>很多之前没有接触过编程的童鞋经常会犯这样的错误，一定要多多注意！</strong></span>当我们要输入编程里的标点符号时，一定要先确认一下，你的输入法是汉语形态，还是字母形态，如果输的是汉字形态，一定要切换哦~</p></blockquote>
<p><strong>设置小程序窗口表现</strong></p>
<p>使用开发者工具打开app.json文件，可以看到如下代码里有一个<strong>window</strong>的字段名（如前面所说，字段名要用双引号””包着），它的值是一个<strong>对象</strong>（如前面所说，{}大括号里的就是对象），可见<strong>对象可以是一组数据的集合</strong>，这个集合里包含着几条数据。</p>
<div id="crayon-5dabdc2d384db806324957" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;"> "window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5dabdc2d384db806324957-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5dabdc2d384db806324957-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5dabdc2d384db806324957-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5dabdc2d384db806324957-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5dabdc2d384db806324957-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5dabdc2d384db806324957-6" style="height: 20px;">6</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5dabdc2d384db806324957-1"><span class="crayon-h"> </span><span class="crayon-s">"window"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384db806324957-2"><span class="crayon-h"> </span><span class="crayon-s">"backgroundTextStyle"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"light"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384db806324957-3"><span class="crayon-h"> </span><span class="crayon-s">"navigationBarBackgroundColor"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"#fff"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384db806324957-4"><span class="crayon-h"> </span><span class="crayon-s">"navigationBarTitleText"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"WeChat"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384db806324957-5"><span class="crayon-h"> </span><span class="crayon-s">"navigationBarTextStyle"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"black"</span></div><div class="crayon-line" id="crayon-5dabdc2d384db806324957-6"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>这些就是<strong>window配置项</strong>，可用于设置小程序的状态栏、导航条、标题、窗口背景色。</p>
<blockquote class="task"><p>小任务：打开<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html" target="_blank" rel="noopener noreferrer">小程序全局配置</a>查看backgroundTextStyle、navigationBarBackgroundColor、navigationBarTitleText、navigationBarTextStyle的配置描述（大致了解即可）。</p></blockquote>
<p>使用开发者工具的编辑器将以上属性的值改成如下代码（这里的backgroundTextStyle只有在设置了下拉刷新样式时才会比较明显，以后会介绍）</p>
<div id="crayon-5dabdc2d384dd116784353" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;"> "window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#1772cb",
"navigationBarTitleText": "云开发技术训练营",
"navigationBarTextStyle": "white"
},</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5dabdc2d384dd116784353-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5dabdc2d384dd116784353-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5dabdc2d384dd116784353-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5dabdc2d384dd116784353-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5dabdc2d384dd116784353-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5dabdc2d384dd116784353-6" style="height: 20px;">6</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5dabdc2d384dd116784353-1"><span class="crayon-h"> </span><span class="crayon-s ">"window"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384dd116784353-2"><span class="crayon-h"> </span><span class="crayon-s ">"backgroundTextStyle"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s ">"dark"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5dabdc2d384dd116784353-3"><span class="crayon-h"> </span><span class="crayon-s ">"navigationBarBackgroundColor"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s ">"#1772cb"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384dd116784353-4"><span class="crayon-h"> </span><span class="crayon-s ">"navigationBarTitleText"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s ">"云开发技术训练营"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5dabdc2d384dd116784353-5"><span class="crayon-h"> </span><span class="crayon-s ">"navigationBarTextStyle"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s ">"white"</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5dabdc2d384dd116784353-6"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<blockquote class="danger"><p>添加完成之后<strong>记得保存代码</strong>哦，文件修改没有保存会在标签页有一个小的绿点。可以使用快捷键（同时按）Ctrl和S来保存（Mac电脑为Command和S）。</p></blockquote>
<p>然后点击开发者工具的<strong>编译</strong>图标，就能看到更新之后的效果啦，也可以点击<strong>预览</strong>，使用手机微信扫描生成的二维码查看实际效果。</p>
<blockquote class="task"><p><strong>小任务：</strong>
<span id="crayon-5dabdc2d384e2944080615" class="crayon-syntax crayon-syntax-inline crayon-theme-monokai crayon-theme-monokai-inline crayon-font-monaco" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important;"><span class="crayon-pre crayon-code" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><span class="crayon-v">navigationBarBackgroundColor</span></span></span>值是
<span id="crayon-5dabdc2d384e4390084697" class="crayon-syntax crayon-syntax-inline crayon-theme-monokai crayon-theme-monokai-inline crayon-font-monaco" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important;"><span class="crayon-pre crayon-code" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><span class="crayon-p">#F8F8F8</span></span></span>，
<span id="crayon-5dabdc2d384e5504596937" class="crayon-syntax crayon-syntax-inline crayon-theme-monokai crayon-theme-monokai-inline crayon-font-monaco" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important;"><span class="crayon-pre crayon-code" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><span class="crayon-p">#1772cb</span></span></span>，这是十六进制颜色值，它是一个非常基础而且用途范围极广的计算机概念，大家可以搜索了解一下：1、如何使用电脑版微信、QQ的截图工具取色（取色颜色会有一点偏差）；2、RGB颜色与十六进制颜色如何转换；</p></blockquote>
<p><span style="font-size: 20px; font-weight: bold; color: #2b2b2b;">新建小程序页面</span></p>
<p>新建页面的方法有两种，一种是使用开发者工具在<strong>pages文件夹</strong>下新建；还有一种是通过app.json的pages配置项来新建，我们先来看第2种方法。</p>
<p><strong>通过app.json新建页面</strong></p>
<p>pages配置项是设置页面的路径，也就是我们在小程序里写的每一个页面都需要填写在这里。使用开发者工具打开app.json文件，在pages配置项里新建一个home页面（<strong>页面名称可以是任意英文名</strong>），代码如下：</p>
<div id="crayon-5dabdc2d384e7687064237" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">"pages/home/home",
"pages/index/index",
"pages/logs/logs"</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5dabdc2d384e7687064237-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5dabdc2d384e7687064237-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5dabdc2d384e7687064237-3" style="height: 20px;">3</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5dabdc2d384e7687064237-1"><span class="crayon-s">"pages/home/home"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384e7687064237-2"><span class="crayon-s">"pages/index/index"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384e7687064237-3"><span class="crayon-s">"pages/logs/logs"</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<blockquote><p>大家写的时候可以回顾一下json语法，每个页面后都记得要用逗号,隔开，如果你的文件代码写错了，开发者工具会报错。</p></blockquote>
<p>在模拟器就能看到我们新建的这个首页了，会显示如下内容：</p>
<div id="crayon-5dabdc2d384e9008060174" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">pages/home/home.wxml</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5dabdc2d384e9008060174-1" style="height: 20px;">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5dabdc2d384e9008060174-1">pages<span class="crayon-o">/</span>home<span class="crayon-o">/</span>home<span class="crayon-sy">.</span>wxml</div></div></td>
</tr>
</tbody></table>
</div>
</div><p>大家再来看看小程序的文件夹结构，是不是在pages文件夹下面多了一个home的文件夹？而且这个文件夹还自动新建了四个页面文件。</p>
<p>我们删掉文件目录下的index和logs文件夹，然后把app.json的pages配置项修改为：</p>
<div id="crayon-5dabdc2d384ea382352588" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">"pages": [
"pages/home/home",
"pages/list/list",
"pages/partner/partner",
"pages/more/more"
],</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5dabdc2d384ea382352588-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5dabdc2d384ea382352588-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5dabdc2d384ea382352588-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5dabdc2d384ea382352588-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5dabdc2d384ea382352588-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5dabdc2d384ea382352588-6" style="height: 20px;">6</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5dabdc2d384ea382352588-1"><span class="crayon-s">"pages"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-5dabdc2d384ea382352588-2"><span class="crayon-h"> </span><span class="crayon-s">"pages/home/home"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ea382352588-3"><span class="crayon-h"> </span><span class="crayon-s">"pages/list/list"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ea382352588-4"><span class="crayon-h"> </span><span class="crayon-s">"pages/partner/partner"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ea382352588-5"><span class="crayon-h"> </span><span class="crayon-s">"pages/more/more"</span></div><div class="crayon-line" id="crayon-5dabdc2d384ea382352588-6"><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>也就是我们删掉了index和logs页面配置项的同时，又新增了三个页面(<strong>list、partner、more，这三个页面名称大家可以根据自己需要来命名</strong>)。</p>
<blockquote class="task"><p><strong>小任务：</strong>这些新建的页面文件都在电脑上的什么呢？比如在开发者工具右键点击home文件夹或者home.wxml，选择“<strong>在硬盘打开</strong>”就可以看到该文件在我们电脑的文件夹里什么的位置啦</p></blockquote>
<p><strong>小程序的首页</strong></p>
<p>在pages配置项的技术文档里有这样一句：“<strong>数组的第一项代表小程序的初始页面</strong>”，是什么意思呢？</p>
<p><strong>技术文档</strong>：<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#pages" target="_blank" rel="noopener noreferrer">pages配置项</a></p>
<p>使用开发者工具打开app.json，把之前建好的”pages/list/list”剪切粘贴到”pages/home/home”的前面，也就是把list页面放到了数组的第一项，再来模拟器里看一下小程序的变化。原来pages配置项的第一项就是小程序的首页啦。</p>
<blockquote class="task"><p><strong>小任务：</strong>现在我们来使用新建页面的第1种方法，使用开发者工具在pages文件夹下新建页面。首先选中pages文件夹，然后点击上方的<strong>+</strong>号或鼠标右键，新建目录，然后输入目录名为post，然后再选中post文件夹，新建页面，页面名也为post，新建之后看看pages配置项的变化。</p></blockquote>
<p><strong>了解配置项的书写方式</strong></p>
<p>在前面我们已经了解了window配置项、pages配置项，在技术文档<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html" target="_blank" rel="noopener noreferrer">小程序全局配置</a>了解到window、pages这些都是全局配置项的<span style="color: #800000;"><strong>属性</strong></span>，全局配置项的属性还有tabBar、networkTimeout、usingComponents、permission等，大家可以在技术文档里了解每个属性的描述，大致了解他们的功能。</p>
<p>这里我们来宏观了解一下配置项的书写语法，大家可以结合下面这段代码来理解app.json的写法，免得配置错误：</p>
<ul>
<li><strong>每个配置项</strong>比如pages、window都用<strong>引号””</strong>包住，<strong>冒号:</strong>后面是配置项的属性与值；</li>
<li>每个配置项之间用<strong>逗号,</strong>隔开，最后一项<strong>没有逗号</strong>，<span style="color: #800000;"><strong>配置项是平级关系</strong></span>，不要把tabBar配置项写到window配置项里面了；</li>
<li>配置项里面的数组或对象的最后一项<strong>也没有逗号</strong></li>
<li>书写时注意缩进，<span style="color: #800000;"><strong>大括号{}、中括号[]都是成对书写</strong></span>，即使是嵌套时也不能有遗漏}或]；</li>
</ul>
<p></p>
<div id="crayon-5dabdc2d384ec191774005" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">{
"pages": [
"pages/home/home",
"pages/list/list",
"pages/partner/partner",
"pages/more/more"
],
"window": {
"navigationBarTitleText": "云开发技术训练营"
},
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页"
},
{
"pagePath": "pages/list/list",
"text": "活动"
},
{
"pagePath": "pages/partner/partner",
"text": "伙伴"
},
{
"pagePath": "pages/more/more",
"text": "更多"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
]
}</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -28px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-14" style="height: 20px;">14</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-15" style="height: 20px;">15</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-16" style="height: 20px;">16</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-17" style="height: 20px;">17</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-18" style="height: 20px;">18</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-19" style="height: 20px;">19</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-20" style="height: 20px;">20</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-21" style="height: 20px;">21</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-22" style="height: 20px;">22</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-23" style="height: 20px;">23</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-24" style="height: 20px;">24</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-25" style="height: 20px;">25</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-26" style="height: 20px;">26</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-27" style="height: 20px;">27</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-28" style="height: 20px;">28</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-29" style="height: 20px;">29</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-30" style="height: 20px;">30</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-31" style="height: 20px;">31</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-32" style="height: 20px;">32</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-33" style="height: 20px;">33</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-34" style="height: 20px;">34</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-35" style="height: 20px;">35</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-36" style="height: 20px;">36</div><div class="crayon-num" data-line="crayon-5dabdc2d384ec191774005-37" style="height: 20px;">37</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-1"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-2"><span class="crayon-h"> </span><span class="crayon-s">"pages"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-3"><span class="crayon-h"> </span><span class="crayon-s">"pages/home/home"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-4"><span class="crayon-h"> </span><span class="crayon-s">"pages/list/list"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-5"><span class="crayon-h"> </span><span class="crayon-s">"pages/partner/partner"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-6"><span class="crayon-h"> </span><span class="crayon-s">"pages/more/more"</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-7"><span class="crayon-h"> </span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-8"><span class="crayon-h"> </span><span class="crayon-s">"window"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-9"><span class="crayon-h"> </span><span class="crayon-s">"navigationBarTitleText"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"云开发技术训练营"</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-10"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-11"><span class="crayon-h"> </span><span class="crayon-s">"tabBar"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-12"><span class="crayon-h"> </span><span class="crayon-s">"list"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-13"><span class="crayon-h"> </span><span class="crayon-s">"pagePath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"pages/home/home"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-14"><span class="crayon-h"> </span><span class="crayon-s">"text"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"首页"</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-15"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-16"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-17"><span class="crayon-h"> </span><span class="crayon-s">"pagePath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"pages/list/list"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-18"><span class="crayon-h"> </span><span class="crayon-s">"text"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"活动"</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-19"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-20"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-21"><span class="crayon-h"> </span><span class="crayon-s">"pagePath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"pages/partner/partner"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-22"><span class="crayon-h"> </span><span class="crayon-s">"text"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"伙伴"</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-23"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-24"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-25"><span class="crayon-h"> </span><span class="crayon-s">"pagePath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"pages/more/more"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-26"><span class="crayon-h"> </span><span class="crayon-s">"text"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"更多"</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-27"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-28"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-29"><span class="crayon-h"> </span><span class="crayon-s">"networkTimeout"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-30"><span class="crayon-h"> </span><span class="crayon-s">"request"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">10000</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-31"><span class="crayon-h"> </span><span class="crayon-s">"downloadFile"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">10000</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-32"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-33"><span class="crayon-h"> </span><span class="crayon-s">"debug"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-34"><span class="crayon-h"> </span><span class="crayon-s">"navigateToMiniProgramAppIdList"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-35"><span class="crayon-h"> </span><span class="crayon-s">"wxe5f52902cf4de896"</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-36"><span class="crayon-h"> </span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-5dabdc2d384ec191774005-37"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<h4 id="tabbar">配置tabBar配置项</h4>
<p>在很多App的底部都有一个<strong>带有小图标</strong>的切换tab，比如手机微信App底部就有微信、通讯录、发现、我四个tab，这个小图标就是icon，整个呢就是tabBar，小程序也可以有，需要我们在app.json里配置tabBar配置项。</p>
<p><strong>icon下载</strong></p>
<p>在官方技术文档里我们了解到icon 大小限制为40kb，建议尺寸为81px * 81px（大一点是可以的），不懂设计icon的童鞋可以去矢量图标库去下载。（<span style="color: #800000;"><strong>注意下载的格式要是png哦</strong></span>）</p>
<p><strong>icon资源：</strong><a href="http://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">iconfont阿里巴巴矢量图标库</a></p>
<p>大家可以留意下手机微信的tabBar的每一个icon其实是一组两个，也就是选中时的状态和没有选中时的状态，他们的颜色也是不一样的，而在iconfont里大家除了选择图标还可以选择<strong>不同的颜色</strong>来下载哦。比如我们要让tabBar有四个切换tab，那么我们就需要下载4个icon的两种配色共8张图片。</p>
<p>使用开发者工具在<strong>模板小程序的根目录下</strong>新建一个image的文件夹，把命名好的icon都放在里面，这个时候你的文件夹结构如下：</p>
<div id="crayon-5dabdc2d384ef505816988" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">小程序的根目录
├── image
│ ├── icon-tab1.png
│ ├── icon-tab1-active.png
├── pages
├── utils
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── sitemap.json</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -28px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5dabdc2d384ef505816988-11" style="height: 20px;">11</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-1">小程序的根目录<span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-2">├──<span class="crayon-h"> </span><span class="crayon-i">image</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-3">│<span class="crayon-h"> </span>├──<span class="crayon-h"> </span><span class="crayon-v">icon</span><span class="crayon-o">-</span><span class="crayon-v">tab1</span><span class="crayon-sy">.</span><span class="crayon-i">png</span></div><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-4">│<span class="crayon-h"> </span>├──<span class="crayon-h"> </span><span class="crayon-v">icon</span><span class="crayon-o">-</span><span class="crayon-v">tab1</span><span class="crayon-o">-</span><span class="crayon-v">active</span><span class="crayon-sy">.</span><span class="crayon-i">png</span></div><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-5">├──<span class="crayon-h"> </span><span class="crayon-i">pages</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-6">├──<span class="crayon-h"> </span><span class="crayon-i">utils</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-7">├──<span class="crayon-h"> </span><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-i">js</span></div><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-8">├──<span class="crayon-h"> </span><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-i">json</span></div><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-9">├──<span class="crayon-h"> </span><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-i">wxss</span></div><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-10">├──<span class="crayon-h"> </span><span class="crayon-v">project</span><span class="crayon-sy">.</span><span class="crayon-v">config</span><span class="crayon-sy">.</span><span class="crayon-i">json</span></div><div class="crayon-line" id="crayon-5dabdc2d384ef505816988-11">├──<span class="crayon-h"> </span><span class="crayon-v">sitemap</span><span class="crayon-sy">.</span><span class="crayon-v">json</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<blockquote><p>icon的配色最好是一明一暗，而且与你的小程序的整体颜色风格保持一致，这样切换起来才不会突兀；选择的这4个icon的风格最好一致，不然tabBar就不会好看啦。icon的名称最好也一致，比如home对应的icon可以为home.icon和home-active.icon。</p></blockquote>
<blockquote class="danger"><p>注意：图片的名称必须是英文，不要用中文。页面也好、文件也好、文件夹的名称也好，都要使用英文，里面的标点符号也必须是英文字符。</p></blockquote>
<p><strong>配置tabBar配置项</strong></p>
<p>通过tabBar配置项，可以设置tabBar的默认字体颜色、选中过的字体颜色、背景色等。</p>
<p><strong>技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar" target="_blank" rel="noopener noreferrer">tabBar配置项</a></p>
<p>通过技术文档，我们先<span style="color: #800000;"><strong>大致了解</strong></span>color、selectedColor、backgroundColor的意思。然后使用开发者工具打开app.json在window配置项后面新建一个tabBar配置项，代码如下：</p>
<div id="crayon-5dabdc2d384f1320630737" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">"tabBar": {
"color": "#7A7E83",
"selectedColor": "#13227a",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "image/icon-tab1.png",
"selectedIconPath": "image/icon-tab1-active.png",
"text": "首页"
},
{
"pagePath": "pages/list/list",
"iconPath": "image/icon-tab2.png",
"selectedIconPath": "image/icon-tab2-active.png",
"text": "活动"
},
{
"pagePath": "pages/partner/partner",
"iconPath": "image/icon-tab3.png",
"selectedIconPath": "image/icon-tab3-active.png",
"text": "伙伴"
},
{
"pagePath": "pages/more/more",
"iconPath": "image/icon-tab4.png",
"selectedIconPath": "image/icon-tab4-active.png",
"text": "更多"
}
]
}</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -28px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-14" style="height: 20px;">14</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-15" style="height: 20px;">15</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-16" style="height: 20px;">16</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-17" style="height: 20px;">17</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-18" style="height: 20px;">18</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-19" style="height: 20px;">19</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-20" style="height: 20px;">20</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-21" style="height: 20px;">21</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-22" style="height: 20px;">22</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-23" style="height: 20px;">23</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-24" style="height: 20px;">24</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-25" style="height: 20px;">25</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-26" style="height: 20px;">26</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-27" style="height: 20px;">27</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-28" style="height: 20px;">28</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-29" style="height: 20px;">29</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-30" style="height: 20px;">30</div><div class="crayon-num" data-line="crayon-5dabdc2d384f1320630737-31" style="height: 20px;">31</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-1"><span class="crayon-s">"tabBar"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-2"><span class="crayon-h"> </span><span class="crayon-s">"color"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"#7A7E83"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-3"><span class="crayon-h"> </span><span class="crayon-s">"selectedColor"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"#13227a"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-4"><span class="crayon-h"> </span><span class="crayon-s">"backgroundColor"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"#ffffff"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-5"><span class="crayon-h"> </span><span class="crayon-s">"list"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-6"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-7"><span class="crayon-h"> </span><span class="crayon-s">"pagePath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"pages/home/home"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-8"><span class="crayon-h"> </span><span class="crayon-s">"iconPath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"image/icon-tab1.png"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-9"><span class="crayon-h"> </span><span class="crayon-s">"selectedIconPath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"image/icon-tab1-active.png"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-10"><span class="crayon-h"> </span><span class="crayon-s">"text"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"首页"</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-11"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-12"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-13"><span class="crayon-h"> </span><span class="crayon-s">"pagePath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"pages/list/list"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-14"><span class="crayon-h"> </span><span class="crayon-s">"iconPath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"image/icon-tab2.png"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-15"><span class="crayon-h"> </span><span class="crayon-s">"selectedIconPath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"image/icon-tab2-active.png"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-16"><span class="crayon-h"> </span><span class="crayon-s">"text"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"活动"</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-17"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-18"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-19"><span class="crayon-h"> </span><span class="crayon-s">"pagePath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"pages/partner/partner"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-20"><span class="crayon-h"> </span><span class="crayon-s">"iconPath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"image/icon-tab3.png"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-21"><span class="crayon-h"> </span><span class="crayon-s">"selectedIconPath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"image/icon-tab3-active.png"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-22"><span class="crayon-h"> </span><span class="crayon-s">"text"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"伙伴"</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-23"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-24"><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-25"><span class="crayon-h"> </span><span class="crayon-s">"pagePath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"pages/more/more"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-26"><span class="crayon-h"> </span><span class="crayon-s">"iconPath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"image/icon-tab4.png"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-27"><span class="crayon-h"> </span><span class="crayon-s">"selectedIconPath"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"image/icon-tab4-active.png"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-28"><span class="crayon-h"> </span><span class="crayon-s">"text"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"更多"</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-29"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-30"><span class="crayon-h"> </span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-5dabdc2d384f1320630737-31"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>这里有一个比较重要的属性就是list，它是一个<strong>数组</strong>，决定了tabBar上面的文字、icon、以及点击之后的跳转链接。</p>
<ul>
<li>pagePath<span style="color: #800000;"><strong>必须为</strong></span>我们在pages配置项里建好的页面</li>
<li>text是tab按钮上的文字</li>
<li>iconPath、selectedIconPath分别为没有选中时的图片路径和选中时的图片路径。</li>
</ul>
<blockquote class="task"><p><strong>小任务：</strong>你知道应该如何制作一个底部没有tabBar的小程序吗？要让tabBar没有icon，应该如何配置？给tabBar添加一个position属性，值为top，小程序在界面上会有什么变化？再给小程序新增几个页面（不添加到tabBar上），我们应该如何在模拟器看到页面的内容？</p></blockquote>
<h4>小程序的页面配置</h4>
<p>使用打开一个页面的页面json文件，比如home的home.json，在json里面新建一些配置信息，如下所示。</p>
<p><strong>技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html" target="_blank" rel="noopener noreferrer">小程序页面配置</a></p>
<div id="crayon-5dabdc2d384f3611303028" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;">{
"usingComponents": {},
"navigationBarBackgroundColor": "#ce5a4c",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小程序页面",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5dabdc2d384f3611303028-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5dabdc2d384f3611303028-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5dabdc2d384f3611303028-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5dabdc2d384f3611303028-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5dabdc2d384f3611303028-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5dabdc2d384f3611303028-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5dabdc2d384f3611303028-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5dabdc2d384f3611303028-8" style="height: 20px;">8</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5dabdc2d384f3611303028-1"><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5dabdc2d384f3611303028-2"><span class="crayon-h"> </span><span class="crayon-s">"usingComponents"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f3611303028-3"><span class="crayon-h"> </span><span class="crayon-s">"navigationBarBackgroundColor"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"#ce5a4c"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f3611303028-4"><span class="crayon-h"> </span><span class="crayon-s">"navigationBarTextStyle"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"white"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f3611303028-5"><span class="crayon-h"> </span><span class="crayon-s">"navigationBarTitleText"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"小程序页面"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f3611303028-6"><span class="crayon-h"> </span><span class="crayon-s">"backgroundColor"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"#eeeeee"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5dabdc2d384f3611303028-7"><span class="crayon-h"> </span><span class="crayon-s">"backgroundTextStyle"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"light"</span></div><div class="crayon-line" id="crayon-5dabdc2d384f3611303028-8"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>配置的属性与值的含义我们可以结合实际的效果以及技术文档来了解。</p>
<blockquote class="task"><p><strong>小任务：</strong>了解一下给小程序的页面配置前和配置后，页面哪些地方变动了？你是否对技术文档里“页面中配置项在当前页面会覆盖
<span id="crayon-5dabdc2d384f5102340323" class="crayon-syntax crayon-syntax-inline crayon-theme-monokai crayon-theme-monokai-inline crayon-font-monaco" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important;"><span class="crayon-pre crayon-code" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-v">json</span></span></span> 的
<span id="crayon-5dabdc2d384f7048557099" class="crayon-syntax crayon-syntax-inline crayon-theme-monokai crayon-theme-monokai-inline crayon-font-monaco" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important;"><span class="crayon-pre crayon-code" style="font-size: 14px !important; line-height: 20px !important;font-size: 14px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><span class="crayon-v">window</span></span></span> 中相同的配置项。”有了一定的认识？</p></blockquote>
<div class="sop-footer">
<hr><p><a href="https://www.zhihu.com/people/lidongyx" target="_blank">李东bbsky</a>：致力于互联网技术技能的普及。Tell me and I forget . Teach me and I remember. Involve me and I learn. </p>
</div>
</div>
</div>
<!-- <div class="sop-bottom">
<span class="sop-bottom-tip">想要更系统的指导和一起学习的伙伴，欢迎加入：</span>
<a target="_blank" class="sop-more" href="https://h5.youzan.com/v2/goods/361m5sscp7awc">线上学习社区</a>
<span class="sop-bottom-tip">进群加微信：jishuzu360</span>
</div> -->
</div><!-- #content -->
</div><!-- #primary -->
<link rel="stylesheet" id="crayon-css" href="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=_2.7.2_beta" type="text/css" media="all">
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/js/comment-reply.min.js?ver=5.2.2"></script>
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/themes/twentyfourteen/js/functions.js?ver=20150315"></script>
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-includes/js/wp-embed.min.js?ver=5.2.2"></script>
<script type="text/javascript">
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"https:\/\/cloudbasegroup.org\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"Press %s to Copy, %s to Paste","minimize":"Click To Expand Code"};
/* ]]> */
</script>
<script type="text/javascript" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/pc/cdn/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=_2.7.2_beta"></script>
<script src="https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/component/jquery.min.js"></script>
<script src="https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/component/bootstrap.min.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?8efc2c9aaaffb2f7a4cf6a7ff9c65cbb";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<style>.tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}.ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}</style></body></html>