-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
849 lines (448 loc) · 297 KB
/
atom.xml
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Baomer's Blog</title>
<link href="/atom.xml" rel="self"/>
<link href="https://booboom.github.io/"/>
<updated>2021-12-02T07:40:47.671Z</updated>
<id>https://booboom.github.io/</id>
<author>
<name>Baomer</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>宇宙级好用的MarkDown编辑器</title>
<link href="https://booboom.github.io/archive/typora-and-uPic.html"/>
<id>https://booboom.github.io/archive/typora-and-uPic.html</id>
<published>2021-12-02T07:23:04.000Z</published>
<updated>2021-12-02T07:40:47.671Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p><img src="https://i.loli.net/2021/12/02/fwBMTNrdGLJKORz.png" alt=""></p><p>我最开始接触Typora的时候，就是被它的高颜值所俘虏，成为了它的颜狗。</p><p>与传统的MarkDown编辑器左边写md，右边预览的模式不同，Typora实现了实时预览，所见即所得，并且没有什么花里胡哨的顶部功能栏，一切从简，简约大方，搭配另一宇宙级好用的图床工具 - <a href="https://github.com/gee1k/uPic/releases" target="_blank" rel="noopener">uPic</a>，简直如虎添翼。</p><p>最近为爱发电了6年的Typora开始收费了，作为它的重度使用者，必须支持一波，奥利给。</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="工具" scheme="https://booboom.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
</entry>
<entry>
<title>css文本尾部标签跟随文本自动换行</title>
<link href="https://booboom.github.io/archive/text-tag-wrap.html"/>
<id>https://booboom.github.io/archive/text-tag-wrap.html</id>
<published>2021-04-15T13:20:00.000Z</published>
<updated>2021-04-15T13:26:38.981Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>在开发中，经常会遇到在title后加一个tag，在title文本过多换行时，要求tag在文本末尾也跟着换行。</p><p>看起来很简单的样式，其实也不太好实现。</p><p>借助<code>Array.prototype.split('')</code>将title字段没个字都切割出来为一个数组。再遍历数组将没个字单独放在一个div中，tag在所有div之后。最后对父元素做flex布局。</p><pre class="line-numbers language-css"><code class="language-css"><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span><span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span><span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="css" scheme="https://booboom.github.io/categories/css/"/>
</entry>
<entry>
<title>Taro绑定小程序map组件踩坑</title>
<link href="https://booboom.github.io/archive/taro-map-regionchange.html"/>
<id>https://booboom.github.io/archive/taro-map-regionchange.html</id>
<published>2021-04-08T09:46:18.000Z</published>
<updated>2021-04-15T13:16:48.586Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><h2 id="坑一：map组件绑定regionchange事件"><a href="#坑一：map组件绑定regionchange事件" class="headerlink" title="坑一：map组件绑定regionchange事件"></a>坑一：map组件绑定<code>regionchange</code>事件</h2><p>在前一段时间做一个小程序地图选择地点的需求是踩到了一个深坑。</p><p>给map绑定regionchange事件时，无论我怎么滑动、缩放地图，都不会触发绑定事件，最后在利用了一切搜素引擎后的排查后，发现了mpvue仓库的一个<a href="https://github.com/Meituan-Dianping/mpvue/issues/253" target="_blank" rel="noopener">issues</a>，给了我灵感，</p><p>这个issues里写着：</p><blockquote><p>踩坑注意：<br>列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将 bind 改为@regionchange,同时这个事件也非常特殊，它的 event type 有 start 和 end 两个，导致我们无法在 handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <code><map @regionchange="functionName" @end="functionName" @start="functionName"><map></code></p></blockquote><p>好家伙，我就抱着试试的态度，我就照着mpvue的文档试了一下，没想到还真成了🙂</p><h2 id="坑二：regionchange事件取值"><a href="#坑二：regionchange事件取值" class="headerlink" title="坑二：regionchange事件取值"></a>坑二：<code>regionchange</code>事件取值</h2><p>在进一步的开发中，由于想去分别对<code>拖动</code>地图 和 <code>缩放</code>地图 做不同的操作。所以需要取到regionchange事件event中<code>causedBy</code>的值。</p><p>好家伙，在开发者工具中<code>event.detail.causedBy</code>取值一切正常，但是在真机调试的时候，却取不到，量在疑惑。后来在手机调试里打印event才发现。</p><blockquote><p>开发者工具causedBy在event.detail中。而真机的causedBy，只在event中🙂</p></blockquote><p>所以我在event和event.detail中都取了值进行判断。</p><p>下面附全部map代码：</p><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// HTML部分</span><span class="token operator"><</span>map id<span class="token operator">=</span><span class="token string">"mapId"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"map"</span> <span class="token punctuation">:</span>markers<span class="token operator">=</span><span class="token string">"markers"</span> <span class="token punctuation">:</span>latitude<span class="token operator">=</span><span class="token string">"mapCenterLatitude"</span> <span class="token punctuation">:</span>longitude<span class="token operator">=</span><span class="token string">"mapCenterLongitude"</span> <span class="token punctuation">:</span>enable<span class="token operator">-</span>poi<span class="token operator">=</span><span class="token string">"true"</span> <span class="token punctuation">:</span>show<span class="token operator">-</span>location<span class="token operator">=</span><span class="token string">"true"</span> @poitap<span class="token operator">=</span><span class="token string">"changePoi"</span> @markertap<span class="token operator">=</span><span class="token string">"onMarkerTap"</span> @callouttap<span class="token operator">=</span><span class="token string">"onCalloutTap"</span> @regionchange<span class="token operator">=</span><span class="token string">"regionChange"</span> @begin<span class="token operator">=</span><span class="token string">"regionchangeBegin"</span> @end<span class="token operator">=</span><span class="token string">"regionchangeEnd"</span> <span class="token punctuation">:</span>style<span class="token operator">=</span><span class="token string">"{ height: activeIpt || searchValue ? 'calc(100vh - 529px)' : 'calc(100vh - 312px)' }"</span><span class="token operator">></span> <span class="token operator"><</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"local-position"</span><span class="token operator">></span> <span class="token operator"><</span>image <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"icon-positioning"</span> <span class="token punctuation">:</span>src<span class="token operator">=</span><span class="token string">"require('./image/icon_positioning.svg').default"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>image<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>view<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>map<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// js部分</span><span class="token comment" spellcheck="true">// 拖动地图 结束</span><span class="token function">regionchangeEnd</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'@@ regionchangeEnd'</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'@@ regionchangeEnd'</span><span class="token punctuation">,</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// 小程序 drag 和 scale 的event数据结构不一样，causedBy取值方式不同</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> causedBy<span class="token punctuation">:</span> causedByCode<span class="token punctuation">,</span> centerLocation <span class="token punctuation">}</span> <span class="token operator">=</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> causedBy<span class="token punctuation">:</span> causedByPhone <span class="token punctuation">}</span> <span class="token operator">=</span> e<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>causedByCode <span class="token operator">==</span> <span class="token string">'drag'</span> <span class="token operator">||</span> causedByPhone <span class="token operator">==</span> <span class="token string">'drag'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'@@ centerLocation'</span><span class="token punctuation">,</span> centerLocation<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dargMap</span><span class="token punctuation">(</span>centerLocation<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>causedByCode <span class="token operator">==</span> <span class="token string">'scale'</span> <span class="token operator">||</span> causedByPhone <span class="token operator">==</span> <span class="token string">'scale'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">scaleMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="小程序" scheme="https://booboom.github.io/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="Taro" scheme="https://booboom.github.io/tags/Taro/"/>
</entry>
<entry>
<title>小程序踩坑之navigationStyle</title>
<link href="https://booboom.github.io/archive/mp-fuck.html"/>
<id>https://booboom.github.io/archive/mp-fuck.html</id>
<published>2021-04-02T03:02:13.000Z</published>
<updated>2021-04-02T03:09:29.964Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>小程序自定义顶部导航经常会遇到 <code>navigationStyle: 'custom'</code> 失效的问题，同时出现了两个顶部导航。</p><p>遇到这种问题不妨可以尝试一下：</p><blockquote><p>重启 微信开发者工具 🙂</p></blockquote><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="小程序" scheme="https://booboom.github.io/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="踩坑" scheme="https://booboom.github.io/tags/%E8%B8%A9%E5%9D%91/"/>
</entry>
<entry>
<title>小程序设置动态分享数据 - Taro</title>
<link href="https://booboom.github.io/archive/taro-mp-share.html"/>
<id>https://booboom.github.io/archive/taro-mp-share.html</id>
<published>2021-04-01T11:31:21.000Z</published>
<updated>2021-04-01T11:55:25.724Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>前几天遇到一个需求是这样的，一个活动的list，每一个活动都有一个分享按钮，点击分享按钮，将当前活动的详情页分享出去，附带上标题，图片。</p><p>我第一时间想到的就是，直接获取<code>Current</code>。修改<code>Current.page.onShareAppMessage</code>不就好了么，然后我要开始写bug的时候，脑中灵光一现，发觉事情并没有这么简单。</p><p>因为小程序onShareAppMeaasge生命周期是在页面初始化时就定义好的，点击button后直接调用，修改完全没有效果。之后我就想到用button的<code>dataset</code>来给onShareAppMessage传参数，结果，button上的<code>data-*</code>属性都被Taro给清除了。淦！</p><p>最后，通过使用 <code>async/await</code> 实现了这个功能，具体代码如下：</p><p>parent:</p><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"list-container"</span><span class="token operator">></span> <span class="token operator"><</span>block v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"list.length"</span><span class="token operator">></span> <span class="token operator"><</span>product<span class="token operator">-</span>card <span class="token punctuation">:</span>shareData<span class="token punctuation">.</span>sync<span class="token operator">=</span><span class="token string">"shareData"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-container"</span> v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"item in list"</span> <span class="token punctuation">:</span>key<span class="token operator">=</span><span class="token string">"item.id"</span> <span class="token punctuation">:</span>info<span class="token operator">=</span><span class="token string">"item"</span> <span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>product<span class="token operator">-</span>card<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>block<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>view<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span><span class="token operator"><</span>script<span class="token operator">></span><span class="token keyword">import</span> Taro<span class="token punctuation">,</span> <span class="token punctuation">{</span> Current <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@tarojs/taro'</span><span class="token punctuation">;</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> shareData<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> Current<span class="token punctuation">.</span>page<span class="token operator">!</span><span class="token punctuation">.</span>onShareAppMessage <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">await</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>shareData<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>shareData <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>child:</p><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>button @tap<span class="token operator">=</span><span class="token string">"handleShareClick"</span> open<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">"share"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"btm-btn"</span> <span class="token operator">></span>分享<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span><span class="token operator"><</span>script<span class="token operator">></span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'ProductCard'</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> info<span class="token punctuation">:</span> Object <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">handleShareClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update:shareData'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">.</span>name<span class="token punctuation">,</span> imageUrl<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">.</span>pic<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'http'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">.</span>pic <span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`https:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">.</span>pic<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span> path<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`pages/activity-detail/activity-detail?id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>info<span class="token punctuation">.</span>activityId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="小程序" scheme="https://booboom.github.io/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="Taro" scheme="https://booboom.github.io/tags/Taro/"/>
</entry>
<entry>
<title>Egg + MongoDB搭建server端服务</title>
<link href="https://booboom.github.io/archive/eggNodeSercer.html"/>
<id>https://booboom.github.io/archive/eggNodeSercer.html</id>
<published>2020-10-21T08:21:38.000Z</published>
<updated>2020-10-21T08:33:08.462Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p><a href="https://eggjs.org/zh-cn/intro/quickstart.html" target="_blank" rel="noopener">Egg 官方文档</a></p><h2 id="快速初始化"><a href="#快速初始化" class="headerlink" title="快速初始化"></a>快速初始化</h2><p>推荐直接使用脚手架，只需几条简单指令，即可快速生成项目（npm >=6.1.0）</p><pre class="line-numbers language-sh"><code class="language-sh">$ mkdir egg-example && cd egg-example$ npm init egg --type=simple$ npm i<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>启动项目：</p><pre class="line-numbers language-sh"><code class="language-sh">$ npm run dev$ open http://localhost:7001<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>##</p><p>##</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="前端" scheme="https://booboom.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="Node" scheme="https://booboom.github.io/tags/Node/"/>
<category term="Egg" scheme="https://booboom.github.io/tags/Egg/"/>
</entry>
<entry>
<title>网页自动跟随系统暗模式</title>
<link href="https://booboom.github.io/archive/perfersColorScheme.html"/>
<id>https://booboom.github.io/archive/perfersColorScheme.html</id>
<published>2020-09-09T03:28:01.000Z</published>
<updated>2020-09-09T08:14:22.115Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>暗模式已经逐渐成为各个软件和网页的新趋势，过去入股偶想要增加暗模式，你可能需要给用户一个选项来开启暗模式。</p><p>现在大多数主流浏览器都支持了对检验颜色主题的支持，让网页可以自动跟随系统UI模式。</p><p>介绍下我们今天的主角</p><blockquote><p><code>prefers-color-scheme</code> CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。</p></blockquote><h2 id="浏览器兼容性"><a href="#浏览器兼容性" class="headerlink" title="浏览器兼容性"></a>浏览器兼容性</h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme" target="_blank" rel="noopener">可以去这里查看</a></p><h2 id="动手测试一下"><a href="#动手测试一下" class="headerlink" title="动手测试一下"></a>动手测试一下</h2><p>新建一个简单的html页面<code>test.html</code></p><pre class="line-numbers language-html"><code class="language-html"><span class="token doctype"><!DOCTYPE html></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>暗模式<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> <span class="token selector">body </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>测试跟随暗模式<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>接下来在css中加入：</p><pre class="line-numbers language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>切换系统为暗模式。</p><iframe src="https://codesandbox.io/embed/trusting-mendeleev-5gy18?fontsize=14&hidenavigation=1&theme=dark" style="width:100%;height:500px;border:0;border-radius:4px;overflow:hidden" title="trusting-mendeleev-5gy18" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe><p>##</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
</entry>
<entry>
<title>react-beautiful-dnd入门教程</title>
<link href="https://booboom.github.io/archive/react-beautiful-dnd.html"/>
<id>https://booboom.github.io/archive/react-beautiful-dnd.html</id>
<published>2019-10-25T03:39:33.000Z</published>
<updated>2021-12-02T07:04:42.180Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">npm</span> i react-beautiful-dnd <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>或</p><pre class="line-numbers language-bash"><code class="language-bash">yarn add react-beautiful-dnd<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h2 id="react-beautiful-dnd结构"><a href="#react-beautiful-dnd结构" class="headerlink" title="react-beautiful-dnd结构"></a>react-beautiful-dnd结构</h2><ul><li>DragDropContext - 构建一个可以拖拽的范围。<br>onDragStart<br>onDragUpdate<br>onDragEnd</li><li>Droppable - 构建一个可以被拖拽放入的区域块。</li><li>Draggalbe - 可被拖拽的元素。</li></ul><p><img src="https://i.loli.net/2021/12/02/wYJXuLQZKTME8o6.gif" alt=""></p><h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><h3 id="引入react-beautiful-dnd"><a href="#引入react-beautiful-dnd" class="headerlink" title="引入react-beautiful-dnd"></a>引入react-beautiful-dnd</h3><p>把你想能够拖放的react代码放到DragDropContext中（建议包裹整个应用）</p><blockquote><p>DragDropContext不支持嵌套<br>且必须设置DranDropContext的onDragEnd钩子函数(拖拽后的数组重新排序操作在这里进行)</p></blockquote><pre class="line-numbers language-xml"><code class="language-xml">import { DragDropContext } from 'react-beautiful-dnd';class App extends React.Component { onDragStart = () => { /*...*/ }; onDragUpdate = () => { /*...*/ } onDragEnd = () => { // the only one that is required }; render() { return ( <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DragDropContext</span> <span class="token attr-name">onDragStart</span><span class="token attr-value"><span class="token punctuation">=</span>{this.onDragStart}</span> <span class="token attr-name">onDragUpdate</span><span class="token attr-value"><span class="token punctuation">=</span>{this.onDragUpdate}</span> <span class="token attr-name">onDragEnd</span><span class="token attr-value"><span class="token punctuation">=</span>{this.onDragEnd}</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Hello world<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>DragDropContext</span><span class="token punctuation">></span></span> ); }}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="Dragppable配置"><a href="#Dragppable配置" class="headerlink" title="Dragppable配置"></a>Dragppable配置</h3><pre class="line-numbers language-xml"><code class="language-xml">import { Droppable } from 'react-beautiful-dnd';<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Droppable</span> <span class="token attr-name">droppableId</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>droppable-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> {(provided, snapshot) => ( <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span>{provided.innerRef}</span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span>{{</span> <span class="token attr-name"><span class="token namespace">backgroundColor:</span></span> <span class="token attr-name">snapshot.isDraggingOver</span> <span class="token attr-name">?</span> <span class="token attr-name">'blue'</span> <span class="token attr-name">:</span> <span class="token attr-name">'grey'</span> <span class="token attr-name">}}</span> <span class="token attr-name">{...provided.droppableProps}</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>I am a droppable!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> {provided.placeholder} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> )}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Droppable</span><span class="token punctuation">></span></span>;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ol><li>必需的DroppableId（字符串），用于唯一标识应用程序的droppable。不要更改此ID - 特别是在拖动时。</li><li>direction:<br>vertical：水平拖拽<br>horizontal：垂直拖拽</li><li>Droppable的React子元素必须是返回ReactElement的函数。<pre class="line-numbers language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Droppable</span> <span class="token attr-name">droppableId</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>droppable-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> {(provided, snapshot) => ({ /*...*/ })}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Droppable</span><span class="token punctuation">></span></span>;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>该函数提供了两个参数:<code>provided</code> 和 <code>snapshot</code><ol><li>provided.innerRef: 为了使droppable正常工作，必须将provided.innerRef绑定到ReactElement中最高可能的DOM节点。</li><li>provided.droppableProps: 这是一个Object，它包含需要应用于Droppable元素的属性,包含一个数据属性，可以用它来控制一些不可见的CSS</li><li>provided.placeholder: 占位符</li><li>snapshot： 当前拖动状态，可以用来在被拖动时改变Droppable的外观。<pre class="line-numbers language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Droppable</span> <span class="token attr-name">droppableId</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>droppable-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{(provided, snapshot) => (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span>{provided.innerRef}</span><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span>{{</span> <span class="token attr-name"><span class="token namespace">backgroundColor:</span></span> <span class="token attr-name">snapshot.isDraggingOver</span> <span class="token attr-name">?</span> <span class="token attr-name">'blue'</span> <span class="token attr-name">:</span> <span class="token attr-name">'grey'</span> <span class="token attr-name">}}</span><span class="token attr-name">{...provided.droppableProps}</span><span class="token punctuation">></span></span>I am a droppable!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>)}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Droppable</span><span class="token punctuation">></span></span>;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ol></li></ol><h3 id="Draggable"><a href="#Draggable" class="headerlink" title="Draggable"></a>Draggable</h3><pre class="line-numbers language-xml"><code class="language-xml">import { Draggable } from 'react-beautiful-dnd';<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Draggable</span> <span class="token attr-name">draggableId</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>draggable-1<span class="token punctuation">"</span></span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation">=</span>{0}</span><span class="token punctuation">></span></span> {(provided, snapshot) => ( <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span>{provided.innerRef}</span> <span class="token attr-name">{...provided.draggableProps}</span> <span class="token attr-name">{...provided.dragHandleProps}</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>My draggable<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> )}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Draggable</span><span class="token punctuation">></span></span>;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ol><li>Draggable必须始终包含在Droppable中。</li><li>可以在Droppable内重新排序Draggable或移动到另一个Droppable。</li><li>DraggablebId（字符串）：必须存在唯一ID，和index（如果为遍历 key也需要）不要更改此ID - 特别是在拖动时。</li><li>isDragDisabled： 默认false，一个可选标志，用于控制是否允许Draggable拖动。</li><li>provided.draggableProps 和 provided.dragHandleProps 必须套用至元件</li><li>其他同Droppable，详情见<a href="https://github.com/atlassian/react-beautiful-dnd" target="_blank" rel="noopener">官方文档</a></li></ol><h3 id="数组重新排序"><a href="#数组重新排序" class="headerlink" title="数组重新排序"></a>数组重新排序</h3><pre class="line-numbers language-javascript"><code class="language-javascript">onDragEnd <span class="token operator">=</span> result <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> source<span class="token punctuation">,</span> destination<span class="token punctuation">,</span> draggableId <span class="token punctuation">}</span> <span class="token operator">=</span> result<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>destination<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> arr <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>todos<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>remove<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>source<span class="token punctuation">.</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> arr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>destination<span class="token punctuation">.</span>index<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> remove<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> todos<span class="token punctuation">:</span> arr<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="demo"><a href="#demo" class="headerlink" title="demo"></a>demo</h2><iframe src="https://codesandbox.io/embed/react-beautiful-dnd-52qs6?autoresize=1&fontsize=14&hidenavigation=1&view=preview" title="react-beautiful-dnd" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" style="width:100%;height:500px;border:0;border-radius:4px;overflow:hidden" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
</entry>
<entry>
<title>模拟实现javaScript new操作符</title>
<link href="https://booboom.github.io/archive/javaScript-new-init.html"/>
<id>https://booboom.github.io/archive/javaScript-new-init.html</id>
<published>2019-09-03T05:16:35.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><pre class="line-numbers language-javaScript"><code class="language-javaScript">function Person(name){ this.name = name}// function myNew(name){// var o = {}// o.__proto__ = Person.prototype// Person.call(o,name)// return o// }function myNew(ctor){ if(typeof ctor !== 'function'){ //判断传入参数是否为function类型 throw 'muNew的第一个参数必须为function' } // 创建一个新对象 var o = {} try { o.__proto__ = ctor.prototype //将构造函数的作用域赋给新对象，也就是改变上下文 ，让this指向这个新对象 } catch (error) { Object.setPrototypeOf(o, ctor.prototype) } var result = ctor.apply(o,[].slice.call(arguments,1)) //执行构造函数，传入形参（去掉第一个参数：因为第一个参数为传入的构造函数），获取返回结果 // console.log(123,result) return typeof result === 'object' ? result : o //如果返回值为引用类型， 返回 返回值 否则就返回新创建的对象o // * 所以构造函数的返回值不能为引用类型 （最好不要有返回值）}var a = myNew(Person,"baoza")// var a = new Person("baoza")console.log(a.name)console.log(a instanceof Person)<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="javaScript" scheme="https://booboom.github.io/categories/javaScript/"/>
<category term="new操作符" scheme="https://booboom.github.io/tags/new%E6%93%8D%E4%BD%9C%E7%AC%A6/"/>
</entry>
<entry>
<title>模拟实现javaScript call函数</title>
<link href="https://booboom.github.io/archive/javaScript-call-init.html"/>
<id>https://booboom.github.io/archive/javaScript-call-init.html</id>
<published>2019-09-03T05:14:14.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">dragon</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">}</span><span class="token keyword">function</span> <span class="token function">say</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> content<span class="token punctuation">)</span><span class="token punctuation">}</span>Function<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>myCall <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span><span class="token punctuation">{</span> params <span class="token operator">=</span> params <span class="token operator">||</span> window <span class="token comment" spellcheck="true">//多场景适配，当没有传入参数或传入参数为undefined、null的时，指定为window</span> params<span class="token punctuation">.</span>fn <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token comment" spellcheck="true">//绑定this，代替上下文执行</span> <span class="token keyword">let</span> ars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment" spellcheck="true">//创建空数组保存形参</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arguments<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">// 从第1位开始循环，将形参存入空数组（第0位是传入的函数实例）</span> ars<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arguments<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment" spellcheck="true">//let ars = Array.prototype.slice(arguments,1)</span> <span class="token keyword">let</span> result <span class="token operator">=</span> params<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>ars<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//执行上下文函数，并获取返回结果</span> <span class="token keyword">delete</span> params<span class="token punctuation">.</span>fn <span class="token comment" spellcheck="true">//删除上下文函数</span> <span class="token keyword">return</span> result<span class="token punctuation">}</span><span class="token keyword">var</span> kk <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">dragon</span><span class="token punctuation">(</span><span class="token string">'CXK'</span><span class="token punctuation">)</span>say<span class="token punctuation">.</span><span class="token function">myCall</span><span class="token punctuation">(</span>kk<span class="token punctuation">,</span><span class="token string">'大家好，我是练习时长两年半的偶像练习生！'</span><span class="token punctuation">)</span><span class="token keyword">var</span> nums <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">23</span><span class="token punctuation">,</span><span class="token number">435</span><span class="token punctuation">,</span><span class="token number">345</span><span class="token punctuation">,</span><span class="token number">34</span><span class="token punctuation">,</span><span class="token number">45</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">25</span><span class="token punctuation">,</span><span class="token number">677</span><span class="token punctuation">,</span><span class="token number">349</span><span class="token punctuation">,</span><span class="token number">563</span><span class="token punctuation">]</span><span class="token keyword">var</span> maxNum <span class="token operator">=</span> Math<span class="token punctuation">.</span>max<span class="token punctuation">.</span><span class="token function">myCall</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token operator">...</span>nums<span class="token punctuation">)</span><span class="token comment" spellcheck="true">// var maxNum = Math.max.call(Math,...nums)</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>maxNum<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="javaScript" scheme="https://booboom.github.io/categories/javaScript/"/>
<category term="call" scheme="https://booboom.github.io/tags/call/"/>
</entry>
<entry>
<title>webpack打包文件</title>
<link href="https://booboom.github.io/archive/webpack-config.html"/>
<id>https://booboom.github.io/archive/webpack-config.html</id>
<published>2019-08-05T04:23:52.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>搭建设用于自己的webpack项目工程化打包文件配置，</p><h2 id="webpack-comfig-js"><a href="#webpack-comfig-js" class="headerlink" title="webpack.comfig.js"></a>webpack.comfig.js</h2><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// package.json : npm init -y</span><span class="token comment" spellcheck="true">// 移除main入口，安装包私有 </span><span class="token comment" spellcheck="true">// + "private": true,</span><span class="token comment" spellcheck="true">// - "main": "index.js"</span><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">const</span> <span class="token punctuation">{</span>CleanWebpackPlugin<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'clean-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">// npm i webpack webpack-cli --save-dev</span><span class="token comment" spellcheck="true">// 全局安装： npm i --global webpack </span><span class="token comment" spellcheck="true">// 最新版本： npm i webpack@beta</span><span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/* entry: 入口文件，有三种类型 1.字符串： entry: ’./index.js‘ 指定从这个文件路径下面作为打包的入口文件 2.数组： entry: [''./src/'index.js, './vendor/bootstrap.min.js'] 当存在多个入口时，可以使用Array的方式，比如依赖第三方库bootstrap，最终bootstrap会被最佳到打包好的index.js中，数组中的最后一个会被export。 3.对象： entry: { index: './src/index.js', a: './src/a.js' } 设置多个打包目标，每一对键值对都对应一个入口文件（常用于多页面入口文件配置） output: 指生成的文件输出到哪里去。 path： 可能对应文件路径，也可能是从url访问的情况下的路径 filename： 用来配置生成的文件名 */</span> entry<span class="token punctuation">:</span> <span class="token punctuation">{</span> app<span class="token punctuation">:</span> <span class="token string">'./src/index.js'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// print: './src/print.js'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token comment" spellcheck="true">// 重置dist文件夹 npm i clean-webpack-plugin --save-dev</span> <span class="token keyword">new</span> <span class="token class-name">CleanWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 热更新</span> <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>NamedModulesPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>HotModuleReplacementPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 输出html npm i html-webpack-plugin --save-dev</span> <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Output Management'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> output<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">// filename: 'bundle.js',</span> filename<span class="token punctuation">:</span> <span class="token string">'[name].bundle.js'</span><span class="token punctuation">,</span> path<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 报错信息指向源文件</span> devtool<span class="token punctuation">:</span> <span class="token string">'inline-source-map'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 开发环境</span> devServer<span class="token punctuation">:</span> <span class="token punctuation">{</span> contentBase<span class="token punctuation">:</span> <span class="token string">'./dist'</span><span class="token punctuation">,</span> hot<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// build代码压缩</span> mode<span class="token punctuation">:</span> <span class="token string">"production"</span><span class="token punctuation">,</span> module<span class="token punctuation">:</span> <span class="token punctuation">{</span> rules<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token comment" spellcheck="true">// css处理 npm i style-loader css-loader --save-dev</span> <span class="token punctuation">{</span> test<span class="token punctuation">:</span> <span class="token regex">/\.css/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'style-loader'</span><span class="token punctuation">,</span> <span class="token string">'css-loader'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 图像处理 npm i file-loader --save-dev</span> <span class="token punctuation">{</span> test<span class="token punctuation">:</span> <span class="token regex">/\.(png|svg|jpe?g|gif)$/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'file-loader'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">// 图片处理 压缩</span> loader<span class="token punctuation">:</span> <span class="token string">'image-webpack-loader'</span><span class="token punctuation">,</span> options<span class="token punctuation">:</span> <span class="token punctuation">{</span> mozjpeg<span class="token punctuation">:</span> <span class="token punctuation">{</span> progressive<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> quality<span class="token punctuation">:</span> <span class="token number">65</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> optipng<span class="token punctuation">:</span> <span class="token punctuation">{</span> enable<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> pngquant<span class="token punctuation">:</span> <span class="token punctuation">{</span> quality<span class="token punctuation">:</span> <span class="token string">'65-90'</span><span class="token punctuation">,</span> speed<span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> gifsicle<span class="token punctuation">:</span> <span class="token punctuation">{</span> interlaced<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> webp<span class="token punctuation">:</span> <span class="token punctuation">{</span> quality<span class="token punctuation">:</span> <span class="token number">75</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 字体处理</span> <span class="token punctuation">{</span> test<span class="token punctuation">:</span> <span class="token regex">/\.(woff|woff2|eot|ttf|otf)$/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'file-loader'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="package-json"><a href="#package-json" class="headerlink" title="package.json"></a>package.json</h2><pre class="line-numbers language-json"><code class="language-json"><span class="token punctuation">{</span><span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"demo-webpack"</span><span class="token punctuation">,</span><span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"1.0.0"</span><span class="token punctuation">,</span><span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"test"</span><span class="token punctuation">,</span><span class="token property">"private"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"lodash"</span><span class="token operator">:</span> <span class="token string">"^4.17.15"</span><span class="token punctuation">,</span> <span class="token property">"npm"</span><span class="token operator">:</span> <span class="token string">"^6.10.2"</span><span class="token punctuation">,</span> <span class="token property">"webpack"</span><span class="token operator">:</span> <span class="token string">"^4.38.0"</span><span class="token punctuation">,</span> <span class="token property">"webpack-cli"</span><span class="token operator">:</span> <span class="token string">"^3.3.6"</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"clean-webpack-plugin"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> <span class="token property">"css-loader"</span><span class="token operator">:</span> <span class="token string">"^3.1.0"</span><span class="token punctuation">,</span> <span class="token property">"file-loader"</span><span class="token operator">:</span> <span class="token string">"^4.1.0"</span><span class="token punctuation">,</span> <span class="token property">"html-webpack-plugin"</span><span class="token operator">:</span> <span class="token string">"^3.2.0"</span><span class="token punctuation">,</span> <span class="token property">"image-webpack-loader"</span><span class="token operator">:</span> <span class="token string">"^5.0.0"</span><span class="token punctuation">,</span> <span class="token property">"style-loader"</span><span class="token operator">:</span> <span class="token string">"^0.23.1"</span><span class="token punctuation">,</span> <span class="token property">"webpack-dev-server"</span><span class="token operator">:</span> <span class="token string">"^3.7.2"</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"echo \"Error: no test specified\" && exit 1"</span><span class="token punctuation">,</span> <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"webpack"</span><span class="token punctuation">,</span> <span class="token property">"start"</span><span class="token operator">:</span> <span class="token string">"webpack-dev-server --open --compress --host 0.0.0.0"</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token property">"author"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span><span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"ISC"</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
</entry>
<entry>
<title>macOS定时器crontab定时执行python脚本</title>
<link href="https://booboom.github.io/archive/crontab.html"/>
<id>https://booboom.github.io/archive/crontab.html</id>
<published>2019-04-26T05:56:20.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><h2 id="查看crontab执行环境"><a href="#查看crontab执行环境" class="headerlink" title="查看crontab执行环境"></a>查看crontab执行环境</h2><h3 id="查看是否安装python"><a href="#查看是否安装python" class="headerlink" title="查看是否安装python"></a>查看是否安装python</h3><pre class="line-numbers language-bash"><code class="language-bash">$ <span class="token function">which</span> python3/usr/local/bin/python3<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h3 id="查看crontab是否启动"><a href="#查看crontab是否启动" class="headerlink" title="查看crontab是否启动"></a>查看crontab是否启动</h3><pre class="line-numbers language-bash"><code class="language-bash">$ <span class="token function">sudo</span> launchctl list <span class="token operator">|</span> <span class="token function">grep</span> <span class="token function">cron</span>Password:53570 0 com.vix.cron<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><blockquote><p>crontab 服务开启、重启和关闭</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">sudo</span> /usr/sbin/cron start<span class="token function">sudo</span> /usr/sbin/cron restart<span class="token function">sudo</span> /usr/sbin/cron stop<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></blockquote><h3 id="查看database是否存在"><a href="#查看database是否存在" class="headerlink" title="查看database是否存在"></a>查看database是否存在</h3><pre class="line-numbers language-bash"><code class="language-bash">$ <span class="token function">locate</span> com.vix.cronWARNING: The <span class="token function">locate</span> database <span class="token punctuation">(</span>/var/db/locate.database<span class="token punctuation">)</span> does not exist.To create the database, run the following command: <span class="token function">sudo</span> launchctl load -w /System/Library/LaunchDaemons/com.apple.locate.plistPlease be aware that the database can take some <span class="token function">time</span> to generate<span class="token punctuation">;</span> oncethe database has been created, this message will no longer appear.<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>如果报以上错误，则没有database，创建：</p><pre class="line-numbers language-bash"><code class="language-bash">$ <span class="token function">sudo</span> launchctl load -w /System/Library/LaunchDaemons/com.apple.locate.plist<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="查看-etc-crontab是否存在"><a href="#查看-etc-crontab是否存在" class="headerlink" title="查看/etc/crontab是否存在"></a>查看/etc/crontab是否存在</h3><pre class="line-numbers language-bash"><code class="language-bash">$ ll /etc/crontab<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>不存在则创建：</p><pre class="line-numbers language-bash"><code class="language-bash">$ <span class="token function">sudo</span> <span class="token function">touch</span> /etc/crontab<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h2 id="crontab命令参数"><a href="#crontab命令参数" class="headerlink" title="crontab命令参数"></a>crontab命令参数</h2><ol><li>-u user：用来设定某个用户的crontab服务；</li><li>file：file是命令文件的名字,表示将file做为crontab的任务列表文件并载入crontab。如果在命令行中没有指定这个文件，crontab命令将接受标准输入（键盘）上键入的命令，并将它们载入crontab。</li><li>-e：编辑某个用户的crontab文件内容。如果不指定用户，则表示编辑当前用户的crontab文件。</li><li>-l：显示某个用户的crontab文件内容，如果不指定用户，则表示显示当前用户的crontab文件内容。</li><li>-r：从/var/spool/cron目录中删除某个用户的crontab文件，如果不指定用户，则默认删除当前用户的crontab文件。</li><li>-i：在删除用户的crontab文件时给确认提示。</li></ol><p>常用的操作基本就是修改和查看<br>修改：<code>crontab -e</code><br>查看：<code>crontab -l</code></p><h2 id="crontab文件格式"><a href="#crontab文件格式" class="headerlink" title="crontab文件格式"></a>crontab文件格式</h2><p><code>* * * * * command</code><br><code>M H D m d command</code></p><p>M: 分（0-59）<br>H：时（0-23）<br>D：天（1-31）<br>m: 月（1-12）<br>d: 周（0-6） 0为星期日</p><p>每分钟执行命令：查询当前时间<br><code>* * * * * date</code><br>每天9点30执行命令：查询当前时间<br><code>30 9 * * * date</code></p><h2 id="日志重定向"><a href="#日志重定向" class="headerlink" title="日志重定向"></a>日志重定向</h2><p>不做任何处理日志会保存到<code>/var/mail/Username</code>文件夹下。<br>可以用<code>2>&1</code>来重定向日志保存路径。</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true"># 每天9：30执行python脚本，并且将执行日志保存到/Users/admin/Documents/py_bao/ko_data/log/路径下</span>30 9 * * * /usr/local/bin/python3 /Users/admin/Documents/py_bao/ko_data/ko.py <span class="token operator">>></span> <span class="token string">"/Users/admin/Documents/py_bao/ko_data/log/$(date +"</span>\%Y-\%m-\%d_\%H<span class="token string">").log"</span> 2<span class="token operator">></span><span class="token operator">&</span>1<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><blockquote><p>执行脚本的时候要将命令的路径写出来<code>usr/local/bin/python3</code>，否则会报错。</p></blockquote><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="mac" scheme="https://booboom.github.io/categories/mac/"/>
<category term="python" scheme="https://booboom.github.io/tags/python/"/>
<category term="crontab" scheme="https://booboom.github.io/tags/crontab/"/>
</entry>
<entry>
<title>H5唤醒APP</title>
<link href="https://booboom.github.io/archive/H5toApp.html"/>
<id>https://booboom.github.io/archive/H5toApp.html</id>
<published>2019-03-29T07:48:18.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><h2 id="H5-唤醒APP功能"><a href="#H5-唤醒APP功能" class="headerlink" title="H5 唤醒APP功能"></a>H5 唤醒APP功能</h2><p>最近遇到一个需求，需要在从APP分享出去的H5页面中，带有一个立即打开的按钮，如果本地安装了app，那么就直接唤起本地的app，如果没有安装，则跳转到下载。这是一个很正常的推广和导流量的策略。前端小白从来没有做过这个需求，只能开始哼唧哼唧地开启自己的度娘和谷歌之旅。</p><p>经过一段时间的探索之旅发现里面的学问很多，要做一个兼容性很好的方案，就需要考虑各种情况，在不同的情况适配不同的方案，比方说用户是在手机浏览器打开还是微信中打开，或者是在pc中打开，universal腾讯应用宝直接打开 APP link是否被关闭等，这就使代码实现变得复杂，且容易出错，且还有安卓平台机型众多、浏览器众多等导致的兼容问题。由于时间有限，这次主要先介绍一个比较普遍的使用URL Scheme进行App跳转的方法。</p><h2 id="URL-Scheme-——-唤端媒介"><a href="#URL-Scheme-——-唤端媒介" class="headerlink" title="URL Scheme —— 唤端媒介"></a>URL Scheme —— 唤端媒介</h2><p>一般来说，我们使用的智能设备上有许多我们的个人信息。比如：联系方式、银行卡/信用卡信息、支付宝/Paypal/各大商城的账户密码、照片甚至行程与位置信息等。</p><p>如果说，你设备上的每一个应用，不管是官方的还是你从任何商城安装的应用都可以随意地获取这些信息，那么你轻则收到骚扰信息和邮件、重则后果不堪设想。如何让这些信息不被其它应用随意使用，或者说，如何让这些信息仅在设备所有者本人知情并允许的情况下被使用，是所有智能设备与操作系统所要在乎的核心安全问题。针对这个问题，苹果使用了名为「沙盒」的机制：应用只能访问它声明可能访问的资源。一切提交到 App Store 的应用都必须遵守这个机制。</p><p>在安全方面沙盒是个很好的解决办法，但是有些矫枉过正。敏感的个人信息我们不愿意透露，却不代表所有的信息我们都不想与其它应用共享。因此，我们急需要一个辅助工具来帮助我们实现应用通信， URL Schemes 就是这个工具。</p><h2 id="URL-Schemes是什么"><a href="#URL-Schemes是什么" class="headerlink" title="URL Schemes是什么"></a>URL Schemes是什么</h2><pre class="line-numbers language-sh"><code class="language-sh">[scheme]://[host]/[path]?[query]<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>我们拿 <a href="https://www.baidu.com" target="_blank" rel="noopener">https://www.baidu.com</a> 来举例，scheme 自然就是 https 了，后面拼接的是传递的参数。URL Schemes 没有特别严格的规范，所以后面参数的具体定义是app开发者去自定义。</p><p>就像给服务器资源分配一个 URL，以便我们去访问它一样，我们同样也可以给手机APP分配一个特殊格式的 URL，用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识，好让我们可以定位到它，它就是 URL 的 Scheme 部分。</p><p>但是，两者还有几个重要的区别：</p><ol><li>所有网页都一定有网址，不管是首页还是子页。但未必所有的应用都有自己的 URL Schemes，更不是每个应用的每个功能都有相应的 URL Schemes。几乎没有所有功能都有对应 URL 的应用。一个 App 是否支持 URL Schemes 要看那个 App 的作者是否在自己的作品里添加了 URL Schemes 相关的代码。</li><li>一个网址只对应一个网页，但并非每个 URL Schemes 都只对应一款应用。这点是因为苹果没有对 URL Schemes 有不允许重复的硬性要求，所以曾经出现过有 App 使用支付宝的 URL Schemes 拦截支付帐号和密码的事件。</li><li>一般网页的 URL 比较好预测，而URL Scheme 因为没有统一标准，所以非常难猜，通过猜来获取 应用的 URL Schemes 是不现实的。</li></ol><p>前面普及了一下URL Schemes的相关知识，作为个前端开发者，就不去深究其中的原理，都交给app开发者吧。接下来开始我们的正题。首先当然是要客户端提供App的Url Schemes。</p><h2 id="用浏览器去打开scheme"><a href="#用浏览器去打开scheme" class="headerlink" title="用浏览器去打开scheme"></a>用浏览器去打开scheme</h2><p>在浏览器中打开 scheme 就像打开一个不同的http地址一样。可以在一个 a 标签中打开。</p><pre class="line-numbers language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app://<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>open<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>打开应用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>点击上面的H5页面中的链接将会尝试唤醒对应app，在一些浏览器中，可能会弹出一个提示框，询问用户是否允许打开应用。<br>如果打开的 scheme 在本地没有对应的 app，则点击不会反应。<br>当然还可以使用 JavaScript 代码打开，只需要添加相应的事件触发和处理即可。</p><p>在JavaScript代码中打开连接有以下几种方式：</p><ol><li>新建一个隐藏的 iframe ，地址指向需要打开的url</li><li>使用 window.location 或者 window.location.href 刷新当前页面</li><li>新建一个隐藏的 a 标签，地址指向打开的url，并触发打开链接事件</li><li>动态创建一个script脚本，在这个脚本中新建一个a标签并打开</li></ol><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// 打开url方式</span><span class="token keyword">var</span> urlOpen <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">// ios体验差</span> iframe <span class="token punctuation">:</span> url <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> iframe <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'iframe'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> iframe<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</span><span class="token punctuation">;</span> iframe<span class="token punctuation">.</span>src <span class="token operator">=</span> url<span class="token punctuation">;</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>iframe<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> location<span class="token punctuation">:</span> url <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href <span class="token operator">=</span> url<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> href<span class="token punctuation">:</span> url <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> a<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</span><span class="token punctuation">;</span> a<span class="token punctuation">.</span>href <span class="token operator">=</span> url<span class="token punctuation">;</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> a<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> script<span class="token punctuation">:</span> url <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> script <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> script<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span><span class="token string">'test/javascript'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> script<span class="token punctuation">.</span>innerHtml <span class="token operator">=</span> <span class="token template-string"><span class="token string">`(function(){ var a = document.createElement("a"); a.style.display = "none"; 'a.href = " + `</span></span>url<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token operator">/</span><span class="token string">"/g,'\\"</span>'<span class="token punctuation">)</span><span class="token template-string"><span class="token string">` + "; document.body.appendChild(a); a.click(); })()`</span></span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>script<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> open<span class="token punctuation">:</span> url <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>以上方法是只是解决了在已安装App设备唤醒App的功能，并不能判断是否已安装App，没有安装即跳转至下载链接。</p><h2 id="浏览器判断是否安装应用"><a href="#浏览器判断是否安装应用" class="headerlink" title="浏览器判断是否安装应用"></a>浏览器判断是否安装应用</h2><p>在JavaScript中判断页面是否进入后台来判断打开成功。Html5提供了下列事件和属性可以利用：</p><ol><li>pagehide : 页面隐藏时触发</li><li>visibilitychange : 页面隐藏没有在当前显示时触发(切换tab也会触发该事件)</li><li>document.hidden ： 当页面隐藏时，该值为true，显示时为false</li></ol><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> downloader<span class="token punctuation">,</span> scheme <span class="token operator">=</span> <span class="token string">'app://'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 需要打开的app scheme 地址</span> iosDownload <span class="token operator">=</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 如果打开scheme失效的app下载地址</span> andDownload <span class="token operator">=</span> <span class="token string">'http://xxx.com'</span><span class="token punctuation">;</span> <span class="token keyword">var</span> u <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">;</span><span class="token keyword">var</span> isAndroid <span class="token operator">=</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Android'</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">||</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Linux'</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//android</span><span class="token keyword">var</span> isIOS <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span>u<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/\(i[^;]+;( U;)? CPU.+Mac OS X/</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">//ios终端</span><span class="token comment" spellcheck="true">// 给id为openApp的按钮添加点击事件</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'openApp'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>onclick <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href <span class="token operator">=</span> scheme<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">//尝试打开 scheme</span> <span class="token comment" spellcheck="true">// 设置定时任务，3秒后打开下载链接</span> downloader <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">setTimeOut</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span>isAndroid<span class="token punctuation">)</span><span class="token punctuation">{</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href <span class="token operator">=</span> andDownload<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span><span class="token punctuation">(</span>isIOS<span class="token punctuation">)</span><span class="token punctuation">{</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href <span class="token operator">=</span> iosDownload<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 如果当前页面隐藏，推断打开 scheme成功，清除定时任务</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'visibilitychange webkitvisibitychange'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>hidden <span class="token operator">||</span> document<span class="token punctuation">.</span>webkitHidden<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">clearTimeout</span><span class="token punctuation">(</span>downloader<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'pagehide'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">clearTimeout</span><span class="token punctuation">(</span>downloader'<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h2><blockquote><p>微信中无法唤醒App，需要“用浏览器打开”是因为微信对所有的分享链接接做了scheme屏蔽，也就是说分享连接中所有对于scheme的调用都被微信封掉了。有些app是能在微信打开是因为微信有一个白名单。</p></blockquote><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="前端" scheme="https://booboom.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="H5" scheme="https://booboom.github.io/tags/H5/"/>
</entry>
<entry>
<title>css进度条</title>
<link href="https://booboom.github.io/archive/cssProp.html"/>
<id>https://booboom.github.io/archive/cssProp.html</id>
<published>2019-03-29T06:51:35.000Z</published>
<updated>2021-12-02T07:00:42.474Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>效果如图：<br><img src="https://i.loli.net/2021/12/02/fXgv3YOwheNqdEr.gif" alt=""></p><h2 id="html代码"><a href="#html代码" class="headerlink" title="html代码"></a>html代码</h2><pre class="line-numbers language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>prop<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h2 id="css代码"><a href="#css代码" class="headerlink" title="css代码"></a>css代码</h2><pre class="line-numbers language-css"><code class="language-css"><span class="token selector"><span class="token class">.cell</span></span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">5</span>px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#ddd</span><span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector"><span class="token class">.prop</span></span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">5</span>px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right, <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">239</span>,<span class="token number">141</span>,<span class="token number">142</span>,<span class="token number">1</span><span class="token punctuation">)</span>,<span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">98</span>,<span class="token number">152</span>,<span class="token number">248</span>,<span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform-origin</span><span class="token punctuation">:</span> left center<span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">;</span> <span class="token property">animation</span><span class="token punctuation">:</span> <span class="token number">2</span>s ease-in <span class="token number">1</span>s slidein infinite<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@keyframes</span> slidein</span><span class="token punctuation">{</span> <span class="token selector">0% </span><span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100% </span><span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleX</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><blockquote><p><code>transform-origin: left center;</code> 伸展方向<br><code>transform: scaleX(0);</code> 横向缩放</p></blockquote><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="前端" scheme="https://booboom.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="css" scheme="https://booboom.github.io/tags/css/"/>
</entry>
<entry>
<title>vue下监听微信内置浏览器回退事件并关闭当前页面</title>
<link href="https://booboom.github.io/archive/vueWxBackHistory.html"/>
<id>https://booboom.github.io/archive/vueWxBackHistory.html</id>
<published>2019-03-21T10:33:26.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><h2 id="监听浏览器回退事件"><a href="#监听浏览器回退事件" class="headerlink" title="监听浏览器回退事件"></a>监听浏览器回退事件</h2><p>在Vue mounted周期中监听事件</p><pre class="line-numbers language-js"><code class="language-js"><span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>history <span class="token operator">&&</span> window<span class="token punctuation">.</span>history<span class="token punctuation">.</span>pushState<span class="token punctuation">)</span> <span class="token punctuation">{</span> history<span class="token punctuation">.</span><span class="token function">pushState</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>URL<span class="token punctuation">)</span><span class="token punctuation">;</span> window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'popstate'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>goBack<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="执行自定义方法（关闭当前页面）"><a href="#执行自定义方法（关闭当前页面）" class="headerlink" title="执行自定义方法（关闭当前页面）"></a>执行自定义方法（关闭当前页面）</h2><p>index.html中引入微信 <a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115" target="_blank" rel="noopener">JS-SDK</a>。</p><pre class="line-numbers language-js"><code class="language-js"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span> src<span class="token operator">=</span><span class="token string">"https://res.wx.qq.com/open/js/jweixin-1.3.2.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>然后在methods里编辑自定义的goBack方法。</p><pre class="line-numbers language-js"><code class="language-js">methods<span class="token punctuation">:</span><span class="token punctuation">{</span> <span class="token function">goBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> wx<span class="token punctuation">.</span><span class="token function">closeWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="页面卸载是取消监听事件（防止阻碍其他页面）"><a href="#页面卸载是取消监听事件（防止阻碍其他页面）" class="headerlink" title="页面卸载是取消监听事件（防止阻碍其他页面）"></a>页面卸载是取消监听事件（防止阻碍其他页面）</h2><pre class="line-numbers language-js"><code class="language-js"><span class="token function">destroyed</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> window<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'popstate'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>goBack<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="H5" scheme="https://booboom.github.io/categories/H5/"/>
<category term="微信" scheme="https://booboom.github.io/tags/%E5%BE%AE%E4%BF%A1/"/>
</entry>
<entry>
<title>背景颜色渐变动画</title>
<link href="https://booboom.github.io/archive/backgoundLinearGradient.html"/>
<id>https://booboom.github.io/archive/backgoundLinearGradient.html</id>
<published>2019-03-14T08:50:38.000Z</published>
<updated>2021-12-02T06:58:48.307Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p><img src="https://i.loli.net/2021/12/02/Vg2XvWpISPByoF9.gif" alt=""></p><h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><pre class="line-numbers language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>背景颜色渐变动画<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><pre class="line-numbers language-css"><code class="language-css"><span class="token selector">body </span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span>wh<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span>vh<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>-<span class="token number">45</span>deg, <span class="token hexcode">#EE7752</span>, <span class="token hexcode">#E73C7E</span>, <span class="token hexcode">#23A6D5</span>, <span class="token hexcode">#23D5AB</span><span class="token punctuation">)</span> no-repeat<span class="token punctuation">;</span> <span class="token property">background-size</span><span class="token punctuation">:</span> <span class="token number">400%</span><span class="token punctuation">;</span> <span class="token property">animation</span><span class="token punctuation">:</span> Gradient <span class="token number">15</span>s ease infinite<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@keyframes</span> Gradient</span> <span class="token punctuation">{</span> <span class="token selector">0% </span><span class="token punctuation">{</span> <span class="token property">background-position</span><span class="token punctuation">:</span> <span class="token number">0%</span> <span class="token number">50%</span> <span class="token punctuation">}</span> <span class="token selector">50% </span><span class="token punctuation">{</span> <span class="token property">background-position</span><span class="token punctuation">:</span> <span class="token number">100%</span> <span class="token number">50%</span> <span class="token punctuation">}</span> <span class="token selector">100% </span><span class="token punctuation">{</span> <span class="token property">background-position</span><span class="token punctuation">:</span> <span class="token number">0%</span> <span class="token number">50%</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">h1,h6 </span><span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Open Sans'</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">45%</span><span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h2><blockquote><p>background的linear-gradient属性</p></blockquote><ul><li>关于linear-gradient可以移步<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient" target="_blank" rel="noopener"><code>这里</code></a></li></ul><p><img src="https://i.loli.net/2021/12/02/6IFJRqa8iNodtAu.jpg" alt=""><br>上图为background-size为100时，可以看出渐变区域为四个，当我们把background-size改成400，就会在可视区域显示一个渐变区域，然后利用background-position的X坐标定位，改变background的位置，来实现渐变的动画效果。</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="web" scheme="https://booboom.github.io/categories/web/"/>
<category term="css" scheme="https://booboom.github.io/tags/css/"/>
</entry>
<entry>
<title>小程序踩坑（四）之wepy组件</title>
<link href="https://booboom.github.io/archive/TencentMP-4.html"/>
<id>https://booboom.github.io/archive/TencentMP-4.html</id>
<published>2019-02-11T09:44:20.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><h2 id="写组件"><a href="#写组件" class="headerlink" title="写组件"></a>写组件</h2><ul><li><p>navBar.wepy</p><pre class="line-numbers language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navBar {{iphoneX ? <span class="token punctuation">'</span>iphoneX-tabBar<span class="token punctuation">'</span> :<span class="token punctuation">'</span><span class="token punctuation">'</span>}}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navBar-bg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navBar-content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{!showExam}}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navBar-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{tabBarTitle}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>image</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{{returnIcon}}<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>icon-left<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://16bit.sunlands.com/p/static/ko-mp/left-icon.png<span class="token punctuation">"</span></span> <span class="token attr-name">@tap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navigateBack<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"><span class="token keyword">import</span> wepy <span class="token keyword">from</span> <span class="token string">'wepy'</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">NavBar</span> <span class="token keyword">extends</span> <span class="token class-name">wepy<span class="token punctuation">.</span>component</span> <span class="token punctuation">{</span>data <span class="token operator">=</span> <span class="token punctuation">{</span> iphoneX<span class="token punctuation">:</span> wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span><span class="token string">'iphoneXStatus'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>props <span class="token operator">=</span> <span class="token punctuation">{</span> showExam<span class="token punctuation">:</span> Boolean<span class="token punctuation">,</span> returnIcon<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> Boolean<span class="token punctuation">,</span> twoWay<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> tabBarTitle<span class="token punctuation">:</span> String<span class="token punctuation">,</span><span class="token punctuation">}</span>methods <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">navigateBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> wx<span class="token punctuation">.</span><span class="token function">navigateBack</span><span class="token punctuation">(</span><span class="token punctuation">{</span> delta<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>less</p><pre class="line-numbers language-less"><code class="language-less"><span class="token selector"><style lang="less">.navBar</span><span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token number">40</span>rpx<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span>vw<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">88</span>rpx<span class="token punctuation">;</span><span class="token selector">.navBar-bg</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.navBar-content</span><span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span>vw<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">88</span>rpx<span class="token punctuation">;</span> <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token number">40</span>rpx<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#FFFFFF</span><span class="token punctuation">;</span> <span class="token selector">.navBar-title</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span>vw<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">88</span>rpx<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">88</span>rpx<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">32</span>rpx<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">700</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#000000</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.icon-left</span><span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">14</span>rpx<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">11</span>rpx<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">34</span>rpx<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">34</span>rpx<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">16</span>rpx<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token selector">.iphoneX-tabBar</span><span class="token punctuation">{</span><span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token number">88</span>rpx<span class="token punctuation">;</span><span class="token selector">.navBar-content</span><span class="token punctuation">{</span> <span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token number">88</span>rpx<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><<span class="token operator">/</span>style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ul><h2 id="引入组件"><a href="#引入组件" class="headerlink" title="引入组件"></a>引入组件</h2><ul><li>index.wepy<pre class="line-numbers language-javaScript"><code class="language-javaScript">import wepy from 'wepy'import NavBar from '../components/navBar';export default class Index extends wepy.page { components = { 'nav-bar': NavBar }}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ul><h2 id="使用组件"><a href="#使用组件" class="headerlink" title="使用组件"></a>使用组件</h2><pre class="line-numbers language-html"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav-bar</span> <span class="token attr-name">:returnIcon.sync</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>returnIcon<span class="token punctuation">'</span></span> <span class="token attr-name">:tabBarTitle.sync</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tabBarTitle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav-bar</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><blockquote><p>注意：<br>在使用组件中，组件上传值要与组件内定义的类型一致，<code>:returnIcon.sync='returnIcon'</code>，returnIcon为Boolean类型；<br>且<code>不支持:returnIcon.sync='!returnIcon'</code>，<code>!</code>符号。</p></blockquote><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="小程序" scheme="https://booboom.github.io/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="wepy" scheme="https://booboom.github.io/tags/wepy/"/>
</entry>
<entry>
<title>python判断本地是否存在当前文件&&保存为本地json文件</title>
<link href="https://booboom.github.io/archive/python-os-json.html"/>
<id>https://booboom.github.io/archive/python-os-json.html</id>
<published>2018-10-26T11:18:26.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><h2 id="判断本地是否存在当前文件"><a href="#判断本地是否存在当前文件" class="headerlink" title="判断本地是否存在当前文件"></a>判断本地是否存在当前文件</h2><p>根据python-os包来判断当前文件路径是否有文件。</p><pre class="line-numbers language-python"><code class="language-python"><span class="token keyword">import</span> osres_path <span class="token operator">=</span> <span class="token string">'data.json'</span>data<span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>i<span class="token operator">=</span><span class="token number">0</span><span class="token keyword">while</span> i<span class="token operator"><</span> range<span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">:</span> data<span class="token punctuation">.</span>append<span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">'a'</span><span class="token punctuation">:</span><span class="token string">'哈哈'</span><span class="token punctuation">,</span><span class="token string">'b'</span><span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token string">'c'</span><span class="token punctuation">:</span><span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">)</span> i<span class="token operator">+=</span><span class="token number">1</span><span class="token keyword">if</span> <span class="token punctuation">(</span>os<span class="token punctuation">.</span>path<span class="token punctuation">.</span>exists<span class="token punctuation">(</span>res_path<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">print</span><span class="token punctuation">(</span><span class="token string">'文件已存在！'</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token comment" spellcheck="true"># 格式化数据，保存在json文件中</span><span class="token keyword">with</span> open<span class="token punctuation">(</span>res_path<span class="token punctuation">,</span><span class="token string">'w'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> dump_f<span class="token punctuation">:</span> json<span class="token punctuation">.</span>dump<span class="token punctuation">(</span>data<span class="token punctuation">,</span>dump_f<span class="token punctuation">)</span> <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>第一次执行的时候会在本地看到<code>data.json</code>文件，第二次执行的时候就会提示文件已经存在了，这个例子中就算不判断本地存不存在data.json都没有关系，因为<code>open(res_path,'w')</code>中的<code>w</code>的意思就是，打开本地文件，没有这个文件就创建这个文件，有就清空这个文件再打开，更多参数：</p><p>w 以写方式打开，<br>a 以追加模式打开 (从 EOF 开始, 必要时创建新文件)<br>r+ 以读写模式打开<br>w+ 以读写模式打开 (参见 w )<br>a+ 以读写模式打开 (参见 a )<br>rb 以二进制读模式打开<br>wb 以二进制写模式打开 (参见 w )<br>ab 以二进制追加模式打开 (参见 a )<br>rb+ 以二进制读写模式打开 (参见 r+ )<br>wb+ 以二进制读写模式打开 (参见 w+ )<br>ab+ 以二进制读写模式打开 (参见 a+ )</p><h3 id="python-os包的其他使用："><a href="#python-os包的其他使用：" class="headerlink" title="python-os包的其他使用："></a>python-os包的其他使用：</h3><p>os.path.abspath(path) #返回绝对路径<br>os.path.basename(path) #返回文件名<br>os.path.commonprefix(list) #返回多个路径中，所有path共有的最长的路径。<br>os.path.dirname(path) #返回文件路径<br>os.path.exists(path) #路径存在则返回True,路径损坏返回False<br>os.path.lexists #路径存在则返回True,路径损坏也返回True<br>os.path.expanduser(path) #把path中包含的”~”和”~user”转换成用户目录<br>os.path.expandvars(path) #根据环境变量的值替换path中包含的”$name”和”${name}”<br>os.path.getatime(path) #返回最后一次进入此path的时间。<br>os.path.getmtime(path) #返回在此path下最后一次修改的时间。<br>os.path.getctime(path) #返回path的大小<br>os.path.getsize(path) #返回文件大小，如果文件不存在就返回错误<br>os.path.isabs(path) #判断是否为绝对路径<br>os.path.isfile(path) #判断路径是否为文件<br>os.path.isdir(path) #判断路径是否为目录<br>os.path.islink(path) #判断路径是否为链接<br>os.path.ismount(path) #判断路径是否为挂载点（）<br>os.path.join(path1[, path2[, …]]) #把目录和文件名合成一个路径<br>os.path.normcase(path) #转换path的大小写和斜杠<br>os.path.normpath(path) #规范path字符串形式<br>os.path.realpath(path) #返回path的真实路径<br>os.path.relpath(path[, start]) #从start开始计算相对路径<br>os.path.samefile(path1, path2) #判断目录或文件是否相同<br>os.path.sameopenfile(fp1, fp2) #判断fp1和fp2是否指向同一文件<br>os.path.samestat(stat1, stat2) #判断stat tuple stat1和stat2是否指向同一个文件<br>os.path.split(path) #把路径分割成dirname和basename，返回一个元组<br>os.path.splitdrive(path) #一般用在windows下，返回驱动器名和路径组成的元组<br>os.path.splitext(path) #分割路径，返回路径名和文件扩展名的元组<br>os.path.splitunc(path) #把路径分割为加载点与文件<br>os.path.walk(path, visit, arg) #遍历path，进入每个目录都调用visit函数，visit函数必须有3个参数(arg, dirname, names)，dirname表示当前目录的目录名，names代表当前目录下的所有文件名，args则为walk的第三个参数<br>os.path.supports_unicode_filenames #设置是否支持unicode路径名</p><h2 id="遍历当前文件夹下文件"><a href="#遍历当前文件夹下文件" class="headerlink" title="遍历当前文件夹下文件"></a>遍历当前文件夹下文件</h2><pre class="line-numbers language-python"><code class="language-python">rootdir <span class="token operator">=</span> <span class="token string">'F:\data'</span>list <span class="token operator">=</span> os<span class="token punctuation">.</span>listdir<span class="token punctuation">(</span>rootdir<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">#列出文件夹下所有的目录与文件</span><span class="token keyword">for</span> i <span class="token keyword">in</span> range<span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span>len<span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">:</span> path <span class="token operator">=</span> os<span class="token punctuation">.</span>path<span class="token punctuation">.</span>join<span class="token punctuation">(</span>rootdir<span class="token punctuation">,</span>list<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token keyword">if</span> os<span class="token punctuation">.</span>path<span class="token punctuation">.</span>isfile<span class="token punctuation">(</span>path<span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token comment" spellcheck="true">#你想对文件的操作</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="python" scheme="https://booboom.github.io/categories/python/"/>
<category term="python" scheme="https://booboom.github.io/tags/python/"/>
<category term="python-os" scheme="https://booboom.github.io/tags/python-os/"/>
<category term="python-json" scheme="https://booboom.github.io/tags/python-json/"/>
</entry>
<entry>
<title>python3+连接mysql8+数据库</title>
<link href="https://booboom.github.io/archive/python-mysql.html"/>
<id>https://booboom.github.io/archive/python-mysql.html</id>
<published>2018-10-26T10:35:01.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>在使用mysql官方的python插件<code>mysql-connector</code>时发现突然报了个错误：</p><pre class="line-numbers language-nginx"><code class="language-nginx"> mysql<span class="token punctuation">.</span>connector<span class="token punctuation">.</span>errors<span class="token punctuation">.</span>NotSupportedError<span class="token punctuation">:</span> Authentication plugin <span class="token string">'caching_sha2_password'</span> is not supported<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>后来才知道，MySQL8和低版本不兼容，解决办法有两种：</p><blockquote><ol><li>把mysql8降级成低版本；</li><li>把认证的选项设置为“Use Legacy Authentication Method”</li></ol></blockquote><p>然而我就比较厉害了，我这两个都没有，我选择使用<code>pymysql</code>，<img src="http://ph1dk41nw.bkt.clouddn.com/bqb/huaji.png" class="bqb"></p><pre class="line-numbers language-nginx"><code class="language-nginx">python3 <span class="token operator">-</span>m pip install PyMySQL<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h2 id="连接mysql"><a href="#连接mysql" class="headerlink" title="连接mysql"></a>连接mysql</h2><pre class="line-numbers language-python"><code class="language-python"><span class="token keyword">import</span> pymysql<span class="token comment" spellcheck="true"># 打开数据库连接</span>db <span class="token operator">=</span> pymysql<span class="token punctuation">.</span>connect<span class="token punctuation">(</span>host<span class="token operator">=</span><span class="token string">"localhost"</span><span class="token punctuation">,</span>user<span class="token operator">=</span><span class="token string">"root"</span><span class="token punctuation">,</span>password<span class="token operator">=</span><span class="token string">"123456"</span><span class="token punctuation">,</span>db<span class="token operator">=</span><span class="token string">"test"</span><span class="token punctuation">,</span>port<span class="token operator">=</span><span class="token number">3306</span><span class="token punctuation">,</span>charset<span class="token operator">=</span><span class="token string">'utf8'</span><span class="token punctuation">)</span><span class="token comment" spellcheck="true"># 或者简写为：</span>db <span class="token operator">=</span> pymysql<span class="token punctuation">.</span>connect<span class="token punctuation">(</span><span class="token string">"localhost"</span><span class="token punctuation">,</span><span class="token string">"root"</span><span class="token punctuation">,</span><span class="token string">"Aa123456"</span><span class="token punctuation">,</span><span class="token string">"test"</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="执行sql语句"><a href="#执行sql语句" class="headerlink" title="执行sql语句"></a>执行sql语句</h2><h3 id="插入单条数据"><a href="#插入单条数据" class="headerlink" title="插入单条数据"></a>插入单条数据</h3><pre class="line-numbers language-python"><code class="language-python"><span class="token comment" spellcheck="true"># 使用 cursor() 方法创建一个游标对象 cursor</span>cursor <span class="token operator">=</span> db<span class="token punctuation">.</span>cursor<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token keyword">def</span> <span class="token function">insertSql</span><span class="token punctuation">(</span>hot_song_name<span class="token punctuation">,</span>hot_song_id<span class="token punctuation">)</span><span class="token punctuation">:</span> str_url <span class="token operator">=</span> <span class="token string">"https://www.baidu.com"</span> <span class="token keyword">try</span><span class="token punctuation">:</span> cursor<span class="token punctuation">.</span>execute<span class="token punctuation">(</span><span class="token string">'insert into hot_songs(song_name,song_netease_id,song_url) values(%s,%s,%s)'</span><span class="token punctuation">,</span><span class="token punctuation">(</span>hot_song_name<span class="token punctuation">,</span>hot_song_id<span class="token punctuation">,</span>str_url<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true"># 数据变化要提交sql语句</span> db<span class="token punctuation">.</span>commit<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">except</span><span class="token punctuation">:</span> <span class="token comment" spellcheck="true"># 操作回退</span> db<span class="token punctuation">.</span>rollback<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">print</span><span class="token punctuation">(</span>cursor<span class="token punctuation">.</span>rowcount<span class="token punctuation">,</span> <span class="token string">"{}：添加数据库成功。"</span><span class="token punctuation">.</span>format<span class="token punctuation">(</span>hot_song_name<span class="token punctuation">)</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="插入多条数据"><a href="#插入多条数据" class="headerlink" title="插入多条数据"></a>插入多条数据</h3><pre class="line-numbers language-python"><code class="language-python">sql <span class="token operator">=</span> <span class="token string">'insert into hot_songs (song_name,song_netease_id,song_url) values(%s,%s,%s)'</span>val <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">(</span>hot_song_name<span class="token punctuation">,</span>hot_song_id<span class="token punctuation">,</span>str_url<span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">(</span>hot_song_name<span class="token punctuation">,</span>hot_song_id<span class="token punctuation">,</span>str_url<span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">(</span>hot_song_name<span class="token punctuation">,</span>hot_song_id<span class="token punctuation">,</span>str_url<span class="token punctuation">)</span><span class="token punctuation">]</span>cursor<span class="token punctuation">.</span>execute<span class="token punctuation">(</span>sql<span class="token punctuation">,</span>val<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h2 id="关闭数据库"><a href="#关闭数据库" class="headerlink" title="关闭数据库"></a>关闭数据库</h2><pre class="line-numbers language-python"><code class="language-python"><span class="token comment" spellcheck="true"># 关闭数据库连接</span>cursor<span class="token punctuation">.</span>close<span class="token punctuation">(</span><span class="token punctuation">)</span>db<span class="token punctuation">.</span>close<span class="token punctuation">(</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h2 id="判断插入的数据在当前数据库中是否存在"><a href="#判断插入的数据在当前数据库中是否存在" class="headerlink" title="判断插入的数据在当前数据库中是否存在"></a>判断插入的数据在当前数据库中是否存在</h2><p>我当前使用的方法是，给其中的非主键song_id列设置unique属性，利用插入相同song_id报错回退来避免插入重复数据。</p><blockquote><p>给列增加unique属性：<br>alter table hot_songs add unique(song_netease_id);</p></blockquote><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="python" scheme="https://booboom.github.io/categories/python/"/>
<category term="python" scheme="https://booboom.github.io/tags/python/"/>
<category term="mysql" scheme="https://booboom.github.io/tags/mysql/"/>
<category term="爬虫" scheme="https://booboom.github.io/tags/%E7%88%AC%E8%99%AB/"/>
</entry>
<entry>
<title>【git】给本地代码添加多个远程git仓库</title>
<link href="https://booboom.github.io/archive/git-remote.html"/>
<id>https://booboom.github.io/archive/git-remote.html</id>
<published>2018-10-25T03:22:01.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><h2 id="git-remote-add-other-https-xxxxxxxxx-git"><a href="#git-remote-add-other-https-xxxxxxxxx-git" class="headerlink" title="git remote add other https://xxxxxxxxx.git"></a>git remote add other <a href="https://xxxxxxxxx.git" target="_blank" rel="noopener">https://xxxxxxxxx.git</a></h2><p>cd到目标项目目录，先<code>git remote -v</code>查看当前仓库有哪些远程仓库，然后使用<code>git remote add other https://xxxxxxxxx</code>,然后再<code>git remote -v</code>查看一下，就可以看到远程仓库地址多可一个叫other的仓库。<br><img src="http://ph1dk41nw.bkt.clouddn.com/git_remote_1.jpg" alt="git remote add"></p><blockquote><p>第一种方法想要push到多个仓库的时候，要执行两次push命令：<br><code>git push -u origin master</code><br><code>git push -u other master</code></p></blockquote><h2 id="git-remote-rm-other-删除other远程仓库地址"><a href="#git-remote-rm-other-删除other远程仓库地址" class="headerlink" title="git remote rm other 删除other远程仓库地址"></a>git remote rm other 删除other远程仓库地址</h2><p><img src="http://ph1dk41nw.bkt.clouddn.com/git_remote_2.jpg" alt="git remote rm"></p><h2 id="git-remote-set-url-–add-other-https-xxxxxxxxxx-git"><a href="#git-remote-set-url-–add-other-https-xxxxxxxxxx-git" class="headerlink" title="git remote set-url –add other https://xxxxxxxxxx.git"></a>git remote set-url –add other <a href="https://xxxxxxxxxx.git" target="_blank" rel="noopener">https://xxxxxxxxxx.git</a></h2><p>第二种方法使用<code>git remote set-url --add other https://xxxxxxxxxx.git</code>，在当前本地连接的远程仓库下新增仓库地址。只需要执行一次push就可以同时上传到两个仓库中。<br><img src="http://ph1dk41nw.bkt.clouddn.com/git_remote_3.jpg" alt="git remote set-url --add"></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="Git" scheme="https://booboom.github.io/categories/Git/"/>
<category term="git remote" scheme="https://booboom.github.io/tags/git-remote/"/>
<category term="添加多个远程git仓库" scheme="https://booboom.github.io/tags/%E6%B7%BB%E5%8A%A0%E5%A4%9A%E4%B8%AA%E8%BF%9C%E7%A8%8Bgit%E4%BB%93%E5%BA%93/"/>
</entry>
<entry>
<title>网易云音乐爬虫</title>
<link href="https://booboom.github.io/archive/python-netease-crawler.html"/>
<id>https://booboom.github.io/archive/python-netease-crawler.html</id>
<published>2018-10-24T09:12:05.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><blockquote><p>文明、富强、民主。。。<img class="bqb" src="http://ph1dk41nw.bkt.clouddn.com/bqb/huaji.png"></p></blockquote><h2 id="分析网易云音乐html-DOM结构"><a href="#分析网易云音乐html-DOM结构" class="headerlink" title="分析网易云音乐html DOM结构"></a>分析网易云音乐html DOM结构</h2><blockquote><p>想要爬取网易云歌单中的音乐，首先要知道我们需要拿到些什么，<code>歌单id</code>、<code>歌曲id</code>、<code>接口地址</code>这三个是必须的。接下来是具体的获取这些数据的操作流程：</p></blockquote><ol><li>打开网易云音乐首页，打开network。</li><li><p>随便点击一个歌单，找到<code>https://music.163.com/playlist?id=</code>请求。如图：</p><blockquote><p><img src="http://ph1dk41nw.bkt.clouddn.com/blog/python_netease_1.jpg" alt="api"></p></blockquote></li><li><p>拿到歌单id，即这个请求<code>id=</code>后面的数字</p></li><li><p>点开这个请求，在Preview查看请求返回的html源码，找到歌单中歌曲的名字，复制一个歌曲名。</p><blockquote><p><img src="http://ph1dk41nw.bkt.clouddn.com/blog/python_netease_2.jpg" alt="Preview"></p></blockquote></li><li><p>再在Response中，使用快捷键command+F查找（windows为control+F），粘贴刚才复制的歌曲名字，回车。</p><blockquote><p><img src="http://ph1dk41nw.bkt.clouddn.com/blog/python_netease_3.jpg" alt="Response"></p></blockquote></li><li><p>可以看到，歌曲名在一个ul>li>a标签中，并且在a标签的href中还带有这首歌的ID，完美。</p></li><li><p>在音乐页面，点击一首歌播放，查看获取歌曲播放地址的接口。很明显看到这个接口返回了歌曲的地址。</p><blockquote><p><img src="http://ph1dk41nw.bkt.clouddn.com/blog/python_netease_4.jpg" alt="songUrl"></p></blockquote></li><li><p>接下来就是来解析一下这个接口传递的参数了，这是最麻烦的一步了，有想了解的可以去自行百度了解一下，知乎中的大佬已经有人破解出来了。我这里就直接用我已经获得到的网易云Api了。</p><pre class="line-numbers language-sh"><code class="language-sh"># 获取播放地址(get请求): http://music.163.com/song/media/outer/url?id=561042302.mp3<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></li></ol><h2 id="编写python爬虫"><a href="#编写python爬虫" class="headerlink" title="编写python爬虫"></a>编写python爬虫</h2><blockquote><p>废话不多说，直接贴出源码，各个位置标注都已经做好</p></blockquote><pre class="line-numbers language-python"><code class="language-python"><span class="token comment" spellcheck="true">#!/usr/bin/env python3</span><span class="token comment" spellcheck="true"># -*- coding: utf-8 -*-</span><span class="token keyword">import</span> re<span class="token keyword">import</span> urllib<span class="token punctuation">.</span>request<span class="token keyword">import</span> urllib<span class="token punctuation">.</span>error<span class="token keyword">import</span> urllib<span class="token punctuation">.</span>parse<span class="token keyword">import</span> json<span class="token keyword">import</span> threading<span class="token keyword">from</span> time <span class="token keyword">import</span> sleep<span class="token keyword">import</span> osjson_path <span class="token operator">=</span> <span class="token string">'data.json'</span><span class="token keyword">def</span> <span class="token function">get_all_hotSong</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token comment" spellcheck="true">#获取歌单所有歌曲名称和id</span> <span class="token comment" spellcheck="true"># url='http://music.163.com/discover/toplist?id=3778678' #网易云云音乐热歌榜url</span> url<span class="token operator">=</span><span class="token string">'https://music.163.com/playlist?id=3778678'</span> <span class="token comment" spellcheck="true">#播放列表url z/mpi 2476005642 like 536254974</span> header<span class="token operator">=</span><span class="token punctuation">{</span> <span class="token comment" spellcheck="true">#请求头部</span> <span class="token string">'User-Agent'</span><span class="token punctuation">:</span><span class="token string">'Mozilla/5.0 (X11; Fedora; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36'</span> <span class="token punctuation">}</span> request<span class="token operator">=</span>urllib<span class="token punctuation">.</span>request<span class="token punctuation">.</span>Request<span class="token punctuation">(</span>url<span class="token operator">=</span>url<span class="token punctuation">,</span> headers<span class="token operator">=</span>header<span class="token punctuation">)</span> html<span class="token operator">=</span>urllib<span class="token punctuation">.</span>request<span class="token punctuation">.</span>urlopen<span class="token punctuation">(</span>request<span class="token punctuation">)</span><span class="token punctuation">.</span>read<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>decode<span class="token punctuation">(</span><span class="token string">'utf8'</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">#打开url</span> html<span class="token operator">=</span>str<span class="token punctuation">(</span>html<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">#转换成str</span> pat1<span class="token operator">=</span>r<span class="token string">'<ul class="f-hide"><li><a href="/song\?id=\d*?">.*</a></li></ul>'</span> <span class="token comment" spellcheck="true">#进行第一次筛选的正则表达式</span> result<span class="token operator">=</span>re<span class="token punctuation">.</span>compile<span class="token punctuation">(</span>pat1<span class="token punctuation">)</span><span class="token punctuation">.</span>findall<span class="token punctuation">(</span>html<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">#用正则表达式进行筛选</span> result<span class="token operator">=</span>result<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment" spellcheck="true">#获取tuple的第一个元素</span> pat2<span class="token operator">=</span>r<span class="token string">'<li><a href="/song\?id=\d*?">(.*?)</a></li>'</span> <span class="token comment" spellcheck="true">#进行歌名筛选的正则表达式</span> pat3<span class="token operator">=</span>r<span class="token string">'<li><a href="/song\?id=(\d*?)">.*?</a></li>'</span> <span class="token comment" spellcheck="true">#进行歌ID筛选的正则表达式</span> hot_song_name<span class="token operator">=</span>re<span class="token punctuation">.</span>compile<span class="token punctuation">(</span>pat2<span class="token punctuation">)</span><span class="token punctuation">.</span>findall<span class="token punctuation">(</span>result<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">#获取所有歌单的歌曲名称</span> hot_song_id<span class="token operator">=</span>re<span class="token punctuation">.</span>compile<span class="token punctuation">(</span>pat3<span class="token punctuation">)</span><span class="token punctuation">.</span>findall<span class="token punctuation">(</span>result<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">#获取所有歌单歌曲对应的Id</span> <span class="token keyword">return</span> hot_song_name<span class="token punctuation">,</span>hot_song_id<span class="token keyword">def</span> <span class="token function">download_song</span><span class="token punctuation">(</span>hot_song_name<span class="token punctuation">,</span>hot_song_id<span class="token punctuation">)</span><span class="token punctuation">:</span> singer_url <span class="token operator">=</span> <span class="token string">'http://music.163.com/song/media/outer/url?id={}.mp3'</span><span class="token punctuation">.</span>format<span class="token punctuation">(</span>hot_song_id<span class="token punctuation">)</span> res_path <span class="token operator">=</span> <span class="token string">'/Users/admin/Documents/songs/{}.mp3'</span><span class="token punctuation">.</span>format<span class="token punctuation">(</span>hot_song_name<span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>os<span class="token punctuation">.</span>path<span class="token punctuation">.</span>exists<span class="token punctuation">(</span>res_path<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">print</span><span class="token punctuation">(</span><span class="token string">'{}---已存在！'</span><span class="token punctuation">.</span>format<span class="token punctuation">(</span>hot_song_name<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">print</span><span class="token punctuation">(</span><span class="token string">'歌曲：{}'</span><span class="token punctuation">.</span>format<span class="token punctuation">(</span>hot_song_name<span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token string">'ID:{}'</span><span class="token punctuation">.</span>format<span class="token punctuation">(</span>hot_song_id<span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token string">'正在下载...'</span><span class="token punctuation">)</span> urllib<span class="token punctuation">.</span>request<span class="token punctuation">.</span>urlretrieve<span class="token punctuation">(</span>singer_url<span class="token punctuation">,</span>f_path<span class="token punctuation">)</span> <span class="token comment" spellcheck="true"># 保存到本地目录 </span> <span class="token keyword">print</span><span class="token punctuation">(</span><span class="token string">'{}---下载完成'</span><span class="token punctuation">.</span>format<span class="token punctuation">(</span>hot_song_name<span class="token punctuation">)</span><span class="token punctuation">)</span> song_item <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">'name'</span><span class="token punctuation">:</span>hot_song_name<span class="token punctuation">,</span><span class="token string">'id'</span><span class="token punctuation">:</span>hot_song_id<span class="token punctuation">,</span><span class="token string">'url'</span><span class="token punctuation">:</span><span class="token string">'http://music.163.com/song/media/outer/url?id={}.mp3'</span><span class="token punctuation">.</span>format<span class="token punctuation">(</span>hot_song_id<span class="token punctuation">)</span><span class="token punctuation">}</span> songs<span class="token punctuation">.</span>append<span class="token punctuation">(</span>song_item<span class="token punctuation">)</span> sleep<span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>hot_song_name<span class="token punctuation">,</span>hot_song_id<span class="token operator">=</span>get_all_hotSong<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">#获取歌单所有歌曲名称和id</span>songs<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span>threads <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>files <span class="token operator">=</span> range<span class="token punctuation">(</span>len<span class="token punctuation">(</span>hot_song_name<span class="token punctuation">)</span><span class="token punctuation">)</span>num<span class="token operator">=</span><span class="token number">0</span><span class="token keyword">while</span> num <span class="token operator"><</span> len<span class="token punctuation">(</span>hot_song_name<span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token comment" spellcheck="true">#下载歌单中的所有歌</span> t <span class="token operator">=</span> threading<span class="token punctuation">.</span>Thread<span class="token punctuation">(</span>target<span class="token operator">=</span>download_song<span class="token punctuation">,</span>args<span class="token operator">=</span><span class="token punctuation">(</span>hot_song_name<span class="token punctuation">[</span>num<span class="token punctuation">]</span><span class="token punctuation">,</span>hot_song_id<span class="token punctuation">[</span>num<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> threads<span class="token punctuation">.</span>append<span class="token punctuation">(</span>t<span class="token punctuation">)</span> num<span class="token operator">+=</span><span class="token number">1</span>runFiles <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token keyword">for</span> i <span class="token keyword">in</span> files<span class="token punctuation">:</span> runFiles<span class="token punctuation">.</span>append<span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token keyword">if</span><span class="token punctuation">(</span>len<span class="token punctuation">(</span>runFiles<span class="token punctuation">)</span><span class="token operator">>=</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">for</span> i <span class="token keyword">in</span> runFiles<span class="token punctuation">:</span> threads<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>start<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">for</span> i <span class="token keyword">in</span> runFiles<span class="token punctuation">:</span> threads<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>join<span class="token punctuation">(</span><span class="token punctuation">)</span> runFiles<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token keyword">if</span><span class="token punctuation">(</span>len<span class="token punctuation">(</span>runFiles<span class="token punctuation">)</span><span class="token operator">!=</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">for</span> i <span class="token keyword">in</span> runFiles<span class="token punctuation">:</span> threads<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>start<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">for</span> i <span class="token keyword">in</span> runFiles<span class="token punctuation">:</span> threads<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>join<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment" spellcheck="true"># 格式化数据，保存在json文件中</span><span class="token keyword">with</span> open<span class="token punctuation">(</span>json_path<span class="token punctuation">,</span><span class="token string">'w'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> dump_f<span class="token punctuation">:</span> json<span class="token punctuation">.</span>dump<span class="token punctuation">(</span>songs<span class="token punctuation">,</span>dump_f<span class="token punctuation">)</span><span class="token keyword">print</span><span class="token punctuation">(</span><span class="token string">'执行完毕'</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="踩坑"><a href="#踩坑" class="headerlink" title="踩坑"></a>踩坑</h2><p>爬取的时候都很正常，但是当我打开data.json的时候我就惊呆了，中文居然全都变成了unicode码。在我耗费了一天一夜查找了各种资料之后，终于知道了原因，python在写入本地文件的时候，默认转码为ascII编码，所以，将下面这句话改成这样就OK了。</p><pre class="line-numbers language-python"><code class="language-python"><span class="token comment" spellcheck="true"># 格式化数据，保存在json文件中</span><span class="token keyword">with</span> open<span class="token punctuation">(</span>json_path<span class="token punctuation">,</span><span class="token string">'w'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> dump_f<span class="token punctuation">:</span><span class="token comment" spellcheck="true"># json.dump(songs,dump_f)</span><span class="token operator">+</span> json<span class="token punctuation">.</span>dump<span class="token punctuation">(</span>songs<span class="token punctuation">,</span>dump_f<span class="token punctuation">,</span>ensure_ascii<span class="token operator">=</span><span class="token boolean">False</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>源码地址：<a href="https://github.com/booboom/python_netease" target="_blank" rel="noopener">这里</a>,觉得还不错的话记得给个star哦，<img class="bqb" src="http://ph1dk41nw.bkt.clouddn.com/bqb/huaji.png"></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="python" scheme="https://booboom.github.io/categories/python/"/>
<category term="爬虫" scheme="https://booboom.github.io/tags/%E7%88%AC%E8%99%AB/"/>
<category term="网易云音乐" scheme="https://booboom.github.io/tags/%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90/"/>
</entry>
<entry>
<title>mac下privoxy配置，让终端实现翻墙</title>
<link href="https://booboom.github.io/archive/macPrivoxy.html"/>
<id>https://booboom.github.io/archive/macPrivoxy.html</id>
<published>2018-10-16T08:01:37.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>作为开发者，肯定会经常使用 npm、wget/curl、git、brew和docker等工具下载或安装，然而往往会出现超慢 timeout 卡死的情况，也是让我们怨气颇深。<br>所以，为了解决这个问题，伟大的privoxy出现了！接下来给大家介绍下如何使用privoxy来让我们的终端连接外网。</p><h2 id="下载Shadowscoks"><a href="#下载Shadowscoks" class="headerlink" title="下载Shadowscoks"></a>下载Shadowscoks</h2><p>可以去我的<a href="https://pan.baidu.com/s/14QDccR2c0d4BSC0dmZ-dAw" target="_blank" rel="noopener">百度云</a>下载最新版SS。<br>密码:ln28<br>下载&&安装成功后，配置自己的服务器设置。</p><h2 id="安装-amp-amp-配置privoxy"><a href="#安装-amp-amp-配置privoxy" class="headerlink" title="安装 && 配置privoxy"></a>安装 && 配置privoxy</h2><ol><li>使用homebrew安装privoxy<pre class="line-numbers language-nginx"><code class="language-nginx">brew install privoxy<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li>安装成功后，终端输入<code>cd /usr/local/etc/privoxy/</code>进入privoxy配置文件夹下，运行：<pre class="line-numbers language-php"><code class="language-php"><span class="token keyword">echo</span> <span class="token string">'listen-address 0.0.0.0:8118\nforward-socks5 / localhost:1087 .'</span> <span class="token operator">></span><span class="token operator">></span> config<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><blockquote><p>ps: 注意别忘了最后的<code>.</code>！</p></blockquote></li></ol><h2 id="启动privoxy"><a href="#启动privoxy" class="headerlink" title="启动privoxy"></a>启动privoxy</h2><p>执行：</p><pre class="line-numbers language-nginx"><code class="language-nginx">sudo <span class="token operator">/</span>usr<span class="token operator">/</span>local<span class="token operator">/</span>sbin<span class="token operator">/</span>privoxy <span class="token operator">/</span>usr<span class="token operator">/</span>local<span class="token operator">/</span>etc<span class="token operator">/</span>privoxy<span class="token operator">/</span>config<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>或</p><pre class="line-numbers language-nginx"><code class="language-nginx">sudo <span class="token operator">/</span>usr<span class="token operator">/</span>local<span class="token operator">/</span>Cellar<span class="token operator">/</span>privoxy<span class="token operator">/</span><span class="token number">3.0</span><span class="token punctuation">.</span><span class="token number">26</span><span class="token operator">/</span>sbin<span class="token operator">/</span>privoxy <span class="token operator">/</span>usr<span class="token operator">/</span>local<span class="token operator">/</span>etc<span class="token operator">/</span>privoxy<span class="token operator">/</span>config<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>或</p><pre class="line-numbers language-nginx"><code class="language-nginx">sudo <span class="token operator">/</span>Applications<span class="token operator">/</span>Privoxy<span class="token operator">/</span>startPrivoxy<span class="token punctuation">.</span>sh<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><blockquote><p>ps：由于privoxy的版本可能会不同，所以privoxy可能会存在不同的路径里，以上三个是大部分路径，一切按实际电脑上的正确路径为准</p></blockquote><h2 id="启动监听端口"><a href="#启动监听端口" class="headerlink" title="启动监听端口"></a>启动监听端口</h2><pre class="line-numbers language-nginx"><code class="language-nginx">export http_proxy<span class="token operator">=</span><span class="token keyword">http</span><span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">127.0</span><span class="token punctuation">.</span><span class="token number">0.1</span><span class="token punctuation">:</span><span class="token number">1087</span><span class="token punctuation">;</span>export https_proxy<span class="token operator">=</span><span class="token keyword">https</span><span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">127.0</span><span class="token punctuation">.</span><span class="token number">0.1</span><span class="token punctuation">:</span><span class="token number">1087</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h2 id="查看8118端口有没有监听成功"><a href="#查看8118端口有没有监听成功" class="headerlink" title="查看8118端口有没有监听成功"></a>查看8118端口有没有监听成功</h2><pre class="line-numbers language-nginx"><code class="language-nginx">netstat <span class="token operator">-</span>na <span class="token operator">|</span> grep <span class="token number">8118</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>如果出现以下代码，则表示监听成功，</p><pre class="line-numbers language-nginx"><code class="language-nginx">tcp4 <span class="token number">0</span> <span class="token number">0</span> <span class="token number">127.0</span><span class="token punctuation">.</span><span class="token number">0.1</span><span class="token punctuation">.</span><span class="token number">8118</span> <span class="token operator">*</span><span class="token punctuation">.</span><span class="token operator">*</span> <span class="token keyword">LISTEN</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h2 id="测试是否翻墙成功"><a href="#测试是否翻墙成功" class="headerlink" title="测试是否翻墙成功"></a>测试是否翻墙成功</h2><ol><li>curl测试<br>终端输入<code>curl www.google.com</code>，如果返回谷歌首页的html代码，说明成功访问到谷歌。这就说明你已经翻过墙头，连接外网了！！！</li><li>wget测试<blockquote><p>ps: wget需输入<code>brew install wget</code>安装</p></blockquote></li></ol><p>终端输入<code>wget https://www.google.com</code>，结果如下图所示，也同样说明你已经翻过墙头，连接外网了！！！<br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/mac_privoxy_1.jpg" alt="wget访问谷歌"></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="mac" scheme="https://booboom.github.io/categories/mac/"/>
<category term="翻墙" scheme="https://booboom.github.io/tags/%E7%BF%BB%E5%A2%99/"/>
<category term="privoxy" scheme="https://booboom.github.io/tags/privoxy/"/>
</entry>
<entry>
<title>摔爹神曲！！！期待ing</title>
<link href="https://booboom.github.io/archive/music_shuaidie.html"/>
<id>https://booboom.github.io/archive/music_shuaidie.html</id>
<published>2018-10-11T04:07:00.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><blockquote><p>在进击的巨人第三季第七集中的插曲，简直直击灵魂，期待ost !!!!!!<br>这一集中女王帅炸！<br>疯狂打电话！</p></blockquote><div id="dplayer0" class="dplayer hexo-tag-dplayer-mark" style="margin-bottom:20px"></div><script>!function(){var e=new DPlayer({container:document.getElementById("dplayer0"),autoplay:!0,theme:"#FADFA3",loop:!0,video:{url:"http://ph1dk41nw.bkt.clouddn.com/video/shuaidieshenqu.mp4"}});window.dplayers||(window.dplayers=[]),window.dplayers.push(e)}()</script><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="动漫" scheme="https://booboom.github.io/categories/%E5%8A%A8%E6%BC%AB/"/>
<category term="进击的巨人" scheme="https://booboom.github.io/tags/%E8%BF%9B%E5%87%BB%E7%9A%84%E5%B7%A8%E4%BA%BA/"/>
<category term="摔爹神曲" scheme="https://booboom.github.io/tags/%E6%91%94%E7%88%B9%E7%A5%9E%E6%9B%B2/"/>
</entry>
<entry>
<title>第一个服务器脚本</title>
<link href="https://booboom.github.io/archive/shell_script.html"/>
<id>https://booboom.github.io/archive/shell_script.html</id>
<published>2018-09-28T09:47:47.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>最近由于业务需求，要查询保存在服务器日志里的小程序数据，每周要查七天的数据，每天还另有四种渠道。每种渠道还有三种情况，每种情况又要分PV和UV。重复的工作太多太多，所以在手写了几天之后，我终于受不了了！我决定写个脚本来摆脱这残酷的机械工作。不得不说，懒惰真的可以使人进步。😂</p><p>由于本人对Unix的了解很局限，只会一些常用的命令，所以在动手之前先看了一遍这两篇教程：</p><blockquote><p><a href="http://wiki.jikexueyuan.com/project/unix/what-is-shell.html" target="_blank" rel="noopener">什么是shell脚本</a><br><a href="http://wiki.jikexueyuan.com/project/linux-command/chap25.html" target="_blank" rel="noopener">编写第一个shell脚本</a></p></blockquote><h2 id="首先了解UNIX的基础"><a href="#首先了解UNIX的基础" class="headerlink" title="首先了解UNIX的基础"></a>首先了解UNIX的基础</h2><h3 id="文件管理"><a href="#文件管理" class="headerlink" title="文件管理"></a>文件管理</h3><p>1.文件类型</p><blockquote><p><code>普通文件</code>: 一个普通的文件是系统上包含数据、 文本或程序指令的文件。在本教程中，你将使用普通文件。</p></blockquote><blockquote><p><code>目录</code>: 目录存储特殊和普通文件。 UNIX 目录对于熟悉 Windows 或者 Mac OS 的用户，相当于文件夹。</p></blockquote><blockquote><p><code>特殊文件</code>: 一些特殊的文件提供访问硬件，例如硬盘、 CD - ROM 驱动器、 调制解调器和以太网适配器。其他特殊文件类似于别名或快捷方式，使您能够访问单个文件使用不同的名称。</p></blockquote><p>2.常用命令</p><blockquote><p><code>ls</code>:为了列出存储在当前目录中的文件和目录。<br><code>ls -l</code>:获得有关列出的文件的详细信息。<br><code>ls -a</code>:列出不可见文件。<br><code>vi filename</code>:有这个文件就编辑，没有则新建 (filename表示文件名)。<br><code>cat filename</code>:查看文件的内容。<br><code>wc filename</code>:获取一个文件中的总的行数，字数和字符数。<br><code>cp filename copyfile</code>:复制文件 你会发现多了一个文件 copyfile 在您的当前目录。此文件与原始文件 filename 完全相同。<br><code>mv filename newfile</code>:重命名 将现有文件完全移动到新的文件。所以在这种情况下你只能发现 newfile 在你当前的目录中。<br><code>rm filename</code>:删除现有文件</p></blockquote><h3 id="文件权限"><a href="#文件权限" class="headerlink" title="文件权限"></a>文件权限</h3><p>1.权限表示符<br>当使用 ls -l 命令的时候，会将与文件相关的各种权限展示出来，如下：</p><pre class="line-numbers language-nginx"><code class="language-nginx"><span class="token variable">$ls</span> <span class="token operator">-</span>l <span class="token operator">/</span>home<span class="token operator">/</span>amrood<span class="token operator">-</span>rwxr<span class="token operator">-</span>xr<span class="token operator">--</span> <span class="token number">1</span> amrood users <span class="token number">1024</span> Nov <span class="token number">2</span> <span class="token number">00</span><span class="token punctuation">:</span><span class="token number">10</span> myfiledrwxr<span class="token operator">-</span>xr<span class="token operator">--</span><span class="token operator">-</span> <span class="token number">1</span> amrood users <span class="token number">1024</span> Nov <span class="token number">2</span> <span class="token number">00</span><span class="token punctuation">:</span><span class="token number">10</span> mydir<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>输出的第一列表示的是与文件或者目录相关的访问模式或者权限。<br>权限被分为三组，组中的每个位置代表一个特定的权限，这个顺序是：<code>读(r)</code>、<code>写(w)</code>和<code>执行(x)</code>:</p><blockquote><p>前三个字符 (2-4) 表示文件的所有者的权限。例如 -rwxr-xr– 代表，文件的所有者拥有读 (r)、写 (w) 和执行 (x) 的权限。</p></blockquote><blockquote><p>第二组的三个字符 (5-7) 包含了该文件所属组的权限。例如 -rwxr-xr– 表示了所属组拥有读 (r) 和执行 (x) 的权限，但没有写权限。</p></blockquote><blockquote><p>最后一组三个字符 (8-10) 代表其他人的权限。例如 -rwxr-xr– 代表其他人只有读 (r) 的权限。</p></blockquote><p>2.改变权限<br>改变文件或目录的权限，可以使用 chmod(change mode)命令。有两种方法可以使用 chmod：符号模式和绝对模式。</p><ul><li>符号模式<br>对于初学者来说使用符号模式是最简单的来修改文件或目录的权限方法。可以用下表中的符号来添加、删除或指定你想要设置的权限。</li></ul><table><thead><tr><th style="text-align:left">Chmod 操作符</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:left">+</td><td style="text-align:left">给文件或者目录添加指定的权限。</td></tr><tr><td style="text-align:left">-</td><td style="text-align:left">删除文件或者目录的权限。</td></tr><tr><td style="text-align:left">=</td><td style="text-align:left">设置指定的权限。</td></tr></tbody></table><ul><li>绝对权限<br>用chmod命令修改权限的第二种方法，是使用一个数字来指定文件的一些列权限。<br>每个权限被分配了一个数值，如下表所示， 并且给每个权限集的总和提供了一个数值。</li></ul><table><thead><tr><th style="text-align:left">数值</th><th style="text-align:left">权限八进制表示</th><th style="text-align:center">参照</th></tr></thead><tbody><tr><td style="text-align:left">0</td><td style="text-align:left">没有权限</td><td style="text-align:center">- - -</td></tr><tr><td style="text-align:left">1</td><td style="text-align:left">可执行的权限</td><td style="text-align:center">- -x</td></tr><tr><td style="text-align:left">2</td><td style="text-align:left">写权限</td><td style="text-align:center">-w-</td></tr><tr><td style="text-align:left">3</td><td style="text-align:left">执行和写权限: 1 (执行) + 2 (写) = 3</td><td style="text-align:center">-wx</td></tr><tr><td style="text-align:left">4</td><td style="text-align:left">读取权限</td><td style="text-align:center">r- -</td></tr><tr><td style="text-align:left">5</td><td style="text-align:left">读取和执行权限: 4 (读取) + 1 (执行) = 5</td><td style="text-align:center">r-x</td></tr><tr><td style="text-align:left">6</td><td style="text-align:left">读取和写权限: 4 (读) + 2 (写) = 6</td><td style="text-align:center">rw-</td></tr><tr><td style="text-align:left">7</td><td style="text-align:left">所有权限: 4 (读) + 2 (写) + 1 (执行) = 7</td><td style="text-align:center">rwx</td></tr></tbody></table><h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><h3 id="变量类型"><a href="#变量类型" class="headerlink" title="变量类型"></a>变量类型</h3><blockquote><p>局部变量：该类型变量只会在当前 Shell 实例内有效。他们无法适用于由 Shell 启动的程序。他们仅在命令提示符处进行设置。</p></blockquote><blockquote><p>环境变量：环境变量对 Shell 的任何子进程都有效。部分程序是需要正确的调用函数才需要环境变量。通常，Shell 脚本只会定义程序运行需要的环境变量。</p></blockquote><blockquote><p>Shell 变量：该类型变量是由 Shell 设置的专用变量，是用来正确调用函数用的。有时这些变量是环境变量，有时是局部变量。</p></blockquote><p>1.定义变量：</p><pre class="line-numbers language-nginx"><code class="language-nginx">variable_name<span class="token operator">=</span>variable_value<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>2.访问变量</p><pre class="line-numbers language-nginx"><code class="language-nginx"><span class="token comment" spellcheck="true">#!/bin/sh</span> NAME<span class="token operator">=</span><span class="token string">"Zara Ali"</span> echo <span class="token variable">$NAME</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>3.删除变量</p><pre class="line-numbers language-nginx"><code class="language-nginx">unset variable_name<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h2 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h2><h3 id="定义数组"><a href="#定义数组" class="headerlink" title="定义数组"></a>定义数组</h3><pre class="line-numbers language-nginx"><code class="language-nginx">NAME01<span class="token operator">=</span><span class="token string">"Zara"</span>NAME02<span class="token operator">=</span><span class="token string">"Qadir"</span>NAME03<span class="token operator">=</span><span class="token string">"Mahnaz"</span>NAME04<span class="token operator">=</span><span class="token string">"Ayan"</span>NAME05<span class="token operator">=</span><span class="token string">"Daisy"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><pre class="line-numbers language-nginx"><code class="language-nginx">array_name<span class="token operator">=</span><span class="token punctuation">(</span>value1 <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> valuen<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="访问数组"><a href="#访问数组" class="headerlink" title="访问数组"></a>访问数组</h3><pre class="line-numbers language-nginx"><code class="language-nginx"> <span class="token comment" spellcheck="true">#!/bin/sh</span> NAME<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">"Zara"</span> NAME<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">"Qadir"</span> NAME<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">"Mahnaz"</span> NAME<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">"Ayan"</span> NAME<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token string">"Daisy"</span> echo <span class="token string">"First Index: ${NAME[0]}"</span> echo <span class="token string">"Second Index: ${NAME[1]}"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>可以使用以下方法之一，来访问数组中的所有项目：</p><pre class="line-numbers language-nginx"><code class="language-nginx"> $<span class="token punctuation">{</span>array_name<span class="token punctuation">[</span><span class="token operator">*</span><span class="token punctuation">]</span><span class="token punctuation">}</span> $<span class="token punctuation">{</span>array_name<span class="token punctuation">[</span>@<span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h2 id="循环"><a href="#循环" class="headerlink" title="循环"></a>循环</h2><p>循环是一个强大的编程工具，可以使您能够重复执行一系列命令。针对 Shell 程序员，有 4 种循环类型：</p><blockquote><p>while 循环<br>for 循环<br>until 循环<br>select 循环</p></blockquote><pre class="line-numbers language-nginx"><code class="language-nginx"><span class="token comment" spellcheck="true">#!/bin/sh</span> a<span class="token operator">=</span><span class="token number">0</span> while <span class="token punctuation">[</span> <span class="token string">"$a"</span> <span class="token operator">-</span>lt <span class="token number">10</span> <span class="token punctuation">]</span><span class="token comment" spellcheck="true"># this is loop1</span> do b<span class="token operator">=</span><span class="token string">"$a"</span> while <span class="token punctuation">[</span> <span class="token string">"$b"</span> <span class="token operator">-</span>ge <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token comment" spellcheck="true"># this is loop2</span> do echo <span class="token operator">-</span>n <span class="token string">"$b "</span> b<span class="token operator">=</span>`expr <span class="token variable">$b</span> <span class="token operator">-</span> <span class="token number">1</span>` done echo a<span class="token operator">=</span>`expr <span class="token variable">$a</span> <span class="token operator">+</span> <span class="token number">1</span>` done<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><pre class="line-numbers language-nginx"><code class="language-nginx"><span class="token comment" spellcheck="true">#!/bin/sh</span> for i in A B C D<span class="token punctuation">;</span> do echo <span class="token variable">$i</span> done<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><blockquote><p>最后终于在折腾了这么长时间之后写下了我的第一次脚本<br></p></blockquote><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="服务器" scheme="https://booboom.github.io/categories/%E6%9C%8D%E5%8A%A1%E5%99%A8/"/>
<category term="shell" scheme="https://booboom.github.io/tags/shell/"/>
<category term="Unix" scheme="https://booboom.github.io/tags/Unix/"/>
</entry>
<entry>
<title>小程序踩坑（三）各种跳转的区别</title>
<link href="https://booboom.github.io/archive/TencentMP_3.html"/>
<id>https://booboom.github.io/archive/TencentMP_3.html</id>
<published>2018-09-12T08:31:33.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p class="description">小程序中一共有五种跳转方法，wx.navigateTo、wx.redirectTo、wx.reLaunch、wx.switchTab、wx.navigateBack，它们都有什么区别呢，怎么确定什么时候该用哪个呢。</p><blockquote><p>wx.navigateTo<br>wx.redirectTo<br>x.reLaunch<br>wx.switchTab<br>wx.navigateBack</p></blockquote><h2 id="页面栈"><a href="#页面栈" class="headerlink" title="页面栈"></a>页面栈</h2><p>区分这五种跳转之前，要先了解下小程序的页面栈。<br>通过<code>getCurrentPages()</code>方法可以获取到当前的页面栈，我们先来console一下看看这是个什么东西<code>console.log(getCurrentPages())</code><br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/mp_3_1.jpg" alt="页面栈"><br>可以看到打印出来是一个数组，数组中有两个page的实例。证明我现在所在的页面是在第二级，打开这个实例就可以看到该页面的data和function。</p><div class="note warning"><p>⚠️ 注意：小程序的页面栈最多为5层！</p></div><h2 id="wx-navigateTo"><a href="#wx-navigateTo" class="headerlink" title="wx.navigateTo"></a>wx.navigateTo</h2><p>用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。</p><h2 id="wx-redirectTo"><a href="#wx-redirectTo" class="headerlink" title="wx.redirectTo"></a>wx.redirectTo</h2><p>当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时，我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间</p><h2 id="wx-reLaunch"><a href="#wx-reLaunch" class="headerlink" title="wx.reLaunch"></a>wx.reLaunch</h2><p>wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面。</p><h2 id="wx-switchTab"><a href="#wx-switchTab" class="headerlink" title="wx.switchTab"></a>wx.switchTab</h2><p>对于跳转到tabBar的页面，最好选择是wx.switchTab()，它会先关闭所有非tabBar的页面。其次，也可以选择 wx.reLaunch()，它也能实现从非tabBar跳转到tabBar，或在tabBar间跳转，效果等同wx.switchTab()。使用其他跳转 API 来跳转到tabBar，则会跳转失败。</p><div class="note primary"><p>值得注意的是：当用wx.redirectTo和wx.reLaunch从某个页面跳转到另一个页面时，小程序的左上角是不会出小返回按钮的。</p></div><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="小程序" scheme="https://booboom.github.io/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="小程序跳转" scheme="https://booboom.github.io/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%B7%B3%E8%BD%AC/"/>
</entry>
<entry>
<title>小程序踩坑之旅（二）request:fail错误</title>
<link href="https://booboom.github.io/archive/TencentMP_2.html"/>
<id>https://booboom.github.io/archive/TencentMP_2.html</id>
<published>2018-08-31T08:37:26.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p class="description">在开发小程序的过程中有些人会遇到这样的问题，在开发者工具中可以正常请求接口获得数据，但是在手机预览和上线之后就会请求失败。怎么回事呢？</p><p>报错信息：request:fail ssl hand shake error<br>或者：此服务器的证书无效。<br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/mp2_1.jpg" alt="证书无效"></p><p>一下列出可能这一情况的原因：。</p><h2 id="后台域名没有配置"><a href="#后台域名没有配置" class="headerlink" title="后台域名没有配置"></a>后台域名没有配置</h2><h2 id="域名不支持https"><a href="#域名不支持https" class="headerlink" title="域名不支持https"></a>域名不支持https</h2><h2 id="没有重启工具"><a href="#没有重启工具" class="headerlink" title="没有重启工具"></a>没有重启工具</h2><h2 id="域名没有备案，或是备案后不足24小时；备案未生效"><a href="#域名没有备案，或是备案后不足24小时；备案未生效" class="headerlink" title="域名没有备案，或是备案后不足24小时；备案未生效"></a>域名没有备案，或是备案后不足24小时；备案未生效</h2><h2 id="ssl协议有问题"><a href="#ssl协议有问题" class="headerlink" title="ssl协议有问题"></a>ssl协议有问题</h2><ul><li>Geotrust先检查下你的站点。把一些常规的问题解决掉，比如中级证书没装，等等问题。</li><li>微信支持，且只支持ssl_protocols TLSv1.2及以上版本;所以，你需要把SSL V2，SSL V3这些协议都删掉</li><li>加密方式ssl_ciphers AES128+EECDH:AES128+EDH:!aNULL</li></ul><div class="note warning"><p>小程序需要TLS 版本支持1.2及以下版本：<img src="http://ph1dk41nw.bkt.clouddn.com/blog/mp2_2.png" alt="小程序需要TLS"> windows系统至少要2008R2以上，才能支持1.0、1.1、1.2 少一个版本不支持都不行。所以03系统想折腾小程序的朋友，自己装R2以上或用linux系统<br>免费的证书可以到阿里云，腾讯云。<br>ps:给大家提个醒 startcom 下面的dv ssl 证书， 亲测 在ios10 小程序中无法请求成功 在ios9 下可以请求成功，然后换成鹅厂的免费证书，全部都没有问题了。这不是广告 折腾了两天发现ios10 可能已经对startcom 有处罚了</p></div><h2 id="证书问题"><a href="#证书问题" class="headerlink" title="证书问题"></a>证书问题</h2><div class="note warning">测试是否为证书问题：<br>同时测试ios和安卓，假如有一方可以，一方不行，则是证书问题，请选用受认可的证书<br>检测地址：<a href="https://www.qcloud.com/product/ssl.html#userDefined10" target="_blank" rel="noopener">https://www.qcloud.com/product/ssl.html#userDefined10</a></div><ul><li>证书受信任的问题，部分国内签发的SSL证书，在Android上不受信任，推荐GeoTrust；</li><li>如果页面有动静分离，静态资源使用独立域名的话，也需要为该域名申请证书；</li><li>android低版本不支持SNI扩展，受此限制，一台服务器只能部署一个数字证书；</li></ul><h2 id="配置中间证书"><a href="#配置中间证书" class="headerlink" title="配置中间证书"></a>配置中间证书</h2><p>参考 <a href="http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4897" target="_blank" rel="noopener">http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4897</a></p><h2 id="报错-request-fail-ssl-hand-shake-error"><a href="#报错-request-fail-ssl-hand-shake-error" class="headerlink" title="报错 request:fail ssl hand shake error"></a>报错 request:fail ssl hand shake error</h2><p>可以请求数据，真机预览无法请求服务器数据</p><ol><li>配置ssl时内容填写不完善</li><li>少了一份证书，配置的证书不是小程序https地址的证书，然后配置了一个中级证书</li><li>tls需要支持1.0 1.1. 1.2版本</li><li>wx.request 请求参数method的value要大写(例如:GET)。</li><li>下载最新的微信客户端</li><li>检查手机系统时间是否为当前日期，系统时间与当前时间相差过长，会导致证书过期，调整到当前日期即可。<br>ps:如果用的是腾讯云提供的免费证书。腾讯云下载证书zip文件，解压后务必使用nginx目录中的root crt 和 key两个文件。</li></ol><p>ssl检测地址：<a href="https://www.myssl.cn/tools/check-server-cert.html" target="_blank" rel="noopener">https://www.myssl.cn/tools/check-server-cert.html</a></p><h2 id="https端口使用8443时无法访问，需改成443"><a href="#https端口使用8443时无法访问，需改成443" class="headerlink" title="https端口使用8443时无法访问，需改成443"></a>https端口使用8443时无法访问，需改成443</h2><div class="note warning">本人也是遇到了ssl证书问题，然后查阅了一下资料解决了。如果有什么新的问题或者想了解详细的解决方案及案例，可以移步到<a href="https://www.cnblogs.com/kenshinobiy/p/9108480.html" target="_blank" rel="noopener">这位大佬的博客</a></div><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="小程序" scheme="https://booboom.github.io/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="小程序踩坑" scheme="https://booboom.github.io/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%B8%A9%E5%9D%91/"/>
<category term="小程序request:fail" scheme="https://booboom.github.io/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8Frequest-fail/"/>
</entry>
<entry>
<title>Mac安装软件时提示文件已损坏</title>
<link href="https://booboom.github.io/archive/MacInstallProblem.html"/>
<id>https://booboom.github.io/archive/MacInstallProblem.html</id>
<published>2018-08-23T07:06:57.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><div class="note primary"><p>出现这种情况的原因是因为苹果的新系统（macOS Sierra 10.12.X）加强了安全机制，默认不允许用户安装非app store下载的应用程序。所以只要设置成允许运行任何来源的应用后就可以解决了，具体方法如下：</p></div><h2 id="一-查看是否打开允许运行任何来源下载的应用"><a href="#一-查看是否打开允许运行任何来源下载的应用" class="headerlink" title="一 查看是否打开允许运行任何来源下载的应用"></a>一 查看是否打开允许运行任何来源下载的应用</h2><p>首先查看<code>系统偏好设置 -> 安全性与隐私 -> 通用</code>中是否有任何来源选项。如图：<br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/mac_2.jpg" alt="允许运行任何来源下载的应用"><br>如果有，且处于没有选中状态。点击左下角小锁头，输入电脑密码，然后勾选上<code>任何来源</code>后重新安装尝试。如果没有<code>任何来源</code>这个选项，继续向下看。</p><h2 id="终端修改安全机制"><a href="#终端修改安全机制" class="headerlink" title="终端修改安全机制"></a>终端修改安全机制</h2><p>打开终端 -> 输入<code>sudo spctl --master-disable</code>-> 回车 -> 输入密码 -> 回车 -> 重新安装<br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/mac_3.jpg" alt="终端输入"></p><blockquote><p>sudo spctl –master-disable ：显示任何来源选项<br>sudo spctl –master-enable ：不显示任何来源选项</p></blockquote><!-- rebuild by neat -->]]></content>
<summary type="html">
mac在安装非App store的软件有时会提示‘文件已损坏，建议移至废纸篓’，如何解决呢？
</summary>
<category term="mac" scheme="https://booboom.github.io/categories/mac/"/>
<category term="文件损坏" scheme="https://booboom.github.io/tags/%E6%96%87%E4%BB%B6%E6%8D%9F%E5%9D%8F/"/>
<category term="mac" scheme="https://booboom.github.io/tags/mac/"/>
</entry>
<entry>
<title>cloud+腾讯云主机实现在线开发</title>
<link href="https://booboom.github.io/archive/TencentCloud.html"/>
<id>https://booboom.github.io/archive/TencentCloud.html</id>
<published>2018-08-23T02:38:54.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><div class="note primary"><p>首先做好准备工作，需要用到以下工具：<br>1. <a href="https://coding.net/" target="_blank" rel="noopener">coding</a><br>2. <a href="https://studio.coding.net/ws/default" target="_blank" rel="noopener">cloud Studio</a><br>3. <a href="https://cloud.tencent.com/document/product/615" target="_blank" rel="noopener">腾讯云主机</a><br></p></div><h2 id="注册使用coding"><a href="#注册使用coding" class="headerlink" title="注册使用coding"></a>注册使用coding</h2><p>直接去官网注册，这里不做过多的bb，接下来是重点：<br>注册好了之后，点击左上角的<code>cloud studio</code>按钮<br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/cloud_studio1.jpg" alt="cloud studio"><br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/cloud_studio2.png" alt="绑定腾讯云"><br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/cloud_studio3.png" alt="注册腾讯云"><br>注册好了之后会赠送你一个月的免费cloud studio专用云主机，之后就要自己续费使用了。</p><h2 id="使用cloud-Studio"><a href="#使用cloud-Studio" class="headerlink" title="使用cloud Studio"></a>使用cloud Studio</h2><blockquote><p>绑定好腾讯云之后，你就会看到这个页面了，看到这个页面就说明你已经成功创建了自己的云主机，并且可以在这里进行各种你想进行的操作了。</p></blockquote><p><img src="http://ph1dk41nw.bkt.clouddn.com/blog/cloud_studio4.jpg" alt="云开发"></p><ol><li>这里是文件树区域</li><li>这里是编辑区</li><li>这里是终端命令行工具</li><li>这里可以创建外部访问链接</li></ol><p></p><div class="note waring"><p>注：创建外部访问链接时，必须在命令行中设置要监听访问的端口。以 PHP 环境为例，在终端输入php -S 0.0.0.0:8080即可监听 8080 端口。</p></div><br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/cloud_studio5.jpg" alt="创建访问链接]"><br>设置好你终端中监听的端口，然后点击创建就OK了。<p></p><!-- rebuild by neat -->]]></content>
<summary type="html">
想要在任何时间，任何地点写代码么，只要有浏览器，有网络，你就可以做到。我不是天生要强，我只是注定单身。
</summary>
<category term="猎奇" scheme="https://booboom.github.io/categories/%E7%8C%8E%E5%A5%87/"/>
<category term="cloud" scheme="https://booboom.github.io/tags/cloud/"/>
<category term="腾讯云" scheme="https://booboom.github.io/tags/%E8%85%BE%E8%AE%AF%E4%BA%91/"/>
</entry>
<entry>
<title>小程序踩坑之旅（一）</title>
<link href="https://booboom.github.io/archive/TencentMP_1.html"/>
<id>https://booboom.github.io/archive/TencentMP_1.html</id>
<published>2018-08-22T10:02:02.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>本人作为刚刚踏入小程序开发不久的新人来说，每天都要被它折磨的欲仙欲死，各种用的不习惯，没办法，也只能选择接受了。<br>其实对于用过Vue的人来说，可以选择小程序的wepy框架，wepy框架的写法习惯之类的和Vue大致上都很类似，在我感觉就是把小程序和Vue强行拧巴到了一起。（强行吐槽一下😂😂）</p><div class="note warning"><p>声明提前：以下仅是本菜鸟在开发中遇到的问题和解决方法，如有不正确的地方希望大佬们可以提出让我修改，以免误导了别人。</p></div><p>如果要做好小程序，就一定要了解小程序的运行流程，简略流程图如下:(ps:画个图都是爱你的形状❤)<br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/mp_liucheng.jpg" alt="小程序运行流程图]"></p><h2 id="小程序前台、后台、销毁"><a href="#小程序前台、后台、销毁" class="headerlink" title="小程序前台、后台、销毁"></a>小程序前台、后台、销毁</h2><p>初次进入小程序的运行流程：app.onLaunch -> app.onShow -> page.onLoad -> page.onShow -> page.onReady</p><blockquote><ul><li>当用户点击小程序右上角的关闭按钮时，小程序从前台进入后台 ；此时小程序执行app.onHide -> page.onHide</li><li>当用户在几分钟内再次点击该小程序时，小程序从后台进入前台；此时小程序执行app.onShow -> page.onShow</li><li>小程序从后台进入前台时。不会携带任何参数。即options.query是空的。</li></ul></blockquote><h2 id="生命周期-app"><a href="#生命周期-app" class="headerlink" title="生命周期 - app"></a>生命周期 - app</h2><h3 id="onLaunch：监听小程序初始化"><a href="#onLaunch：监听小程序初始化" class="headerlink" title="onLaunch：监听小程序初始化"></a>onLaunch：监听小程序初始化</h3><blockquote><p>当小程序<strong><em>初始化完成</em></strong>时触发，且<code>全局仅触发一次</code>。<br>意思就是从用户打开小程序，到小程序被销毁，这个生命周期函数只会在进入小程序且初始化完成时触发。</p></blockquote><h3 id="onShow：监听小程序显示"><a href="#onShow：监听小程序显示" class="headerlink" title="onShow：监听小程序显示"></a>onShow：监听小程序显示</h3><blockquote><p>当小程序启动，或从后台进入前台显示，会触发 onShow。<br>意思就是说，当用户点击右上角关闭按钮，并且在几分钟内再次进入该小程序，或者从当前页面返回到上一级页面时，会触发onShow。</p></blockquote><h3 id="onHide：监听小程序隐藏"><a href="#onHide：监听小程序隐藏" class="headerlink" title="onHide：监听小程序隐藏"></a>onHide：监听小程序隐藏</h3><blockquote><p>当小程序从前台进入后台，会触发 onHide。<br>意思就是说，当用户点击右上角关闭按钮或者保留当前页面跳转到其他页面时(wx.navigateTo)，会触发onHide。</p></blockquote><h3 id="onError：错误监听函数"><a href="#onError：错误监听函数" class="headerlink" title="onError：错误监听函数"></a>onError：错误监听函数</h3><blockquote><p>当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息</p></blockquote><h3 id="app实例"><a href="#app实例" class="headerlink" title="app实例"></a>app实例</h3><blockquote><p>app.js 中的globalData数据和function都是全局的。调用方式：在Page中通过getApp()方法得到App对象并获得全局的数据和调用全局的函数</p></blockquote><h2 id="页面生命周期-page"><a href="#页面生命周期-page" class="headerlink" title="页面生命周期 - page"></a>页面生命周期 - page</h2><blockquote><p>page()函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。</p></blockquote><h3 id="onLoad-页面加载"><a href="#onLoad-页面加载" class="headerlink" title="onLoad: 页面加载"></a>onLoad: 页面加载</h3><blockquote><p>一个页面从初始化到被销毁只会调用一次。<br>接收页面参数 可以获取wx.navigateTo和wx.redirectTo及<navigator>中的 query。</navigator></p></blockquote><h3 id="onShow-页面显示"><a href="#onShow-页面显示" class="headerlink" title="onShow: 页面显示"></a>onShow: 页面显示</h3><blockquote><p>每次从后台进入前台都会调用一次。</p></blockquote><h3 id="onReady-页面初次渲染完成"><a href="#onReady-页面初次渲染完成" class="headerlink" title="onReady: 页面初次渲染完成"></a>onReady: 页面初次渲染完成</h3><blockquote><p>一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。</p></blockquote><h3 id="onHide-页面隐藏"><a href="#onHide-页面隐藏" class="headerlink" title="onHide: 页面隐藏"></a>onHide: 页面隐藏</h3><blockquote><p>每次从前台进入后台时调用。ex:当navigateTo或底部tab切换时调用。</p></blockquote><h3 id="onUnload-页面卸载"><a href="#onUnload-页面卸载" class="headerlink" title="onUnload: 页面卸载"></a>onUnload: 页面卸载</h3><blockquote><p>当页面被销毁时，即redirectTo或navigateBack的时候调用。</p></blockquote><!-- rebuild by neat -->]]></content>
<summary type="html">
小程序的生命周期与小程序的前台、后台和销毁。
</summary>
<category term="小程序" scheme="https://booboom.github.io/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="生命周期" scheme="https://booboom.github.io/tags/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/"/>
</entry>
<entry>
<title>初学python（一）</title>
<link href="https://booboom.github.io/archive/pythonOne.html"/>
<id>https://booboom.github.io/archive/pythonOne.html</id>
<published>2018-08-16T07:30:20.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p class="description"></p><p>python简介</p><ol><li>是著名的“龟叔”Guido van Rossum在1989年圣诞节期间，为了打发无聊的圣诞节而编写的一个编程语言。</li><li>主要应用于：网络应用，包括网站、后台服务等等，其次是一些脚本任务。</li><li>解释型语言，运行速度慢于C</li></ol><div class="note warning"><p>本系列下所有运行环境都是基于mac环境</p></div><h2 id="安装python"><a href="#安装python" class="headerlink" title="安装python"></a>安装python</h2><p>可以去<a href="https://www.python.org/" target="_blank" rel="noopener">python官网</a>下载。<br>然后一路按照提示<strong><em>next</em></strong>下去就好了。<br>安装好了之后打开<strong><em>终端输入python</em></strong>，如果看到如图内容，就说明安装成功了。<br><img src="http://ph1dk41nw.bkt.clouddn.com/blog/python_1.jpg" alt="python_1"></p><h2 id="输出和输入「Hello-World」"><a href="#输出和输入「Hello-World」" class="headerlink" title="输出和输入「Hello World」"></a>输出和输入「Hello World」</h2><blockquote><p>输出：<strong><em>print()</em></strong></p></blockquote><pre class="line-numbers language-python"><code class="language-python"><span class="token operator">>></span><span class="token operator">></span> <span class="token keyword">print</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span>hello world<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><blockquote><p>输入：<strong><em>input()</em></strong></p></blockquote><pre class="line-numbers language-python"><code class="language-python"><span class="token operator">>></span><span class="token operator">></span> name <span class="token operator">=</span> input<span class="token punctuation">(</span><span class="token string">'input:'</span><span class="token punctuation">)</span>input<span class="token punctuation">:</span><span class="token string">'Baomer'</span><span class="token operator">>></span><span class="token operator">></span> name<span class="token string">'Baomer'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>在你输入<code>name = input()</code>并回车之后，终端就已经在等待你输入，输入完成好再会车，内容就会保存在变量name中。</p><h3 id="input-与raw-input"><a href="#input-与raw-input" class="headerlink" title="input()与raw_input()"></a>input()与raw_input()</h3><div class="note warning"><p>print()函数接受一个标准输入数据（<code>即python表达式</code>），返回string类型。<br>raw_input()函数将所有输入均看作字符串，返回string类型。</p></div><pre class="line-numbers language-python"><code class="language-python"><span class="token operator">>></span><span class="token operator">></span> name <span class="token operator">=</span> input<span class="token punctuation">(</span><span class="token string">'input:'</span><span class="token punctuation">)</span>input<span class="token punctuation">:</span><span class="token number">123</span><span class="token operator">>></span><span class="token operator">></span> type<span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token operator"><</span>type <span class="token string">'int'</span><span class="token operator">></span><span class="token operator">>></span><span class="token operator">></span> name <span class="token operator">=</span> input<span class="token punctuation">(</span><span class="token string">'input:'</span><span class="token punctuation">)</span>input<span class="token punctuation">:</span><span class="token string">'Baomer'</span><span class="token operator">>></span><span class="token operator">></span> type<span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token operator"><</span>type <span class="token string">'str'</span><span class="token operator">></span><span class="token operator">>></span><span class="token operator">></span> name <span class="token operator">=</span> input<span class="token punctuation">(</span><span class="token string">'input:'</span><span class="token punctuation">)</span>input<span class="token punctuation">:</span>BaomerTraceback <span class="token punctuation">(</span>most recent call last<span class="token punctuation">)</span><span class="token punctuation">:</span> File <span class="token string">"<stdin>"</span><span class="token punctuation">,</span> line <span class="token number">1</span><span class="token punctuation">,</span> <span class="token keyword">in</span> <span class="token operator"><</span>module<span class="token operator">></span> File <span class="token string">"<string>"</span><span class="token punctuation">,</span> line <span class="token number">1</span><span class="token punctuation">,</span> <span class="token keyword">in</span> <span class="token operator"><</span>module<span class="token operator">></span>NameError<span class="token punctuation">:</span> name <span class="token string">'Baomer'</span> <span class="token keyword">is</span> <span class="token operator">not</span> defined<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><pre class="line-numbers language-python"><code class="language-python"><span class="token operator">>></span><span class="token operator">></span> name <span class="token operator">=</span> raw_input<span class="token punctuation">(</span><span class="token string">'input:'</span><span class="token punctuation">)</span>input<span class="token punctuation">:</span><span class="token number">123.2</span><span class="token operator">>></span><span class="token operator">></span> name<span class="token string">'123.2'</span><span class="token operator">>></span><span class="token operator">></span> type<span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token operator"><</span>type <span class="token string">'str'</span><span class="token operator">></span><span class="token operator">>></span><span class="token operator">></span> name <span class="token operator">=</span> raw_input<span class="token punctuation">(</span><span class="token string">'input:'</span><span class="token punctuation">)</span>input<span class="token punctuation">:</span>Baomer<span class="token operator">>></span><span class="token operator">></span> name<span class="token string">'Baomer'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><ol><li><p>整数<br>正整数负整数与数学中的写法一致。1，2，-12，0等等。<br>十六进制用0x前缀和0-9，a-f表示。</p></li><li><p>浮点数<br>浮点数即小数，可以用数学写法，但是如果是特别小或者特比大的小数，就必须用科学技术法来表示。<br>ex：1.23x109就是1.23e9，或者12.3e8；<br>0.000012可以写成1.2e-5</p></li><li><p>字符串<br>字符串是以单引号<code>'</code>或双引号<code>"</code>括起来的任意文本。<br>如果字符串本身有单引号或者双引号，可以用转义字符来标识。<br>如果字符串里面有很多字符都需要转义，Python还允许用<code>r''</code>表示<code>''</code>内部的字符串默认不转义。<br>如果字符串内部有很多换行，用<code>\n</code>写在一行里不好阅读，为了简化，Python允许用<code>'''...'''</code>的格式表示多行内容</p></li><li><p>布尔值<br>布尔值和布尔代数的表示完全一致，一个布尔值只有True、False两种值，要么是True，要么是False，在Python中，可以直接用True、False表示布尔值<code>（请注意大小写）</code><br>布尔值可以用and、or和not运算(即与、或、非)。</p></li><li><p>空值<br>空值是Python里一个特殊的值，用None表示。None不能理解为0，因为0是有意义的，而None是一个特殊的空值。类似于javascript中的null</p></li><li><p>变量<br>变量的概念基本上和初中代数的方程变量是一致的，只是在计算机程序中，变量不仅可以是数字，还可以是任意数据类型。</p></li><li><p>常量<br>python中习惯用全大写的变量名来表示常量，比如PI。但是python中并没有任何机制保证PI不会被改变。</p></li></ol><h2 id="python中的除法"><a href="#python中的除法" class="headerlink" title="python中的除法"></a>python中的除法</h2><p>Python中分为3种除法：传统除法、精确除法、地板除。</p><ol><li><p>传统除法<br>如果除数和被除数都是整数，则执行地板除。<br>如果有一个数为浮点数或都为浮点数，则执行精确除法。</p><pre class="line-numbers language-python"><code class="language-python"><span class="token operator">>></span><span class="token operator">></span><span class="token number">1</span><span class="token operator">/</span><span class="token number">2</span><span class="token number">0</span><span class="token operator">>></span><span class="token operator">></span><span class="token number">1</span><span class="token operator">/</span><span class="token number">2.0</span><span class="token number">0.5</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>精确除法<br>执行<code>from __future__ import division</code>指令，不管操作数是整形还是浮点型。都会执行精确除法。</p><pre class="line-numbers language-python"><code class="language-python"><span class="token operator">>></span><span class="token operator">></span><span class="token keyword">from</span> __future__ <span class="token keyword">import</span> division<span class="token operator">>></span><span class="token operator">></span><span class="token number">1</span><span class="token operator">/</span><span class="token number">2</span><span class="token number">0.5</span><span class="token operator">>></span><span class="token operator">></span><span class="token number">1.0</span><span class="token operator">/</span><span class="token number">2.0</span><span class="token number">0.5</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>地板除<br>从Python2.2开始，增加了一个操作符 // ，来执行地板除。即不管操作数为何种数值类型，总是会舍去小数部分，返回数字序列中比真正的商小的最接近的数字。</p><pre class="line-numbers language-python"><code class="language-python"><span class="token operator">>></span><span class="token operator">></span><span class="token number">1</span><span class="token operator">//</span><span class="token number">2</span><span class="token number">0</span><span class="token operator">>></span><span class="token operator">></span><span class="token number">1.0</span><span class="token operator">//</span><span class="token number">2</span><span class="token number">0</span><span class="token operator">>></span><span class="token operator">></span><span class="token operator">-</span><span class="token number">1</span><span class="token operator">//</span><span class="token number">2.0</span><span class="token operator">-</span><span class="token number">1</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ol><hr><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="python" scheme="https://booboom.github.io/categories/python/"/>
<category term="python" scheme="https://booboom.github.io/tags/python/"/>
</entry>
<entry>
<title>vue组件之间通讯</title>
<link href="https://booboom.github.io/archive/vueCommunication.html"/>
<id>https://booboom.github.io/archive/vueCommunication.html</id>
<published>2018-08-09T10:05:26.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><h1 id="vue作为组件化框架，组件之间的通讯是日常开发中必不可少的；通讯类型有三种："><a href="#vue作为组件化框架，组件之间的通讯是日常开发中必不可少的；通讯类型有三种：" class="headerlink" title="vue作为组件化框架，组件之间的通讯是日常开发中必不可少的；通讯类型有三种："></a>vue作为组件化框架，组件之间的通讯是日常开发中必不可少的；通讯类型有三种：</h1><ol><li>父组件->子组件</li><li>子组件->父组件</li><li>同级组件之间</li></ol><h2 id="父组件-gt-子组件"><a href="#父组件-gt-子组件" class="headerlink" title="父组件 -> 子组件"></a>父组件 -> 子组件</h2><p>废话不多说，直接上代码。</p><pre class="line-numbers language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>fatherComponent<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>children-component</span> <span class="token attr-name">:params</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>params<span class="token punctuation">'</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>children-component</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"><span class="token keyword">import</span> childrenComponent <span class="token keyword">from</span> <span class="token string">'./childrenComponent.vue'</span> <span class="token comment" spellcheck="true">//子组件的相对路径</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> params<span class="token punctuation">:</span><span class="token punctuation">{</span> a<span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span><span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> components<span class="token punctuation">:</span><span class="token punctuation">{</span> <span class="token string">'children-component'</span><span class="token punctuation">:</span>childrenComponent <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>父组件中的写法大致就是这样， 需要注意的是：</p><ol><li><code>:params='params'</code>在组件上绑定要传给组件的值，可以是数组，字符串，布尔，对象等等类型的值。</li><li><code>import childrenComponent from './childrenComponent.vue'</code>引入子组件</li><li><code>'children-component':childrenComponent</code> 在components生命周期中声明子组件标签（驼峰命名转化为-代替）。</li></ol><pre class="line-numbers language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>childrenComponent<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>我是{{params.a}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> props<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token string">'params'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>params<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>子组件中需要注意的是：</p><ol><li><code>props:['params']</code> 在子组件中要用<code>props</code>来接受父组件传来的值。并且要与父组件绑定的变量名一致。</li><li><code><p>我是</p></code> 在DOM中可以直接用这个变量来取值。</li></ol><h2 id="子组件-gt-父组件"><a href="#子组件-gt-父组件" class="headerlink" title="子组件 -> 父组件"></a>子组件 -> 父组件</h2><pre class="line-numbers language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>fatherComponent<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>children-component</span> <span class="token attr-name">:params</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>params<span class="token punctuation">'</span></span> <span class="token attr-name">@getChildrenData</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>childrenData<span class="token punctuation">'</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>children-component</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"><span class="token keyword">import</span> childrenComponent <span class="token keyword">from</span> <span class="token string">'./childrenComponent.vue'</span> <span class="token comment" spellcheck="true">//子组件的相对路径</span><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> params<span class="token punctuation">:</span><span class="token punctuation">{</span> a<span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span><span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span><span class="token punctuation">{</span> <span class="token function">childrenData</span><span class="token punctuation">(</span>_val<span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>_val<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> components<span class="token punctuation">:</span><span class="token punctuation">{</span> <span class="token string">'children-component'</span><span class="token punctuation">:</span>childrenComponent <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ol><li><code>@getChildrenData='childrenData'</code> 声明一个函数（getChildrenData）来监听子组件emit来的getChildrenData函数。</li></ol><pre class="line-numbers language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>childrenComponent<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>我是{{params.a}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>toFather<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> props<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token string">'params'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> msg<span class="token punctuation">:</span><span class="token string">'我收到啦！'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>params<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span><span class="token punctuation">{</span> <span class="token function">toFather</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'getChildrenData'</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>msg<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ol><li><code>this.$emit('getChildrenData',this.msg)</code> 子组件使用$emit函数会向父组件以参数的形式来传递数据。<h2 id="同级组件之间通讯之间"><a href="#同级组件之间通讯之间" class="headerlink" title="同级组件之间通讯之间"></a>同级组件之间通讯之间</h2>在我的理解来看，既然是同级组件，那必然有一个相同的父组件，所以也是可以用emit函数来通讯，只不过监听emit过来的函数的是同级组件而已。所以这里不做过多的解释了。<br>接下来说说，一个父组件中引用了多个子组件，如何来调用多个子组件中的方法呢。</li></ol><h2 id="父组件调用多个子组件中的方法"><a href="#父组件调用多个子组件中的方法" class="headerlink" title="父组件调用多个子组件中的方法"></a>父组件调用多个子组件中的方法</h2><pre class="line-numbers language-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>childrenComponent<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tabs</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>activeName<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tab-pane</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>组件1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>components1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>children-component1</span> <span class="token attr-name">:params</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>params<span class="token punctuation">'</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>components1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>children-component1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tab-pane</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tab-pane</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>组件2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>components2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>children-component2</span> <span class="token attr-name">:params</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>params<span class="token punctuation">'</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>components2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>children-component2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tab-pane</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tab-pane</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>组件3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>components3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>children-component3</span> <span class="token attr-name">:params</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>params<span class="token punctuation">'</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>components3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>children-component3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tab-pane</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tabs</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>goChildren<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"><span class="token keyword">import</span> childrenComponent1 <span class="token keyword">from</span> <span class="token string">'./childrenComponent1.vue'</span> <span class="token comment" spellcheck="true">//子组件的相对路径</span><span class="token keyword">import</span> childrenComponent2 <span class="token keyword">from</span> <span class="token string">'./childrenComponent2.vue'</span> <span class="token comment" spellcheck="true">//子组件的相对路径</span><span class="token keyword">import</span> childrenComponent3 <span class="token keyword">from</span> <span class="token string">'./childrenComponent3.vue'</span> <span class="token comment" spellcheck="true">//子组件的相对路径</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> activeName<span class="token punctuation">:</span><span class="token string">'freeLearnTotal'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span><span class="token punctuation">{</span> <span class="token function">goChildren</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>components2<span class="token punctuation">.</span><span class="token function">要调用方法名</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> components<span class="token punctuation">:</span><span class="token punctuation">{</span> <span class="token string">'children-component1'</span><span class="token punctuation">:</span>childrenComponent1<span class="token punctuation">,</span> <span class="token string">'children-component2'</span><span class="token punctuation">:</span>childrenComponent2<span class="token punctuation">,</span> <span class="token string">'children-component3'</span><span class="token punctuation">:</span>childrenComponent3 <span class="token punctuation">}</span> <span class="token punctuation">}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ol><li><code>ref="components2"</code>核心就是这个。<code>this.$refs</code>是所有组件的合集。</li></ol><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="Vue" scheme="https://booboom.github.io/categories/Vue/"/>
<category term="vue组件" scheme="https://booboom.github.io/tags/vue%E7%BB%84%E4%BB%B6/"/>
<category term="Vue通讯" scheme="https://booboom.github.io/tags/Vue%E9%80%9A%E8%AE%AF/"/>
</entry>
<entry>
<title>浅谈js引用类型数据的浅拷贝和深拷贝</title>
<link href="https://booboom.github.io/archive/javascript_copy.html"/>
<id>https://booboom.github.io/archive/javascript_copy.html</id>
<published>2018-08-07T07:55:36.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><blockquote><p>浅拷贝：你只能得到我的银行卡，但你却永远也得不到里面的钱！</p></blockquote><h2 id="js的数据存储类型"><a href="#js的数据存储类型" class="headerlink" title="js的数据存储类型"></a>js的数据存储类型</h2><ol><li><p>基础类型</p><blockquote><p>直接指向存储</p></blockquote></li><li><p>引用类型</p><blockquote><p>指向存储地址的指针</p></blockquote></li></ol><h2 id="引用类型的浅拷贝"><a href="#引用类型的浅拷贝" class="headerlink" title="引用类型的浅拷贝"></a>引用类型的浅拷贝</h2><pre class="line-numbers language-javascript"><code class="language-javascript"> <span class="token keyword">var</span> n<span class="token operator">=</span><span class="token punctuation">{</span> a<span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span><span class="token number">3</span><span class="token punctuation">,</span> d<span class="token punctuation">:</span><span class="token string">"123"</span><span class="token punctuation">}</span><span class="token keyword">var</span> m<span class="token operator">=</span>n<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>直接将引用类型数据赋值给其他变量，只是将n浅拷贝给了m，当n或者m中的任意属性改变，另一者也会随之改变。</p><h2 id="引用类型的伪深拷贝"><a href="#引用类型的伪深拷贝" class="headerlink" title="引用类型的伪深拷贝"></a>引用类型的伪深拷贝</h2><h3 id="枚举法"><a href="#枚举法" class="headerlink" title="枚举法"></a>枚举法</h3><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> n<span class="token operator">=</span><span class="token punctuation">{</span> a<span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span><span class="token number">3</span><span class="token punctuation">,</span> d<span class="token punctuation">:</span><span class="token string">"123"</span><span class="token punctuation">}</span><span class="token keyword">var</span> m<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token keyword">in</span> n<span class="token punctuation">)</span><span class="token punctuation">{</span> m<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token operator">=</span>n<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>for in 只能遍历对象本身及原型链上可枚举的属性，所以并不能说是完全的拷贝，但是m和n的值是互不影响的。</p><h3 id="JSON-stringify-和JSON-parse"><a href="#JSON-stringify-和JSON-parse" class="headerlink" title="JSON.stringify()和JSON.parse()"></a>JSON.stringify()和JSON.parse()</h3><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> m<span class="token operator">=</span>JSON<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><ol><li>使用<code>JSON.stringify()</code>将对象JSON化</li><li>在使用<code>JSON.parse()</code>将JSON格式转换为对象</li></ol><p>这也可以实现伪深拷贝.<br>但这种方法也有个很大缺陷，就是会破坏原型链,并且无法拷贝属性值为function的属性,仅仅是单纯的复制。</p><h3 id="Object-assign"><a href="#Object-assign" class="headerlink" title="Object.assign()"></a>Object.assign()</h3><p><code>Object.assign()</code>方法可以实现<em>无嵌套对象</em>的深拷贝，我来解释一下是什么意思，就是说Object.assign()仅仅对对象的最顶层属性进行了深拷贝，而潜逃的数组或对象，并没有实现深拷贝，而是浅拷贝。<br>来举个栗子：</p><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> n<span class="token operator">=</span><span class="token punctuation">{</span> a<span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span><span class="token number">3</span><span class="token punctuation">,</span> d<span class="token punctuation">:</span><span class="token string">"123"</span><span class="token punctuation">,</span> e<span class="token punctuation">:</span><span class="token punctuation">{</span> a<span class="token punctuation">:</span><span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span><span class="token number">2</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span><span class="token punctuation">{</span> a<span class="token punctuation">:</span><span class="token number">3</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token keyword">var</span> s<span class="token punctuation">;</span><span class="token comment" spellcheck="true">// 进行伪深拷贝，</span>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>s<span class="token punctuation">.</span>a<span class="token operator">=</span><span class="token string">'test'</span><span class="token punctuation">;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span>s<span class="token punctuation">.</span>e<span class="token punctuation">.</span>a<span class="token operator">=</span><span class="token string">"ABC"</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>可以看出，s最顶层的属性值发生改变时，不会影响n的最顶层属性值，但是嵌套对象内的属性会同时修改。</p><h3 id="本人最常用的深拷贝"><a href="#本人最常用的深拷贝" class="headerlink" title="本人最常用的深拷贝"></a>本人最常用的深拷贝</h3><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">const</span> clone <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> o <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> obj <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>obj <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> o <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>obj <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> o <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> len <span class="token operator">=</span> obj<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator"><</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> o<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">clone</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> o <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span> o<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">clone</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> o <span class="token operator">=</span> obj <span class="token punctuation">}</span> <span class="token keyword">return</span> o<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>这套拷贝基本可以实现深拷贝，当然如果对象结构不是很复杂，没有嵌套对象的话，还是建议使用<code>Object.assign()</code>。</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="原生Javascript" scheme="https://booboom.github.io/categories/%E5%8E%9F%E7%94%9FJavascript/"/>
<category term="javascript" scheme="https://booboom.github.io/tags/javascript/"/>
<category term="数据类型" scheme="https://booboom.github.io/tags/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/"/>
</entry>
<entry>
<title>Hello World</title>
<link href="https://booboom.github.io/archive/helloWorld.html"/>
<id>https://booboom.github.io/archive/helloWorld.html</id>
<published>2018-08-01T09:35:00.000Z</published>
<updated>2020-09-04T10:34:19.910Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- build time:Thu Dec 02 2021 15:42:01 GMT+0800 (China Standard Time) --><p>Hello World</p><p></p><div class="note warning"><br>菜鸟FE，仅以此博客记录自己的生活和一些工作中遇到的技术问题。<br>如遇大佬路过，还望手下留情！<br></div><br><p></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" cla
</summary>
<category term="HelloWorld" scheme="https://booboom.github.io/categories/HelloWorld/"/>
</entry>
</feed>