-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
1835 lines (1692 loc) · 134 KB
/
search.xml
File metadata and controls
1835 lines (1692 loc) · 134 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>WebAssembly 入门</title>
<url>/2022/07/06/WebAssembly-%E5%85%A5%E9%97%A8/</url>
<content><</code> 语言来做相同的事情。</p>
<p>在使用之前呢，我们肯定要安装对应的工具，来达到把高级语言编译到 <code>wasm</code> 的目的，这里我主要讲两种，分别针对 <code>C/C++</code> 以及 <code>AssemblyScript</code>。今天我们主要讲一下 C/C++ 对应的工具安装，注：以下均以 mac 电脑为例。</p>
<h2 id="emsdk-安装"><a href="#emsdk-安装" class="headerlink" title="emsdk 安装"></a>emsdk 安装</h2><p>对于 C/C++ 的开发者来说，我们需要安装的编译工具就是 <code>[emsdk](https://github.com/emscripten-core/emsdk)</code>。按照文档上来说，具体有以下几步：</p>
<pre><code class="hljs bash"><span class="hljs-comment"># 首先需要打开命令行，执行</span>
git <span class="hljs-built_in">clone</span> https://github.com/emscripten-core/emsdk.git
<span class="hljs-built_in">cd</span> emsdk
<span class="hljs-comment"># 安装以及激活最新版本</span>
./emsdk install latest
./emsdk activate latest
<span class="hljs-comment"># 激活环境变量</span>
<span class="hljs-built_in">source</span> ./emsdk_env.sh</code></pre>
<h2 id="安装时遇到的问题"><a href="#安装时遇到的问题" class="headerlink" title="安装时遇到的问题"></a>安装时遇到的问题</h2><p>正常情况下，就安装 OK 了。但事情肯定不会就这么顺利，起码我在安装的时候就卡在了 <code>./emsdk install latest</code> 这一步，一直报错 <code>tar</code> 命令解压 <code>zip</code> 包失败。这个时候我们就需要看一下这个安装脚本了。</p>
<p>首先，我们看一下 emsdk 这个项目的目录结构：</p>
<p><img src="https://cdn.jsdelivr.net/gh/floiges/pics/img/20220706152200.png" alt="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4cff6da841264fb28fb41fcbc15593b3~tplv-k3u1fbpfcp-zoom-1.image"></p>
<p>图中标注的部分即是我们需要重点关注的部分了，当我们运行 <code>./emsdk install latest</code> 这条命令时，最终执行的是 <a href="http://emsdk.py/"><code>emsdk.py</code></a> 这个 <code>python</code> 脚本文件，脚本文件的具体逻辑大家感兴趣的可以自己看下，非常的简单。</p>
<h2 id="emsdk-install-latest-执行流程"><a href="#emsdk-install-latest-执行流程" class="headerlink" title="./emsdk install latest 执行流程"></a>./emsdk install latest 执行流程</h2><p>具体来说，<code>sdk</code> 安装时会分为以下几步：</p>
<ul>
<li>就是根据我们命令行的参数，在 <code>emscripten-releases-tags.json</code> 文件中找到具体的 <code>sdk</code> 版本，我们的命令是 <code>./emsdk install latest</code> ,那么此时命令行参数就是 <code>latest</code> ，</li>
</ul>
<pre><code class="hljs bash">{
<span class="hljs-string">"aliases"</span>: {
<span class="hljs-string">"latest"</span>: <span class="hljs-string">"3.1.8"</span>,
<span class="hljs-string">"latest-sdk"</span>: <span class="hljs-string">"latest"</span>,
<span class="hljs-string">"latest-64bit"</span>: <span class="hljs-string">"latest"</span>,
<span class="hljs-string">"sdk-latest-64bit"</span>: <span class="hljs-string">"latest"</span>,
<span class="hljs-string">"latest-upstream"</span>: <span class="hljs-string">"latest"</span>,
<span class="hljs-string">"latest-clang-upstream"</span>: <span class="hljs-string">"latest"</span>,
<span class="hljs-string">"latest-releases-upstream"</span>: <span class="hljs-string">"latest"</span>
},
<span class="hljs-string">"releases"</span>: {
<span class="hljs-string">"3.1.8"</span>: <span class="hljs-string">"8c9e0a76ebed2c5e88a718d43e8b62452def3771"</span>,
<span class="hljs-string">"3.1.8-asserts"</span>: <span class="hljs-string">"d33ae3c8d16f04b004b76c1d7c1989d637aa36e0"</span>,
<span class="hljs-string">"3.1.7"</span>: <span class="hljs-string">"d0e637fe48197587d981f79e8114757731d0c2a9"</span>,
<span class="hljs-string">"3.1.7-asserts"</span>: <span class="hljs-string">"88f0cab4e7db846e171cbbbbf20cc1a51b8c779f"</span>,
<span class="hljs-string">"3.1.6"</span>: <span class="hljs-string">"8791c3e936141cbc2dd72d76290ea9b2726d39f3"</span>,
<span class="hljs-string">"3.1.6-asserts"</span>: <span class="hljs-string">"84fa976d87a29ea1734601b042f3c6809ecb89f0"</span>,
<span class="hljs-string">"3.1.5"</span>: <span class="hljs-string">"2dee36c7163f7394ab9341854ef5281501dd97d0"</span>,
...
}
}</code></pre>
<p>我们看到 <code>latest</code> 对应的版本是 <code>3.1.8</code>，同时也能获取到版本对应的 hash 值。</p>
<ul>
<li>找到版本号、<code>hash</code> 值的同时，命令行中的 <code>latest</code> 参数还会被解析为 <code>releases-upstream-%releases-tag%</code></li>
<li>同时，在 <code>emsdk_manifest.json</code> 文件中，<code>sdks</code> 里面有具体的环境依赖关系：</li>
</ul>
<pre><code class="hljs json">{
....
....
"sdks": [
....,
....,
{
<span class="hljs-attr">"version"</span>: <span class="hljs-string">"releases-upstream-%releases-tag%"</span>,
<span class="hljs-attr">"bitness"</span>: <span class="hljs-number">64</span>,
<span class="hljs-attr">"uses"</span>: [<span class="hljs-string">"node-14.18.2-64bit"</span>, <span class="hljs-string">"releases-upstream-%releases-tag%-64bit"</span>],
<span class="hljs-attr">"os"</span>: <span class="hljs-string">"linux"</span>,
<span class="hljs-attr">"custom_install_script"</span>: <span class="hljs-string">"emscripten_npm_install"</span>
},
{
<span class="hljs-attr">"version"</span>: <span class="hljs-string">"releases-upstream-%releases-tag%"</span>,
<span class="hljs-attr">"bitness"</span>: <span class="hljs-number">64</span>,
<span class="hljs-attr">"uses"</span>: [<span class="hljs-string">"node-14.18.2-64bit"</span>, <span class="hljs-string">"python-3.9.2-64bit"</span>, <span class="hljs-string">"releases-upstream-%releases-tag%-64bit"</span>],
<span class="hljs-attr">"os"</span>: <span class="hljs-string">"macos"</span>,
<span class="hljs-attr">"arch"</span>: <span class="hljs-string">"x86_64"</span>,
<span class="hljs-attr">"custom_install_script"</span>: <span class="hljs-string">"emscripten_npm_install"</span>
},
....
....
],
....
....
}</code></pre>
<p>可以看到，<code>version</code> 为 <code>releases-upstream-%releases-tag%</code> 且 <code>os</code> 是 <code>macos</code> 时，会依赖 <code>node-14.18.2</code> 、<code>python-3.9.2</code>以及 <code>releases-upstream-8c9e0a76ebed2c5e88a718d43e8b62452def3771</code> 。</p>
<ul>
<li>根据各依赖版本，下载对应的包，并放在对应的目录下，比如：新建 node 目录，并在下载完 <code>node-14.18.2</code> 之后，以版本号为名新建子目录并解压到此目录中，<code>python</code> 同理：</li>
</ul>
<p><img src="https://cdn.jsdelivr.net/gh/floiges/pics/img/20220706155223.png" alt="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f9e816395bcd48609b3871a95ad8024d~tplv-k3u1fbpfcp-zoom-1.image"></p>
<p>在子目录中，我们看到都会有一个 <code>.emsdk_version</code> 文件，其实里面的内容特别简单，就是记录一下当前依赖的版本号，脚本会读取这个文件来判断是否安装或更新了对应的依赖：</p>
<pre><code class="hljs bash"><span class="hljs-comment"># node/14.18.2_64bit/.emsdk_version</span>
node-14.18.2-64bit</code></pre>
<h2 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h2><p>好了，到这里一切就很简单了，当我们运行 <code>./emsdk install latest</code> 却遇到各种问题安装失败时，我们可以自行查看 <code>emscripten-releases-tags.json</code> 以及 <code>emsdk_manifest.json</code> 文件，查找到对应的依赖以及对应的版本，下载好之后按照上面的方式新建目录，放入内容，并新建<code>.emsdk_version</code> 放入版本号，就完成了。</p>
<p>如果找不到对应的版本怎么办？其实运行命令如果报错的话，命令行也会直接提示当前下载的是哪个版本，我们把链接拷贝出来自行下载也是可以的，链接示例参考如下：</p>
<pre><code class="hljs bash"><span class="hljs-comment">#node-14.18.2-64bit</span>
https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/node-v14.18.2-darwin-x64.tar.gz
<span class="hljs-comment">#python-3.9.2-64bit</span>
https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/python-3.9.2-3-macos-x86_64.tar.gz
<span class="hljs-comment">#releases-upstream-568a46a9fb7e1f1686a6f7216b3dc976f28d2a79-64bit</span>
https://storage.googleapis.com/webassembly/emscripten-releases-builds/mac/568a46a9fb7e1f1686a6f7216b3dc976f28d2a79/wasm-binaries.tbz2</code></pre>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>当然，安装时没有任何问题时最好的。如果说安装时遇到不成功的情况，比如说 <code>tar</code> 解压缩 <code>zip</code> 包失败等问题，倒是可以参考一下。</p>
]]></content>
<categories>
<category>前端</category>
</categories>
<tags>
<tag>WebAssembly</tag>
</tags>
</entry>
<entry>
<title>实操：开发 Fastlane 插件</title>
<url>/2020/09/16/%E5%AE%9E%E6%93%8D%EF%BC%9A%E5%BC%80%E5%8F%91-Fastlane-%E6%8F%92%E4%BB%B6/</url>
<content><![CDATA[<p>开始整活</p>
<a id="more"></a>
<blockquote>
<p>jenkins 打包机器坏了还没修，本地打包之后每次都要通知测试去下载测试包。太麻烦了，直接搞个插件，打包之后自动发送钉钉消息到群里吧</p>
</blockquote>
<h2 id="创建-gem-项目"><a href="#创建-gem-项目" class="headerlink" title="创建 gem 项目"></a>创建 gem 项目</h2><pre><code class="hljs shell">fastlane new_plugin ykz_dingding_notify</code></pre>
<p>创建好的项目目录如下：</p>
<pre><code class="hljs crystal">├── Gemfile
├── Gemfile.lock
├── LICENSE
├── README.md
├── Rakefile
├── coverage
├── fastlane
│ ├── Fastfile
│ ├── Pluginfile
│ ├── README.md
│ └── report.xml
├── fastlane-plugin-ykz_upload_bugly.gemspec
├── <span class="hljs-class"><span class="hljs-keyword">lib</span></span>
│ └── fastlane
│ └── plugin
│ ├── ykz_upload_bugly
│ │ ├── actions
│ │ │ └── ykz_upload_bugly_action.rb
│ │ ├── helper
│ │ │ └── ykz_upload_bugly_helper.rb
│ │ └── version.rb
│ └── ykz_upload_bugly.rb
├── spec</code></pre>
<p>其中需要重点关注下面2个文件(目录):</p>
<ul>
<li><p>fastlane-plugin-ykz_upload_bugly.gemspec</p>
<p>基础配置文件，如果我们有额外的三方依赖的话，可以在这里进行配置，这次没有改动次文件</p>
</li>
<li><p>lib 目录</p>
<p>是我们需要重点关注的目录，我们主要的工作就是在 actions/ykz_upload_bugly_action.rb 中</p>
<p>编写主要的代码逻辑，例如处理参数、调用钉钉通知、处理返回结果等。</p>
<p>其中，helper/ykz_upload_bugly_helper.rb 中可以定义一些工具方法，versions.rb 则是配置此插件的版本号。</p>
</li>
</ul>
<h2 id="Fastlane-Action"><a href="#Fastlane-Action" class="headerlink" title="Fastlane Action"></a>Fastlane Action</h2><p>actions/ykz_upload_bugly_action.rb 文件内容如下：</p>
<pre><code class="hljs ruby"><span class="hljs-keyword">require</span> <span class="hljs-string">'fastlane/action'</span>
require_relative <span class="hljs-string">'../helper/ykz_dingding_notify_helper'</span>
<span class="hljs-class"><span class="hljs-keyword">module</span> <span class="hljs-title">Fastlane</span></span>
<span class="hljs-class"><span class="hljs-keyword">module</span> <span class="hljs-title">Actions</span></span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">YkzDingdingNotifyAction</span> < Action</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">self</span>.<span class="hljs-title">run</span><span class="hljs-params">(params)</span></span>
<span class="hljs-comment"># 处理核心逻辑的地方</span>
<span class="hljs-comment"># 处理参数、调用接口、处理返回</span>
<span class="hljs-keyword">end</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">self</span>.<span class="hljs-title">description</span></span>
<span class="hljs-string">"notify after app build"</span>
<span class="hljs-keyword">end</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">self</span>.<span class="hljs-title">authors</span></span>
[<span class="hljs-string">"yadong"</span>]
<span class="hljs-keyword">end</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">self</span>.<span class="hljs-title">return_value</span></span>
<span class="hljs-comment"># If your method provides a return value, you can describe here what it does</span>
<span class="hljs-keyword">end</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">self</span>.<span class="hljs-title">details</span></span>
<span class="hljs-comment"># Optional:</span>
<span class="hljs-string">"notify after app build"</span>
<span class="hljs-keyword">end</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">self</span>.<span class="hljs-title">available_options</span></span>
<span class="hljs-comment"># 一般来说，我们肯定是需要接受外部传递参数的，这时就需要在此定义需要接收哪些参数</span>
<span class="hljs-comment"># 返回值为一个 FastlaneCore::ConfigItem 类型的数组</span>
<span class="hljs-keyword">end</span>
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">self</span>.<span class="hljs-title">is_supported?</span><span class="hljs-params">(platform)</span></span>
<span class="hljs-comment"># Adjust this if your plugin only works for a particular platform (iOS vs. Android, for example)</span>
<span class="hljs-comment"># See: https://docs.fastlane.tools/advanced/#control-configuration-by-lane-and-by-platform</span>
<span class="hljs-comment">#</span>
[<span class="hljs-symbol">:ios</span>, <span class="hljs-symbol">:mac</span>].<span class="hljs-keyword">include</span>?(platform)
<span class="hljs-literal">true</span>
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">end</span></code></pre>
<p>我们先来想一下钉钉通知插件需要什么参数吧，最简单来说，我们需要如下2个参数：</p>
<ul>
<li>access_token: 钉钉机器人发送消息，这个是必备的了</li>
<li>message: 简单点，我们只处理 text 类型消息，那么我们就再额外传递一个消息内容就 OK 了</li>
</ul>
<p>首先我们来写 <code>self.available_options</code> 方法，编辑我们需要接收的参数：</p>
<pre><code class="hljs ruby"><span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">self</span>.<span class="hljs-title">available_options</span></span>
[
FastlaneCore::ConfigItem.new(<span class="hljs-symbol">key:</span> <span class="hljs-symbol">:access_token</span>,
<span class="hljs-symbol">env_name:</span> <span class="hljs-string">"YKZ_DINGDING_NOTIFY_ACCESS_TOKEN"</span>,
<span class="hljs-symbol">description:</span> <span class="hljs-string">"dingding access_token"</span>,
<span class="hljs-symbol">optional:</span> <span class="hljs-literal">false</span>,
<span class="hljs-symbol">type:</span> String),
FastlaneCore::ConfigItem.new(<span class="hljs-symbol">key:</span> <span class="hljs-symbol">:message</span>,
<span class="hljs-symbol">env_name:</span> <span class="hljs-string">"YKZ_DINGDING_NOTIFY_MESSAGE"</span>,
<span class="hljs-symbol">description:</span> <span class="hljs-string">"message if needed"</span>,
<span class="hljs-symbol">optional:</span> <span class="hljs-literal">false</span>,
<span class="hljs-symbol">type:</span> String)
]
<span class="hljs-keyword">end</span></code></pre>
<p>参数定义好了，可以写核心的逻辑了。其实核心的逻辑相当简单，利用接收到的参数，拼接好 <code>curl</code> 请求然后调用并处理返回结果就行了。我们先看一下官方文档的钉钉通知 <code>curl 请求</code>:</p>
<pre><code class="hljs shell">curl 'https://oapi.dingtalk.com/robot/send?access_token=your_access_token' \
-H 'Content-Type: application/json' \
-d '{"msgtype": "text","text": {"content": "我就是我, 是不一样的烟火"}}'</code></pre>
<p>我们只要替换到请求中的 <code>access_token </code> 和 <code>content</code> 两个地方就可以达到我们的目的。</p>
<p>继续写 <code>self.run</code>方法：</p>
<pre><code class="hljs ruby"><span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">self</span>.<span class="hljs-title">run</span><span class="hljs-params">(params)</span></span>
<span class="hljs-keyword">require</span> <span class="hljs-string">'json'</span>
UI.message(<span class="hljs-string">"start notify dingding..."</span>)
<span class="hljs-comment"># 处理 curl 返回，返回结果会被存储到 json_file 中</span>
json_file = <span class="hljs-string">'notify_dingding_result.json'</span>
<span class="hljs-comment"># 获取 access_token</span>
<span class="hljs-keyword">begin</span>
access_token = <span class="hljs-string">''</span>
<span class="hljs-keyword">unless</span> params[<span class="hljs-symbol">:access_token</span>].empty?
access_token = params[<span class="hljs-symbol">:access_token</span>]
UI.message(<span class="hljs-string">"access_token: <span class="hljs-subst">#{access_token}</span>"</span>)
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">rescue</span> => exception
UI.message(<span class="hljs-string">"error at checking access_token, caused by <span class="hljs-subst">#{exception}</span>"</span>)
<span class="hljs-keyword">return</span>
<span class="hljs-keyword">end</span>
<span class="hljs-comment"># 获取 message</span>
<span class="hljs-keyword">begin</span>
message = <span class="hljs-string">''</span>
<span class="hljs-keyword">unless</span> params[<span class="hljs-symbol">:message</span>].empty?
message = params[<span class="hljs-symbol">:message</span>]
<span class="hljs-keyword">end</span>
<span class="hljs-keyword">rescue</span> => exception
UI.message(<span class="hljs-string">"error at checking message, caused by <span class="hljs-subst">#{exception}</span>"</span>)
<span class="hljs-keyword">return</span>
<span class="hljs-keyword">end</span>
<span class="hljs-comment"># 拼接 curl</span>
cmd = <<-DESC
curl <span class="hljs-string">'https://oapi.dingtalk.com/robot/send?access_token=<span class="hljs-subst">#{access_token}</span>'</span> \
-H <span class="hljs-string">'Content-Type: application/json'</span> \
-d <span class="hljs-string">'{"msgtype": "text","text": {"content": "<span class="hljs-subst">#{message}</span>"}}'</span> \
-o <span class="hljs-comment">#{json_file}</span>
DESC
<span class="hljs-comment"># 调用 curl 执行请求</span>
sh(cmd)
<span class="hljs-comment"># 处理返回结果</span>
obj = JSON.parse(File.read(json_file))
ret = obj[<span class="hljs-string">'errcode'</span>]
<span class="hljs-keyword">if</span> ret == <span class="hljs-number">0</span>
UI.message(<span class="hljs-string">"notify dingding successfully"</span>)
<span class="hljs-keyword">else</span>
UI.message(<span class="hljs-string">"notify dingding failed, result is <span class="hljs-subst">#{obj}</span>"</span>)
<span class="hljs-keyword">end</span>
<span class="hljs-comment"># 最后删除 json 文件，避免占用空间</span>
<span class="hljs-string">`rm notify_dingding_result.json`</span>
<span class="hljs-keyword">end</span></code></pre>
<h2 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h2><p>最主要的逻辑写完了，我们想要测试一下。我们在项目内 <code>fastlane/Fastfile</code> 文件中编写我们的测试逻辑：</p>
<pre><code class="hljs ruby">lane <span class="hljs-symbol">:test</span> <span class="hljs-keyword">do</span>
ykz_dingding_notify(
<span class="hljs-symbol">access_token:</span> <span class="hljs-string">'xxxxx'</span>,
<span class="hljs-symbol">message:</span> <span class="hljs-string">'构建：哈哈哈哈哈'</span>,
)
<span class="hljs-keyword">end</span></code></pre>
<p>然后命令行进入我们项目目录，执行：</p>
<pre><code class="hljs shell">fastlane test
<span class="hljs-meta">#</span><span class="bash"> 由于我这里用了 bundle，因此我执行了 bundle <span class="hljs-built_in">exec</span> fastlane <span class="hljs-built_in">test</span></span></code></pre>
<h2 id="iOS-工程里使用插件"><a href="#iOS-工程里使用插件" class="headerlink" title="iOS 工程里使用插件"></a>iOS 工程里使用插件</h2><p>我们把插件项目上传到 git 仓库中，然后打开 iOS 项目中的 fastlane/Pluginfile 文件：</p>
<pre><code class="hljs ruby">gem <span class="hljs-string">'fastlane-plugin-ykz_dingding_notify'</span>, <span class="hljs-symbol">git:</span> <span class="hljs-string">'your plugin git'</span></code></pre>
<p>然后再安装我们的插件信息：</p>
<pre><code class="hljs mipsasm">fastlane <span class="hljs-keyword">install_plugins</span>
<span class="hljs-keyword"># </span>由于我用了 <span class="hljs-keyword">bundle，因此我这里执行 </span><span class="hljs-keyword">bundle </span><span class="hljs-keyword">install </span>和 <span class="hljs-keyword">bundle </span>exec fastlane <span class="hljs-keyword">install_plugins</span></code></pre>
<p>现在，我们可以在我们的 <code>lane</code> 中使用通知插件了：</p>
<pre><code class="hljs ruby">desc <span class="hljs-string">"ad-hoc"</span>
lane <span class="hljs-symbol">:adhoc</span> <span class="hljs-keyword">do</span> <span class="hljs-params">|options|</span>
...
...
ykz_dingding_notify(
<span class="hljs-symbol">access_token:</span> <span class="hljs-string">'xxxx'</span>,
<span class="hljs-symbol">message:</span> <span class="hljs-string">'构建通知：老铁们，打包成功了啊'</span>,
)
<span class="hljs-keyword">end</span></code></pre>
<p>喜大普奔!!!!</p>
]]></content>
<categories>
<category>工具</category>
</categories>
<tags>
<tag>Fastlane</tag>
</tags>
</entry>
<entry>
<title>学了 gulp 想练练手？正好压缩下你的博客</title>
<url>/2020/04/24/%E5%AD%A6%E4%BA%86-gulp-%E6%83%B3%E7%BB%83%E7%BB%83%E6%89%8B%EF%BC%9F%E6%AD%A3%E5%A5%BD%E5%8E%8B%E7%BC%A9%E4%B8%8B%E4%BD%A0%E7%9A%84%E5%8D%9A%E5%AE%A2/</url>
<content><![CDATA[<p>用自动化构建工具增强你的工作流程！</p>
<a id="more"></a>
<h2 id="Update"><a href="#Update" class="headerlink" title="Update"></a>Update</h2><p>最近升级 hexo，顺带也升级了 gulp 的依赖，运行 gulp 之后，报 <code>GulpUglifyError: unable to minify JavaScript Caused by: SyntaxError: Unexpected token: punc «)»</code> 错误，其实还是依赖没搞对， gulp-uglify 不识别 es6 的问题，想着博客项目也不考虑什么兼容性了，果断换插件。</p>
<p>先删除多余的插件:</p>
<pre><code class="hljs livescript"><span class="hljs-built_in">npm</span> uninstall<span class="hljs-string">\</span>
gulp-babel@<span class="hljs-number">7</span><span class="hljs-string">\</span>
babel-core<span class="hljs-string">\</span>
babel-preset-env<span class="hljs-string">\</span>
babel-preset-es2015<span class="hljs-string">\</span></code></pre>
<p>之后安装 <code>gulp-uglify-es</code>，它使用 <code>Terser</code> 压缩代码(支持 es6)，非常人性化:</p>
<pre><code class="hljs q">npm install gulp-uglify-es --<span class="hljs-built_in">save</span>-<span class="hljs-built_in">dev</span></code></pre>
<p>最后<code>gulpfile</code> 里面这样改：</p>
<pre><code class="hljs javascript">......
<span class="hljs-keyword">const</span> uglify = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-uglify-es'</span>).default; <span class="hljs-comment">// 引用 gulp-uglify-es</span>
......
<span class="hljs-comment">// 压缩 js</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">minifyJS</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> gulp
.src(<span class="hljs-string">'./public/js/**/*.js'</span>)
.pipe(uglify()) <span class="hljs-comment">// 直接压缩即可</span>
.pipe(gulp.dest(<span class="hljs-string">'./public'</span>));
}
......
......</code></pre>
<p>———————— 以下为原文 ————————</p>
<h2 id="一些关于-Gulp的基础概念"><a href="#一些关于-Gulp的基础概念" class="headerlink" title="一些关于 Gulp的基础概念"></a>一些关于 <code>Gulp</code>的基础概念</h2><h3 id="任务"><a href="#任务" class="headerlink" title="任务"></a>任务</h3><p>首选要明确的一点是，<code>gulp</code> 中的每个任务都是一个 <code>javascript</code> 异步函数。处理异步任务，最基础也最常用的就是 <code>error-first callbacks</code> , 但是 <code>gulp</code> 也支持流、<code>promises</code>、<code>async/await</code> 等等其他异步方式，根据自己的需要进行选择即可，我们这里选用的就是返回流的方式。</p>
<h3 id="Globs"><a href="#Globs" class="headerlink" title="Globs"></a>Globs</h3><p>代表一串文字和/或通配符，如 <code>*</code>, <code>**</code>, 或 <code>!</code>，用于匹配文件路径。例如： <code>./public/js/**.js</code> 代表匹配当前 <code>public/js</code> 目录下的所有 <code>js</code>文件。</p>
<h3 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h3><blockquote>
<p>Gulp 插件实质上是 <a href="https://github.com/rvagg/through2">Node 转换流（Transform Streams）</a>，它封装了通过管道（pipeline）转换文件的常见功能，通常是使用 <code>.pipe()</code> 方法并放在 <code>src()</code> 和 <code>dest()</code> 之间。他们可以更改经过流（stream）的每个文件的文件名、元数据或文件内容。</p>
</blockquote>
<p>插件是用来转换文件的，可以简化我们的操作，让我们快速上手。我们这次也是使用了很多的插件，比如压缩文件、压缩图片等 <code>gulp</code> 插件。</p>
<h2 id="实操"><a href="#实操" class="headerlink" title="实操"></a>实操</h2><p>引入依赖:</p>
<pre><code class="hljs bash">npm install\
gulp gulp-minify-css\
gulp-uglify\
gulp-htmlmin\
gulp-htmlclean\
gulp-imagemin\
--save-dev</code></pre>
<p>这里面遇到个问题，因为 <code>gulp-uglify</code> 压缩 <code>js</code> 文件的时候，遇见 ES6 语法会报错，因此我们还需要引入下 <code>babel</code> 的插件，先转换下语法再压缩文件：</p>
<pre><code class="hljs bash">npm install\
gulp-babel@7\
babel-core\
babel-preset-env\
babel-preset-es2015\
--save-dev</code></pre>
<p>运行 <code>hexo g</code> 之后，会生成可发布的 <code>public</code> 文件夹，因为我们的 <code>gulp</code> 任务，都是基于此文件夹操作的。</p>
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>);
<span class="hljs-keyword">const</span> minifycss = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-minify-css'</span>);
<span class="hljs-keyword">const</span> uglify = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-uglify'</span>);
<span class="hljs-keyword">const</span> htmlmin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-htmlmin'</span>);
<span class="hljs-keyword">const</span> htmlclean = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-htmlclean'</span>);
<span class="hljs-keyword">const</span> imagemin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-imagemin'</span>);
<span class="hljs-keyword">const</span> babel = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-babel'</span>);
<span class="hljs-comment">// 压缩 js</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">minifyJS</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> gulp
.src(<span class="hljs-string">'./public/js/**/*.js'</span>)
.pipe(babel({ <span class="hljs-attr">presets</span>: [<span class="hljs-string">'es2015'</span>] })) <span class="hljs-comment">// 先转换语法</span>
.pipe(uglify())
.pipe(gulp.dest(<span class="hljs-string">'./public'</span>));
}
<span class="hljs-comment">// 压缩html</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">minifyHTML</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> gulp
.src(<span class="hljs-string">'./public/**/*.html'</span>)
.pipe(htmlclean())
.pipe(
htmlmin({
removeComments: <span class="hljs-literal">true</span>,
minifyJS: <span class="hljs-literal">true</span>,
minifyCSS: <span class="hljs-literal">true</span>,
minifyURLs: <span class="hljs-literal">true</span>,
}),
)
.pipe(gulp.dest(<span class="hljs-string">'./public'</span>));
}
<span class="hljs-comment">// 压缩css</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">minifyCSS</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> gulp
.src(<span class="hljs-string">'./public/**/*.css'</span>)
.pipe(
minifycss({
compatibility: <span class="hljs-string">'ie8'</span>,
}),
)
.pipe(gulp.dest(<span class="hljs-string">'./public'</span>));
}
<span class="hljs-comment">// 压缩图片</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">minifyIMG</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> gulp
.src(<span class="hljs-string">'./public/images/**/*.*'</span>)
.pipe(
imagemin(
[
imagemin.gifsicle({ <span class="hljs-attr">optimizationLevel</span>: <span class="hljs-number">3</span> }),
imagemin.mozjpeg({ <span class="hljs-attr">progressive</span>: <span class="hljs-literal">true</span> }),
imagemin.optipng({ <span class="hljs-attr">optimizationLevel</span>: <span class="hljs-number">7</span> }),
imagemin.svgo(),
],
{ <span class="hljs-attr">verbose</span>: <span class="hljs-literal">true</span> },
),
)
.pipe(gulp.dest(<span class="hljs-string">'./public/images'</span>));
}
<span class="hljs-comment">// 导出默认任务，这样命令行下输入 gulp 即可运行</span>
<span class="hljs-built_in">exports</span>.default = gulp.series(minifyJS, minifyHTML, minifyCSS, minifyIMG);</code></pre>
<p>接下啦，我们命令行下运行 <code>hexo g && gulp</code> 即可打包并压缩我们的文件了。</p>
<h2 id="结合自动化"><a href="#结合自动化" class="headerlink" title="结合自动化"></a>结合自动化</h2><p>我在之前的文章<a href="/2020/02/18/%E4%BD%BF%E7%94%A8-github-action-%E5%8F%91%E5%B8%83-hexo/" title="使用 github action 发布 hexo">使用 github action 发布 hexo</a>中，介绍过使用 <code>github action</code>来发布我们的博客，现在只要在<code>action</code>的基础上加上 <code>gulp</code>任务就 ok 了。这样就达到了，博客项目推送<code>master</code>分支，触发 <code>github action</code>，打包压缩之后，上传至 <code>github pages</code>项目，完美。</p>
<pre><code class="hljs yaml"><span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Install</span> <span class="hljs-string">dependencies</span>
<span class="hljs-attr">run:</span> <span class="hljs-string">|</span>
<span class="hljs-string">npm</span> <span class="hljs-string">i</span> <span class="hljs-string">-g</span> <span class="hljs-string">hexo-cli</span> <span class="hljs-string">gulp</span>
<span class="hljs-string">npm</span> <span class="hljs-string">i</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">name:</span> <span class="hljs-string">Deploy</span> <span class="hljs-string">hexo</span>
<span class="hljs-attr">run:</span> <span class="hljs-string">|</span>
<span class="hljs-string">hexo</span> <span class="hljs-string">clean</span>
<span class="hljs-string">hexo</span> <span class="hljs-string">g</span> <span class="hljs-string">&&</span> <span class="hljs-string">gulp</span> <span class="hljs-string">&&</span> <span class="hljs-string">hexo</span> <span class="hljs-string">deploy</span></code></pre>
]]></content>
<categories>
<category>工具</category>
</categories>
<tags>
<tag>hexo</tag>
</tags>
</entry>
<entry>
<title>来了，前端一键下载压缩包</title>
<url>/2020/04/23/%E6%9D%A5%E4%BA%86%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B8%80%E9%94%AE%E4%B8%8B%E8%BD%BD%E5%8E%8B%E7%BC%A9%E5%8C%85/</url>
<content><![CDATA[<p>什么？你想一键下载图片压缩包</p>
<a id="more"></a>
<h2 id="前提"><a href="#前提" class="headerlink" title="前提"></a>前提</h2><blockquote>
<p>什么？你想一键下载图片压缩包？这还真的是我接到需求后的第一句话。产品想把商品相册中的图片以压缩包的形式下载下来，于是我张口就来：后端开个接口呗。。。</p>
</blockquote>
<p>一番调研之后，确认这个需求完全可以由前端独立实现，具体依赖以下两个库：</p>
<ul>
<li><p><a href="https://stuk.github.io/jszip/">JSZip</a></p>
<p>可以用非常简单的 <code>API</code> 来创建、读取和编辑 <code>.zip</code>压缩包文件。</p>
</li>
<li><p><a href="https://stuk.github.io/jszip/">FileSaver</a></p>
<p>可以在 <code>web</code>客户端保存文件</p>
</li>
</ul>
<h2 id="实现思路"><a href="#实现思路" class="headerlink" title="实现思路"></a>实现思路</h2><ul>
<li>首先利用 <code>Image</code> 下载图片，然后用 <code>canvas</code> 将图片导出 <code>base64</code> 形式</li>
<li><code>JSZip</code> 创建文件夹，并将上一步获得的图片数据进行打包</li>
<li>打包之后，使用 <code>FileSaver</code> 将打包好的 <code>zip</code> 保存到本地</li>
</ul>
<h3 id="具体代码"><a href="#具体代码" class="headerlink" title="具体代码"></a>具体代码</h3><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> JSZip <span class="hljs-keyword">from</span> <span class="hljs-string">'jszip'</span>;
<span class="hljs-keyword">import</span> { saveAs } <span class="hljs-keyword">from</span> <span class="hljs-string">'file-saver'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> (urls, zipName = <span class="hljs-string">'素材包'</span>) => {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {
<span class="hljs-keyword">const</span> zip = <span class="hljs-keyword">new</span> JSZip();
<span class="hljs-comment">// 创建文件夹</span>
<span class="hljs-keyword">const</span> imgFolder = zip.folder(zipName);
<span class="hljs-keyword">const</span> imagePromises = urls.map(<span class="hljs-function">(<span class="hljs-params">src</span>) =></span> getBase64Image(src));
<span class="hljs-built_in">Promise</span>.all(imagePromises)
.then(<span class="hljs-function">(<span class="hljs-params">results</span>) =></span> results.filter(<span class="hljs-function">(<span class="hljs-params">result</span>) =></span> result.length > <span class="hljs-number">0</span>))
.then(<span class="hljs-function">(<span class="hljs-params">base64Images</span>) =></span> {
<span class="hljs-built_in">console</span>.table(base64Images);
<span class="hljs-keyword">if</span> (base64Images.length === <span class="hljs-number">0</span>) {
reject();
<span class="hljs-keyword">return</span>;
}
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < base64Images.length; i++) {
<span class="hljs-keyword">let</span> base64Image = base64Images[i];
<span class="hljs-comment">// 去掉 bas64, 标志</span>
base64Image = base64Image.split(<span class="hljs-string">'base64,'</span>)[<span class="hljs-number">1</span>];
<span class="hljs-comment">// 添加文件到 folder 中</span>
imgFolder.file(<span class="hljs-string">`<span class="hljs-subst">${i}</span>.png`</span>, base64Image, { <span class="hljs-attr">base64</span>: <span class="hljs-literal">true</span> });
}
<span class="hljs-comment">// 打包</span>
zip
.generateAsync({ <span class="hljs-attr">type</span>: <span class="hljs-string">'blob'</span> })
.then(<span class="hljs-function">(<span class="hljs-params">blob</span>) =></span> {
<span class="hljs-comment">// 导出下载</span>
saveAs(blob, <span class="hljs-string">`<span class="hljs-subst">${zipName}</span>.zip`</span>);
resolve();
})
.catch(<span class="hljs-function">() =></span> {
reject();
});
});
});
};
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getBase64Image</span>(<span class="hljs-params">src, width, height</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {
<span class="hljs-keyword">const</span> image = <span class="hljs-keyword">new</span> Image();
image.crossOrigin = <span class="hljs-string">''</span>; <span class="hljs-comment">// 设置跨域</span>
image.src = src;
image.onload = <span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> canvas = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'canvas'</span>);
canvas.width = width || image.width;
canvas.height = height || image.height;
<span class="hljs-keyword">const</span> ctx = canvas.getContext(<span class="hljs-string">'2d'</span>);
ctx.drawImage(image, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, canvas.width, canvas.height);
resolve(canvas.toDataURL()); <span class="hljs-comment">// 导出 base64</span>
};
image.onerror = <span class="hljs-function">() =></span> {
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`图片 <span class="hljs-subst">${src}</span> 加载失败...`</span>);
resolve(<span class="hljs-string">''</span>);
};
});
}</code></pre>
<p>特别要注意一下这句代码：</p>
<pre><code class="hljs javascript">image.crossOrigin = <span class="hljs-string">''</span>; <span class="hljs-comment">// 设置跨域</span></code></pre>
<p>如果不设置的话，则 <code>canvas</code> 会报错：</p>
<pre><code class="hljs bash">Failed to execute ‘toDataURL’ on ’HTMLCanvasElement’: Tainted canvased may not be exported</code></pre>
<p>H5 中，部分元素提供了支持 <code>CORS</code> 的属性，这些元素包括 <code><img></code>,<code><video></code>,<code><script></code>等，对应的属性名即 <code>crossOrigin</code>：</p>
<table>
<thead>
<tr>
<th align="center">属性值</th>
<th align="center">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="center">use-credentials</td>
<td align="center">元素的跨域资源请求需要凭证标志设置</td>
</tr>
<tr>
<td align="center">anonymous</td>
<td align="center">元素的跨域资源请求不需要凭证标志设置</td>
</tr>
</tbody></table>
<p>我们这里虽然设置了 <code>image.crossOrigin</code> 为空字符串，但实际生效的是 <code>anonymous</code>，更详细的内容的可参考张鑫旭的<a href="https://www.zhangxinxu.com/wordpress/2018/02/crossorigin-canvas-getimagedata-cors/">解决 canvas 图片 getImageData,toDataURL 跨域问题</a>这篇文章，我就不多说了。</p>
]]></content>
<categories>
<category>前端</category>
</categories>
</entry>
<entry>
<title>vue 动态设置页面标题那点儿事</title>
<url>/2020/04/23/vue-%E5%8A%A8%E6%80%81%E8%AE%BE%E7%BD%AE%E9%A1%B5%E9%9D%A2%E6%A0%87%E9%A2%98%E9%82%A3%E7%82%B9%E5%84%BF%E4%BA%8B/</url>
<content><![CDATA[<p>正美着准备下班了，突然一个 bug 砸到脸上。。。</p>
<a id="more"></a>
<blockquote>
<p>有这么一个页面，它的页面标题是可在后台配置的，前端正常显示标题即可。话说，这个需求小的不能再小了，上线也快半年了，应该不会有什么问题。直到有一天，运营妹子反馈，这个标题怎么没有更新呢？我？？？？</p>
</blockquote>
<blockquote>
<p>2020-09-15 更新<br>如果这个页面也需要在小程序中，iframe 中设置的图标 url 要配置 webview 域名校验</p>
</blockquote>
<h2 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h2><p>原因很快就排查到了，当页面在 <code>iOS</code>中的 <code>webview</code>中显示时，标题设置失效了，而在微信端和安卓端是没有问题的。</p>
<pre><code class="hljs javascript"><span class="hljs-built_in">document</span>.title = <span class="hljs-string">'标题'</span>;</code></pre>
<p>正常情况下，我们都是这样设置标题的，而在 <code>iOS</code>的 <code>webview</code>中加载页面时，设置 <code>document.title</code>并不起作用，因为标题栏是原生的，需要调用原生设置标题的方法才可以，那前端就没有办法了吗？</p>
<h2 id="解决"><a href="#解决" class="headerlink" title="解决"></a>解决</h2><p>其实，多测试几次我们可以发现，<code>iOS</code>第一次加载页面的时候，标题没有生效，但是再刷新一下当前页面，你会发现标题又生效了，这是不是给了我们一点点的启发？</p>
<p>没错， <code>iOS webview</code> 仅在加载页面的时候才能读取到 <code>document.title</code>，所以页面加载之后使用 <code>js</code>再设置 <code>document.title</code>是根本不会起作用的。。。那么我们是不是可以使用点手段来触发 <code>webview</code>加载而又不影响当前页面呢？</p>
<h3 id="来了，-iframe"><a href="#来了，-iframe" class="headerlink" title="来了， iframe"></a>来了， <code>iframe</code></h3><p>没错，就是 <code>iframe</code>，虽然很多时候，我们对 <code>iframe</code>嗤之以鼻，但真的遇到问题的时候，还是老大哥靠谱。</p>
<p><code>iframe</code>是内联框架，也是一种文档对象，于是我们可以：**加载一个不可见的 <code>iframe</code>，并利用它来触发 <code>webview</code>的加载，从而读取到我们设置的 <code>document.title</code>**。</p>
<pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">isIOS</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> ua = navigator.userAgent.toLowerCase();
<span class="hljs-keyword">if</span> (<span class="hljs-regexp">/iphone|ipad|ipod/</span>.test(ua)) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/android/</span>.test(ua)) {
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
}
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setDocumentTitle</span>(<span class="hljs-params">title = <span class="hljs-string">'标题'</span></span>) </span>{
<span class="hljs-built_in">document</span>.title = title; <span class="hljs-comment">// 设置标题</span>
<span class="hljs-keyword">if</span> (isIOS()) {
<span class="hljs-comment">// 创建空的 iframe，触发 onload 事件</span>
<span class="hljs-keyword">const</span> iframe = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'iframe'</span>);
iframe.style.display = <span class="hljs-string">'none'</span>;
iframe.setAttribute(
<span class="hljs-string">'src'</span>,
<span class="hljs-string">'url'</span>, <span class="hljs-comment">// 搞个小点的图标</span>
);
<span class="hljs-comment">// onload 回调函数</span>
<span class="hljs-keyword">const</span> onIframeLoad = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-comment">// 加载完之后，删除 iframe</span>
iframe.removeEventListener(<span class="hljs-string">'load'</span>, onIframeLoad);
<span class="hljs-built_in">document</span>.body.removeChild(iframe);
}, <span class="hljs-number">0</span>);
};
iframe.addEventListener(<span class="hljs-string">'load'</span>, onIframeLoad);
<span class="hljs-built_in">document</span>.body.appendChild(iframe);
}
}</code></pre>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>遇到这个问题的时候，也搜索了不少博客，很多人(包括同事)说在 <code>WKWebView</code> 下面不会有这个问题，只在 <code>UIWebView</code>上才会有。但是我们的 <code>app</code>中，使用的一直都是 <code>WK</code>，还是会有发生标题失效的问题。不管怎么说，适合自己的就是最好的。<code>bug</code>解决了，可以下班了不是吗？</p>
]]></content>
<categories>
<category>前端</category>
</categories>
<tags>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title>微信小程序之如何保存小程序码</title>
<url>/2020/04/17/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B9%8B%E5%A6%82%E4%BD%95%E4%BF%9D%E5%AD%98%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%A0%81/</url>
<content><)"></a>[wx.canvasToTempFilePath(Object object, Object this)](wx.canvasToTempFilePath(Object object, Object this))</h3><blockquote>
<p>把当前画布指定区域的内容导出生成指定大小的图片</p>
</blockquote>
<p><code>canvas</code>，没错，这正是我们需要的，那么我们就可以梳理出整个保存图片的流程了：</p>
<ul>
<li>调用云函数，获取到小程序 <code>buffer</code>数据</li>
<li>将图片和一些文案描述(如果需要的话)画在画布上</li>
<li><code>canvas</code>导出文件临时路径</li>
<li>保存图片</li>
</ul>
<h2 id="源码"><a href="#源码" class="headerlink" title="源码"></a>源码</h2><h3 id="base64src-js"><a href="#base64src-js" class="headerlink" title="base64src.js"></a><code>base64src.js</code></h3><blockquote>
<p>工具方法，主要是先把小程序码的 <code>buffer</code> 数据写入到本地文件</p>
<p>这样既可以直接用 <code>image</code> 显示，又可以直接画在 <code>canvas</code>中，一举两得</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> fileManager = wx.getFileSystemManager();
<span class="hljs-keyword">const</span> BASE_FILE_NAME = <span class="hljs-string">'tmp_base64src'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> (bufferData) => {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {
<span class="hljs-keyword">const</span> filePath = <span class="hljs-string">`<span class="hljs-subst">${wx.env.USER_DATA_PATH}</span>/<span class="hljs-subst">${BASE_FILE_NAME}</span>.png`</span>;
fileManager.writeFile({
filePath,
data: bufferData,
encoding: <span class="hljs-string">'binary'</span>,
success: <span class="hljs-function">() =></span> {
resolve(filePath);
},
fail: <span class="hljs-function">() =></span> {
reject(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'WRITE BASE64SRC ERROR'</span>));
},
});
});
};</code></pre>
<h3 id="生成小程序码"><a href="#生成小程序码" class="headerlink" title="生成小程序码"></a>生成小程序码</h3><pre><code class="hljs javascript">wx.cloud.callFunction({
name: <span class="hljs-string">'code'</span>,
data: {
<span class="hljs-comment">/* your data */</span>
},
success: <span class="hljs-function">(<span class="hljs-params">res</span>) =></span> {
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'[云函数] [code] 调用成功'</span>);
<span class="hljs-keyword">const</span> {
result: { buffer },
} = res;
base64Src(buffer).then(<span class="hljs-function">(<span class="hljs-params">src</span>) =></span> {
<span class="hljs-comment">// 获取到小程序码对应的本地路径</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'src'</span>, src);
});
},
fail: <span class="hljs-function">(<span class="hljs-params">err</span>) =></span> {
<span class="hljs-built_in">console</span>.error(<span class="hljs-string">'[云函数] [code] 调用失败'</span>);
},
complete: <span class="hljs-function">() =></span> {
wx.hideLoading();
},
});</code></pre>
<h3 id="canvas绘制图片和文字"><a href="#canvas绘制图片和文字" class="headerlink" title="canvas绘制图片和文字"></a><code>canvas</code>绘制图片和文字</h3><pre><code class="hljs javascript"><span class="hljs-keyword">if</span> (!<span class="hljs-built_in">this</span>.ctx) {
<span class="hljs-built_in">this</span>.ctx = wx.createCanvasContext(<span class="hljs-string">'miniCanvas'</span>, <span class="hljs-built_in">this</span>);
}
<span class="hljs-built_in">this</span>.ctx.setFillStyle(<span class="hljs-string">'#fff'</span>);
<span class="hljs-built_in">this</span>.ctx.fillRect(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">200</span>, <span class="hljs-number">210</span>);
<span class="hljs-comment">// this.properties.src 对应上一步生成的本地路径</span>
<span class="hljs-built_in">this</span>.ctx.drawImage(<span class="hljs-built_in">this</span>.properties.src, <span class="hljs-number">25</span>, <span class="hljs-number">20</span>, <span class="hljs-number">150</span>, <span class="hljs-number">150</span>);
<span class="hljs-built_in">this</span>.ctx.save();
<span class="hljs-built_in">this</span>.ctx.setFontSize(<span class="hljs-number">16</span>);
<span class="hljs-built_in">this</span>.ctx.setTextAlign(<span class="hljs-string">'left'</span>);
<span class="hljs-built_in">this</span>.ctx.setFillStyle(<span class="hljs-string">'#333333'</span>);
<span class="hljs-comment">// 绘制多行文字</span>
<span class="hljs-comment">// 这里指定每行文字高 30</span>
<span class="hljs-keyword">let</span> lineWidth = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> lastSubStrIndex = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> startY = <span class="hljs-number">190</span>;
<span class="hljs-keyword">const</span> startX = <span class="hljs-number">25</span>;
<span class="hljs-keyword">const</span> wordsHeight = <span class="hljs-number">30</span>;
<span class="hljs-keyword">const</span> { description } = <span class="hljs-built_in">this</span>.properties;
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < description.length; i++) {
lineWidth += <span class="hljs-built_in">this</span>.ctx.measureText(description[i]).width;
<span class="hljs-keyword">if</span> (lineWidth > <span class="hljs-number">150</span>) {
<span class="hljs-built_in">this</span>.ctx.fillText(
description.substring(lastSubStrIndex, i),
startX,
startY,
);
startY += wordsHeight;
lineWidth = <span class="hljs-number">0</span>;
lastSubStrIndex = i;
}
<span class="hljs-keyword">if</span> (i === description.length - <span class="hljs-number">1</span>) {
<span class="hljs-built_in">this</span>.ctx.fillText(
description.substring(lastSubStrIndex, i + <span class="hljs-number">1</span>),
startX,
startY,
);
}
}
<span class="hljs-built_in">this</span>.ctx.restore();
<span class="hljs-built_in">this</span>.ctx.draw();</code></pre>
<h3 id="保存相册"><a href="#保存相册" class="headerlink" title="保存相册"></a>保存相册</h3><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> scale = app.globalData.pixelRatio;
wx.canvasToTempFilePath(
{
x: <span class="hljs-number">0</span>,
y: <span class="hljs-number">0</span>,
width: <span class="hljs-number">200</span>,
height: <span class="hljs-number">210</span>,
destWidth: <span class="hljs-number">200</span> * scale,
destHeight: <span class="hljs-number">210</span> * scale,
canvasId: <span class="hljs-string">'miniCanvas'</span>,
success: <span class="hljs-function">(<span class="hljs-params">res</span>) =></span> {
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'onSave -> res.tempFilePath'</span>, res.tempFilePath);
<span class="hljs-comment">// 获取到临时路径，可以保存相册了</span>
wx.saveImageToPhotosAlbum(
{
filePath: res.tempFilePath,
success: <span class="hljs-function">() =></span> {
wx.showToast({
title: <span class="hljs-string">'保存成功，从相册中分享给朋友吧'</span>,
icon: <span class="hljs-string">'none'</span>,
duration: <span class="hljs-number">3000</span>,
});
},
fail: <span class="hljs-function">() =></span> {
wx.showToast({
title: <span class="hljs-string">'图片保存失败，请稍候重试'</span>,
icon: <span class="hljs-string">'none'</span>,
duration: <span class="hljs-number">2000</span>,
});
},
},
<span class="hljs-built_in">this</span>,
);
},
fail: <span class="hljs-function">() =></span> {
wx.showToast({
title: <span class="hljs-string">'图片保存失败，请稍候重试'</span>,
icon: <span class="hljs-string">'none'</span>,
duration: <span class="hljs-number">2000</span>,
});
},
},
<span class="hljs-built_in">this</span>,
);</code></pre>
<h2 id="其他问题"><a href="#其他问题" class="headerlink" title="其他问题"></a>其他问题</h2><blockquote>
<p>因为保存系统相册是需要对应的权限的，第一次调用保存相册的时候，系统会自动弹出获取权限的弹窗，这里就存在两种情况：</p>
<ul>
<li>如果用户点击了同意，那么之后都会有权限了，这是正常情况</li>
<li>如果点击了拒绝，那么下次用户再次点击保存相册的时候，系统不会再次弹出获取权限的弹窗，这种情况需要我们来额外处理，比如自定义一个权限弹窗，引导用户去打开权限</li>
</ul>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-comment">// 相册权限判断</span>
wx.getSetting({
success: <span class="hljs-function">(<span class="hljs-params">res</span>) =></span> {
<span class="hljs-keyword">if</span> (res.authSetting[<span class="hljs-string">'scope.writePhotosAlbum'</span>]) {
<span class="hljs-comment">// 如果存在授权，可直接调用 canvas 绘制及保存相册的方法</span>
<span class="hljs-keyword">return</span>;
}
<span class="hljs-comment">// 不存在授权，提前授权</span>
wx.authorize({
scope: <span class="hljs-string">'scope.writePhotosAlbum'</span>,
success: <span class="hljs-function">() =></span> {
<span class="hljs-comment">// 授权成功，可直接调用 canvas 绘制及保存相册的方法</span>
},
fail: <span class="hljs-function">() =></span> {
<span class="hljs-comment">// 对应相册授权被拒绝后的情况</span>
<span class="hljs-comment">// 自定义授权弹窗，引导去授权</span>
},
});
},
});
<span class="hljs-comment">// wxml 简易版授权弹窗</span>
<view <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">'minicode-dialog'</span>>
<view <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">'minicode-dialog-header'</span>>尚未获取保存相册的权限，请先授权吧</view>
<view <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">'minicode-dialog-footer'</span>>
<button
<span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">'minicode-dialog-action'</span>
open-type=<span class="hljs-string">'openSetting'</span>
bindtap=<span class="hljs-string">'onConfirm'</span>>
授权
</button>
<button <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">'minicode-dialog-action'</span> bindtap=<span class="hljs-string">'onCancel'</span>>
取消
</button>
</view>
</view>;</code></pre>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>总体来说，需求并不复杂，但由于第一次接触，也花费了一些时间。大部分时间都是在查找微信文档以及根据文档的内容来制定解决方案，果然还是带着需求的目的去学习是最快的，吹皮的资本又多了一个，哥也是搞过小程序的人～～～</p>
]]></content>
<categories>
<category>前端</category>
</categories>
<tags>
<tag>小程序</tag>
</tags>
</entry>
<entry>
<title>element-ui + vue-cropper 图片裁剪后上传</title>
<url>/2020/04/14/element-ui-vue-cropper-%E5%9B%BE%E7%89%87%E8%A3%81%E5%89%AA%E5%90%8E%E4%B8%8A%E4%BC%A0/</url>
<content><![CDATA[<p>兵来将挡，水来土掩</p>
<a id="more"></a>
<h3 id="前提"><a href="#前提" class="headerlink" title="前提"></a>前提</h3><ul>
<li><a href="https://github.com/xyxiao001/vue-cropper">vue-cropper</a></li>
<li><a href="https://element.eleme.cn/#/zh-CN/component/upload">element-ui upload</a></li>
<li>整体分为两个组件来做<ul>
<li><code>cropper.vue</code> 主要负责图片裁剪，将裁剪之后的数据传递出来</li>
<li><code>crop-upload.vue</code>，引入 <code>cropper.vue</code> 作为子组件，将裁剪后的数据上传、显示上传列表等功能</li>
</ul>
</li>
</ul>
<h3 id="cropper-vue"><a href="#cropper-vue" class="headerlink" title="cropper.vue"></a><code>cropper.vue</code></h3><blockquote>
<p>这一步没什么难度，单独抽出来一个组件只是为了项目结构能清晰一点。<br>按照文档中的 demo 来设置即可，其中部分属性项目 demo 中没有提及，直接去看源码即可。</p>
</blockquote>
<h4 id="要注意的是，组件的外部一定要设置固定的宽高"><a href="#要注意的是，组件的外部一定要设置固定的宽高" class="headerlink" title="要注意的是，组件的外部一定要设置固定的宽高"></a>要注意的是，组件的外部一定要设置固定的宽高</h4><pre><code class="hljs html"><span class="hljs-comment"><!--crop-box 设置固定宽高--></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"crop-box"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">vue-cropper</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:autoCrop</span>=<span class="hljs-string">"cropperOption.autoCrop"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:autoCropHeight</span>=<span class="hljs-string">"cropperOption.autoCropHeight"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:autoCropWidth</span>=<span class="hljs-string">"cropperOption.autoCropWidth"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:canMove</span>=<span class="hljs-string">"cropperOption.canMove"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:canMoveBox</span>=<span class="hljs-string">"cropperOption.canMoveBox"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:canScale</span>=<span class="hljs-string">"cropperOption.canScale"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:centerBox</span>=<span class="hljs-string">"cropperOption.centerBox"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:enlarge</span>=<span class="hljs-string">"cropperOption.enlarge"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:fixedBox</span>=<span class="hljs-string">"cropperOption.fixedBox"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:fixed</span>=<span class="hljs-string">"cropperOption.fixed"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:full</span>=<span class="hljs-string">"cropperOption.full"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:high</span>=<span class="hljs-string">"cropperOption.high"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:img</span>=<span class="hljs-string">"cropperOption.img"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:info</span>=<span class="hljs-string">"true"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:infoTrue</span>=<span class="hljs-string">"cropperOption.infoTrue"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:limitMinSize</span>=<span class="hljs-string">"cropperOption.limitMinSize"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:maxImgSize</span>=<span class="hljs-string">"cropperOption.maxImgSize"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:mode</span>=<span class="hljs-string">"cropperOption.mode"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:original</span>=<span class="hljs-string">"cropperOption.original"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:outputSize</span>=<span class="hljs-string">"cropperOption.size"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">:outputType</span>=<span class="hljs-string">"cropperOption.outputType"</span></span>
<span class="hljs-tag"> @<span class="hljs-attr">cropMoving</span>=<span class="hljs-string">"onCropMoving"</span></span>
<span class="hljs-tag"> @<span class="hljs-attr">imgLoad</span>=<span class="hljs-string">"onImgLoad"</span></span>
<span class="hljs-tag"> @<span class="hljs-attr">realTime</span>=<span class="hljs-string">"onRealTime"</span></span>
<span class="hljs-tag"> <span class="hljs-attr">ref</span>=<span class="hljs-string">"cropper"</span></span>
<span class="hljs-tag"> ></span><span class="hljs-tag"></<span class="hljs-name">vue-cropper</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<h4 id="组件中各个属性的含义如下："><a href="#组件中各个属性的含义如下：" class="headerlink" title="组件中各个属性的含义如下："></a>组件中各个属性的含义如下：</h4><pre><code class="hljs javascript">cropperOption: {
img: <span class="hljs-string">''</span>, <span class="hljs-comment">// 需要裁剪的图片</span>
size: <span class="hljs-number">1</span>, <span class="hljs-comment">// 输出图片压缩比, 默认 1</span>
full: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 是否输出原图比例的截图</span>
infoTrue: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 截图信息展示是否时真实的输出宽高</span>
outputType: <span class="hljs-string">'png'</span>, <span class="hljs-comment">// 输出的图片格式</span>
canScale: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 是否开启滚轮缩放大小</span>
canMove: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 能否拖动图片</span>
canMoveBox: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 能否拖动截图框</span>
fixed: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 项目要求方形裁剪,因此固定宽高比，默认宽高比是 1:1</span>
fixedBox: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 截图框固定大小</span>
original: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 上传图片时，是否显示原始宽高</span>
autoCrop: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 是否自动生成截图框</span>
<span class="hljs-comment">// 只有自动截图开启 宽度高度才生效</span>
autoCropWidth: <span class="hljs-number">200</span>,
autoCropHeight: <span class="hljs-number">200</span>,
centerBox: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 截图框是否限制在图片里(只有在自动生成截图框时才生效)</span>
high: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 是否根据 dpr 生成适合屏幕的高清图片</span>
cropData: {},
enlarge: <span class="hljs-number">1</span>, <span class="hljs-comment">// 按照截图框比例输出，默认 1</span>
mode: <span class="hljs-string">'contain'</span>, <span class="hljs-comment">// 图片的默认渲染方式</span>
maxImgSize: <span class="hljs-number">2000</span>, <span class="hljs-comment">// 上传图片时图片最大大小(默认会压缩尺寸到这个大小)</span>
limitMinSize: [<span class="hljs-number">200</span>, <span class="hljs-number">200</span>] <span class="hljs-comment">// 截图框最小限制</span>
}</code></pre>
<h4 id="最终确定裁剪时，调用下面的方法获取裁剪后的数据"><a href="#最终确定裁剪时，调用下面的方法获取裁剪后的数据" class="headerlink" title="最终确定裁剪时，调用下面的方法获取裁剪后的数据"></a>最终确定裁剪时，调用下面的方法获取裁剪后的数据</h4><pre><code class="hljs javascript"><span class="hljs-comment">// 获取 blob</span>
<span class="hljs-built_in">this</span>.$refs.cropper.getCropBlob(<span class="hljs-function">(<span class="hljs-params">blob</span>) =></span> {
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'crop onConfirm -> blob'</span>, blob);
});
<span class="hljs-comment">// 获取 base64</span>
<span class="hljs-built_in">this</span>.$refs.cropper.getCropData(<span class="hljs-function">(<span class="hljs-params">blob</span>) =></span> {
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'crop onConfirm -> blob'</span>, blob);
});</code></pre>
<h4 id="cropper-vue-最终代码"><a href="#cropper-vue-最终代码" class="headerlink" title="cropper.vue 最终代码"></a><code>cropper.vue</code> 最终代码</h4><pre><code class="hljs javascript"><!--cropper.vue-->
<template>
<div>
<el-dialog :visible.sync=<span class="hljs-string">"visible"</span> title=<span class="hljs-string">"图片裁剪"</span> width=<span class="hljs-string">"800px"</span>>
<div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"crop-container"</span> v-show=<span class="hljs-string">"!showPreview"</span>>
<div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"crop-box"</span>>
<vue-cropper
:autoCrop=<span class="hljs-string">"cropperOption.autoCrop"</span>
:autoCropHeight=<span class="hljs-string">"cropperOption.autoCropHeight"</span>
:autoCropWidth=<span class="hljs-string">"cropperOption.autoCropWidth"</span>
:canMove=<span class="hljs-string">"cropperOption.canMove"</span>
:canMoveBox=<span class="hljs-string">"cropperOption.canMoveBox"</span>
:canScale=<span class="hljs-string">"cropperOption.canScale"</span>
:centerBox=<span class="hljs-string">"cropperOption.centerBox"</span>
:enlarge=<span class="hljs-string">"cropperOption.enlarge"</span>
:fixedBox=<span class="hljs-string">"cropperOption.fixedBox"</span>
:fixed=<span class="hljs-string">"cropperOption.fixed"</span>
:full=<span class="hljs-string">"cropperOption.full"</span>
:high=<span class="hljs-string">"cropperOption.high"</span>
:img=<span class="hljs-string">"cropperOption.img"</span>
:info=<span class="hljs-string">"true"</span>
:infoTrue=<span class="hljs-string">"cropperOption.infoTrue"</span>
:limitMinSize=<span class="hljs-string">"cropperOption.limitMinSize"</span>
:maxImgSize=<span class="hljs-string">"cropperOption.maxImgSize"</span>
:mode=<span class="hljs-string">"cropperOption.mode"</span>
:original=<span class="hljs-string">"cropperOption.original"</span>
:outputSize=<span class="hljs-string">"cropperOption.size"</span>
:outputType=<span class="hljs-string">"cropperOption.outputType"</span>
@cropMoving=<span class="hljs-string">"onCropMoving"</span>
@imgLoad=<span class="hljs-string">"onImgLoad"</span>
@realTime=<span class="hljs-string">"onRealTime"</span>
ref=<span class="hljs-string">"cropper"</span>
></vue-cropper>
</div>
<div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"crop-action"</span>>
<el-button @click=<span class="hljs-string">"onConfirm"</span> type=<span class="hljs-string">"primary"</span>>确 定</el-button>
<el-button @click=<span class="hljs-string">"showPreview = true"</span>>预 览</el-button>
<el-button @click=<span class="hljs-string">"onCancel"</span>>取 消</el-button>