-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathtcb16.html
1053 lines (991 loc) · 212 KB
/
tcb16.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
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<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/43/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="网络API" href="https://cloudbasegroup.org/handbook/weappjs/45">
<link rel="next" title="数据表单" href="https://cloudbasegroup.org/handbook/weappjs/41">
<meta name="generator" content="WordPress 5.2.2">
<link rel="canonical" href="https://cloudbasegroup.org/handbook/weappjs/43">
<link rel="shortlink" href="https://cloudbasegroup.org/?p=43">
<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%2F43">
<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%2F43&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-43 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><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 no_current_page_item"><a href="./tcb13.html">页面渲染</a></li>
<li class="page_item no_current_page_item"><a href="./tcb14.html">生命周期</a></li>
<li class="page_item no_current_page_item"><a href="./tcb15.html">数据表单</a></li>
<li class="page_item 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>在前面的章节，我们非常强调JavaScript对数据的操作，这一节我们来了解一下小程序与客户端（手机）更深的交互。前面章节将数据存储到通讯录（添加手机联系人）、存储到剪切板（用手机复制粘贴），小程序就已经与客户端手机有了交互，这一节我们将来获取手机相册里的图片和手机相机拍照的照片、手机的定位以及获取手机里的缓存、文件，并使用JavaScript操作图片、操作缓存和操作文件等。</p>
<h4>获取手机相册或拍照的图片</h4>
<p>用小程序来获取手机相册里的图片和拍照的照片听起来好像挺复杂的，不过因为有了API，我们只需要结合前面的点击事件、事件处理函数以及调用API、传入指定的参数就能很容易做到。</p>
<p><strong>技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html" target="_blank" rel="noopener noreferrer">wx.chooseImage()</a></p>
<p><strong>上传一张照片</strong></p>
<p>使用开发者工具新建一个file的页面，然后在file.wxml里输入以下代码：</p>
<div id="crayon-5d8980d530bc9052778761" 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;"><button bindtap="chooseImg">选择图片</button>
<image mode="widthFix" src="{{imgurl}}"></image>
<view>上传的图片</view></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-5d8980d530bc9052778761-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bc9052778761-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bc9052778761-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-5d8980d530bc9052778761-1"><span class="crayon-o"><</span><span class="crayon-e">button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s">"chooseImg"</span><span class="crayon-o">></span>选择图片<span class="crayon-o"><</span><span class="crayon-c ">/button></span></div><div class="crayon-line" id="crayon-5d8980d530bc9052778761-2"><span class="crayon-c "><image mode="widthFix" src="{{imgurl}}"></i</span><span class="crayon-v">mage</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-5d8980d530bc9052778761-3"><span class="crayon-o"><</span><span class="crayon-v">view</span><span class="crayon-o">></span>上传的图片<span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">view</span><span class="crayon-o">></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后在file.js的data里给imgurl设置一个初始值，由于链接src是一个字符串类型，我们这里可以设置为一个字符串空值，完成imgurl的初始化：</p>
<div id="crayon-5d8980d530bd0789437241" 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: {
imgurl:"",
},</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-5d8980d530bd0789437241-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bd0789437241-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bd0789437241-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-5d8980d530bd0789437241-1"><span class="crayon-h"> </span><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-5d8980d530bd0789437241-2"><span class="crayon-h"> </span><span class="crayon-v">imgurl</span><span class="crayon-o">:</span><span class="crayon-s">""</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bd0789437241-3"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>再在file.js里添加事件处理函数chooseImg，在chooseImg里我们来调用上传函数的API wx.chooseImage()，其中count、sizeType、sourceType都是API已经写好的属性，API调用成功（图片上传成功）之后，会在success回调函数里返回图片的一些信息，返回的信息可以看技术文档。</p>
<div id="crayon-5d8980d530bd2113691661" 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;"> chooseImg:function(){
let that=this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
const imgurl = res.tempFilePaths
that.setData({
imgurl
})
}
})
},</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-5d8980d530bd2113691661-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5d8980d530bd2113691661-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-5d8980d530bd2113691661-1"><span class="crayon-h"> </span><span class="crayon-v">chooseImg</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-5d8980d530bd2113691661-2"><span class="crayon-h"> </span><span class="crayon-e">let </span><span class="crayon-v">that</span><span class="crayon-o">=</span><span class="crayon-r">this</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-3"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">chooseImage</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-4"><span class="crayon-h"> </span><span class="crayon-v">count</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-5"><span class="crayon-h"> </span><span class="crayon-v">sizeType</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'original'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'compressed'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-6"><span class="crayon-h"> </span><span class="crayon-v">sourceType</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'album'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'camera'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-7"><span class="crayon-h"> </span><span class="crayon-e">success</span><span class="crayon-sy">(</span><span class="crayon-v">res</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-8"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">imgurl</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-e">tempFilePaths</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-9"><span class="crayon-e"> </span><span class="crayon-v">that</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-5d8980d530bd2113691661-10"><span class="crayon-h"> </span><span class="crayon-i">imgurl</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-11"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-12"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-13"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530bd2113691661-14"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>虽然在开发者工具的模拟器也可以看到效果，但是wx.chooseImage()是一个与手机客户端交互性很强的API，我们最好在手机上体验。点击开发者工具的<strong>预览</strong>，在手机微信里查看效果，点击选择图片按钮，上传一张图片或拍照看看。</p>
<ul>
<li><strong>count</strong>：可以选择的照片数量，默认为9张（由于imgurl声明的是字符串，多张照片需为数组Array，后面有上传多张图片的案例）</li>
<li><strong>sourceType</strong>：选择图片的来源，album就是图片可以来自手机相册；而camera是可以来自手机拍照，两个都写就是来自相册或拍照都可以；</li>
<li><strong>sizeType：</strong>所选的图片的尺寸，original为原图，compressed为压缩图，为了减轻服务器压力，建议为压缩图；</li>
<li><strong>tempFilePaths</strong>为临时文件的<strong>路径列表</strong>，<strong>tempFiles</strong>为临时<strong>文件列表</strong>，注意这两个值都为数组。</li>
</ul>
<blockquote class="task"><p><strong>小任务：</strong>将sourceType的值修改为
<span id="crayon-5d8980d530bd4680835705" 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-s">'album'</span><span class="crayon-sy">]</span></span></span>，在手机微信上看看有什么效果？再将sizeType改为
<span id="crayon-5d8980d530bd7252754411" 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-s">'compressed'</span><span class="crayon-sy">]</span></span></span>，看手机是否还能够上传原图？</p></blockquote>
<p><strong>空值的处理</strong></p>
<p>我们可以看到由于imgurl为空值，image组件有默认宽度300px、高度225px（会随css而改变大小），所以显示<strong>上传的图片</strong>会与<strong>选择图片</strong>的button有一段空白，处理的方法有三种：</p>
<p><strong>方法一：</strong>我们可以给imgurl弄一张初始图片的链接，为了让界面更加美观、交互性更好，通常都会设置一个默认的图片，比如默认的头像，当用户上传时，setData就会取代初始图片；</p>
<p><strong>方法二：</strong>判断imgurl是否有内容，比如我们可以加一层逻辑判断，当Page()里的data下的imgurl属性非空时，组件才会显示；空时就不显示。</p>
<div id="crayon-5d8980d530bd9252752028" 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 wx:if="{{!!imgurl}}">
<image mode="widthFix" src="{{imgurl}}"></image>
</view></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-5d8980d530bd9252752028-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bd9252752028-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bd9252752028-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-5d8980d530bd9252752028-1"><span class="crayon-r "><view </span>wx<span class="crayon-o">:</span><span class="crayon-e ">if</span><span class="crayon-o">=</span><span class="crayon-s ">"{{!!imgurl}}"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d8980d530bd9252752028-2"><span class="crayon-i "> </span><span class="crayon-r "><image </span><span class="crayon-e ">mode</span><span class="crayon-o">=</span><span class="crayon-s ">"widthFix"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"{{imgurl}}"</span><span class="crayon-r ">></span><span class="crayon-r "></image></span></div><div class="crayon-line" id="crayon-5d8980d530bd9252752028-3"><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p><strong>方法三：</strong>这个方法和方法二类似，设置一个逻辑判断，比如在data里设置一个boolean属性比如hasImg，初始值为false，</p>
<div id="crayon-5d8980d530bdb499570796" 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: {
hasImg:false,
},</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-5d8980d530bdb499570796-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bdb499570796-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bdb499570796-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-5d8980d530bdb499570796-1"><span class="crayon-h"> </span><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-5d8980d530bdb499570796-2"><span class="crayon-h"> </span><span class="crayon-v">hasImg</span><span class="crayon-o">:</span><span class="crayon-t">false</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bdb499570796-3"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>当chooseImg回调成功之后，在that.setData里把hasImg修改为true，也就是将wx.chooseImage()的success回调函数里的that.setData()修改为：</p>
<div id="crayon-5d8980d530bdd199331620" 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;">that.setData({
imgurl,
hasImg: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-5d8980d530bdd199331620-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bdd199331620-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bdd199331620-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530bdd199331620-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-5d8980d530bdd199331620-1"><span class="crayon-v">that</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-5d8980d530bdd199331620-2"><span class="crayon-h"> </span><span class="crayon-v">imgurl</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bdd199331620-3"><span class="crayon-h"> </span><span class="crayon-v">hasImg</span><span class="crayon-o">:</span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bdd199331620-4"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>这样是否有图片就进入到了回调函数的逻辑里了，接着我们把file.wxml的代码改为如下：</p>
<div id="crayon-5d8980d530bde422208893" 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 wx:if="{{hasImg === false}}">
<button bindtap="chooseImg">选择图片</button>
</view>
<view wx:if="{{hasImg === true}}">
<image mode="widthFix" src="{{imgurl}}"></image>
</view></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-5d8980d530bde422208893-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bde422208893-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bde422208893-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530bde422208893-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530bde422208893-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530bde422208893-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-5d8980d530bde422208893-1"><span class="crayon-r "><view </span>wx<span class="crayon-o">:</span><span class="crayon-e ">if</span><span class="crayon-o">=</span><span class="crayon-s ">"{{hasImg === false}}"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d8980d530bde422208893-2"><span class="crayon-i "> </span><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"chooseImg"</span><span class="crayon-r ">></span><span class="crayon-i ">选择图片</span><span class="crayon-r "></button></span></div><div class="crayon-line" id="crayon-5d8980d530bde422208893-3"><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d8980d530bde422208893-4"><span class="crayon-r "><view </span>wx<span class="crayon-o">:</span><span class="crayon-e ">if</span><span class="crayon-o">=</span><span class="crayon-s ">"{{hasImg === true}}"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d8980d530bde422208893-5"><span class="crayon-i "> </span><span class="crayon-r "><image </span><span class="crayon-e ">mode</span><span class="crayon-o">=</span><span class="crayon-s ">"widthFix"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"{{imgurl}}"</span><span class="crayon-r ">></span><span class="crayon-r "></image></span></div><div class="crayon-line" id="crayon-5d8980d530bde422208893-6"><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>没有图片也就是hasImg的值为false时，会显示<strong>选择图片</strong>的button；而当有图片时，没有button只有图片，在一定的场合用户体验会更好（button要是一直在，用户就还会去点，体验不好）。</p>
<blockquote class="danger"><p><strong>注意：</strong>这里所说的上传图片与我们日常生活中的上传图片不是一样的哦，日常生活中上传图片，图片不仅会显示在小程序（网页、App）上，还会继续上传到存储服务器里面，而我们这里只是进行了第一步，上传的图片只是存储在临时文件里面，所以重新编译，图片就不显示了。后面会有临时文件的内容以及会在云开发部分将图片上传到云存储。</p></blockquote>
<p><strong>上传多张照片</strong></p>
<p>如果上传的是多张照片，那么imgurl的初始值就不能是字符串了，而是一个数组Array，</p>
<div id="crayon-5d8980d530be0617961457" 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: {
imgurl:[],
},</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-5d8980d530be0617961457-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530be0617961457-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530be0617961457-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-5d8980d530be0617961457-1"><span class="crayon-h"> </span><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-5d8980d530be0617961457-2"><span class="crayon-h"> </span><span class="crayon-v">imgurl</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530be0617961457-3"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>而file.wxml的代码也要相应的改为列表渲染即可，这种写法在代码上通用性比较强，上传一张图片、多张图片都可以，不过具体还是要看实际产品开发需求。</p>
<div id="crayon-5d8980d530be2234322647" 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 wx:for-items="{{imgurl}}" wx:for-item="item" wx:key="*this">
<image mode="widthFix" src="{{item}}"></image>
</view></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-5d8980d530be2234322647-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530be2234322647-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530be2234322647-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-5d8980d530be2234322647-1"><span class="crayon-r "><view </span>wx<span class="crayon-o">:</span><span class="crayon-e ">for-items</span><span class="crayon-o">=</span><span class="crayon-s ">"{{imgurl}}"</span><span class="crayon-h"> </span>wx<span class="crayon-o">:</span><span class="crayon-e ">for-item</span><span class="crayon-o">=</span><span class="crayon-s ">"item"</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 ">"*this"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d8980d530be2234322647-2"><span class="crayon-i "> </span><span class="crayon-r "><image </span><span class="crayon-e ">mode</span><span class="crayon-o">=</span><span class="crayon-s ">"widthFix"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"{{item}}"</span><span class="crayon-r ">></span><span class="crayon-r "></image></span></div><div class="crayon-line" id="crayon-5d8980d530be2234322647-3"><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后再把<strong>count</strong>的值修改为2~9张，编译之后，在手机微信上体验一下效果。</p>
<h4>操作图片</h4>
<p>使用小程序图片API不仅可以上传图片，还可以对上传的图片进行一定的操作，比如获取图片信息、预览图片、保存图片、压缩图片等等。</p>
<p><strong>获取图片信息</strong></p>
<p>无论是存储在小程序本地，还是存储在临时文件、缓存、网络上的图片，使用wx.getImageInfo() 都可以获取到该图片的宽度、高度、路径、格式以及拍照方向。</p>
<p><strong>技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.getImageInfo.html" target="_blank" rel="noopener noreferrer">wx.getImageInfo()</a></p>
<p>使用开发者工具在file.js里添加以下代码，我们使用wx.getImageInfo() 来获取之前上传的图片的信息。由于获取图片信息需要等上传图片成功之后才能执行，因此我们可以在wx.chooseImage()的success回调函数里来调用wx.getImageInfo()，而获取图片信息之后才能返回图片信息，因此这又是一个回调函数：</p>
<div id="crayon-5d8980d530be4334512740" 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;"> chooseImg:function(){
let that=this
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
const imgurl = res.tempFilePaths
console.log('chooseImage回调打印的res',res)
that.setData({
imgurl
})
wx.getImageInfo({
src: res.tempFilePaths[0],
//也可以这么写：src: that.data.imgurl[0],这里只能看到第一张照片的信息，其他照片的信息需要遍历来获取
success(res){
console.log('getImageInfo回调打印的res',res)
}
})
}
})
},</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-5d8980d530be4334512740-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-14" style="height: 20px;">14</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-15" style="height: 20px;">15</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-16" style="height: 20px;">16</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-17" style="height: 20px;">17</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-18" style="height: 20px;">18</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-19" style="height: 20px;">19</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-20" style="height: 20px;">20</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-21" style="height: 20px;">21</div><div class="crayon-num" data-line="crayon-5d8980d530be4334512740-22" style="height: 20px;">22</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-5d8980d530be4334512740-1"><span class="crayon-h"> </span><span class="crayon-v">chooseImg</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-5d8980d530be4334512740-2"><span class="crayon-h"> </span><span class="crayon-e">let </span><span class="crayon-v">that</span><span class="crayon-o">=</span><span class="crayon-r">this</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-3"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">chooseImage</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-4"><span class="crayon-h"> </span><span class="crayon-v">count</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">9</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-5"><span class="crayon-h"> </span><span class="crayon-v">sizeType</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'original'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'compressed'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-6"><span class="crayon-h"> </span><span class="crayon-v">sourceType</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-s">'album'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'camera'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-7"><span class="crayon-h"> </span><span class="crayon-e">success</span><span class="crayon-sy">(</span><span class="crayon-v">res</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-8"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">imgurl</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-e">tempFilePaths</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-9"><span class="crayon-e"> </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">'chooseImage回调打印的res'</span><span class="crayon-sy">,</span><span class="crayon-v">res</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-10"><span class="crayon-h"> </span><span class="crayon-v">that</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-5d8980d530be4334512740-11"><span class="crayon-h"> </span><span class="crayon-i">imgurl</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-12"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-13"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">getImageInfo</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-14"><span class="crayon-h"> </span><span class="crayon-v">src</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-v">tempFilePaths</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-15"><span class="crayon-h"> </span><span class="crayon-c">//也可以这么写：src: that.data.imgurl[0],这里只能看到第一张照片的信息，其他照片的信息需要遍历来获取</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-16"><span class="crayon-h"> </span><span class="crayon-e">success</span><span class="crayon-sy">(</span><span class="crayon-v">res</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-17"><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">'getImageInfo回调打印的res'</span><span class="crayon-sy">,</span><span class="crayon-v">res</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-18"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-19"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-20"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-21"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530be4334512740-22"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>编译之后，我们再来上传一张图片，图片上传成功之后，在控制台console里可以看到打印的信息。在上面的代码里，我们发现success回调函数嵌套success回调函数。</p>
<blockquote><p><strong>回调函数</strong></p>
<p>经过之前的学习，相信大家对回调函数success、fail有了一定的认识，那什么是回调函数呢？简单一点说就是：<strong>回调Callback是指在另一个函数执行完成之后被调用的函数</strong>。success、fail就都是在小程序的API函数执行完成之后，才会被调用，而success和fail它们本身也是函数，也能返回数据。而复杂一点说，就是回调函数本身就是函数，但是它们却被其他函数给调用，而调用函数的函数被称为<strong>高阶函数</strong>。这些大家只需要粗略了解就可以了。</p>
<p><strong>异步与同步</strong></p>
<p>我们前面也提及过异步，那什么会有异步呢？因为JavaScript是单线程的编程语言，就是从上到下、一行一行去执行代码，类似于排队一样一个个处理，第一个不处理完，就不会处理后面的。但是遇到网络请求、I/O操作（比如上面的读取图片信息）以及定时函数（后面会涉及）以及类似于成功反馈的情况，等这些不可预知时间的任务都执行完再处理后面的任务，肯定不行，于是就有了<strong>异步处理</strong>。</p>
<p>把要等待其他函数执行完之后，才能执行的函数（比如读取图片信息）放到回调函数里，先不处理，等图片上传成功之后再来处理，这就是异步。比如wx.showToast()消息提示框，可以放到回调函数里，当API调用成功之后再来显示提示消息。回调函数相当于是异步的一个解决方案。</p></blockquote>
<p><strong>预览所有上传的图片</strong></p>
<p>预览图片就是在新页面里全屏打开图片，预览的过程中用户可以进行保存图片、发送给朋友等操作。可以预览一张照片或者多张照片。</p>
<p><strong>技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html" target="_blank" rel="noopener noreferrer">wx.previewImage()</a></p>
<p>使用开发者工具在file.wxml里输入以下代码，我们要预览的是从手机相册里上传的图片（<b>保留上面的代码，接着写</b>），如果没有上传图片，那就把<strong>预览图片</strong>的按钮给隐藏，我们来写一段完整的代码：</p>
<div id="crayon-5d8980d530be6220323090" 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 wx:if="{{hasImg === true}}">
<button bindtap="previewImg">预览照片</button>
</view></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-5d8980d530be6220323090-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530be6220323090-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530be6220323090-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-5d8980d530be6220323090-1"><span class="crayon-r "><view </span>wx<span class="crayon-o">:</span><span class="crayon-e ">if</span><span class="crayon-o">=</span><span class="crayon-s ">"{{hasImg === true}}"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d8980d530be6220323090-2"><span class="crayon-i "> </span><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"previewImg"</span><span class="crayon-r ">></span><span class="crayon-i ">预览照片</span><span class="crayon-r "></button></span></div><div class="crayon-line" id="crayon-5d8980d530be6220323090-3"><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后在file.js添加事件处理函数previewImg，调用预览图片的API wx.previewImage()：</p>
<div id="crayon-5d8980d530be8581904324" 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;"> previewImg:function(){
wx.previewImage({
current: '',
urls: this.data.imgurl,
})
},</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-5d8980d530be8581904324-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530be8581904324-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530be8581904324-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530be8581904324-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530be8581904324-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530be8581904324-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-5d8980d530be8581904324-1"><span class="crayon-h"> </span><span class="crayon-v">previewImg</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-5d8980d530be8581904324-2"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">previewImage</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530be8581904324-3"><span class="crayon-h"> </span><span class="crayon-v">current</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-5d8980d530be8581904324-4"><span class="crayon-h"> </span><span class="crayon-v">urls</span><span class="crayon-o">:</span><span class="crayon-h"> </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-v">imgurl</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530be8581904324-5"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530be8581904324-6"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>当上传图片之后点击<strong>预览图片</strong>按钮就能预览所有图片了。</p>
<blockquote><p>这个场景主要用于让用户可以<strong>预览、保存或分享图片</strong>，毕竟image组件是不支持图片的放大预览、保存到本地、转发给好友，现在微信还支持预览小程序码，长按就可以打开小程序，这个API主要是为了增强用户的交互体验的。</p></blockquote>
<p>那我们应该如何实现点击其中的某一张图片，就会弹出所有图片的预览呢？这里就要用到current了。</p>
<p>将之前file.wxml里图片上传的代码改成如下，把事件处理函数previewImg绑定在图片上面，</p>
<div id="crayon-5d8980d530be9520075867" 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;"><button bindtap="chooseImg">选择图片</button>
<view wx:for-items="{{imgurl}}" wx:for-item="item" wx:key="*this">
<image mode="widthFix" src="{{item}}" data-src="{{item}} " bindtap="previewImg" style="width:100px;float:left"></image>
</view></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-5d8980d530be9520075867-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530be9520075867-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530be9520075867-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530be9520075867-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-5d8980d530be9520075867-1"><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"chooseImg"</span><span class="crayon-r ">></span><span class="crayon-i ">选择图片</span><span class="crayon-r "></button></span></div><div class="crayon-line" id="crayon-5d8980d530be9520075867-2"><span class="crayon-r "><view </span>wx<span class="crayon-o">:</span><span class="crayon-e ">for-items</span><span class="crayon-o">=</span><span class="crayon-s ">"{{imgurl}}"</span><span class="crayon-h"> </span>wx<span class="crayon-o">:</span><span class="crayon-e ">for-item</span><span class="crayon-o">=</span><span class="crayon-s ">"item"</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 ">"*this"</span><span class="crayon-r ">></span></div><div class="crayon-line" id="crayon-5d8980d530be9520075867-3"><span class="crayon-i "> </span><span class="crayon-r "><image </span><span class="crayon-e ">mode</span><span class="crayon-o">=</span><span class="crayon-s ">"widthFix"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"{{item}}"</span><span class="crayon-h"> </span><span class="crayon-e ">data-src</span><span class="crayon-o">=</span><span class="crayon-s ">"{{item}} "</span><span class="crayon-h"> </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"previewImg"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span><span class="crayon-o">=</span><span class="crayon-s ">"width:100px;float:left"</span><span class="crayon-r ">></span><span class="crayon-r "></image></span></div><div class="crayon-line" id="crayon-5d8980d530be9520075867-4"><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后将file.js的事件处理函数previewImg修改为：</p>
<div id="crayon-5d8980d530beb849404642" 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;"> previewImg:function(e){
wx.previewImage({
current: e.currentTarget.dataset.src,
urls: this.data.imgurl,
})
},</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-5d8980d530beb849404642-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530beb849404642-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530beb849404642-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530beb849404642-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530beb849404642-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530beb849404642-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-5d8980d530beb849404642-1"><span class="crayon-h"> </span><span class="crayon-v">previewImg</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">e</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530beb849404642-2"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">previewImage</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530beb849404642-3"><span class="crayon-h"> </span><span class="crayon-v">current</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-v">dataset</span><span class="crayon-sy">.</span><span class="crayon-v">src</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530beb849404642-4"><span class="crayon-h"> </span><span class="crayon-v">urls</span><span class="crayon-o">:</span><span class="crayon-h"> </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-v">imgurl</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530beb849404642-5"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530beb849404642-6"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>这样点击图片就会弹出预览窗口来预览图片了。</p>
<p><strong>保存图片到相册</strong></p>
<p>小程序<strong>不支持直接将网络图片</strong>保存到本地手机的系统相册，支持临时文件路径和小程序本地路径。</p>
<p><strong>技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html" target="_blank" rel="noopener noreferrer">wx.saveImageToPhotosAlbum()</a></p>
<p>比如我们在小程序的根目录下新建一个image文件夹并放一张图片到里面比如background.jpg，然后再在file.wxml里输入以下代码，让image组件绑定事件处理函数saveImg：</p>
<div id="crayon-5d8980d530bed914568497" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate crayon-wrapped" data-settings=" minimize scroll-mouseover disable-anim wrap" style="margin-top: 15px; margin-bottom: 15px; font-size: 14px !important; line-height: 20px !important; height: auto;">
<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="" readonly="" style="tab-size: 4; font-size: 14px !important; line-height: 20px !important; z-index: 0; opacity: 0; overflow: hidden;"><image mode="widthFix" src="/images/background.jpg" bindtap="saveImg"></image></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-5d8980d530bed914568497-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-5d8980d530bed914568497-1"><span class="crayon-r "><image </span><span class="crayon-e ">mode</span><span class="crayon-o">=</span><span class="crayon-s ">"widthFix"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"/images/background.jpg"</span><span class="crayon-h"> </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"saveImg"</span><span class="crayon-r ">></span><span class="crayon-r "></image></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后在file.js里添加事件处理函数saveImg，</p>
<div id="crayon-5d8980d530bef190571793" 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;"> saveImg:function(e){
wx.saveImageToPhotosAlbum({
filePath: "/images/background.jpg",
success(res) {
wx.showToast({
title: '保存成功',
})
}
})
}</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-5d8980d530bef190571793-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bef190571793-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bef190571793-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530bef190571793-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530bef190571793-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530bef190571793-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d8980d530bef190571793-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d8980d530bef190571793-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d8980d530bef190571793-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d8980d530bef190571793-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-5d8980d530bef190571793-1"><span class="crayon-h"> </span><span class="crayon-v">saveImg</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">e</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bef190571793-2"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">saveImageToPhotosAlbum</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bef190571793-3"><span class="crayon-h"> </span><span class="crayon-v">filePath</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"/images/background.jpg"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bef190571793-4"><span class="crayon-h"> </span><span class="crayon-e">success</span><span class="crayon-sy">(</span><span class="crayon-v">res</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-5d8980d530bef190571793-5"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">showToast</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bef190571793-6"><span class="crayon-h"> </span><span class="crayon-v">title</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-5d8980d530bef190571793-7"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530bef190571793-8"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d8980d530bef190571793-9"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530bef190571793-10"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>编译之后预览在手机里体验，点击图片就会触发事件处理函数saveImg，调用wx.saveImageToPhotosAlbum() API，filePath为小程序文件的永久链接，文件就会保存到手机相册（没有相册权限会提示）。</p>
<blockquote><p>当然永久链接实际开发用得不会太多，使用最多的场景是把<strong>网络图片下载到临时链接（因为不能直接保存网络图片），再将临时链接的图片保存到相册</strong>，只需把上面的永久链接换成临时链接就可以了。最重要的是要搞清楚图片到底在哪里，在网络上？还是在小程序本地？还是在临时文件里？还是在缓存里？</p></blockquote>
<p><strong>压缩图片</strong></p>
<p>小程序是有压缩图片的API的<a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.compressImage.html" target="_blank" rel="noopener noreferrer">wx.compressImage()</a>，尤其是在上传图片时，为了减轻存储服务器的压力，不能让用户上传分辨率过高的照片。</p>
<ul>
<li>可以先让用户上传图片；</li>
<li>图片上传成功之后（也就是在上传图片的<strong>success回调函数</strong>里）再来获取图片的信息；</li>
<li>获取信息成功后（也就是在获取图片信息的<strong>success回调函数</strong>里）判断宽度或高度是否过大，如果图片过大，就压缩图片，</li>
<li>压缩图片成功后（也就是在压缩图片的<strong>success回调函数</strong>里），再把压缩好的图片上传到服务器</li>
</ul>
<p>上传图片、获取图片信息、压缩图片、上传图片到服务器，每一步都依赖上一步，所以会不断在success回调函数里写函数，实际开发涉及的业务会更复杂，就会不断回调，这被称之为<strong>回调地狱</strong>。这就是为什么会有<strong>Promise</strong>写法的原因，这个我们会在以后提及。</p>
<blockquote><p>由于压缩图片使用到的场景不算太多，毕竟我们在上传照片时可以不支持上传原图original，只支持压缩compressed就能保证上传图片的大小了。而且<a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.compressImage.html" target="_blank" rel="noopener noreferrer">wx.compressImage()</a>压缩图片的API也比较简单，所以这里就不写实际案例了，相信大家看文档也能玩得明白。</p></blockquote>
<h4>上传文件</h4>
<p>小程序不仅支持上传图片image，还支持上传视频、Excel、PDF、音频等等其他文件格式，但是我们只能从<strong>客户端会话</strong>里（也就是微信单聊、群聊的聊天记录里）选择其他格式的文件。</p>
<p><strong>技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html" target="_blank" rel="noopener noreferrer">wx.chooseMessageFile()</a></p>
<p>使用开发者工具在file.wxml里添加以下代码，给选择文件的button绑定事件处理函数chooseFile：</p>
<div id="crayon-5d8980d530bf1954035130" 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;"><button bindtap="chooseFile">选择文件</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-5d8980d530bf1954035130-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-5d8980d530bf1954035130-1"><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"chooseFile"</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>在file.js文件里添加事件处理chooseFile，并打印上传成功后回调函数里的参数对象。</p>
<div id="crayon-5d8980d530bf3933744211" 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;"> chooseFile: function () {
let that = this
wx.chooseMessageFile({
count: 5,
type: 'file',
success(res) {
console.log('上传文件的回调函数返回值',res)
}
})
},</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-5d8980d530bf3933744211-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bf3933744211-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bf3933744211-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530bf3933744211-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530bf3933744211-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530bf3933744211-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d8980d530bf3933744211-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d8980d530bf3933744211-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d8980d530bf3933744211-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d8980d530bf3933744211-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-5d8980d530bf3933744211-1"><span class="crayon-h"> </span><span class="crayon-v">chooseFile</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-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bf3933744211-2"><span class="crayon-h"> </span><span class="crayon-e">let </span><span class="crayon-v">that</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">this</span></div><div class="crayon-line" id="crayon-5d8980d530bf3933744211-3"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">chooseMessageFile</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bf3933744211-4"><span class="crayon-h"> </span><span class="crayon-v">count</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">5</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bf3933744211-5"><span class="crayon-h"> </span><span class="crayon-v">type</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'file'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bf3933744211-6"><span class="crayon-h"> </span><span class="crayon-e">success</span><span class="crayon-sy">(</span><span class="crayon-v">res</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bf3933744211-7"><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-v">res</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530bf3933744211-8"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d8980d530bf3933744211-9"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530bf3933744211-10"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>使用<strong>开发者工具</strong>上传一张图片或其他格式的文件，在控制台console我们可以看到打印的res对象里有tempFiles的数组对象Array（没有tempFilePaths，<span style="color: #800000;"><strong>此处技术文档有误</strong></span>），tempFiles对象包含文件的名称<strong>name</strong>、文件的临时路径<strong>path</strong>、文件的大小<strong>size</strong>、选择的文件的会话发送时间戳<strong>time</strong>、文件的类型<strong>type</strong>。</p>
<p>我们可以把上传的文件所取得的信息给渲染到页面上，在file.wxml里添加列表渲染的代码，也就是</p>
<div id="crayon-5d8980d530bf4332602704" 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;"><button bindtap="chooseFile">选择文件</button>
<view wx:for-items="{{tempFiles}}" wx:for-item="item" wx:key="*this">
<view>{{item.path}}</view>
</view></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-5d8980d530bf4332602704-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bf4332602704-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bf4332602704-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530bf4332602704-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-5d8980d530bf4332602704-1"><span class="crayon-o"><</span><span class="crayon-e">button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s">"chooseFile"</span><span class="crayon-o">></span>选择文件<span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">button</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-5d8980d530bf4332602704-2"><span class="crayon-o"><</span><span class="crayon-e">view </span><span class="crayon-v">wx</span><span class="crayon-o">:</span><span class="crayon-st">for</span><span class="crayon-e ">-items</span><span class="crayon-o">=</span><span class="crayon-s">"{{tempFiles}}"</span><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-o">:</span><span class="crayon-st">for</span><span class="crayon-e ">-item</span><span class="crayon-o">=</span><span class="crayon-s">"item"</span><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-o">:</span><span class="crayon-e ">key</span><span class="crayon-o">=</span><span class="crayon-s">"*this"</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-5d8980d530bf4332602704-3"><span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-e">view</span><span class="crayon-o">></span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-v">item</span><span class="crayon-sy">.</span><span class="crayon-v">path</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">view</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-5d8980d530bf4332602704-4"><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">view</span><span class="crayon-o">></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>在Page()的data里初始化一个属性temFiles，初始值为一个空数组Array：</p>
<div id="crayon-5d8980d530bf6908821552" 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: {
tempFiles:[],
},</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-5d8980d530bf6908821552-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bf6908821552-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bf6908821552-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-5d8980d530bf6908821552-1"><span class="crayon-h"> </span><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-5d8980d530bf6908821552-2"><span class="crayon-h"> </span><span class="crayon-v">tempFiles</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bf6908821552-3"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后再在chooseFile的success回调函数里将数据使用setData赋值给tempFiles:</p>
<div id="crayon-5d8980d530bf8518177511" 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;"> chooseFile: function () {
let that = this
wx.chooseMessageFile({
count: 5,
type: 'file',
success(res) {
let tempFiles=res.tempFiles
that.setData({
tempFiles
})
}
})
},</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-5d8980d530bf8518177511-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d8980d530bf8518177511-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-5d8980d530bf8518177511-1"><span class="crayon-h"> </span><span class="crayon-v">chooseFile</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-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-2"><span class="crayon-h"> </span><span class="crayon-e">let </span><span class="crayon-v">that</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">this</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-3"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">chooseMessageFile</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-4"><span class="crayon-h"> </span><span class="crayon-v">count</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">5</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-5"><span class="crayon-h"> </span><span class="crayon-v">type</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'file'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-6"><span class="crayon-h"> </span><span class="crayon-e">success</span><span class="crayon-sy">(</span><span class="crayon-v">res</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-7"><span class="crayon-h"> </span><span class="crayon-e">let </span><span class="crayon-v">tempFiles</span><span class="crayon-o">=</span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-e">tempFiles</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-8"><span class="crayon-e"> </span><span class="crayon-v">that</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-5d8980d530bf8518177511-9"><span class="crayon-h"> </span><span class="crayon-i">tempFiles</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-10"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-11"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-12"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530bf8518177511-13"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>编译之后预览在微信上体验，看看什么效果？<span style="color: #800000;"><strong>注意需选择微信有文件的会话框</strong></span>。还是再强调一下，这个上传和我们实际里的上传还是不一样的，这里只是把文件上传到了一个临时文件里面，并没有上传到服务器。</p>
<h4>上传地理位置</h4>
<p>除了可以上传图片、音视频以及各种文件格式以外，小程序还支持上传地理位置。</p>
<p><strong>技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html" target="_blank" rel="noopener noreferrer">wx.chooseLocation()</a></p>
<p>使用开发者工具在file.wxml里输入以下代码，前面我们上传了文件，这一次我们把手机的位置给上传并渲染出来：</p>
<div id="crayon-5d8980d530bf9655002298" 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;"><button bindtap="chooseLocation">选择地理位置</button>
<view>{{location.name}}</view>
<view>{{location.address}}</view>
<view>{{location.latitude}}</view>
<view>{{location.longitude}}</view></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-5d8980d530bf9655002298-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bf9655002298-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bf9655002298-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530bf9655002298-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530bf9655002298-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-5d8980d530bf9655002298-1"><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"chooseLocation"</span><span class="crayon-r ">></span><span class="crayon-i ">选择地理位置</span><span class="crayon-r "></button></span></div><div class="crayon-line" id="crayon-5d8980d530bf9655002298-2"><span class="crayon-r "><view></span><span class="crayon-i ">{{location.name}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d8980d530bf9655002298-3"><span class="crayon-r "><view></span><span class="crayon-i ">{{location.address}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d8980d530bf9655002298-4"><span class="crayon-r "><view></span><span class="crayon-i ">{{location.latitude}}</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d8980d530bf9655002298-5"><span class="crayon-r "><view></span><span class="crayon-i ">{{location.longitude}}</span><span class="crayon-r "></view></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后在file.js的Page()的data里初始化location</p>
<div id="crayon-5d8980d530bfb232621840" 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: {
location:{},
},</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-5d8980d530bfb232621840-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bfb232621840-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bfb232621840-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-5d8980d530bfb232621840-1"><span class="crayon-h"> </span><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-5d8980d530bfb232621840-2"><span class="crayon-h"> </span><span class="crayon-v">location</span><span class="crayon-o">:</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bfb232621840-3"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>在file.js里添加事件处理函数chooseLocation，</p>
<div id="crayon-5d8980d530bfd926568717" 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;"> chooseLocation: function () {
let that= this
wx.chooseLocation({
success: function(res) {
const location=res
that.setData({
location
})
},
fail:function(res){
console.log("获取位置失败")
}
})
},</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-5d8980d530bfd926568717-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5d8980d530bfd926568717-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-5d8980d530bfd926568717-1"><span class="crayon-h"> </span><span class="crayon-v">chooseLocation</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-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-2"><span class="crayon-h"> </span><span class="crayon-e">let </span><span class="crayon-v">that</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">this</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-3"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">chooseLocation</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-4"><span class="crayon-h"> </span><span class="crayon-v">success</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">res</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-5"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-r">location</span><span class="crayon-o">=</span><span class="crayon-e">res</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-6"><span class="crayon-e"> </span><span class="crayon-v">that</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-5d8980d530bfd926568717-7"><span class="crayon-h"> </span><span class="crayon-r">location</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-8"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-9"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-10"><span class="crayon-h"> </span><span class="crayon-v">fail</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">res</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-11"><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></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-12"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-13"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530bfd926568717-14"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>编译之后预览用手机点击选择地理位置的button，就会弹出地图选择位置（这个位置既可以是你当前的位置，也可以自己选择一个位置），然后点击确定，就能在小程序上看到我们上传的位置了。要让位置信息显示在地图上，可以在file.wxml里添加一个地图组件：</p>
<div id="crayon-5d8980d530bff882105601" 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;"><map style="width: 100%; height: 300px;"
latitude="{{location.latitude}}"
longitude="{{location.longitude}}"
show-location
></map></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-5d8980d530bff882105601-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530bff882105601-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530bff882105601-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530bff882105601-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530bff882105601-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-5d8980d530bff882105601-1"><span class="crayon-r "><map </span><span class="crayon-e ">style</span><span class="crayon-o">=</span><span class="crayon-s ">"width: 100%; height: 300px;"</span></div><div class="crayon-line" id="crayon-5d8980d530bff882105601-2"><span class="crayon-h"> </span><span class="crayon-e ">latitude</span><span class="crayon-o">=</span><span class="crayon-s ">"{{location.latitude}}"</span></div><div class="crayon-line" id="crayon-5d8980d530bff882105601-3"><span class="crayon-h"> </span><span class="crayon-e ">longitude</span><span class="crayon-o">=</span><span class="crayon-s ">"{{location.longitude}}"</span></div><div class="crayon-line" id="crayon-5d8980d530bff882105601-4"><span class="crayon-h"> </span>show<span class="crayon-o">-</span>location</div><div class="crayon-line" id="crayon-5d8980d530bff882105601-5"><span class="crayon-r ">></span><span class="crayon-r "></map></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p></p>
<blockquote class="task"><p><strong>小任务：</strong>上传地理位置，将该地址显示在地图上，并添加该地理位置的markers。关于markers的知识，可以去看map组件的技术文档。</p></blockquote>
<h4>模块化与格式化</h4>
<p>在新建模板小程序里（不使用云开发服务），有一个日志logs页面，这个日志logs虽然简单，但是包含着非常复杂的JavaScript知识，是一个非常好的学习参考案例，这里我们来对它进行一一解读。</p>
<p><strong>模块化与引入模块</strong></p>
<p>在实际开发中，日期、时间的处理经常会使用到，但是使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date" target="_blank" rel="noopener noreferrer">Date对象</a>所获取到的时间格式与我们想要展现的形式是有非常大的差异的。这时我们可以把时间的处理抽离成为一个单独的 js 文件比如<strong>util.js</strong>（util是utility的缩写，表示程序集，通用程序等意思），作为一个模块。</p>
<blockquote><p>把通用的模块放在util.js或者common.js，把util.js放在utils文件夹里等就跟把css放在style文件夹，把页面放在pages文件夹，把图片放在images文件夹里是一样的道理，尽管文件夹或文件的名称你可以任意修改，但是为了代码的可读性，文件结构的清晰，推荐大家采用这种一看就懂的方式。</p></blockquote>
<p>使用开发者工具在小程序根目录新建一个utils文件夹，再在文件夹下新建util.js文件，在util.js里输入以下代码（也就是参考模板小程序的logs页面调用的util.js）</p>
<div id="crayon-5d8980d530c00809314664" 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 formatTime = date => {
const year = date.getFullYear() //获取年
const month = date.getMonth() + 1 //获取月份，月份数值需加1
const day = date.getDate() //获取一月中的某一天
const hour = date.getHours() //获取小时
const minute = date.getMinutes() //获取分钟
const second = date.getSeconds() //获取秒
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') //会单独来讲解这段代码的意思
}
const formatNumber = n => { //格式化数字
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = { //模块向外暴露的对象，使用require引用该模块时可以获取
formatTime: formatTime,
formatNumber: formatNumber
}</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-5d8980d530c00809314664-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-9" style="height: 40px;">9</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-14" style="height: 20px;">14</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-15" style="height: 20px;">15</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-16" style="height: 20px;">16</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-17" style="height: 20px;">17</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-18" style="height: 20px;">18</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-19" style="height: 20px;">19</div><div class="crayon-num" data-line="crayon-5d8980d530c00809314664-20" style="height: 20px;">20</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-5d8980d530c00809314664-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">formatTime</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">date</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-5d8980d530c00809314664-2"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">year</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">date</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-h"> </span><span class="crayon-c">//获取年</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-3"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">month</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">date</span><span class="crayon-sy">.</span><span class="crayon-e">getMonth</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-h"> </span><span class="crayon-c">//获取月份，月份数值需加1</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-4"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">day</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">date</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-h"> </span><span class="crayon-c">//获取一月中的某一天</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-5"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">hour</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">date</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-h"> </span><span class="crayon-c">//获取小时</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-6"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">minute</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">date</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-h"> </span><span class="crayon-c">//获取分钟</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-7"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">second</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">date</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-h"> </span><span class="crayon-c">//获取秒</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-8"> </div><div class="crayon-line" id="crayon-5d8980d530c00809314664-9"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">year</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">month</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">day</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-e">map</span><span class="crayon-sy">(</span><span class="crayon-v">formatNumber</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">join</span><span class="crayon-sy">(</span><span class="crayon-s">'/'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-s">' '</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">hour</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">minute</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">second</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-e">map</span><span class="crayon-sy">(</span><span class="crayon-v">formatNumber</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">join</span><span class="crayon-sy">(</span><span class="crayon-s">':'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-c">//会单独来讲解这段代码的意思</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-10"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-11"> </div><div class="crayon-line" id="crayon-5d8980d530c00809314664-12"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">formatNumber</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">n</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><span class="crayon-h"> </span><span class="crayon-c">//格式化数字</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-13"><span class="crayon-h"> </span><span class="crayon-v">n</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">n</span><span class="crayon-sy">.</span><span class="crayon-e">toString</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-14"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">n</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-v">n</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'0'</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-i">n</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-15"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-16"> </div><div class="crayon-line" id="crayon-5d8980d530c00809314664-17"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-c">//模块向外暴露的对象，使用require引用该模块时可以获取</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-18"><span class="crayon-h"> </span><span class="crayon-v">formatTime</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">formatTime</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-19"><span class="crayon-h"> </span><span class="crayon-v">formatNumber</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-i">formatNumber</span></div><div class="crayon-line" id="crayon-5d8980d530c00809314664-20"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>我们再来在file.js里调用这个模块文件util.js，也就是在file.js的Page()对象前面<strong>使用require引入util.js文件</strong>（需要引入模块文件<span style="color: #800000;"><strong>相对于当前文件的相对路径</strong></span>，不支持绝对路径）</p>
<div id="crayon-5d8980d530c02553549768" 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 util = require('../../utils/util.js')</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-5d8980d530c02553549768-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-5d8980d530c02553549768-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">util</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'../../utils/util.js'</span><span class="crayon-sy">)</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后再在onLoad页面生命周期函数里打印看看这段时间处理的代码到底做了什么效果，这里也要注意调用模块里的函数的方式。</p>
<div id="crayon-5d8980d530c04102239324" 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;"> onLoad: function (options) {
console.log('未格式化的时间',new Date())
console.log('格式化后的时间',util.formatTime(new Date()))
console.log('格式化后的数值',util.formatNumber(9))
},</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-5d8980d530c04102239324-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c04102239324-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c04102239324-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530c04102239324-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530c04102239324-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-5d8980d530c04102239324-1"><span class="crayon-h"> </span><span class="crayon-v">onLoad</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">options</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530c04102239324-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-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 class="crayon-line" id="crayon-5d8980d530c04102239324-3"><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-v">util</span><span class="crayon-sy">.</span><span class="crayon-e">formatTime</span><span class="crayon-sy">(</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><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c04102239324-4"><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-v">util</span><span class="crayon-sy">.</span><span class="crayon-e">formatNumber</span><span class="crayon-sy">(</span><span class="crayon-cn">9</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c04102239324-5"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>util.formatTime()就调用了模块里的函数，通过控制台打印的日志可以看到日期时间格式的不同，比如：</p>
<div id="crayon-5d8980d530c06385433246" 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;">未格式化的时间 Mon Sep 02 2019 11:25:18 GMT+0800 (中国标准时间)
格式化后的时间 2019/09/02 11:25:18</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-5d8980d530c06385433246-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c06385433246-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-5d8980d530c06385433246-1">未格式化的时间<span class="crayon-h"> </span><span class="crayon-e">Mon </span><span class="crayon-i">Sep</span><span class="crayon-h"> </span><span class="crayon-cn">02</span><span class="crayon-h"> </span><span class="crayon-cn">2019</span><span class="crayon-h"> </span><span class="crayon-cn">11</span><span class="crayon-o">:</span><span class="crayon-cn">25</span><span class="crayon-o">:</span><span class="crayon-cn">18</span><span class="crayon-h"> </span><span class="crayon-v">GMT</span><span class="crayon-o">+</span><span class="crayon-cn">0800</span><span class="crayon-h"> </span><span class="crayon-sy">(</span>中国标准时间<span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c06385433246-2">格式化后的时间<span class="crayon-h"> </span><span class="crayon-cn">2019</span><span class="crayon-o">/</span><span class="crayon-cn">09</span><span class="crayon-o">/</span><span class="crayon-cn">02</span><span class="crayon-h"> </span><span class="crayon-cn">11</span><span class="crayon-o">:</span><span class="crayon-cn">25</span><span class="crayon-o">:</span><span class="crayon-cn">18</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>显然格式化后的日期时间的展现形式更符合我们的日常习惯，而9这个数值被转化成了字符串”09″。那这段格式化日期时间的代码是怎么实现的呢？这里就涉及到高阶函数的知识，一般函数调用参数，而高阶函数会调用其他函数，也就是把其他函数作为参数。</p>
<p><strong>map</strong></p>
<p>相信格式化数字的代码比较好理解，如果是15日里的15，由于n[1]是15的第二位数字5，为true会直接return返回n，也就是15；比如9月里的数字9，n[1]不存在，也就是没有第二位数，于是执行
<span id="crayon-5d8980d530c08912977906" 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-s">'0'</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">n</span></span></span>给它加一个0，变成09；而formatNumber是一个箭头函数。</p>
<div id="crayon-5d8980d530c09327957574" 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 formatNumber = n => { //格式化数字
n = n.toString() //将数值Number类型转为字符串类型，不然不能拼接
return n[1] ? n : '0' + n //三目运算符，如果字符串n第2位存在也就是为2位数，那么直接返回n；如果不存在就给n前面加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-5d8980d530c09327957574-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c09327957574-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c09327957574-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530c09327957574-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-5d8980d530c09327957574-1"><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">formatNumber</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">n</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><span class="crayon-h"> </span><span class="crayon-c">//格式化数字</span></div><div class="crayon-line" id="crayon-5d8980d530c09327957574-2"><span class="crayon-h"> </span><span class="crayon-v">n</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">n</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-h"> </span><span class="crayon-c">//将数值Number类型转为字符串类型，不然不能拼接</span></div><div class="crayon-line" id="crayon-5d8980d530c09327957574-3"><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">n</span><span class="crayon-sy">[</span><span class="crayon-cn">1</span><span class="crayon-sy">]</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-v">n</span><span class="crayon-h"> </span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">'0'</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">n</span><span class="crayon-h"> </span><span class="crayon-c">//三目运算符，如果字符串n第2位存在也就是为2位数，那么直接返回n；如果不存在就给n前面加0</span></div><div class="crayon-line" id="crayon-5d8980d530c09327957574-4"><span class="crayon-sy">}</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>而格式化日期时间则涉及到map，比如下面的这段代码就有map，</p>
<div id="crayon-5d8980d530c0b075310824" 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;">return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')</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-5d8980d530c0b075310824-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-5d8980d530c0b075310824-1"><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-v">year</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">month</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">day</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-e">map</span><span class="crayon-sy">(</span><span class="crayon-v">formatNumber</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">join</span><span class="crayon-sy">(</span><span class="crayon-s">'/'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-s">' '</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">hour</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">minute</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">second</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-e">map</span><span class="crayon-sy">(</span><span class="crayon-v">formatNumber</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">join</span><span class="crayon-sy">(</span><span class="crayon-s">':'</span><span class="crayon-sy">)</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>map也是一个数据结构，它背后的知识非常复杂，但是我们只需了解它是做什么的就可以，如果<strong>你想对数组里面的每一个值进行函数操作并且返回一个新数组，那你可以使用map</strong>。</p>
<p>上面这段代码就是对<strong>数组[year, month, day]</strong>和<strong>[hour, minute, second]</strong>里面的每一个数值都进行格式化数字的操作，这一点我们可以在file.js的onLoad里打印看效果就明白了</p>
<div id="crayon-5d8980d530c0d477949057" 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;"> onLoad: function (options) {
console.log('2019年9月2日map处理后的结果', [2019,9,2].map(util.formatNumber))
console.log('上午9点13分4秒map处理后的结果', [9, 13, 4].map(util.formatNumber))
},</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-5d8980d530c0d477949057-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c0d477949057-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c0d477949057-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530c0d477949057-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-5d8980d530c0d477949057-1"><span class="crayon-h"> </span><span class="crayon-v">onLoad</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">options</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530c0d477949057-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">'2019年9月2日map处理后的结果'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-cn">2019</span><span class="crayon-sy">,</span><span class="crayon-cn">9</span><span class="crayon-sy">,</span><span class="crayon-cn">2</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-e">map</span><span class="crayon-sy">(</span><span class="crayon-v">util</span><span class="crayon-sy">.</span><span class="crayon-v">formatNumber</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c0d477949057-3"><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">'上午9点13分4秒map处理后的结果'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-cn">9</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">13</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-e">map</span><span class="crayon-sy">(</span><span class="crayon-v">util</span><span class="crayon-sy">.</span><span class="crayon-v">formatNumber</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c0d477949057-4"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>从控制台打印的结果就可以看到数组里面的数字被格式化处理，有两位数的不处理，没有2位数的前面加0，而且<strong>返回的也是数组</strong>。至于数组Array的join方法，就是<strong>将数组元素拼接为字符串</strong>,以分隔符分割，上面[year, month, day]分隔符为”/”，[hour, minute, second]的分隔符为”:”。</p>
<h4>数据缓存Storage</h4>
<p>logs页面还涉及到数据缓存Storage方面的知识。通过前面的学习，我们了解到<strong>点击事件生成的事件对象</strong>也好，使用<strong>数据表单提交的数据</strong>也好，还是<strong>上传的图片、文件</strong>也好，只要我们重新编译小程序，这些数据都会消失。前面我们也提到存储数据、文件的方式有三种，一是保存到本地手机、二就是缓存，三是上传到服务器（云开发会讲解），这里我们就来了解数据缓存方面的知识。</p>
<p><strong>技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html" target="_blank" rel="noopener noreferrer">wx.setStorageSync()</a>、<a href="https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorageSync.html" target="_blank" rel="noopener noreferrer">wx.getStorageSync()</a></p>
<p><strong>保存文件</strong></p>
<blockquote class="danger"><p><strong>注意：</strong>尽管上传图片和上传文件都是把图片或文件先上传到临时文件里，但是<strong>保存图片wx.saveImageToPhotosAlbum()</strong>和<strong>保存文件wx.saveFile()</strong>是完全不同的概念，保存图片是把图片保存到手机本地相册；而保存文件则是把图片由临时文件移动到本地存储里，而本地存储每个小程序用户只有10M的空间。</p></blockquote>
<p><strong>保存文件技术文档：</strong><a href="https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.saveFile.html" target="_blank" rel="noopener noreferrer">wx.saveFile()</a></p>
<p>在了解logs的数据缓存案例之前，我们先来看一个将上传的图片由临时文件保存到缓存的案例，使用开发者工具在file.wxml里输入以下代码：</p>
<div id="crayon-5d8980d530c0f992205896" 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>临时文件的图片</view>
<image mode="widthFix" src="{{tempFilePath}}" style="width:100px"></image>
<view>缓存保存的图片</view>
<image mode="widthFix" src="{{savedFilePath}}" style="width:100px"></image>
<button bindtap="chooseImage">请选择文件</button>
<button bindtap="saveImage">保存文件到缓存</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-5d8980d530c0f992205896-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c0f992205896-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c0f992205896-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530c0f992205896-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530c0f992205896-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530c0f992205896-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-5d8980d530c0f992205896-1"><span class="crayon-r "><view></span><span class="crayon-i ">临时文件的图片</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d8980d530c0f992205896-2"><span class="crayon-r "><image </span><span class="crayon-e ">mode</span><span class="crayon-o">=</span><span class="crayon-s ">"widthFix"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"{{tempFilePath}}"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span><span class="crayon-o">=</span><span class="crayon-s ">"width:100px"</span><span class="crayon-r ">></span><span class="crayon-r "></image></span></div><div class="crayon-line" id="crayon-5d8980d530c0f992205896-3"><span class="crayon-r "><view></span><span class="crayon-i ">缓存保存的图片</span><span class="crayon-r "></view></span></div><div class="crayon-line" id="crayon-5d8980d530c0f992205896-4"><span class="crayon-r "><image </span><span class="crayon-e ">mode</span><span class="crayon-o">=</span><span class="crayon-s ">"widthFix"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"{{savedFilePath}}"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span><span class="crayon-o">=</span><span class="crayon-s ">"width:100px"</span><span class="crayon-r ">></span><span class="crayon-r "></image></span></div><div class="crayon-line" id="crayon-5d8980d530c0f992205896-5"><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"chooseImage"</span><span class="crayon-r ">></span><span class="crayon-i ">请选择文件</span><span class="crayon-r "></button></span></div><div class="crayon-line" id="crayon-5d8980d530c0f992205896-6"><span class="crayon-r "><button </span><span class="crayon-e ">bindtap</span><span class="crayon-o">=</span><span class="crayon-s ">"saveImage"</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>然后在file.js的data里初始化临时文件的路径tempFilePath和本地缓存的路径savedFilePath：</p>
<div id="crayon-5d8980d530c11119805599" 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: {
tempFilePath: '',
savedFilePath: '',
},</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-5d8980d530c11119805599-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c11119805599-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c11119805599-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530c11119805599-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-5d8980d530c11119805599-1"><span class="crayon-h"> </span><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-5d8980d530c11119805599-2"><span class="crayon-h"> </span><span class="crayon-v">tempFilePath</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-5d8980d530c11119805599-3"><span class="crayon-h"> </span><span class="crayon-v">savedFilePath</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-5d8980d530c11119805599-4"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>再在file.js里添加事件处理函数chooseImage和saveImage（函数名有别于之前的chooseImg和saveImg，不要弄混了哦）：</p>
<div id="crayon-5d8980d530c13813924038" 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;"> chooseImage:function() {
const that = this
wx.chooseImage({
count: 1,
success(res) {
that.setData({
tempFilePath: res.tempFilePaths[0]
})
}
})
},
saveImage:function() {
const that = this
wx.saveFile({
tempFilePath: this.data.tempFilePath,
success(res) {
that.setData({
savedFilePath: res.savedFilePath
})
wx.setStorageSync('savedFilePath', res.savedFilePath)
},
})
},</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-5d8980d530c13813924038-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-11" style="height: 20px;">11</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-12" style="height: 20px;">12</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-13" style="height: 20px;">13</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-14" style="height: 20px;">14</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-15" style="height: 20px;">15</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-16" style="height: 20px;">16</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-17" style="height: 20px;">17</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-18" style="height: 20px;">18</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-19" style="height: 20px;">19</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-20" style="height: 20px;">20</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-21" style="height: 20px;">21</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-22" style="height: 20px;">22</div><div class="crayon-num" data-line="crayon-5d8980d530c13813924038-23" style="height: 20px;">23</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-5d8980d530c13813924038-1"><span class="crayon-h"> </span><span class="crayon-v">chooseImage</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-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-2"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">that</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">this</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-3"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">chooseImage</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-4"><span class="crayon-h"> </span><span class="crayon-v">count</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-5"><span class="crayon-h"> </span><span class="crayon-e">success</span><span class="crayon-sy">(</span><span class="crayon-v">res</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-6"><span class="crayon-h"> </span><span class="crayon-v">that</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-5d8980d530c13813924038-7"><span class="crayon-h"> </span><span class="crayon-v">tempFilePath</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-v">tempFilePaths</span><span class="crayon-sy">[</span><span class="crayon-cn">0</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-8"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-9"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-10"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-11"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-12"><span class="crayon-h"> </span><span class="crayon-v">saveImage</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-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-13"><span class="crayon-h"> </span><span class="crayon-m">const</span><span class="crayon-h"> </span><span class="crayon-v">that</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">this</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-14"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">saveFile</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-15"><span class="crayon-h"> </span><span class="crayon-v">tempFilePath</span><span class="crayon-o">:</span><span class="crayon-h"> </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-v">tempFilePath</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-16"><span class="crayon-h"> </span><span class="crayon-e">success</span><span class="crayon-sy">(</span><span class="crayon-v">res</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-17"><span class="crayon-h"> </span><span class="crayon-v">that</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-5d8980d530c13813924038-18"><span class="crayon-h"> </span><span class="crayon-v">savedFilePath</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-i">savedFilePath</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-19"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-20"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">setStorageSync</span><span class="crayon-sy">(</span><span class="crayon-s">'savedFilePath'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-v">savedFilePath</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-21"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-22"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c13813924038-23"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>还没有完~我们还需要在file.js的onLoad生命周期函数里将缓存里存储的路径赋值给本地缓存的路径savedFilePath：</p>
<div id="crayon-5d8980d530c14186261459" 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;"> onLoad: function (options) {
this.setData({
savedFilePath: wx.getStorageSync('savedFilePath')
})
},</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-5d8980d530c14186261459-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c14186261459-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c14186261459-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530c14186261459-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530c14186261459-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-5d8980d530c14186261459-1"><span class="crayon-h"> </span><span class="crayon-v">onLoad</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">options</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-5d8980d530c14186261459-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-5d8980d530c14186261459-3"><span class="crayon-h"> </span><span class="crayon-v">savedFilePath</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">getStorageSync</span><span class="crayon-sy">(</span><span class="crayon-s">'savedFilePath'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c14186261459-4"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c14186261459-5"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>编译之后，点击<strong>请上传文件</strong>的button，会触发chooseImage事件处理函数，然后调用上传图片的API wx.chooseImage，这时会将图片上传到临时文件，并将取得的临时文件地址赋值给tempFilePath，有了tempFilePath，图片就能渲染出来了。</p>
<p>然后再点击<strong>保存文件到缓存</strong>的button，会触发saveImage事件处理函数，然后保存文件API wx.saveFile，将tempFilePath里的图片保存到缓存，并将取得的缓存地址赋值给savedFilePath（<strong>注意tempFilePath也就是临时路径是保存文件的必备参数</strong>），这时缓存保存的图片就渲染到页面了。然后会再来调用缓存API wx.setStorageSync()，将缓存文件的路径保存到缓存的key savedFilePath里面。<strong>有些参数名称相同但是含义不同，这个要注意</strong>。</p>
<p>通过wx.setStorageSync()保存到缓存里的数据，可以使用wx.getStorageSync()获取出来，我们在onLoad里把获取出来的缓存文件路径再赋值给savedFilePath。</p>
<p>编译页面，看看临时文件与缓存文件的不同，临时文件由于小程序的编译会被清除掉，而缓存文件有10M的空间，只要用户不刻意删除，它就会一直在。</p>
<blockquote><p>缓存的好处非常多，比如用户的浏览文章、播放视频的进度（看了哪些文章，给个特别的样式，免得用户不知道看到哪里了）、用户的登录信息（用户登录一次，可以很长时间不用再登录）、自定义的模板样式（用户选择自己喜欢的样式，下次打开小程序还是一样）、最经常使用的小图片（保存在缓存，下次打开小程序速度更快）等等。</p></blockquote>
<p><strong>logs的数据缓存处理</strong></p>
<p>我们再回头看logs的缓存案例，在小程序app.js的生命周期函数onLaunch里输入以下代码，也就是在小程序初始化的时候就执行日志进行记录：</p>
<div id="crayon-5d8980d530c16342173996" 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;"> // ||为逻辑与，就是声明logs为获取缓存里的logs记录，没有时就为空数组
var logs = wx.getStorageSync('logs') || []
//unshift()是数组的操作方法，它会将一个或多个元素添加到数组的开头，这样最新的记录就放在数组的最前面，
//这里是把Date.now()获取到的时间戳放置到数组的最前面
logs.unshift(Date.now())
//将logs数据存储到缓存指定的key也就是logs里面
wx.setStorageSync('logs', logs)
console.log(logs)
console.log(Date.now())</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-5d8980d530c16342173996-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c16342173996-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c16342173996-3" style="height: 20px;">3</div><div class="crayon-num" data-line="crayon-5d8980d530c16342173996-4" style="height: 20px;">4</div><div class="crayon-num" data-line="crayon-5d8980d530c16342173996-5" style="height: 20px;">5</div><div class="crayon-num" data-line="crayon-5d8980d530c16342173996-6" style="height: 20px;">6</div><div class="crayon-num" data-line="crayon-5d8980d530c16342173996-7" style="height: 20px;">7</div><div class="crayon-num" data-line="crayon-5d8980d530c16342173996-8" style="height: 20px;">8</div><div class="crayon-num" data-line="crayon-5d8980d530c16342173996-9" style="height: 20px;">9</div><div class="crayon-num" data-line="crayon-5d8980d530c16342173996-10" style="height: 20px;">10</div><div class="crayon-num" data-line="crayon-5d8980d530c16342173996-11" style="height: 20px;">11</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 14px !important; line-height: 20px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5d8980d530c16342173996-1"><span class="crayon-h"> </span><span class="crayon-c">// ||为逻辑与，就是声明logs为获取缓存里的logs记录，没有时就为空数组</span></div><div class="crayon-line" id="crayon-5d8980d530c16342173996-2"><span class="crayon-h"> </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">logs</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">getStorageSync</span><span class="crayon-sy">(</span><span class="crayon-s">'logs'</span><span class="crayon-sy">)</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></div><div class="crayon-line" id="crayon-5d8980d530c16342173996-3"> </div><div class="crayon-line" id="crayon-5d8980d530c16342173996-4"><span class="crayon-h"> </span><span class="crayon-c">//unshift()是数组的操作方法，它会将一个或多个元素添加到数组的开头，这样最新的记录就放在数组的最前面，</span></div><div class="crayon-line" id="crayon-5d8980d530c16342173996-5"><span class="crayon-h"> </span><span class="crayon-c">//这里是把Date.now()获取到的时间戳放置到数组的最前面</span></div><div class="crayon-line" id="crayon-5d8980d530c16342173996-6"><span class="crayon-h"> </span><span class="crayon-v">logs</span><span class="crayon-sy">.</span><span class="crayon-e">unshift</span><span class="crayon-sy">(</span><span class="crayon-v">Date</span><span class="crayon-sy">.</span><span class="crayon-e">now</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c16342173996-7"> </div><div class="crayon-line" id="crayon-5d8980d530c16342173996-8"><span class="crayon-h"> </span><span class="crayon-c">//将logs数据存储到缓存指定的key也就是logs里面</span></div><div class="crayon-line" id="crayon-5d8980d530c16342173996-9"><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-sy">.</span><span class="crayon-e">setStorageSync</span><span class="crayon-sy">(</span><span class="crayon-s">'logs'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">logs</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c16342173996-10"><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">logs</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-5d8980d530c16342173996-11"><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">Date</span><span class="crayon-sy">.</span><span class="crayon-e">now</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>当我们不断编译，logs数组里面的记录会不断增加，增加的值都是时间戳。那如何把缓存里面的日志给渲染到页面呢？</p>
<p>在file.wxml里添加以下代码，由于logs是数组，我们使用列表渲染，这里有个数组的index值，由于index是从0开始记录，给index加1，符合我们日常使用习惯。</p>
<div id="crayon-5d8980d530c2f242352108" 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 wx:for="{{logs}}" wx:for-item="log">
<view>{{index + 1}}. {{log}}</view>
</view></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-5d8980d530c2f242352108-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c2f242352108-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c2f242352108-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-5d8980d530c2f242352108-1"><span class="crayon-o"><</span><span class="crayon-e">view </span><span class="crayon-v">wx</span><span class="crayon-o">:</span><span class="crayon-st">for</span><span class="crayon-o">=</span><span class="crayon-s">"{{logs}}"</span><span class="crayon-h"> </span><span class="crayon-v">wx</span><span class="crayon-o">:</span><span class="crayon-st">for</span><span class="crayon-o">-</span><span class="crayon-v">item</span><span class="crayon-o">=</span><span class="crayon-s">"log"</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-5d8980d530c2f242352108-2"><span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-e">view</span><span class="crayon-o">></span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-v">index</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-v">log</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">view</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-5d8980d530c2f242352108-3"><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">view</span><span class="crayon-o">></span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后在file.js的data里初始化logs</p>
<div id="crayon-5d8980d530c31220603079" 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: {
logs: []
},</textarea></div>
<div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;">
<table class="crayon-table" style="margin-left: -20px;">
<tbody><tr class="crayon-row">
<td class="crayon-nums " data-settings="hide">
<div class="crayon-nums-content" style="font-size: 14px !important; line-height: 20px !important;"><div class="crayon-num" data-line="crayon-5d8980d530c31220603079-1" style="height: 20px;">1</div><div class="crayon-num" data-line="crayon-5d8980d530c31220603079-2" style="height: 20px;">2</div><div class="crayon-num" data-line="crayon-5d8980d530c31220603079-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-5d8980d530c31220603079-1"><span class="crayon-h"> </span><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-5d8980d530c31220603079-2"><span class="crayon-h"> </span><span class="crayon-v">logs</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-5d8980d530c31220603079-3"><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
</tr>
</tbody></table>
</div>
</div><p>然后再在file.js的生命周期函数onLoad里把缓存里的日志取出来通过setData赋值给data里的logs</p>
<div id="crayon-5d8980d530c33124631533" 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;"> onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(log => {
return util.formatTime(new Date(log))
})
})