-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1118 lines (731 loc) · 115 KB
/
index.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
<!DOCTYPE HTML>
<html>
<head><meta name="generator" content="Hexo 3.8.0">
<meta charset="UTF-8">
<title>隔壁小陈</title>
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<meta name="author" content="小陈">
<meta name="description" content="个人博客">
<meta property="og:type" content="website">
<meta property="og:title" content="隔壁小陈">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="隔壁小陈">
<meta property="og:description" content="个人博客">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="隔壁小陈">
<meta name="twitter:description" content="个人博客">
<link rel="icon" href="/img/favicon.ico">
<link rel="apple-touch-icon" href="/img/jacman.jpg">
<link rel="apple-touch-icon-precomposed" href="/img/jacman.jpg">
<link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
<header>
<div>
<div id="imglogo">
<a href="/"><img src="/img/logo.png" alt="隔壁小陈" title="隔壁小陈"></a>
</div>
<div id="textlogo">
<h1 class="site-name"><a href="/" title="隔壁小陈">隔壁小陈</a></h1>
<h2 class="blog-motto"></h2>
</div>
<div class="navbar"><a class="navbutton navmobile" href="#" title="菜单">
</a></div>
<nav class="animated">
<ul>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/archives">时间轴</a></li>
<li><a href="/about">关于小陈</a></li>
<li>
<form class="search" action="https://www.baidu.com/s" target="_blank">
<label>Search</label>
<input name="s" type="hidden" value=""><input type="text" name="q" size="30" placeholder="搜索"><br>
</form>
</li>
</ul>
</ul></nav>
</div>
</header>
<div id="container">
<div id="main">
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/02/12/weixin8/" title="微信小程序 | UI框架&组件库" itemprop="url">微信小程序 | UI框架&组件库</a>
</h1>
<p class="article-author">By
<a href="/about" title="小陈" target="_blank" itemprop="author">小陈</a>
</p><p class="article-time">
<time datetime="2019-02-11T19:43:59.000Z" itemprop="datePublished"> 发表于 2019-02-12</time>
</p>
</header>
<div class="article-content">
<p>想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不乏一些优秀好用的框架/组件库。</p>
<h2 id="1：WeUI-小程序–使用教程"><a href="#1：WeUI-小程序–使用教程" class="headerlink" title="1：WeUI 小程序–使用教程"></a>1：WeUI 小程序–使用教程</h2><blockquote>
<p><a href="https://weui.io/" target="_blank" rel="noopener">https://weui.io/</a></p>
</blockquote>
<p>官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大开发人员的欢迎。</p>
<p><img src="https://upload-images.jianshu.io/upload_images/5640239-82f8e61acddff533.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700" alt="在这里插入图片描述"></p>
<h2 id="2：美团小程序框架mpvue"><a href="#2：美团小程序框架mpvue" class="headerlink" title="2：美团小程序框架mpvue"></a>2：美团小程序框架mpvue</h2><blockquote>
<p>Github：<a href="https://github.com/Meituan-Dianping/mpvue" target="_blank" rel="noopener">https://github.com/Meituan-Dianping/mpvue</a><br>官网： <a href="http://mpvue.com/" target="_blank" rel="noopener">http://mpvue.com/</a></p>
</blockquote>
<p>官方介绍：mpvue是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心，mpvue修改了 Vue.js的 runtime和 compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。</p>
<p><img src="https://upload-images.jianshu.io/upload_images/5640239-8b39f4afe3d6612a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700" alt="在这里插入图片描述"></p>
<h2 id="3：组件化开发框架wepy"><a href="#3：组件化开发框架wepy" class="headerlink" title="3：组件化开发框架wepy"></a>3：组件化开发框架wepy</h2><blockquote>
<p>Github地址: <a href="https://github.com/Tencent/wepy" target="_blank" rel="noopener">https://github.com/Tencent/wepy</a><br>官网地址： <a href="https://tencent.github.io/wepy" target="_blank" rel="noopener">https://tencent.github.io/wepy</a></p>
</blockquote>
<p>官方介绍：组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题,支持使用第三方 npm 资源，自动处理 npm 资源之间的依赖关系，完美兼容所有无平台依赖的 npm 资源包.<br><img src="https://upload-images.jianshu.io/upload_images/5640239-1e64e4c7e2b9b121.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700" alt="在这里插入图片描述"></p>
<h2 id="4：官方框架MINA"><a href="#4：官方框架MINA" class="headerlink" title="4：官方框架MINA"></a>4：官方框架MINA</h2><blockquote>
<p>地址：<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html" target="_blank" rel="noopener">https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html</a></p>
</blockquote>
<p>官方介绍：框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。</p>
<p><img src="https://upload-images.jianshu.io/upload_images/5640239-7918b16afedbcec1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700" alt="在这里插入图片描述"></p>
<h2 id="5：Tina-js-一款轻巧的渐进式微信小程序框架"><a href="#5：Tina-js-一款轻巧的渐进式微信小程序框架" class="headerlink" title="5：Tina.js 一款轻巧的渐进式微信小程序框架"></a>5：Tina.js 一款轻巧的渐进式微信小程序框架</h2><blockquote>
<p>Tina.js 开源框架地址： <a href="https://github.com/tinajs/tina" target="_blank" rel="noopener">https://github.com/tinajs/tina</a></p>
</blockquote>
<p>官方介绍：是一款轻巧的渐进式微信小程序框架，保留 MINA (微信小程序官方框架) 的大部分 API 设计；无论你有无小程序开发经验，都可以轻松过渡上手。</p>
<p><img src="https://upload-images.jianshu.io/upload_images/5640239-3e05e476102e9576.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700" alt="在这里插入图片描述"></p>
<h2 id="6：前端框架weweb"><a href="#6：前端框架weweb" class="headerlink" title="6：前端框架weweb"></a>6：前端框架weweb</h2><blockquote>
<p>地址: <a href="https://github.com/wdfe/weweb" target="_blank" rel="noopener">https://github.com/wdfe/weweb</a></p>
</blockquote>
<p>官方介绍：weweb是一个兼容小程序语法的前端框架，你可以用小程序的写法，来写web应用。如果你已经有小程序了，通过它你可以将你的小程序运行在浏览器中。</p>
<h2 id="7：微信UI组件库-iView-Weapp"><a href="#7：微信UI组件库-iView-Weapp" class="headerlink" title="7：微信UI组件库 iView Weapp"></a>7：微信UI组件库 iView Weapp</h2><blockquote>
<p><a href="https://weapp.iviewui.com/" target="_blank" rel="noopener">https://weapp.iviewui.com/</a></p>
</blockquote>
<p>介绍：iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。</p>
<p><img src="https://upload-images.jianshu.io/upload_images/5640239-0199c16af08dcf53.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700" alt="在这里插入图片描述"></p>
<h2 id="8：ZanUI-WeApp-–-一个颜值高、好用、易扩展的微信小程序-UI-库"><a href="#8：ZanUI-WeApp-–-一个颜值高、好用、易扩展的微信小程序-UI-库" class="headerlink" title="8：ZanUI-WeApp – 一个颜值高、好用、易扩展的微信小程序 UI 库"></a>8：ZanUI-WeApp – 一个颜值高、好用、易扩展的微信小程序 UI 库</h2><blockquote>
<p><a href="https://cnodejs.org/topic/589d625a5c8036f7019e7a4a" target="_blank" rel="noopener">https://cnodejs.org/topic/589d625a5c8036f7019e7a4a</a></p>
</blockquote>
<p>官方介绍：ZanUI-WeApp结合了微信的视觉规范，为用户提供更加统一的使用感受。 包含 badge、btn、等共计 17 类组件或元素。</p>
<p><a href="https://blog.csdn.net/qq_36538012/article/details/80882709" target="_blank" rel="noopener">原文</a></p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/微信小程序/">微信小程序</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/02/12/weixin7/" title="update之微信小程序BUG" itemprop="url">update之微信小程序BUG</a>
</h1>
<p class="article-author">By
<a href="/about" title="小陈" target="_blank" itemprop="author">小陈</a>
</p><p class="article-time">
<time datetime="2019-02-11T19:43:54.000Z" itemprop="datePublished"> 发表于 2019-02-12</time>
</p>
</header>
<div class="article-content">
<p>今天在赶着一个项目，突然发现小程序之中使用update不行。数据不能更新<br>这就是我的代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">const db = wx.cloud.database()</span><br><span class="line"> const _ = db.command</span><br><span class="line"> // 1、首先看xxx集合里面有没有存在这个人</span><br><span class="line"> db.collection('xxx').where({</span><br><span class="line"> shId: res.currentTarget.dataset.xinxi._openid</span><br><span class="line"> }).get({</span><br><span class="line"> success: function(e) {</span><br><span class="line"> // 2、没有的话add一个用户</span><br><span class="line"> if (e.data.length == 0) {</span><br><span class="line"> db.collection('jifen').add({</span><br><span class="line"> data: {</span><br><span class="line"> ~~~~~~~~~~~~~~~</span><br><span class="line"> },</span><br><span class="line"> // 添加成功、然后修改审核里面的东西</span><br><span class="line"> success(al) {</span><br><span class="line"> db.collection(xxx).where({</span><br><span class="line"> ~~~~~~~~~~~~~~~~~~</span><br><span class="line"> }).update({</span><br><span class="line"> data: {</span><br><span class="line"> ~~~</span><br><span class="line"> },</span><br><span class="line"> // 失败的话，直接showToast/成功跳转到原页面</span><br><span class="line"> success(value2) {</span><br><span class="line"> if (value2.stats.updated == 0) {</span><br><span class="line"> ~~~</span><br><span class="line"> } else {</span><br><span class="line"> ~~~</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> //3、存在这个用户，直接去更新里面的数据 </span><br><span class="line"> } else {</span><br><span class="line"> ~~~</span><br><span class="line"> })</span><br></pre></td></tr></table></figure>
<p>结果当然是更新不了数据呀~</p>
<p>以下看了<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/update.html" target="_blank" rel="noopener">官网</a>只有自己的理解：<br>where适用于对于集合的更新，对于单条数据并没有作用<br>所以做出了一下修改</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">const db = wx.cloud.database()</span><br><span class="line"> const _ = db.command</span><br><span class="line"> // 1、首先看xxx集合里面有没有存在这个人</span><br><span class="line"> db.collection('xxx').where({</span><br><span class="line"> shId: res.currentTarget.dataset.xinxi._openid</span><br><span class="line"> }).get({</span><br><span class="line"> success: function(e) {</span><br><span class="line"> // 2、没有的话add一个用户</span><br><span class="line"> if (e.data.length == 0) {</span><br><span class="line"> db.collection('jifen').add({</span><br><span class="line"> data: {</span><br><span class="line"> ~~~~~~~~~~~~~~~</span><br><span class="line"> },</span><br><span class="line"> // 添加成功、然后修改审核里面的东西</span><br><span class="line"> success(al) {</span><br><span class="line"> db.collection(xxx).doc(_id).update({</span><br><span class="line"> data: {</span><br><span class="line"> ~~~</span><br><span class="line"> },</span><br><span class="line"> // 失败的话，直接showToast/成功跳转到原页面</span><br><span class="line"> success(value2) {</span><br><span class="line"> if (value2.stats.updated == 0) {</span><br><span class="line"> ~~~</span><br><span class="line"> } else {</span><br><span class="line"> ~~~</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> //3、存在这个用户，直接去更新里面的数据 </span><br><span class="line"> } else {</span><br><span class="line"> ~~~</span><br><span class="line"> })</span><br></pre></td></tr></table></figure>
<p>解析</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">db.collection('todos').doc('todo-identifiant-aleatoire').update({</span><br><span class="line"> // data 传入需要局部更新的数据</span><br><span class="line"> data: {</span><br><span class="line"> // 表示将 done 字段置为 true</span><br><span class="line"> done: true</span><br><span class="line"> },</span><br><span class="line"> success(res) {</span><br><span class="line"> console.log(res.data)</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>问题成功解决，数据修改成功</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/微信小程序/">微信小程序</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/02/12/weixin6/" title="微信小程序 | WeUI" itemprop="url">微信小程序 | WeUI</a>
</h1>
<p class="article-author">By
<a href="/about" title="小陈" target="_blank" itemprop="author">小陈</a>
</p><p class="article-time">
<time datetime="2019-02-11T19:43:50.000Z" itemprop="datePublished"> 发表于 2019-02-12</time>
</p>
</header>
<div class="article-content">
<p>WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含按钮button、组件cell、弹框dialog、 进度条progress、 提示toast、文章article、弹出菜单actionsheet、图标icon等各式元素。</p>
<h2 id="1、GitHub网址：https-github-com-weui-weui-wxss"><a href="#1、GitHub网址：https-github-com-weui-weui-wxss" class="headerlink" title="1、GitHub网址：https://github.com/weui/weui-wxss/"></a>1、GitHub网址：<a href="https://github.com/weui/weui-wxss/" target="_blank" rel="noopener">https://github.com/weui/weui-wxss/</a></h2><h2 id="2、如何使用"><a href="#2、如何使用" class="headerlink" title="2、如何使用"></a>2、如何使用</h2><p>使用git克隆到本地</p>
<blockquote>
<p>git clone <a href="https://github.com/weui/weui-wxss/" target="_blank" rel="noopener">https://github.com/weui/weui-wxss/</a></p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/20190114113322191.png" alt="在这里插入图片描述"></p>
<p>可以看到如下目录：</p>
<p><img src="https://img-blog.csdnimg.cn/2019011411342226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<p>我们只需要将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下：</p>
<p><img src="https://img-blog.csdnimg.cn/20190114113505460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<p>新建微信小程序项目，将weui.wxss文件导入到小程序项目的根目录下：</p>
<p><img src="https://img-blog.csdnimg.cn/20190114114419621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<p>在项目中引用：在app.wxss中加入weui.wxss的引用- @import ‘weui.wxss’;</p>
<p><img src="https://img-blog.csdnimg.cn/20190114114735410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>然后报错：<br><img src="https://img-blog.csdnimg.cn/20190114115842949.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br>还需将base和widget引入<br><img src="https://img-blog.csdnimg.cn/20190114115927816.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h2 id="使用WeUI样式说明："><a href="#使用WeUI样式说明：" class="headerlink" title="使用WeUI样式说明："></a>使用WeUI样式说明：</h2><p>1、根组件使用class=”page”</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><view class="page"></span><br></pre></td></tr></table></figure>
<p>2、页面骨架组件使用class=”page__xxx”(注意是两个下划线)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><view class="page__hd"></span><br><span class="line"> <view class="page__title">标题</view></span><br><span class="line"> <view class="page__desc">文章</view></span><br><span class="line"></view></span><br></pre></td></tr></table></figure>
<p>3、其他组件都已weui-开头后接组件名称，例如class=”weui-footer”</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><view class="weui-footer">我是页脚</view></span><br></pre></td></tr></table></figure>
<p>4、组件的子组件样式，例如view.weui-footer组件还有链接和版权信息。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><view class="weui-footer"></span><br><span class="line"> <view class='weui-footer__links'></span><br><span class="line"> <navigator url='' class='weui-footer__link'>隔壁小陈</navigator> </span><br><span class="line"> </view></span><br><span class="line"> <view class='weui-footer__text'>Email:[email protected]</view></span><br><span class="line"></view></span><br></pre></td></tr></table></figure>
<p><img src="https://img-blog.csdnimg.cn/20190114120121555.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h2 id="WeUI标签预览（具体应以WeUI样式标签为准）"><a href="#WeUI标签预览（具体应以WeUI样式标签为准）" class="headerlink" title="WeUI标签预览（具体应以WeUI样式标签为准）"></a>WeUI标签预览（具体应以WeUI样式标签为准）</h2><p><img src="https://img-blog.csdnimg.cn/20190114120507795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br><strong>在线体验：</strong><br><img src="https://img-blog.csdnimg.cn/20190114120527690.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"><br><strong>1、表单：</strong></p>
<p>Button：</p>
<p>weui-btn：按钮</p>
<p>weui-btn mini-btn：小按钮</p>
<p>list：</p>
<p>weui-cells__title：列表组件标题</p>
<p>weui-cell__bd：标题文字</p>
<p>weui-cell__ft： 说明文字</p>
<p>Input：</p>
<p>weui-cells__title：列表组件标题</p>
<p>weui-check： 单选</p>
<p>weui-icon-radio： 单选图标</p>
<p>weui-cell__bd： 标题文字说明</p>
<p>weui-label： 列表</p>
<p>weui-input： 输入</p>
<p>weui-vcode-btn： 获取验证码按钮</p>
<p>weui-vcode-img： 验证码图片</p>
<p>weui-textarea：请输入文本</p>
<p>weui-select： 选择</p>
<p>Slider：滑动（参考小程序文档）</p>
<p>Uploader：</p>
<p>weui-uploader：上传</p>
<p>weui-uploader__title：图片上传</p>
<p>weui-uploader__info： 上传个数</p>
<p>weui-uploader__file： 上传文件</p>
<p>weui-uploader__img：上传图片</p>
<p><strong>2、基础组件</strong></p>
<p>Article：</p>
<p>weui-article：文章标签</p>
<p>weui-article__h1：标题</p>
<p>weui-article__title：章标题</p>
<p>weui-article__section：文章区域</p>
<p>weui-article__h3：节标题</p>
<p>weui-article__p：文字</p>
<p>weui-article__img：图片</p>
<p>Badge：徽章</p>
<p>weui-cells__title：列表组件标题</p>
<p>weui-cell__bd：组件列表行</p>
<p>weui-badge：徽章</p>
<p>Flex：布局</p>
<p>weui-flex：布局区域</p>
<p>weui-flex__item：布局选项</p>
<p>Footer：页脚</p>
<p>weui-footer：页脚名称</p>
<p>weui-footer__text：页脚内容</p>
<p>weui-footer__links：页脚链接</p>
<p>Gallery：画廊（参考小程序文档）</p>
<p>Grid：九宫格</p>
<p>weui-grids：九宫格区域</p>
<p>weui-grid__icon：九宫格图标</p>
<p>weui-grid__label：九宫格列表</p>
<p>Icons：图标</p>
<p>icon-box：图表区域</p>
<p>icon-box__title：图标标题</p>
<p>icon-box__desc：图标说明</p>
<p>Loadmore：加载更多</p>
<p>weui-loading：加载更多标签</p>
<p>weui-loadmore__tips：正在加载</p>
<p>Panel：面板</p>
<p>weui-panel__hd：面板页头</p>
<p>weui-panel__bd：面板主体</p>
<p>weui-media-box__title：面板标题</p>
<p>weui-media-box__desc：面板说明</p>
<p>weui-media-box__info__meta：面板底部文字说明</p>
<p>Preview：表单预览</p>
<p>weui-form-preview：表单预览区域</p>
<p>weui-form-preview__hd：表单预览页头</p>
<p>weui-form-preview__bd：表单预览主体</p>
<p>weui-form-preview__item：表单预览列表区域</p>
<p>weui-form-preview__label：表单预览列表标题</p>
<p>weui-form-preview__value_in-hd：表单预览页头内容</p>
<p>weui-form-preview__value：表单预览列表内容</p>
<p>Progress：进度条</p>
<p>weui-progress：进度条标签</p>
<p>weui-progress__bar：进度条</p>
<p>weui-progress__opr：进度条图标</p>
<p><strong>3、操作反馈</strong></p>
<p>ActionSheet：弹出式菜单</p>
<p>weui-btn-area：按钮标签区域</p>
<p>Dialog：对话框</p>
<p>weui-btn-area：按钮标签区域</p>
<p>weui-btn：按钮</p>
<p>Msg：提示页</p>
<p>weui-btn-area：按钮标签区域</p>
<p>weui-btn：按钮</p>
<p>weui-msg__icon-area：提示图标</p>
<p>weui-msg__text-area：提示区域</p>
<p>weui-msg__title：提示标题</p>
<p>weui-msg__desc：提示说明</p>
<p>weui-msg__opr-area：提示后操作区域</p>
<p>weui-msg__extra-area：额外区域</p>
<p>Picker：选择器</p>
<p>weui-btn-area：按钮区域</p>
<p>Toast：弹出式提示</p>
<p>weui-btn-area：按钮标签区域</p>
<p>weui-btn：按钮</p>
<p><strong>4、导航相关：</strong></p>
<p>Navbar：头部导航</p>
<p>weui-navbar：导航标签</p>
<p>weui-navbar__title：导航标题</p>
<p>weui-navbar__slider：导航滑块</p>
<p>weui-tab__panel：导航面板</p>
<p>weui-tab__content：导航内容</p>
<p>Tabbar：底部导航（参考小程序文档）</p>
<p><strong>5、搜索相关</strong></p>
<p>Searchbar：搜索栏</p>
<p>weui-search-bar：搜索栏区域</p>
<p>weui-search-bar__form：搜索栏表单</p>
<p>weui-search-bar__label：搜索栏列表</p>
<p>weui-icon-search：搜索栏图标</p>
<p>weui-search-bar__text：搜索栏文字</p>
<p>weui-cell__bd：搜索栏文本</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/微信小程序/">微信小程序</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/02/12/weixin5/" title="微信小程序 | 模板消息" itemprop="url">微信小程序 | 模板消息</a>
</h1>
<p class="article-author">By
<a href="/about" title="小陈" target="_blank" itemprop="author">小陈</a>
</p><p class="article-time">
<time datetime="2019-02-11T19:43:35.000Z" itemprop="datePublished"> 发表于 2019-02-12</time>
</p>
</header>
<div class="article-content">
<h2 id="1-传统方式实现模板消息"><a href="#1-传统方式实现模板消息" class="headerlink" title="1.传统方式实现模板消息"></a>1.传统方式实现模板消息</h2><p>1、<strong>获取openId</strong></p>
<p>2、<strong>获取模板ID</strong></p>
<p><em>有两个方法可以获取模版ID</em></p>
<ul>
<li>通过模版消息管理接口获取模版ID</li>
<li>在微信公众平台手动配置获取模版ID</li>
</ul>
<p>登录<a href="https://mp.weixin.qq.com" target="_blank" rel="noopener">https://mp.weixin.qq.com</a> 获取模板，如果没有合适的模板，可以申请添加新模板，审核通过后可使用</p>
<p>3、<strong>获取access_token</strong></p>
<p>access_token 的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的 access_token 失效</p>
<p>公众平台的 API 调用所需的 access_token 的使用及生成方式说明：</p>
<blockquote>
<p> <strong>1.</strong> 为了保密 appsecrect，第三方需要一个 access_token 获取和刷新的中控服务器。而其他业务逻辑服务器所使用的access_token 均来自于该中控服务器，不应该各自去刷新，否则会造成 access_token 覆盖而影响业务；<br><strong>2.</strong> 目前 access_token 的有效期通过返回的 expires_in来传达，目前是7200秒之内的值。中控服务器需要根据这个有效时间提前去刷新新access_token。在刷新过程中，中控服务器对外输出的依然是老access_token，此时公众平台后台会保证在刷新短时间内，新老 access_token 都可用，这保证了第三方业务的平滑过渡；<br><strong>3.</strong> access_token 的有效时间可能会在未来有调整，所以中控服务器不仅需要内部定时主动刷新，还需要提供被动刷新access_token 的接口，这样便于业务服务器在 API 调用获知 access_token 已超时的情况下，可以触发access_token 的刷新流程。</p>
</blockquote>
<p>开发者可以使用 AppID 和 AppSecret 调用本接口来获取 access_token。AppID 和 AppSecret 可登录微信公众平台官网-设置-开发设置中获得（需要已经绑定成为开发者，且帐号没有异常状态）。AppSecret 生成后请自行保存，因为在公众平台每次生成查看都会导致 AppSecret 被重置。注意调用所有微信接口时均需使用 https 协议。如果第三方不使用中控服务器，而是选择各个业务逻辑点各自去刷新 access_token，那么就可能会产生冲突，导致服务不稳定</p>
<p><strong>以上内容是微信开发文档给出的access_token的说明，总的来说就是两点</strong></p>
<p>（1）access_token是发送模板消息的凭证，需要用微信小程序的AppID 和AppSecret 调用接口来获取，有效时间为2小时<br>（2）如果在此获取access_token则会导致前一个access_token失效，有多个公众号和小程序的开发者一定要注意这一点！</p>
<p>接口地址：</p>
<blockquote>
<p><a href="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET" target="_blank" rel="noopener">https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET</a></p>
</blockquote>
<blockquote>
<p>GET请求</p>
</blockquote>
<p>参数说明 :<br>| 参数|必填 | 说明|<br>|–|–| –|<br>| grant_type | 是 | 获取 access_token 填写 client_credential |<br>| appid | 是 | 第三方用户唯一凭证 |<br>| secret | 是 | 第三方用户唯一凭证密钥，即appsecret |</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function onRequest(request, response, modules) {</span><br><span class="line">var http = modules.oHttp;</span><br><span class="line">//发起Get请求</span><br><span class="line">http('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=XXX&secret=XXX', function (error, res, body) {</span><br><span class="line"> response.send(body);</span><br><span class="line">});</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>结果：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Response Body</span><br><span class="line"> {</span><br><span class="line"> "code": 200,</span><br><span class="line"> "msg":</span><br><span class="line"> {"access_token":"6_R8kOFxRLeRtWOq_haIU29XB0hbAoKxFGRqQTZt_HhzCSEvT_xDJ4WLgf9A_dt2pRTCugfUk7IkxR2sfu5zckCwKKWEghCtqlrrQlhdJmCxmkBAaDEdW7AU98D23rUJO5PYruNYOLQ3cpH3iAVTNiADAECW","expires_in":7200}</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p><strong>发送模板消息</strong><br>接口地址：(ACCESS_TOKEN 需换成上文获取到的 access_token)</p>
<blockquote>
<p><a href="https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKEN" target="_blank" rel="noopener">https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKEN</a></p>
</blockquote>
<blockquote>
<p>POST请求</p>
</blockquote>
<p>POST参数说明：<br>| 参数|必填 | 说明|<br>|–|–| –|<br>| touser | 是 | 接收者（用户）的 openid |<br>| template_id | 是 | 所需下发的模板消息的id |<br>| page | 否 | 点击模板卡片后的跳转页面，仅限本小程序内的页面。支持带参数,（示例index?foo=bar）。该字段不填则模板无跳转。 |<br>| form_id | 是 | 表单提交场景下，为 submit 事件带上的 formId；支付场景下，为本次支付的 prepay_id |<br>| data | 是 | 模板内容，不填则下发空模板 |<br>| color| 否 | 模板内容字体的颜色，不填默认黑色 |<br>| emphasis_keyword| 否 | 模板需要放大的关键词，不填则默认无放大 |</p>
<p>formid说明：页面的 <form> 组件，属性report-submit为true时，可以声明为需发模板消息，此时点击按钮提交表单可以获取formId</form></p>
<p>代码:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">var temp = {</span><br><span class="line">"touser": touser,//用户的openid</span><br><span class="line">"template_id": template_id,//模板id</span><br><span class="line">"page": "",</span><br><span class="line">"form_id": formid,//表单id</span><br><span class="line">"data": {</span><br><span class="line">"keyword1": {</span><br><span class="line">"value": title,</span><br><span class="line">"color": "#173177"</span><br><span class="line">},</span><br><span class="line">"keyword2": {</span><br><span class="line">"value": gettime()</span><br><span class="line">},</span><br><span class="line">},</span><br><span class="line">"emphasis_keyword": "keyword1.DATA" //将keyword1放大</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>测试效果：<br><img src="https://img-blog.csdn.net/20180126212459841?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFveHVuamk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="在这里插入图片描述"></p>
<h2 id="2、基于Bmob后端云的模板消息实现"><a href="#2、基于Bmob后端云的模板消息实现" class="headerlink" title="2、基于Bmob后端云的模板消息实现"></a>2、基于Bmob后端云的模板消息实现</h2><p>第一种方法实现起来过于繁琐，在使用过程中也要中间服务器的帮助，如果没有中间服务器，或者服务器端的代码不太熟悉，那么Bmob后端云则可以帮助你实现你要的功能</p>
<p>只需要下载按照官网文档在小程序内初始化好Bmob，那么就可以调用Bmob模板消息的方法，如下所示：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">function send(title, formid, touser){</span><br><span class="line"> var Bmob = require('bmob.js');</span><br><span class="line"> var temp = {</span><br><span class="line"> "touser": touser,</span><br><span class="line"> "template_id": "ClYq9lc8bZh26uM993NNIknasAVBdk0wSYnDrkClK40",</span><br><span class="line"> "page": "",</span><br><span class="line"> "form_id": formid,</span><br><span class="line"> "data": {</span><br><span class="line"> "keyword1": {</span><br><span class="line"> "value": title,</span><br><span class="line"> "color": "#173177"</span><br><span class="line"> },</span><br><span class="line"> "keyword2": {</span><br><span class="line"> "value": gettime()</span><br><span class="line"> },</span><br><span class="line"> </span><br><span class="line"> },</span><br><span class="line"> "emphasis_keyword": "keyword1.DATA"</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> Bmob.sendMessage(temp).then(function (obj) {</span><br><span class="line"> console.log('发送成功');</span><br><span class="line"> },</span><br><span class="line"> function (err) {</span><br><span class="line"> common.showTip('失败' + err)</span><br><span class="line"> });</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这样模板消息就解决了！！！</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/微信小程序/">微信小程序</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/02/12/weixin4/" title="微信小程序 | template" itemprop="url">微信小程序 | template</a>
</h1>
<p class="article-author">By
<a href="/about" title="小陈" target="_blank" itemprop="author">小陈</a>
</p><p class="article-time">
<time datetime="2019-02-11T19:43:30.000Z" itemprop="datePublished"> 发表于 2019-02-12</time>
</p>
</header>
<div class="article-content">
<h2 id="模板template的使用"><a href="#模板template的使用" class="headerlink" title="模板template的使用"></a>模板template的使用</h2><p>如下图，我们经常做这样的列表页，课程搜索结果页和课程列表页结构是完全一样的，非常适合使用模板来完成页面搭建。</p>
<p>这样我们就不用写那些重复的代码了,而且修改界面的时候也只需要改动模板一个地方</p>
<p>一、定义模板<br>1、新建一个template文件夹用来管理项目中所有的模板；<br>2、新建一个personCourseTmp.wxml文件来定义模板； </p>
<p>3、使用name属性，作为模板的名字。然后在<template>内定义代码片段。</template></p>
<p>那我们开始实现吧,建模板2个文件</p>
<p>personCourseTmp.wxml</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><template name="personCourseItemTmp"></span><br><span class="line"> <view class="courses-list" style='background-image: url("{{cardImage}}")'></span><br><span class="line"> </span><br><span class="line"> <view class="money-border"> ￥</span><br><span class="line"> <text class="money">{{cardMoney}}</text>/课时</view></span><br><span class="line"> </span><br><span class="line"> <view class="name"></span><br><span class="line"> <text class="ename">GillMo</text></span><br><span class="line"> <text class="cname">.小川</text></span><br><span class="line"> </view></span><br><span class="line"> </span><br><span class="line"> <view class="mark"></span><br><span class="line"> <view>{{cardMark}}</view></span><br><span class="line"> </view></span><br><span class="line"> </span><br><span class="line"> </view></span><br><span class="line"></template></span><br></pre></td></tr></table></figure>
<p>样式文件personCourseTmp.wxss</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">.courses-list {</span><br><span class="line"> height: 342rpx;</span><br><span class="line"> margin: 40rpx auto;</span><br><span class="line"> border-top: 2rpx solid #f0f0f0;</span><br><span class="line"> margin-top: 10rpx;</span><br><span class="line"> flex-direction: column;</span><br><span class="line"> align-items: flex-start;</span><br><span class="line"> width: 670rpx;</span><br><span class="line"> border-radius: 8px;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">.money-border {</span><br><span class="line"> font-family: PingFangSC-Semibold;</span><br><span class="line"> font-size: 28rpx;</span><br><span class="line"> color: #fff;</span><br><span class="line"> letter-spacing: -0.41px;</span><br><span class="line"> height: 56rpx;</span><br><span class="line"> margin-top: 20rpx;</span><br><span class="line"> margin-left: 20rpx;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">.money {</span><br><span class="line"> font-size: 40rpx;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">.name {</span><br><span class="line"> margin-top: 158rpx;</span><br><span class="line"> margin-left: 20rpx;</span><br><span class="line"> font-family: PingFangSC-Semibold;</span><br><span class="line"> color: #fff;</span><br><span class="line"> letter-spacing: -0.41px;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">.ename {</span><br><span class="line"> font-size: 40rpx;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">.cname {</span><br><span class="line"> font-size: 30rpx;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">.mark {</span><br><span class="line"> font-family: PingFangSC-Regular;</span><br><span class="line"> font-size: 28rpx;</span><br><span class="line"> color: #fff;</span><br><span class="line"> margin-left: 20rpx;</span><br><span class="line"> letter-spacing: -0.41px;</span><br><span class="line"> margin-bottom: 18rpx;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>那我们如何在页面上使用呢,引入样式文件和视图文件</p>
<p>比如我们要在Course.wxss上面引入样式文件</p>
<blockquote>
<p>@import “../template/personCourseTmp.wxss”;</p>
</blockquote>
<p>只需要在Course.wxss里面加入上面的代码</p>
<p>我们要在Course.wxml上面引入视图文件</p>
<blockquote>
<p> < import src=”../template/personCourseTmp.wxml” /></p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><block wx:for="{{goodlist}}" wx:key="idx"></span><br><span class="line"> <template is="personCourseItemTmp" data="{{...item}}"></template></span><br><span class="line"> </navigator></span><br><span class="line"></block></span><br></pre></td></tr></table></figure>
<p>传数据时item前面加三个点… 模板里面就不需要写item了,</p>
<p>如果要传多个数据到模板</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><view class="tab-list" wx:for="{{list}}" wx:key="index"></span><br><span class="line"> <template is="day-tab" data="{{item,index:index,currentTarget:currentTarget}}" wx:key="index"></template></span><br><span class="line"> </view></span><br></pre></td></tr></table></figure>
<p>用逗号分开,item 是对象,index是单个数据,要用键值对,template就介绍到这来</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/微信小程序/">微信小程序</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/02/12/weixin3/" title="微信小程序| ES6 箭头函数" itemprop="url">微信小程序| ES6 箭头函数</a>
</h1>
<p class="article-author">By
<a href="/about" title="小陈" target="_blank" itemprop="author">小陈</a>
</p><p class="article-time">
<time datetime="2019-02-11T19:43:26.000Z" itemprop="datePublished"> 发表于 2019-02-12</time>
</p>
</header>
<div class="article-content">
<p><strong>解决问题：</strong><br>在微信小程序的开发工具中，会发现里面已经有ES6语法转换ES5的设置，但是当你使用了箭头函数在里面使用this.setData会发现报错，这可能又是腾讯莫名的BUG了，建议换回ES5语法使用function(){}写法较为妥当。<br><img src="https://img-blog.csdnimg.cn/20190207152644298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<p>1、单参数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function cheng(a=3){</span><br><span class="line"> return a*a;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">let cheng = (a=3) => a*a; // 箭头左边为参数 箭头右边为返回值</span><br><span class="line">console.log(cheng(9));</span><br></pre></td></tr></table></figure>
<p>2、多参数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function add(a,b){</span><br><span class="line"> return a+b;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">let add = (a,b) => a+b; // 默认返回值</span><br><span class="line">console.log(add(3,9));</span><br></pre></td></tr></table></figure>
<p>3、无返回值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function add(a,b){</span><br><span class="line"> console.log(a+b);</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">let add = (a,b) => {console.log(a+b)}; // 如果没有返回值，需要加{}</span><br><span class="line">add(3,9);</span><br></pre></td></tr></table></figure>
<p>4、多行</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">function add(a,b){</span><br><span class="line"> console.log(a+b);</span><br><span class="line"> return a+b;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">let add = (a,b) => {</span><br><span class="line"> console.log(a+b);</span><br><span class="line"> return a+b;</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">console.log(add(3,9));</span><br></pre></td></tr></table></figure>
<p><strong>除了简洁以外，为啥需要改变原来的习惯去使用箭头函数？</strong></p>
<p>它对this的处理与一般的普通函数不一样，箭头函数的this始终指向函数定义时的this,而非执行时</p>
<p><strong>例如</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">var obj = {</span><br><span class="line"> x:1,</span><br><span class="line"> func: function(){ console.log(this.x) }, // 此处的 this 代表 obj</span><br><span class="line"> test: function(){</span><br><span class="line"> setTimeout(function(){</span><br><span class="line"> alert(this); // 因为使用了异步,在运行过程中，this发生了指针转移，不再指向obj,而是指向全局 Window对象</span><br><span class="line"> // [object Window]</span><br><span class="line"> this.func();</span><br><span class="line"> },1000);</span><br><span class="line"> }</span><br><span class="line">};、</span><br><span class="line">obj.test(); </span><br><span class="line"></span><br><span class="line">//报错</span><br><span class="line"> // TypeError: this.func is not a function</span><br></pre></td></tr></table></figure>
<p>箭头函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">var obj = {</span><br><span class="line"> x: 1,</span><br><span class="line"> func: function(){ console.log(this.x) },</span><br><span class="line"> test: function(){</span><br><span class="line"> setTimeout(() => {</span><br><span class="line"> alert(this); // [object Object] 此处的this指向obj</span><br><span class="line"> this.func();</span><br><span class="line"> },1000);</span><br><span class="line"> }</span><br><span class="line">};</span><br><span class="line"> </span><br><span class="line">obj.test(); // 这回this就指向obj了</span><br></pre></td></tr></table></figure>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/微信小程序/">微信小程序</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/02/12/weixin2/" title="微信小程序 | promise（上）" itemprop="url">微信小程序 | promise（上）</a>
</h1>
<p class="article-author">By
<a href="/about" title="小陈" target="_blank" itemprop="author">小陈</a>
</p><p class="article-time">
<time datetime="2019-02-11T19:43:22.000Z" itemprop="datePublished"> 发表于 2019-02-12</time>
</p>
</header>
<div class="article-content">
<p>很多人都不太了解，到底在什么时候调用promise呢？</p>
<ol>
<li>很多调用是异步（发起动作和成功或者失败时调用的函数是两个函数，调用方面没有调用与被调用的关系）的。</li>
<li>从业务逻辑上说，这些 异步调用按照一个调用顺序调用，需要在第一个成功后，调用第二个，第二个成功后调用第三个，以此类推。</li>
<li>当业务逻辑用的非常复杂的时，代码逻辑性变得很差。</li>
</ol>
<p>首先一段代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">// 当参数a大于10且参数fn2是一个方法时 执行fn2</span><br><span class="line">function fn1(a, fn2) {</span><br><span class="line"> if (a > 10 && typeof fn2 == 'function') {</span><br><span class="line"> fn2()</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">fn1(11, function() {</span><br><span class="line"> console.log('this is a callback')</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——回调地狱。</p>
<p>promise能解决的问题：</p>
<ul>
<li>回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象</li>
<li>promise可以支持多个并发的请求，获取并发请求中的数据</li>
<li>这个promise可以解决异步的问题，本身不能说promise是异步的</li>
</ul>
<h2 id="es6-promise用法大全"><a href="#es6-promise用法大全" class="headerlink" title="es6 promise用法大全"></a>es6 promise用法大全</h2><p><strong>Promise是一个构造函数</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">let p = new Promise((resolve, reject) => {</span><br><span class="line"> //做一些异步操作</span><br><span class="line"> setTimeout(() => {</span><br><span class="line"> console.log('执行完成');</span><br><span class="line"> resolve('我是成功！！');</span><br><span class="line"> }, 2000);</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>Promise的构造函数接收一个参数：函数，并且这个函数需要传入两个参数：</p>
<ul>
<li>resolve ：异步操作执行成功后的回调函数</li>
<li>reject：异步操作执行失败后的回调函数<h2 id="then-链式操作的用法"><a href="#then-链式操作的用法" class="headerlink" title="then 链式操作的用法"></a>then 链式操作的用法</h2></li>
</ul>
<p>从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">p.then((data) => {</span><br><span class="line"> console.log(data);</span><br><span class="line">})</span><br><span class="line">.then((data) => {</span><br><span class="line"> console.log(data);</span><br><span class="line">})</span><br><span class="line">.then((data) => {</span><br><span class="line"> console.log(data);</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h2 id="reject的用法"><a href="#reject的用法" class="headerlink" title="reject的用法 :"></a>reject的用法 :</h2><p>把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">let p = new Promise((resolve, reject) => {</span><br><span class="line"> //做一些异步操作</span><br><span class="line"> setTimeout(function(){</span><br><span class="line"> var num = Math.ceil(Math.random()*10); //生成1-10的随机数</span><br><span class="line"> if(num<=5){</span><br><span class="line"> resolve(num);</span><br><span class="line"> }</span><br><span class="line"> else{</span><br><span class="line"> reject('数字太大了');</span><br><span class="line"> }</span><br><span class="line"> }, 2000);</span><br><span class="line">});</span><br><span class="line">p.then((data) => {</span><br><span class="line"> console.log('resolved',data);</span><br><span class="line"> },(err) => {</span><br><span class="line"> console.log('rejected',err);</span><br><span class="line"> }</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<p>then中传了两个参数，then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据。</p>
<h2 id="catch的用法"><a href="#catch的用法" class="headerlink" title="catch的用法"></a>catch的用法</h2><p>它和then的第二个参数一样，用来指定reject的回调</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">p.then((data) => {</span><br><span class="line"> console.log('resolved',data);</span><br><span class="line">}).catch((err) => {</span><br><span class="line"> console.log('rejected',err);</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中</p>
<p>例如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">p.then((data) => {</span><br><span class="line"> console.log('resolved',data);</span><br><span class="line"> console.log(somedata); //此处的somedata未定义</span><br><span class="line">})</span><br><span class="line">.catch((err) => {</span><br><span class="line"> console.log('rejected',err);</span><br><span class="line">});</span><br></pre></td></tr></table></figure></p>
<h2 id="all的用法：谁跑的慢，以谁为准执行回调。all接收一个数组参数，里面的值最终都算返回Promise对象"><a href="#all的用法：谁跑的慢，以谁为准执行回调。all接收一个数组参数，里面的值最终都算返回Promise对象" class="headerlink" title="all的用法：谁跑的慢，以谁为准执行回调。all接收一个数组参数，里面的值最终都算返回Promise对象"></a>all的用法：谁跑的慢，以谁为准执行回调。all接收一个数组参数，里面的值最终都算返回Promise对象</h2><p>Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">let Promise1 = new Promise(function(resolve, reject){})</span><br><span class="line">let Promise2 = new Promise(function(resolve, reject){})</span><br><span class="line">let Promise3 = new Promise(function(resolve, reject){})</span><br><span class="line"> </span><br><span class="line">let p = Promise.all([Promise1, Promise2, Promise3])</span><br><span class="line"> </span><br><span class="line">p.then(funciton(){</span><br><span class="line"> // 三个都成功则成功 </span><br><span class="line">}, function(){</span><br><span class="line"> // 只要有失败，则失败 </span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p>有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据。</p>
<h2 id="race的用法：谁跑的快，以谁为准执行回调"><a href="#race的用法：谁跑的快，以谁为准执行回调" class="headerlink" title="race的用法：谁跑的快，以谁为准执行回调"></a>race的用法：谁跑的快，以谁为准执行回调</h2><p>race的使用场景：比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">//请求某个图片资源</span><br><span class="line"> function requestImg(){</span><br><span class="line"> var p = new Promise((resolve, reject) => {</span><br><span class="line"> var img = new Image();</span><br><span class="line"> img.onload = function(){</span><br><span class="line"> resolve(img);</span><br><span class="line"> }</span><br><span class="line"> img.src = '图片的路径';</span><br><span class="line"> });</span><br><span class="line"> return p;</span><br><span class="line"> }</span><br><span class="line"> //延时函数，用于给请求计时</span><br><span class="line"> function timeout(){</span><br><span class="line"> var p = new Promise((resolve, reject) => {</span><br><span class="line"> setTimeout(() => {</span><br><span class="line"> reject('图片请求超时');</span><br><span class="line"> }, 5000);</span><br><span class="line"> });</span><br><span class="line"> return p;</span><br><span class="line"> }</span><br><span class="line"> Promise.race([requestImg(), timeout()]).then((data) =>{</span><br><span class="line"> console.log(data);</span><br><span class="line"> }).catch((err) => {</span><br><span class="line"> console.log(err);</span><br><span class="line"> });</span><br></pre></td></tr></table></figure>
<p>requestImg函数会异步请求一张图片，我把地址写为”图片的路径”，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。所以运行如下：<br><img src="https://img-blog.csdnimg.cn/20190207190258293.png" alt="在这里插入图片描述"></p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/微信小程序/">微信小程序</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/02/12/weixin1/" title="微信小程序 | promise（下）手写promise" itemprop="url">微信小程序 | promise（下）手写promise</a>
</h1>
<p class="article-author">By
<a href="/about" title="小陈" target="_blank" itemprop="author">小陈</a>
</p><p class="article-time">
<time datetime="2019-02-11T19:43:17.000Z" itemprop="datePublished"> 发表于 2019-02-12</time>
</p>
</header>
<div class="article-content">
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 三个状态 resolved(解决) rejected(拒绝) pending(等待)</span></span><br><span class="line"><span class="comment">// promise中放了一个函数 函数executor 执行器</span></span><br><span class="line"><span class="comment">// resolve和reject都是函数 调用后可以让状态进行改变</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// promise解决的问题有 </span></span><br><span class="line"><span class="comment">//1) 回调地狱 </span></span><br><span class="line"><span class="comment">//2)解决 并发异步，再同一时刻内获取并发的结果 </span></span><br><span class="line"><span class="comment">//3) 链式调用 （jquery）</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//常用写法</span></span><br><span class="line"><span class="keyword">let</span> promise=<span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=></span>{</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span>=></span>{ <span class="comment">//这个定时器就相当于我们的异步代码 （比如ajax）</span></span><br><span class="line"> resolve(<span class="string">'123'</span>)</span><br><span class="line"> })</span><br><span class="line"> </span><br><span class="line">})</span><br><span class="line">promise.then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(res) <span class="comment">//123</span></span><br><span class="line">},err=>{</span><br><span class="line"> </span><br><span class="line">})</span><br><span class="line"><span class="comment">//链式调用 说明then返回的是一个Promise的实例</span></span><br><span class="line">promise.then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(res) </span><br><span class="line">},err=>{</span><br><span class="line"> </span><br><span class="line">}).then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(res) </span><br><span class="line">},err=>{</span><br><span class="line"> </span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="执行顺序"><a href="#执行顺序" class="headerlink" title="执行顺序"></a>执行顺序</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//执行顺序</span></span><br><span class="line"><span class="keyword">let</span> promise=<span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=></span>{</span><br><span class="line"> </span><br><span class="line"> resolve(<span class="string">'123'</span>)</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"> </span><br><span class="line">})</span><br><span class="line">promise.then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(res) <span class="comment">//123</span></span><br><span class="line">},err=>{</span><br><span class="line"> </span><br><span class="line">})</span><br><span class="line"><span class="comment">//打印顺序 1，123</span></span><br><span class="line"><span class="comment">//默认promise中的executor(就是Promise中的参数)是同步执行的 //而then中的参数相当于回调</span></span><br></pre></td></tr></table></figure>
<h2 id="值的穿透"><a href="#值的穿透" class="headerlink" title="值的穿透"></a>值的穿透</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//值的穿透 then不传参数就默认走到下一then中</span></span><br><span class="line">promise.then().then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(res) <span class="comment">//123</span></span><br><span class="line">},err=>{</span><br><span class="line"> </span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="then的问题"><a href="#then的问题" class="headerlink" title="then的问题"></a>then的问题</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//then的问题</span></span><br><span class="line"><span class="comment">// 最常见的 如果返回的是普通值 直接把值作为外层下一次then的参数</span></span><br><span class="line">promise.then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="number">1</span> <span class="comment">//返回除了Promise外的参数 直接把值作为外层下一次then的参数</span></span><br><span class="line">},err=>{</span><br><span class="line"> </span><br><span class="line">}).then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(res) <span class="comment">//1</span></span><br><span class="line">},err=>{</span><br><span class="line"> </span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// then方法调用后，返回的是一个新的promise //会把这个promise下的所有包括当前返回的promise执行完毕 取到成功或失败的结果</span></span><br><span class="line"><span class="comment">//当做外层下一次then的成功或失败的结果 执行过程中失败就直接取失败 //成功就一直执行 知道完后拿到结果</span></span><br><span class="line">promise.then(<span class="function">(<span class="params">data</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=></span>{</span><br><span class="line"> resolve(<span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=></span>{</span><br><span class="line"> resolve(<span class="string">'123456'</span>);</span><br><span class="line"> }))</span><br><span class="line"> })</span><br><span class="line">}, err => {</span><br><span class="line"> <span class="built_in">console</span>.log( err);</span><br><span class="line">}).then(<span class="function"><span class="params">res</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(res) <span class="comment">//123456</span></span><br><span class="line">},err=>{</span><br><span class="line"> </span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="手写promise"><a href="#手写promise" class="headerlink" title="手写promise"></a>手写promise</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Promise</span> </span>{</span><br><span class="line"> <span class="keyword">constructor</span>(executor) {</span><br><span class="line"> <span class="comment">// 默认状态是等待态</span></span><br><span class="line"> <span class="keyword">this</span>.status = <span class="string">'pending'</span>;</span><br><span class="line"> <span class="comment">//成功后的值</span></span><br><span class="line"> <span class="keyword">this</span>.value = <span class="literal">undefined</span>;</span><br><span class="line"> <span class="comment">//失败的原因</span></span><br><span class="line"> <span class="keyword">this</span>.reason = <span class="literal">undefined</span>;</span><br><span class="line"> <span class="comment">// 存放成功的回调 解决异步调用 就是我们常用的写法那种 </span></span><br><span class="line"> <span class="keyword">this</span>.onResolvedCallbacks = [];</span><br><span class="line"> <span class="comment">// 存放失败的回调 用成功就有失败</span></span><br><span class="line"> <span class="keyword">this</span>.onRejectedCallbacks = [];</span><br><span class="line"> <span class="comment">//resolve，reject 我们executor中的参数</span></span><br><span class="line"> <span class="keyword">let</span> resolve = <span class="function">(<span class="params">data</span>) =></span> {</span><br><span class="line"> <span class="comment">//当resolve调用时相当于成功 所以改变状态为成功 reject同理</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.status === <span class="string">'pending'</span>) {</span><br><span class="line"> <span class="keyword">this</span>.value = data;</span><br><span class="line"> <span class="keyword">this</span>.status = <span class="string">'resolved'</span>;</span><br><span class="line"> <span class="keyword">this</span>.onResolvedCallbacks.forEach(<span class="function"><span class="params">fn</span> =></span> fn());</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">let</span> reject = <span class="function">(<span class="params">reason</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.status === <span class="string">'pending'</span>) {</span><br><span class="line"> <span class="keyword">this</span>.reason = reason;</span><br><span class="line"> <span class="keyword">this</span>.status = <span class="string">'rejected'</span>;</span><br><span class="line"> <span class="keyword">this</span>.onRejectedCallbacks.forEach(<span class="function"><span class="params">fn</span> =></span> fn());</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">try</span> { <span class="comment">// 执行时可能会发生异常</span></span><br><span class="line"> executor(resolve, reject);</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> reject(e); <span class="comment">// promise失败了</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//then 也有两个参数 成功的回调 和失败的回调</span></span><br><span class="line"> then(onFulFilled, onRejected) {</span><br><span class="line"> <span class="comment">// 解决onFulFilled,onRejected没有传的问题 值的穿透</span></span><br><span class="line"> onFulFilled = <span class="keyword">typeof</span> onFulFilled === <span class="string">'function'</span> ? onFulFilled : <span class="function"><span class="params">y</span> =></span> y;</span><br><span class="line"> onRejected = <span class="keyword">typeof</span> onRejected === <span class="string">'function'</span> ? onRejected : <span class="function"><span class="params">err</span> =></span> { <span class="keyword">throw</span> err; };</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">let</span> promise2; <span class="comment">//then的返回值</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.status === <span class="string">'resolved'</span>) {</span><br><span class="line"> promise2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="comment">// 成功的逻辑 失败的逻辑</span></span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {<span class="comment">//模拟Promise执行顺序</span></span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">let</span> x = onFulFilled(<span class="keyword">this</span>.value);</span><br><span class="line"> <span class="comment">// 看x是不是promise 如果是promise 取他的结果 作为promise2,成功的结果</span></span><br><span class="line"> <span class="comment">// 如果要是返回一个普通值 作为promise2,成功的结果</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// resolvePromise可以解析x和promise2之间的关系</span></span><br><span class="line"> resolvePromise(promise2, x, resolve, reject);</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> reject(e);</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">0</span>);</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.status === <span class="string">'rejected'</span>) {</span><br><span class="line"> promise2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">let</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line"> resolvePromise(promise2, x, resolve, reject)</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> reject(e);</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">0</span>);</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 当前既没有完成 也没有失败</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.status === <span class="string">'pending'</span>) {</span><br><span class="line"> <span class="comment">// 存放成功的回调</span></span><br><span class="line"> promise2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="keyword">this</span>.onResolvedCallbacks.push(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">let</span> x = onFulFilled(<span class="keyword">this</span>.value);</span><br><span class="line"> resolvePromise(promise2, x, resolve, reject)</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> reject(e);</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">0</span>)</span><br><span class="line"> });</span><br><span class="line"> <span class="comment">// 存放失败的回调</span></span><br><span class="line"> <span class="keyword">this</span>.onRejectedCallbacks.push(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">let</span> x = onRejected(<span class="keyword">this</span>.reason);</span><br><span class="line"> resolvePromise(promise2, x, resolve, reject);</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> reject(e);</span><br><span class="line"> }</span><br><span class="line"> }, <span class="number">0</span>);</span><br><span class="line"> });</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> promise2; <span class="comment">// 调用then后返回一个新的promise</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">resolvePromise</span>(<span class="params">promise2, x, resolve, reject</span>) </span>{</span><br><span class="line"> <span class="comment">// 判断x是不是promise2</span></span><br><span class="line"> <span class="comment">// [规范]里规定了一段代码，这个代码可以实现我们的promise和别人的promise可以进行交互</span></span><br><span class="line"> <span class="keyword">if</span> (promise2 === x) { <span class="comment">// 不能自己等待自己完成</span></span><br><span class="line"> <span class="keyword">return</span> reject(<span class="keyword">new</span> <span class="built_in">TypeError</span>(<span class="string">'循环引用'</span>));</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// x不是null或者是对象或者函数</span></span><br><span class="line"> <span class="keyword">if</span> (x !== <span class="literal">null</span> && (<span class="keyword">typeof</span> x === <span class="string">'object'</span> || <span class="keyword">typeof</span> x === <span class="string">'function'</span>)) {</span><br><span class="line"> <span class="keyword">let</span> called; <span class="comment">// 防止成功后调用失败</span></span><br><span class="line"> <span class="keyword">try</span> { <span class="comment">// 防止取then是出现异常 Object.defineProperty</span></span><br><span class="line"> <span class="keyword">let</span> then = x.then; <span class="comment">// 取x的then方法 {then:{}}</span></span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> then === <span class="string">'function'</span>) { <span class="comment">// 如果then是函数我就认为它是promise</span></span><br><span class="line"> <span class="comment">// call 第一个参数是this ，后面的是成功的回调和失败的回调</span></span><br><span class="line"> then.call(x, y => { <span class="comment">// 如果y是promise就继续递归解析promise</span></span><br><span class="line"> <span class="keyword">if</span> (called) <span class="keyword">return</span>;</span><br><span class="line"> called = <span class="literal">true</span>;</span><br><span class="line"> resolvePromise(promise2, y, resolve, reject);</span><br><span class="line"> }, r => { <span class="comment">// 只要失败了就失败了</span></span><br><span class="line"> <span class="keyword">if</span> (called) <span class="keyword">return</span>;</span><br><span class="line"> called = <span class="literal">true</span>;</span><br><span class="line"> reject(r);</span><br><span class="line"> });</span><br><span class="line"> } <span class="keyword">else</span> { <span class="comment">// then是一个普通对象，就直接成功即可1</span></span><br><span class="line"> resolve(x);</span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">catch</span> (e) {</span><br><span class="line"> <span class="keyword">if</span> (called) <span class="keyword">return</span>;</span><br><span class="line"> called = <span class="literal">true</span>;</span><br><span class="line"> reject(e);</span><br><span class="line"> }</span><br><span class="line"> } <span class="keyword">else</span> { <span class="comment">// x = 123</span></span><br><span class="line"> resolve(x); <span class="comment">// x就是一个普通值</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">// promise的语法糖，测试</span></span><br><span class="line"><span class="built_in">Promise</span>.deferred = <span class="built_in">Promise</span>.defer = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> dfd = {};</span><br><span class="line"> dfd.promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=></span>{</span><br><span class="line"> dfd.resolve = resolve;</span><br><span class="line"> dfd.reject = reject;</span><br><span class="line"> })</span><br><span class="line"> <span class="keyword">return</span> dfd;</span><br><span class="line">}</span><br><span class="line"><span class="comment">// npm install promises-aplus-tests -g</span></span><br><span class="line"><span class="comment">// promises-aplus-tests 文件名</span></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="built_in">Promise</span>;</span><br><span class="line"><span class="comment">// 写完promise会测试一下</span></span><br></pre></td></tr></table></figure>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/微信小程序/">微信小程序</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/02/12/html5/" title="MIME Type 多功能网际邮件扩充协议" itemprop="url">MIME Type 多功能网际邮件扩充协议</a>
</h1>
<p class="article-author">By
<a href="/about" title="小陈" target="_blank" itemprop="author">小陈</a>
</p><p class="article-time">
<time datetime="2019-02-11T19:36:51.000Z" itemprop="datePublished"> 发表于 2019-02-12</time>
</p>
</header>
<div class="article-content">
<h2 id="MIME（多功能网际邮件扩充协议）"><a href="#MIME（多功能网际邮件扩充协议）" class="headerlink" title="MIME（多功能网际邮件扩充协议）"></a>MIME（多功能网际邮件扩充协议）</h2><p> MIME意为多目Internet邮件扩展，它设计的最初目的是为了在发送电子邮件时附加多媒体数据，让邮件客户程序能根据其类型进行处理。然而当它被HTTP协议支持之后，它的意义就更为显著了。它使得HTTP传输的不仅是普通的文本，而变得丰富多彩。</p>
<p> 访问一个网页，获得一个资源后，浏览器通过哪种方式来识别这种资源呢？就是通过媒体资源类型MIME Type,媒体资源类型通过http协议，由web服务器告知浏览器，更详细的说，是通过Content-Type来定义的。<br> 例如：Content-Type: text/HTML</p>
<p>通常只有一些在互联网上获得广泛应用的格式才会获得一个 MIME Type，如果是某个客户端自己定义的格式，一般只能以 application/x- 开头。</p>
<h2 id="常见类型"><a href="#常见类型" class="headerlink" title="常见类型"></a>常见类型</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">超文本标记语言文本 .html,.html text/html </span><br><span class="line">普通文本 .txt text/plain </span><br><span class="line">RTF文本 .rtf application/rtf </span><br><span class="line">GIF图形 .gif image/gif </span><br><span class="line">JPEG图形 .ipeg,.jpg image/jpeg </span><br><span class="line">au声音文件 .au audio/basic </span><br><span class="line">MIDI音乐文件 mid,.midi audio/midi,audio/x-midi </span><br><span class="line">RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio </span><br><span class="line">MPEG文件 .mpg,.mpeg video/mpeg </span><br><span class="line">AVI文件 .avi video/x-msvideo </span><br><span class="line">GZIP文件 .gz application/x-gzip </span><br><span class="line">TAR文件 .tar application/x-tar</span><br></pre></td></tr></table></figure>
<h2 id="Mime-type与Content-type区别"><a href="#Mime-type与Content-type区别" class="headerlink" title="Mime-type与Content-type区别"></a>Mime-type与Content-type区别</h2><p><strong>mime-type</strong> : 文件后缀名</p>
<p>向web服务器请求一个文件，服务器会根据你的后缀名去匹配对应的值设置为response中content-type的值</p>
<p><strong>content-type</strong>是正文媒体类型，浏览器根据content-type的不同来分别处理你返回的东西</p>
<p><strong>例子</strong><br>tomcat(版本为7)下的conf目录下有个web.xml</p>
<p>1156行开始有个节点为</p>
<pre><code><mime-mapping>
<extension>css</extension>
<mime-type>text/css</mime-type>
</mime-mapping>
</code></pre><p>我把这个节点修改为成这样</p>
<pre><code><mime-mapping>
<extension>css</extension>
<mime-type>text/cssaa</mime-type>
</mime-mapping>
</code></pre><p>tomcat7请求一个css文件之后抓包后的结果：<br><img src="https://img-blog.csdnimg.cn/20190129014322897.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU5MzQwOA==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></p>
<h2 id="流程"><a href="#流程" class="headerlink" title="流程"></a>流程</h2><p>1.请求css文件。</p>
<p>2.web服务器看到后缀名为css，在对应的配置文件中寻找css的mimetype值。</p>
<p>3.当请求完成后设置content-type的值。</p>
<p>4.游览器根据content-type的值处理返回的文件</p>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/HTML5/">HTML5</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<article class="post-expand post" itemprop="articleBody">
<header class="article-info clearfix">
<h1 itemprop="name">
<a href="/2019/02/12/html4/" title="Canvas 和 SVG的不同点" itemprop="url">Canvas 和 SVG的不同点</a>
</h1>
<p class="article-author">By
<a href="/about" title="小陈" target="_blank" itemprop="author">小陈</a>
</p><p class="article-time">
<time datetime="2019-02-11T19:36:42.000Z" itemprop="datePublished"> 发表于 2019-02-12</time>
</p>
</header>
<div class="article-content">
<p>刚刚才发现原来Canvas跟SVG是可以对比的！！！</p>
<h2 id="SVG"><a href="#SVG" class="headerlink" title="SVG"></a>SVG</h2><p>SVG 是一种使用 XML 描述 2D 图形的语言。<br>SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。<br>在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。</p>
<ol>
<li>不依赖分辨率</li>
<li>支持事件处理器</li>
<li>最适合带有大型渲染区域的应用程序（比如谷歌地图）</li>
<li>复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）</li>
<li>不适合游戏应用</li>
</ol>
<h2 id="Canvas"><a href="#Canvas" class="headerlink" title="Canvas"></a>Canvas</h2><p>Canvas 通过 JavaScript 来绘制 2D 图形。<br>Canvas 是逐像素进行渲染的。<br>在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。</p>
<ol>
<li>依赖分辨率</li>
<li>不支持事件处理器</li>
<li>弱的文本渲染能力</li>
<li>能够以 .png 或 .jpg 格式保存结果图像</li>
<li>最适合图像密集型的游戏，其中的许多对象会被频繁重绘</li>
</ol>
<p class="article-more-link">
</p>
</div>
<footer class="article-footer clearfix">
<div class="article-catetags">
<div class="article-tags">
<span></span> <a href="/tags/HTML5/">HTML5</a>
</div>
</div>
<div class="comments-count">
</div>
</footer>
</article>
<nav id="page-nav" class="clearfix">
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/">Next<span></span></a>
</nav>
</div>
<div class="openaside"><a class="navbutton" href="#" title="显示侧边栏"></a></div>
<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="隐藏侧边栏"></a></div>
<aside class="clearfix">
<div class="tagslist">
<p class="asidetitle">标签</p>
<ul class="clearfix">
<li><a href="/tags/微信小程序/" title="微信小程序">微信小程序<sup>8</sup></a></li>
<li><a href="/tags/HTML5/" title="HTML5">HTML5<sup>6</sup></a></li>
<li><a href="/tags/Sass/" title="Sass">Sass<sup>2</sup></a></li>
</ul>
</div>