This repository was archived by the owner on Mar 13, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathtcb13.html
703 lines (662 loc) · 124 KB
/
tcb13.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
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
<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">
<script>
window.location.href="https://cloudbase.net/community/guides/handbook/index.html"
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<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/weappjs/37/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="生命周期" href="https://cloudbasegroup.org/handbook/weappjs/39">
<link rel="next" title="点击事件" href="https://cloudbasegroup.org/handbook/weappjs/35">
<meta name="generator" content="WordPress 5.2.2">
<link rel="canonical" href="https://cloudbasegroup.org/handbook/weappjs/37">
<link rel="shortlink" href="https://cloudbasegroup.org/?p=37">
<link rel="alternate" type="application/json+oembed" href="https://cloudbasegroup.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcloudbasegroup.org%2Fhandbook%2Fweappjs%2F37">
<link rel="alternate" type="text/xml+oembed" href="https://cloudbasegroup.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcloudbasegroup.org%2Fhandbook%2Fweappjs%2F37&format=xml">
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>
<body class="post-template-default single single-post postid-37 single-format-standard 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/tcb11.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">
小程序与JavaScript</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 no_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 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>在数据绑定章节，我们已经掌握如何把data里面的数据渲染到页面，这一部分我们会介绍如何通过点击组件绑定的事件处理函数来修改data里面的数据，如何把事件处理函数获取到的数据打印到页面。</p>
<h4>将变量值渲染到页面</h4>
<p>还记得我们之前在控制台打印的Date对象、Math对象、字符串String对象以及常量么？在第一节里我们把这些对象赋值给了一个变量，然后通过控制台可以把这些值给console.log()打印出来，那这些值可不可以渲染到小程序的页面上呢？答案是肯定的。</p>
<p><strong>将变量值渲染到页面</strong></p>
<p>使用开发者工具新建一个页面比如data，然后在data.js的<span style="color: #800000;"><strong>Page({})函数的前面，也就是不写在Page函数里面，写在data.js的第1行</strong></span>输入以下代码：</p>
<div id="crayon-5d882f0797741253019952" 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;">let lesson = "云开发技术训练营";
let enname = "CloudBase Camp";
let x = 3, y = 4, z = 5.001, a = -3, b = -4, c = -5;
let now = new Date();</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-5d882f0797741253019952-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797741253019952-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797741253019952-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797741253019952-4" style="height: 20px;">4</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-5d882f0797741253019952-1"><span class="crayon-e">let </span><span class="crayon-e ">lesson</span><span class="crayon-h"> </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-5d882f0797741253019952-2"><span class="crayon-e">let </span><span class="crayon-e ">enname</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">"CloudBase Camp"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d882f0797741253019952-3"><span class="crayon-i">let</span><span class="crayon-h"> </span><span class="crayon-v">x</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">3</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">y</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">4</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">z</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-cn">5.001</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">a</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">3</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">b</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">4</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">c</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-cn">5</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d882f0797741253019952-4"><span class="crayon-e">let </span><span class="crayon-v">now</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-r">Date</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<blockquote><p>注意上面这些是JavaScript函数的语句，所以用的是分号;分隔，这个不要和之前的逗号分隔给弄混了哦。如果语句是换行的，后面的分号;也可以不必写。</p></blockquote>
<p>然后在data里面添加如下数据（<strong>注意没有双引号，单双引号里的是字符串</strong>）</p>
<div id="crayon-5d882f0797747024754609" 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;">data: {
charat: lesson.charAt(4),
concat: enname.concat(lesson),
uppercase:enname.toUpperCase(),
abs:Math.abs(b),
pow: Math.pow(x, y),
sign:Math.sign(a),
now:now,
fullyear:now.getFullYear(),
date:now.getDate(),
day: now.getDay(),
hours: now.getHours(),
minutes: now.getMinutes(),
seconds: now.getSeconds(),
time: now.getTime()
},</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-5d882f0797747024754609-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-14" style="height: 20px;">14</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-15" style="height: 20px;">15</div><div class="crayon-num" data-line="crayon-5d882f0797747024754609-16" style="height: 20px;">16</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-5d882f0797747024754609-1"><span class="crayon-v">data</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-2"><span class="crayon-h"> </span><span class="crayon-v">charat</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">lesson</span><span class="crayon-sy">.</span><span class="crayon-e">charAt</span><span class="crayon-sy">(</span><span class="crayon-cn">4</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-3"><span class="crayon-h"> </span><span class="crayon-v">concat</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">enname</span><span class="crayon-sy">.</span><span class="crayon-e">concat</span><span class="crayon-sy">(</span><span class="crayon-v">lesson</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-4"><span class="crayon-h"> </span><span class="crayon-v">uppercase</span><span class="crayon-o">:</span><span class="crayon-v">enname</span><span class="crayon-sy">.</span><span class="crayon-e">toUpperCase</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-5"><span class="crayon-h"> </span><span class="crayon-v">abs</span><span class="crayon-o">:</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">abs</span><span class="crayon-sy">(</span><span class="crayon-v">b</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-6"><span class="crayon-h"> </span><span class="crayon-v">pow</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">pow</span><span class="crayon-sy">(</span><span class="crayon-v">x</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">y</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-7"><span class="crayon-h"> </span><span class="crayon-v">sign</span><span class="crayon-o">:</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">sign</span><span class="crayon-sy">(</span><span class="crayon-v">a</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-8"><span class="crayon-h"> </span><span class="crayon-v">now</span><span class="crayon-o">:</span><span class="crayon-v">now</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-9"><span class="crayon-h"> </span><span class="crayon-v">fullyear</span><span class="crayon-o">:</span><span class="crayon-v">now</span><span class="crayon-sy">.</span><span class="crayon-e">getFullYear</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-10"><span class="crayon-h"> </span><span class="crayon-v">date</span><span class="crayon-o">:</span><span class="crayon-v">now</span><span class="crayon-sy">.</span><span class="crayon-e">getDate</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-11"><span class="crayon-h"> </span><span class="crayon-v">day</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">now</span><span class="crayon-sy">.</span><span class="crayon-e">getDay</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-12"><span class="crayon-h"> </span><span class="crayon-v">hours</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">now</span><span class="crayon-sy">.</span><span class="crayon-e">getHours</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-13"><span class="crayon-h"> </span><span class="crayon-v">minutes</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">now</span><span class="crayon-sy">.</span><span class="crayon-e">getMinutes</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-14"><span class="crayon-h"> </span><span class="crayon-v">seconds</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">now</span><span class="crayon-sy">.</span><span class="crayon-e">getSeconds</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-15"><span class="crayon-h"> </span><span class="crayon-v">time</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">now</span><span class="crayon-sy">.</span><span class="crayon-e">getTime</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797747024754609-16"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>在data.wxml里输入以下代码：</p>
<div id="crayon-5d882f079774a818518182" 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;"><view>"云开发技术训练营"第5个字符 {{charat}}</view>
<view>两个字符串连接后的结果：{{concat}}</view>
<view>CloudBase Camp字母大写：{{uppercase}}</view>
<view>b的绝对值：{{abs}}</view>
<view>x的y次幂：{{pow}}</view>
<view>返回a是正还是负：{{sign}}</view>
<view>now对象：{{now}}</view>
<view>{{fullyear}}年</view>
<view>{{date}}日</view>
<view>星期{{day}}</view>
<view>{{hours}}时</view>
<view>{{minutes}}分</view>
<view>{{seconds}}秒</view>
<view>1970年1月1日至今的毫秒数：{{time}}</view></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-5d882f079774a818518182-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5d882f079774a818518182-14" style="height: 20px;">14</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-5d882f079774a818518182-1"><span class="crayon-r "><view></span><span class="crayon-i ">"云开发技术训练营"第5个字符 {{charat}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-2"><span class="crayon-r "><view></span><span class="crayon-i ">两个字符串连接后的结果：{{concat}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-3"><span class="crayon-r "><view></span><span class="crayon-i ">CloudBase Camp字母大写：{{uppercase}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-4"><span class="crayon-r "><view></span><span class="crayon-i ">b的绝对值：{{abs}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-5"><span class="crayon-r "><view></span><span class="crayon-i ">x的y次幂：{{pow}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-6"><span class="crayon-r "><view></span><span class="crayon-i ">返回a是正还是负：{{sign}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-7"><span class="crayon-r "><view></span><span class="crayon-i ">now对象：{{now}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-8"><span class="crayon-r "><view></span><span class="crayon-i ">{{fullyear}}年</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-9"><span class="crayon-r "><view></span><span class="crayon-i ">{{date}}日</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-10"><span class="crayon-r "><view></span><span class="crayon-i ">星期{{day}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-11"><span class="crayon-r "><view></span><span class="crayon-i ">{{hours}}时</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-12"><span class="crayon-r "><view></span><span class="crayon-i ">{{minutes}}分</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-13"><span class="crayon-r "><view></span><span class="crayon-i ">{{seconds}}秒</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774a818518182-14"><span class="crayon-r "><view></span><span class="crayon-i ">1970年1月1日至今的毫秒数：{{time}}</span><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>因为data是一个对象Object，我们可以通过冒号:的方式将变量值赋值给data里的各个属性，而在数据绑定章节，这些数据是可以直接渲染到小程序的页面的。</p>
<p><strong>toString()方法</strong></p>
<p>我们发现{{now}}渲染的结果是一个对象[object Object]，而并没有显示出字符串文本，这个时候就需要用到对象的toString()方法，得到对象的字符串。将data里now的赋值改为如下：</p>
<div id="crayon-5d882f079774d370289395" 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;">now:now.toString(),</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-5d882f079774d370289395-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-5d882f079774d370289395-1"><span class="crayon-v">now</span><span class="crayon-o">:</span><span class="crayon-v">now</span><span class="crayon-sy">.</span><span class="crayon-e">toString</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p><strong>技术文档：</strong><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString" target="_blank" rel="noopener noreferrer">toString()方法</a></p>
<h4>响应的数据绑定</h4>
<p>逻辑层js文件里的data数据，无论是基础的字符串、数组、对象等，还是通过变量给赋的值，都可以渲染到页面。不仅如此，只要对逻辑层data里的数据进行修改，视图层也会做相应的更新，我们称之为响应的数据绑定，而这是通过Page的setData()方法来实现的。</p>
<p>使用开发者工具在data.wxml里输入：</p>
<div id="crayon-5d882f079774f164441026" 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;"><view style="background-color:{{bgcolor}};width:400rpx;height:300rpx;"></view>
<button bindtap="redTap">让背景变红</button>
<button bindtap="yellowTap">让背景变黄</button></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-5d882f079774f164441026-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f079774f164441026-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f079774f164441026-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-5d882f079774f164441026-1"><span class="crayon-r "><view </span><span class="crayon-e ">style</span><span class="crayon-o">=</span><span class="crayon-s ">"background-color:{{bgcolor}};width:400rpx;height:300rpx;"</span><span class="crayon-r ">></span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f079774f164441026-2"><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"redTap"</span><span class="crayon-r ">></span><span class="crayon-i ">让背景变红</span><span class="crayon-r "></button></span></div><div class="crayon-line" id="crayon-5d882f079774f164441026-3"><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"yellowTap"</span><span class="crayon-r ">></span><span class="crayon-i ">让背景变黄</span><span class="crayon-r "></button></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后在data.js里添加一个数据</p>
<div id="crayon-5d882f0797751452202444" 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;">bgcolor:"#000000",</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-5d882f0797751452202444-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-5d882f0797751452202444-1"><span class="crayon-v">bgcolor</span><span class="crayon-o">:</span><span class="crayon-s">"#000000"</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后在js里添加两个button绑定的事件处理函数redTap和yellowTap：</p>
<div id="crayon-5d882f0797753859807672" 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;">redTap:function(){
this.setData({
bgcolor: "#cd584a"
})
},
yellowTap:function(){
this.setData({
bgcolor: "#f8ce5f"
})
},</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-5d882f0797753859807672-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797753859807672-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797753859807672-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797753859807672-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d882f0797753859807672-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d882f0797753859807672-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d882f0797753859807672-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d882f0797753859807672-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d882f0797753859807672-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d882f0797753859807672-10" style="height: 20px;">10</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-5d882f0797753859807672-1"><span class="crayon-v">redTap</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797753859807672-2"><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setData</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797753859807672-3"><span class="crayon-h"> </span><span class="crayon-v">bgcolor</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"#cd584a"</span></div><div class="crayon-line" id="crayon-5d882f0797753859807672-4"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797753859807672-5"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797753859807672-6"><span class="crayon-v">yellowTap</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797753859807672-7"><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setData</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797753859807672-8"><span class="crayon-h"> </span><span class="crayon-v">bgcolor</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"#f8ce5f"</span></div><div class="crayon-line" id="crayon-5d882f0797753859807672-9"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797753859807672-10"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>点击button，原来view组件的背景颜色由黑色变成了其他颜色，这是因为点击组件触发事件处理函数，调用了Page的setData()方法修改了data里与之相应的属性的值（重复赋值就是修改），bgcolor由原来的”#000000″，变成了其他数据。</p>
<blockquote class="task"><p>小任务：通过以往的学习我们了解到无论是组件的样式，图片、链接的路径，数组、对象里的数据，他们都是可以进行数据分离写到data里面的，这也就意味着，我们通过点击事件改变data里面的数据可以达到很多意想不到的效果，请发挥你的想象力做一些有意思的案例出来。</p></blockquote>
<h4>响应的布尔操作</h4>
<p>在前面我们已经了解到，有些组件的私有属性的数据类型为Boolean布尔值，比如视频、Swiper轮播组件是否自动播放、是否轮播，视频组件是否显示播放按钮等等，这些我们都可以使用setData将true改为false，false改为true来达到控制的目的。</p>
<p>在交互方面，响应的布尔操作可以用于单一属性true与false的切换，比如显示与隐藏、展开与折叠、聚焦与失焦、选中与不选中。</p>
<p>我们来看一个案例，使用开发者工具在data.wxml里输入以下代码：</p>
<div id="crayon-5d882f0797755349564351" 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;"><video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" autoplay loop muted="{{muted}}" initial-time="100" controls event-model="bubble">
</video>
<button bindtap="changeMuted">静音和取消静音</button></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-5d882f0797755349564351-1" style="height: 80px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797755349564351-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797755349564351-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-5d882f0797755349564351-1"><span class="crayon-r "><video </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"daxueVideo"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"</span><span class="crayon-h"> </span>autoplay<span class="crayon-h"> </span>loop<span class="crayon-h"> </span><span class="crayon-e ">muted</span><span class="crayon-o">=</span><span class="crayon-s ">"{{muted}}"</span><span class="crayon-h"> </span><span class="crayon-e ">initial-time</span><span class="crayon-o">=</span><span class="crayon-s ">"100"</span><span class="crayon-h"> </span>controls<span class="crayon-h"> </span><span class="crayon-e ">event-model</span><span class="crayon-o">=</span><span class="crayon-s ">"bubble"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d882f0797755349564351-2"><span class="crayon-r "></video></span></div><div class="crayon-line" id="crayon-5d882f0797755349564351-3"><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"changeMuted"</span><span class="crayon-r ">></span><span class="crayon-i ">静音和取消静音</span><span class="crayon-r "></button></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后给在data.js的data里新增</p>
<div id="crayon-5d882f0797757058103070" 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;">muted: true,</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-5d882f0797757058103070-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-5d882f0797757058103070-1"><span class="crayon-v">muted</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后添加changeMuted事件处理函数</p>
<div id="crayon-5d882f0797759889474403" 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;">changeMuted: function (e) {
this.setData({
muted: !this.data.muted
})
},</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-5d882f0797759889474403-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797759889474403-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797759889474403-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797759889474403-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d882f0797759889474403-5" style="height: 20px;">5</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-5d882f0797759889474403-1"><span class="crayon-v">changeMuted</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">e</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797759889474403-2"><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setData</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797759889474403-3"><span class="crayon-h"> </span><span class="crayon-v">muted</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-o">!</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">data</span><span class="crayon-sy">.</span><span class="crayon-i">muted</span></div><div class="crayon-line" id="crayon-5d882f0797759889474403-4"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797759889474403-5"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>在开发者工具的模拟器里点击按钮，我们发现静音和取消静音都是这个按钮。这里的感叹号
<span id="crayon-5d882f079775a004784186" 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-o">!</span></span></span>是逻辑非的意思，可以理解为not。</p>
<blockquote><p>
<span id="crayon-5d882f079775c614224057" 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-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">setData</span></span></span>和
<span id="crayon-5d882f079775d112559153" 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-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">data</span></span></span>都用到了一个关键字
<span id="crayon-5d882f079775e381343622" 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-r">this</span></span></span>。
<span id="crayon-5d882f0797760471308251" 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-r">this</span></span></span>和中文里的“这个的”有类似的指代作用，在方法中，
<span id="crayon-5d882f0797761024705036" 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-r">this</span></span></span> 指代该方法所属的对象，比如这里的是Page对象，
<span id="crayon-5d882f0797763968994837" 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-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">data</span></span></span>就是指Page函数对象里的data对象。</p></blockquote>
<h4>响应的数组操作</h4>
<p>结合点击事件以及数组操作的知识，我们再来看下面这个案例，了解如何通过点击按钮新增数组里的数据和删除数组里的数据。</p>
<p>使用开发者工具在data.wxml里输入以下代码，<strong>注意这里视图层只有一个{{text}}</strong>，也就是说我们之后会把所有的数据都赋值给data里的text。</p>
<div id="crayon-5d882f0797764867896319" 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;"><view>{{text}}</view>
<button bindtap="addLine">新增一行</button>
<button bindtap="removeLine">删掉最后一行</button></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-5d882f0797764867896319-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797764867896319-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797764867896319-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-5d882f0797764867896319-1"><span class="crayon-r "><view></span><span class="crayon-i ">{{text}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f0797764867896319-2"><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"addLine"</span><span class="crayon-r ">></span><span class="crayon-i ">新增一行</span><span class="crayon-r "></button></span></div><div class="crayon-line" id="crayon-5d882f0797764867896319-3"><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"removeLine"</span><span class="crayon-r ">></span><span class="crayon-i ">删掉最后一行</span><span class="crayon-r "></button></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后在data.js的Page()之前声明变量，这里声明extraLine为一个空数组，我们之后会往这个数组里添加和删除数据。</p>
<div id="crayon-5d882f0797766091992635" 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;">let initData = '只有一行原始数据'
let extraLine = [];</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-5d882f0797766091992635-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797766091992635-2" style="height: 20px;">2</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-5d882f0797766091992635-1"><span class="crayon-e">let </span><span class="crayon-e ">initData</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-s">'只有一行原始数据'</span></div><div class="crayon-line" id="crayon-5d882f0797766091992635-2"><span class="crayon-e">let </span><span class="crayon-v">extraLine</span><span class="crayon-h"> </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></td>
</tr>
</tbody></table>
</div>
</div><p>然后再在Page的data里添加一条数据，</p>
<div id="crayon-5d882f0797767675457274" 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;">text: initData,</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-5d882f0797767675457274-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-5d882f0797767675457274-1"><span class="crayon-v">text</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">initData</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>我们先来看没有事件处理函数时，数据渲染的逻辑，首先我们把initData变量值赋值给text，这时渲染的结果只有initData里的数据，所以页面显示的是“<strong>只有一行原始数据</strong>”，而extraLine和text没有什么关系。</p>
<p>我们再来在Page里添加addLine和removeLine的事件处理函数：</p>
<div id="crayon-5d882f0797769760403593" 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;">addLine: function (e) {
extraLine.push('新增的内容')
this.setData({
text: initData + '\n' + extraLine.join('\n')
})
},
removeLine: function (e) {
if (extraLine.length > 0) {
extraLine.pop()
this.setData({
text: initData + '\n' + extraLine.join('\n')
})
}
},</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-5d882f0797769760403593-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5d882f0797769760403593-14" style="height: 20px;">14</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-5d882f0797769760403593-1">addLine<span class="crayon-o">:</span><span class="crayon-h"> </span>function<span class="crayon-h"> </span><span class="crayon-sy">(</span>e<span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-2"><span class="crayon-h"> </span>extraLine<span class="crayon-sy">.</span>push<span class="crayon-sy">(</span><span class="crayon-s ">'新增的内容'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-3"><span class="crayon-h"> </span>this<span class="crayon-sy">.</span>setData<span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-4"><span class="crayon-h"> </span>text<span class="crayon-o">:</span><span class="crayon-h"> </span>initData<span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-s ">'\n'</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span>extraLine<span class="crayon-sy">.</span>join<span class="crayon-sy">(</span><span class="crayon-s ">'\n'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-5"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-6"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-7">removeLine<span class="crayon-o">:</span><span class="crayon-h"> </span>function<span class="crayon-h"> </span><span class="crayon-sy">(</span>e<span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-8"><span class="crayon-h"> </span>if<span class="crayon-h"> </span><span class="crayon-sy">(</span>extraLine<span class="crayon-sy">.</span>length<span class="crayon-r "> ></span><span class="crayon-h"> </span>0<span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-9"><span class="crayon-h"> </span>extraLine<span class="crayon-sy">.</span>pop<span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-10"><span class="crayon-h"> </span>this<span class="crayon-sy">.</span>setData<span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-11"><span class="crayon-h"> </span>text<span class="crayon-o">:</span><span class="crayon-h"> </span>initData<span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-s ">'\n'</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span>extraLine<span class="crayon-sy">.</span>join<span class="crayon-sy">(</span><span class="crayon-s ">'\n'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-12"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-13"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d882f0797769760403593-14"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<blockquote><p>首先回顾一下之前的数组操作知识，push为往数组的末尾新增数据，而pop则删除数组末尾一行的数据，join为数组数据之前的连接符。</p></blockquote>
<p>点击按钮<strong>新增一行</strong>，触发绑定的事件处理函数<strong>addLine</strong>，首先会执行extraLine数组新增一条数据“新增的内容”，但是这时extraLine和text还没有关系，这时在setData()函数里将initData和extraLine进行拼接（注意extraLine本来是一个数组，但是调用join方法后返回的是数组的值拼接好的字符串）。点击按钮删除最后一行，会先删除extraLine数组里最后一行的数据。</p>
<blockquote class="task"><p>小任务：新增内容过于单一，我们可以给它后面添加一个随机数，将
<span id="crayon-5d882f079776b948392467" 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">extraLine</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-s">'新增的内容'</span><span class="crayon-sy">)</span></span></span>改成
<span id="crayon-5d882f079776d845816382" 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">extraLine</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-s">'新增的内容'</span><span class="crayon-o">+</span><span class="crayon-v">Math</span><span class="crayon-sy">.</span><span class="crayon-e">random</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></span></span>，再来看看新增数据的效果，关于Math.random()大家可以自行去MDN查阅。大家也可以把拼接的连接符由
<span id="crayon-5d882f079776e415672341" 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-sy">\</span><span class="crayon-v">n</span></span></span>换成其他字符。</p></blockquote>
<h4 id="定义函数(Defining_function)">函数与调用函数</h4>
<p>函数的作用，可以写一次代码，然后反复地重用这个代码。<span style="color: #800000;"><strong>JavaScript的函数本身也是对象</strong></span>，因此可以把函数赋值给变量，或者作为参数传递给其他函数。</p>
<p><strong>函数的定义和结构</strong></p>
<p>我们可以使用<strong>function</strong>关键词来定义一个函数，括号()里为函数的参数，参数可以有很多个，使用逗号,隔开；函数要执行的代码（语句）使用大括号{}包住：</p>
<div id="crayon-5d882f0797770003020796" 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;">function 函数名(参数 1, 参数 2, 参数 3) {
代码块内要执行的语句
}</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-5d882f0797770003020796-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797770003020796-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797770003020796-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-5d882f0797770003020796-1"><span class="crayon-t">function</span><span class="crayon-h"> </span>函数名<span class="crayon-sy">(</span>参数<span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">,</span><span class="crayon-h"> </span>参数<span class="crayon-h"> </span><span class="crayon-cn">2</span><span class="crayon-sy">,</span><span class="crayon-h"> </span>参数<span class="crayon-h"> </span><span class="crayon-cn">3</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797770003020796-2"><span class="crayon-h"> </span>代码块内要执行的语句</div><div class="crayon-line" id="crayon-5d882f0797770003020796-3"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p><strong>不带参数的函数</strong></p>
<p>比如，我们使用开发者工具<span style="color: #800000;"><strong>在data.js的Page()函数前</strong></span>，添加如下代码：</p>
<div id="crayon-5d882f0797771768610450" 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;">function greet() {
console.log("你好，欢迎来到云开发训练营");
};
greet(); //调用greet()函数</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-5d882f0797771768610450-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797771768610450-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797771768610450-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797771768610450-4" style="height: 20px;">4</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-5d882f0797771768610450-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">greet</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797771768610450-2"><span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">"你好，欢迎来到云开发训练营"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d882f0797771768610450-3"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d882f0797771768610450-4"><span class="crayon-e">greet</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//调用greet()函数</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>保存之后，我们可以在控制台看到函数打印的字符串。定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什么。<strong>调用</strong>函数才会以给定的参数真正执行这些动作。greet()函数没有参数，调用函数时，直接写函数名+括号即可。</p>
<p><strong>只有一个参数的函数</strong></p>
<p>下面定义了一个简单的平方函数square()，square为函数名，number为函数的参数(名称可以自定义)，使用return语句确定函数的返回值。我们继续在data.js的Page()函数前，输入以下代码：</p>
<div id="crayon-5d882f0797773004997800" 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;">function square(number) {
return number * number;
};
square(5);</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-5d882f0797773004997800-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797773004997800-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797773004997800-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797773004997800-4" style="height: 20px;">4</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-5d882f0797773004997800-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">square</span><span class="crayon-sy">(</span><span class="crayon-v">number</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5d882f0797773004997800-2"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-e ">number *</span><span class="crayon-h"> </span><span class="crayon-v">number</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5d882f0797773004997800-3"><span class="crayon-sy">}</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5d882f0797773004997800-4"><span class="crayon-e">square</span><span class="crayon-sy">(</span><span class="crayon-cn">5</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>square(5)，就是把5赋值给变量number，然后执行number*number，也就是5*5，然后返回return这个值。</p>
<p>这里的number被称之为<span style="color: #800000;"><strong>形参</strong></span>，而5被称之为<span style="color: #800000;"><strong>实参</strong></span>。大家可以结合案例就能大致了解形参和实参的意思。</p>
<ul>
<li><strong>形参</strong>是在定义函数时使用的参数，目的是用来接收调用该函数时传进来的实际参数。</li>
<li><strong>实参</strong>是在调用时传递给函数的参数</li>
</ul>
<blockquote><p>JavaScript允许传入任意个参数而不影响调用，因此传入的参数可以比定义的参数多，但是不能少。也就是说实参的数量可以多于形参但是不能少于形参。</p></blockquote>
<h4>对象的方法</h4>
<p>在小程序里我们会经常将一个匿名函数赋值给对象的一个属性，而这个属性我们可以称之为对象的方法。</p>
<p id="函数表达式(Function_expression)"><b>匿名函数</b></p>
<p>函数声明function在语法上是一个语句，但函数也可以由<strong>函数表达式</strong>创建，这样的函数没有函数名称（匿名）。</p>
<p>使用开发者工具在data.js的Page()函数前，输入以下代码：</p>
<div id="crayon-5d882f0797775063469137" 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;">let square = function(number) {
return number * number
};
console.log(square(4))//使用console.log()输出变量square</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-5d882f0797775063469137-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797775063469137-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797775063469137-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797775063469137-4" style="height: 20px;">4</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-5d882f0797775063469137-1"><span class="crayon-e">let </span><span class="crayon-v">square</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">number</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797775063469137-2"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-e ">number *</span><span class="crayon-h"> </span><span class="crayon-i">number</span></div><div class="crayon-line" id="crayon-5d882f0797775063469137-3"><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d882f0797775063469137-4"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">square</span><span class="crayon-sy">(</span><span class="crayon-cn">4</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-c">//使用console.log()输出变量square</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>执行后，可以在控制台看到输出的结果为16。上面这个function函数没有函数名，相当于是把函数的返回值赋值给了变量square。</p>
<p><strong>箭头函数</strong></p>
<p>为什么叫箭头函数（Arrow Function），因为它定义一个函数用的就是一个箭头=>，我们来看两个例子，在data.js的Page()函数前输入以下代码：</p>
<div id="crayon-5d882f0797777306902995" 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;">const multiply = (x, y) => {
return x * y;
}
const sum= (x, y) => x + y;//连{}和return语句都可以省掉
console.log(multiply(20, 4));
console.log(sum(20, 4));</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-5d882f0797777306902995-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797777306902995-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797777306902995-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797777306902995-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d882f0797777306902995-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d882f0797777306902995-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-5d882f0797777306902995-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">multiply</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">x</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">y</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-o">></span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797777306902995-2"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">x</span><span class="crayon-h"> </span><span class="crayon-o">*</span><span class="crayon-h"> </span><span class="crayon-v">y</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d882f0797777306902995-3"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d882f0797777306902995-4"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">sum</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">x</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">y</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-o">></span><span class="crayon-h"> </span><span class="crayon-v">x</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">y</span><span class="crayon-sy">;</span><span class="crayon-c">//连{}和return语句都可以省掉</span></div><div class="crayon-line" id="crayon-5d882f0797777306902995-5"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">multiply</span><span class="crayon-sy">(</span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">4</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5d882f0797777306902995-6"><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-e">sum</span><span class="crayon-sy">(</span><span class="crayon-cn">20</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">4</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>在控制台我们可以看到箭头函数打印的结果。箭头函数相当于匿名函数，它没有函数名，而且也简化了函数定义。箭头函数可以只包含一个表达式，甚至连{ … }和return都可以省略掉。<strong>大家可以先只需要了解这个写法就可以了，以后碰到不至于比较迷惑，见多了也试着尝试多写一下。</strong></p>
<p><strong>调用对象的方法</strong></p>
<p>可以使用点表示法来调用对象的方法，这个和访问对象的属性没有区别。而调用对象的方法和调用一个函数也是大同小异。</p>
<p>调用对象的方法我们在前面就已经接触过大量的案例了，在前面我们已经说过，<span id="crayon-5d5b776b7ad3f200245519" class="crayon-syntax crayon-syntax-inline crayon-theme-monokai crayon-theme-monokai-inline crayon-font-monaco"><span class="crayon-pre crayon-code"><span class="crayon-v">wx</span></span></span>是小程序的全局对象，而在第一节我们打印的很多API，就是调用了wx对象里的方法。</p>
<p><strong>JavaScript函数的写法</strong></p>
<p>在点击事件章节里，我们创建的事件点击处理函数的写法如下：</p>
<div id="crayon-5d882f0797779195685563" 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;">scrollToPosition() {
},</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-5d882f0797779195685563-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797779195685563-2" style="height: 20px;">2</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-5d882f0797779195685563-1"><span class="crayon-e">scrollToPosition</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797779195685563-2"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>而在这一节我们创建的事件点击函数的写法为：</p>
<div id="crayon-5d882f079777b146595571" 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;">yellowTap:function(){
},</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-5d882f079777b146595571-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f079777b146595571-2" style="height: 20px;">2</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-5d882f079777b146595571-1"><span class="crayon-v">yellowTap</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f079777b146595571-2"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>这两种写法都是可以执行的，大家可以把这两种写法互相修改一下试试看~</p>
<h3 id="currentTarget">currentTarget事件对象</h3>
<p>在前面的列表渲染里，我们知道点击电影列表里的某一部电影，要进行页面跳转显示该电影的详情，我们需要给该电影创建一个页面，那如果要显示数千部的电影的详情，一一创建电影详情页显然不合适，毕竟所有电影的详情页都是同一一个结构，有没有办法所有电影详情都共用一个页面，但是根据点击的链接的不同，渲染相应的数据？答案是肯定的，要解决这个问题，首先我们要了解链接组件的点击信息。</p>
<blockquote><p>当点击组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象，通过
<span id="crayon-5d882f079777c301417309" 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">event</span></span></span> 对象可以获取事件触发时候的一些信息，比如时间戳、
<span id="crayon-5d882f079777e381272361" 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">detail</span></span></span> 以及当前组件的一些属性值集合，尤其是事件源组件的id。</p></blockquote>
<p>currentTarget是事件对象的一个属性，表示的是事件绑定的当前组件。使用开发者工具在data.wxml里输入以下代码</p>
<div id="crayon-5d882f0797780058102024" 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;"><view class="weui-navbar">
<block wx:for="{{tabs}}" wx:key="index">
<view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
<view class="weui-navbar__title">{{item}}</view>
</view>
</block>
</view>
<view class="weui-tab__panel">
<view hidden="{{activeIndex != 0}}">帝都</view>
<view hidden="{{activeIndex != 1}}">魔都</view>
<view hidden="{{activeIndex != 2}}">妖都</view>
<view hidden="{{activeIndex != 3}}">渔村</view>
</view></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-5d882f0797780058102024-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-3" style="height: 40px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d882f0797780058102024-13" style="height: 20px;">13</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-5d882f0797780058102024-1"><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"weui-navbar"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-2"><span class="crayon-i "> </span><span class="crayon-r "><block </span>wx<span class="crayon-o">:</span><span class="crayon-e ">for</span><span class="crayon-o">=</span><span class="crayon-s ">"{{tabs}}"</span><span class="crayon-h"> </span>wx<span class="crayon-o">:</span><span class="crayon-e ">key</span><span class="crayon-o">=</span><span class="crayon-s ">"index"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-3"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"{{index}}"</span><span class="crayon-h"> </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}"</span><span class="crayon-h"> </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"tabClick"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-4"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"weui-navbar__title"</span><span class="crayon-r ">></span><span class="crayon-i ">{{item}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-5"><span class="crayon-i "> </span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-6"><span class="crayon-i "> </span><span class="crayon-r "></block></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-7"><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-8"><span class="crayon-r "><view </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"weui-tab__panel"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-9"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">hidden</span><span class="crayon-o">=</span><span class="crayon-s ">"{{activeIndex != 0}}"</span><span class="crayon-r ">></span><span class="crayon-i ">帝都</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-10"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">hidden</span><span class="crayon-o">=</span><span class="crayon-s ">"{{activeIndex != 1}}"</span><span class="crayon-r ">></span><span class="crayon-i ">魔都</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-11"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">hidden</span><span class="crayon-o">=</span><span class="crayon-s ">"{{activeIndex != 2}}"</span><span class="crayon-r ">></span><span class="crayon-i ">妖都</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-12"><span class="crayon-i "> </span><span class="crayon-r "><view </span><span class="crayon-e ">hidden</span><span class="crayon-o">=</span><span class="crayon-s ">"{{activeIndex != 3}}"</span><span class="crayon-r ">></span><span class="crayon-i ">渔村</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d882f0797780058102024-13"><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后再往data.js的data里添加以下数据：</p>
<div id="crayon-5d882f0797782687854586" 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;">tabs: ["北京", "上海", "广州", "深圳"],
activeIndex:0,</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-5d882f0797782687854586-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797782687854586-2" style="height: 20px;">2</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-5d882f0797782687854586-1"><span class="crayon-v">tabs</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">"北京"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"上海"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"广州"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"深圳"</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d882f0797782687854586-2"><span class="crayon-v">activeIndex</span><span class="crayon-o">:</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后再添加事件处理函数tabClick。</p>
<div id="crayon-5d882f0797783879794927" 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;">tabClick: function (e) {
console.log(e)
this.setData({
activeIndex: e.currentTarget.id
});
},</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-5d882f0797783879794927-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d882f0797783879794927-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d882f0797783879794927-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d882f0797783879794927-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d882f0797783879794927-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d882f0797783879794927-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-5d882f0797783879794927-1"><span class="crayon-v">tabClick</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">e</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797783879794927-2"><span class="crayon-h"> </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">e</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d882f0797783879794927-3"><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setData</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d882f0797783879794927-4"><span class="crayon-h"> </span><span class="crayon-v">activeIndex</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">e</span><span class="crayon-sy">.</span><span class="crayon-v">currentTarget</span><span class="crayon-sy">.</span><span class="crayon-i">id</span></div><div class="crayon-line" id="crayon-5d882f0797783879794927-5"><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-5d882f0797783879794927-6"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>编译之后在模拟器里预览。当我们点击上面的tab时，触发tabClick事件处理函数，这时候事件处理函数会收到一个事件对象e，我们可以看一下控制台打印的e对象的内容，关于e对象具体属性的解释可以看技术文档。</p>
<p><strong>技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#currenttarget" target="_blank" rel="noopener noreferrer">事件对象</a></p>
<p>currentTarget就是事件对象的一个属性，我们可以使用点表示法获取到点击的组件的Id，并将其赋值给activeIndex，所谓active就是激活的意思，也就是我们点击哪个tab，哪个tab就激活。</p>
<ul>
<li>当点击的id为0，也就是第一个tab时，activeIndex的值被事件处理函数修改为0；</li>
<li>activeIndex == index相同的tab，也就是激活的tab就会有weui-bar__item_on的class，也就显示为绿色</li>
<li>!=是不等于操作符，activeIndex != 0显然不成立条件为false，也就是组件hidden为false，即为显示；而activeIndex != 1，2，3则都会true，hidden生效，组件不显示，于是tab的效果就有了。</li>
</ul>
<blockquote><p>当我们对字符串、Math对象、Date对象、数组对象、函数对象、事件对象所包含的信息不了解时，把他们打印出来即可。打印出来的结果基本都是字符串、列表、对象，而在前面我们已经掌握如何操作它们。通过实战，通过打印日志，既有利于我们调试代码，也加强我们对逻辑的理解。</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><!-- .entry-content -->
</div><!-- #post-## -->
<!-- <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>
</body></html>