-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
434 lines (230 loc) · 145 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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Onions说前端 - 从未如此简单有趣</title>
<subtitle>不要跟我谈理想，我的理想是不上班</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://algate.github.io/"/>
<updated>2020-07-29T06:14:05.344Z</updated>
<id>http://algate.github.io/</id>
<author>
<name>onions</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>前端知识-小程序使用canvas画七巧板</title>
<link href="http://algate.github.io/archives/JS200726.html"/>
<id>http://algate.github.io/archives/JS200726.html</id>
<published>2020-07-26T02:38:30.000Z</published>
<updated>2020-07-29T06:14:05.344Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 14:15:47 GMT+0800 (GMT+08:00) --><p></p><center>每周的工作状态<br><br><img src="/images/tangram/work.gif" alt="image"><br><br>黄·历 - almanac<br><br>综合运势：★ ★ ★ ★ ★<br>爱情运势：★ ★ ★ ★ ★<br>财富运势：★ ★ ★ ★ ★<br>事业学业：★ ★ ★ ★ ★<br><br></center><h3 id="准备事项"><a href="#准备事项" class="headerlink" title="准备事项"></a>准备事项</h3><p>开发工具：uni-app，一套代码编到10个平台；</p><p>开发环境：HBuilder，Vue，Node；</p><p>部署环境：微信小程序；</p><p>如下图所示：</p><p><img src="/images/tangram/tangram.png" alt="image"></p><h3 id="画七巧板的点位值："><a href="#画七巧板的点位值：" class="headerlink" title="画七巧板的点位值："></a>画七巧板的点位值：</h3><p>按照七巧板的图，把七巧板的每个色块按照｛x,y｝的对象方式存储在一个数组里。有七个色块，数组就有七个值：每个数组按照比例存储四块的每个点的位置信息；每个色块再加个颜色值，这个颜色随自己喜好添加。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">tangram: [</span><br><span class="line"> { <span class="attr">p</span>: [{ <span class="attr">x</span>: <span class="number">0</span>, <span class="attr">y</span>: <span class="number">0</span> }, { <span class="attr">x</span>: <span class="number">800</span>, <span class="attr">y</span>: <span class="number">0</span> }, { <span class="attr">x</span>: <span class="number">400</span>, <span class="attr">y</span>: <span class="number">400</span> }], <span class="attr">color</span>: <span class="string">'#caff67'</span> },</span><br><span class="line"> { <span class="attr">p</span>: [{ <span class="attr">x</span>: <span class="number">0</span>, <span class="attr">y</span>: <span class="number">0</span> }, { <span class="attr">x</span>: <span class="number">400</span>, <span class="attr">y</span>: <span class="number">400</span> }, { <span class="attr">x</span>: <span class="number">0</span>, <span class="attr">y</span>: <span class="number">800</span> }], <span class="attr">color</span>: <span class="string">'#67bccf'</span> },</span><br><span class="line"> { <span class="attr">p</span>: [{ <span class="attr">x</span>: <span class="number">800</span>, <span class="attr">y</span>: <span class="number">0</span> }, { <span class="attr">x</span>: <span class="number">800</span>, <span class="attr">y</span>: <span class="number">400</span> }, { <span class="attr">x</span>: <span class="number">600</span>, <span class="attr">y</span>: <span class="number">600</span> }, { <span class="attr">x</span>: <span class="number">600</span>, <span class="attr">y</span>: <span class="number">200</span> }], <span class="attr">color</span>: <span class="string">'#cf3d61'</span> },</span><br><span class="line"> { <span class="attr">p</span>: [{ <span class="attr">x</span>: <span class="number">600</span>, <span class="attr">y</span>: <span class="number">200</span> }, { <span class="attr">x</span>: <span class="number">600</span>, <span class="attr">y</span>: <span class="number">600</span> }, { <span class="attr">x</span>: <span class="number">400</span>, <span class="attr">y</span>: <span class="number">400</span> }], <span class="attr">color</span>: <span class="string">'#f9f51a'</span> },</span><br><span class="line"> { <span class="attr">p</span>: [{ <span class="attr">x</span>: <span class="number">400</span>, <span class="attr">y</span>: <span class="number">400</span> }, { <span class="attr">x</span>: <span class="number">600</span>, <span class="attr">y</span>: <span class="number">600</span> }, { <span class="attr">x</span>: <span class="number">400</span>, <span class="attr">y</span>: <span class="number">800</span> }, { <span class="attr">x</span>: <span class="number">200</span>, <span class="attr">y</span>: <span class="number">600</span> }], <span class="attr">color</span>: <span class="string">'#a594c0'</span> },</span><br><span class="line"> { <span class="attr">p</span>: [{ <span class="attr">x</span>: <span class="number">200</span>, <span class="attr">y</span>: <span class="number">600</span> }, { <span class="attr">x</span>: <span class="number">400</span>, <span class="attr">y</span>: <span class="number">800</span> }, { <span class="attr">x</span>: <span class="number">0</span>, <span class="attr">y</span>: <span class="number">800</span> }], <span class="attr">color</span>: <span class="string">'#fa8ccc'</span> },</span><br><span class="line"> { <span class="attr">p</span>: [{ <span class="attr">x</span>: <span class="number">800</span>, <span class="attr">y</span>: <span class="number">400</span> }, { <span class="attr">x</span>: <span class="number">800</span>, <span class="attr">y</span>: <span class="number">800</span> }, { <span class="attr">x</span>: <span class="number">400</span>, <span class="attr">y</span>: <span class="number">800</span> }], <span class="attr">color</span>: <span class="string">'#f6ca29'</span> }</span><br><span class="line">]</span><br></pre></td></tr></table></figure><h3 id="画七巧板"><a href="#画七巧板" class="headerlink" title="画七巧板"></a>画七巧板</h3><p>正常浏览器页面写canvas：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> canvas=<span class="built_in">document</span>.getElementById(<span class="string">"canvas"</span>);</span><br><span class="line"><span class="keyword">var</span> context=canvas.getContext(<span class="string">"2d"</span>);</span><br></pre></td></tr></table></figure><p>基于uni-app实现小程序，这样是获取不到的。☺</p><h3 id="html添加canvas元素："><a href="#html添加canvas元素：" class="headerlink" title="html添加canvas元素："></a>html添加canvas元素：</h3><p>HTML页面写canvas：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <view><canvas style="width: 100vw;height: 100vw;" type="2d" canvas-id="tangram" id="tangram"></canvas></view></span><br><span class="line"><<span class="regexp">/template></span></span><br></pre></td></tr></table></figure><p></p><h4 id="1-上述vue的html代码编译为h5："><a href="#1-上述vue的html代码编译为h5：" class="headerlink" title="1.上述vue的html代码编译为h5："></a>1.上述vue的html代码编译为h5：</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><uni-canvas data-v<span class="number">-2</span>fdafd79=<span class="string">""</span> canvas-id=<span class="string">"tangram"</span> type=<span class="string">"2d"</span> id=<span class="string">"tangram"</span> style=<span class="string">"width: 100vw; height: 100vw;"</span>></span><br><span class="line"> <canvas width=<span class="string">"393"</span> height=<span class="string">"393"</span> style=<span class="string">"height: 393px; width: 393px;"</span>></canvas></span><br><span class="line"> <div style=<span class="string">"position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden;"</span>></div></span><br><span class="line"><<span class="regexp">/uni-canvas></span></span><br></pre></td></tr></table></figure><h4 id="2-编译为小程序为："><a href="#2-编译为小程序为：" class="headerlink" title="2.编译为小程序为："></a>2.编译为小程序为：</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><canvas canvas-id=<span class="string">"tangram"</span> id=<span class="string">"tangram"</span> style=<span class="string">"width: 100vw;height: 100vw;"</span> type=<span class="string">"2d"</span>></canvas></span><br></pre></td></tr></table></figure><h3 id="获取canvas元素："><a href="#获取canvas元素：" class="headerlink" title="获取canvas元素："></a>获取canvas元素：</h3><h4 id="H5获取canvas元素："><a href="#H5获取canvas元素：" class="headerlink" title="H5获取canvas元素："></a>H5获取canvas元素：</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.canvas = <span class="built_in">document</span>.querySelector(<span class="string">'#tangram canvas'</span>);</span><br><span class="line"><span class="keyword">this</span>.ctx = <span class="keyword">this</span>.canvas.getContext(<span class="string">'2d'</span>);</span><br></pre></td></tr></table></figure><h4 id="小程序获取canvas元素："><a href="#小程序获取canvas元素：" class="headerlink" title="小程序获取canvas元素："></a>小程序获取canvas元素：</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> query = uni.createSelectorQuery();</span><br><span class="line">query</span><br><span class="line"> .select(<span class="string">'#tangram'</span>)</span><br><span class="line"> .fields({ <span class="attr">node</span>: <span class="literal">true</span>, <span class="attr">size</span>: <span class="literal">true</span> })</span><br><span class="line"> .exec(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> <span class="keyword">this</span>.canvas = res[<span class="number">0</span>].node;</span><br><span class="line"> <span class="keyword">this</span>.ctx = <span class="keyword">this</span>.canvas.getContext(<span class="string">'2d'</span>);</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><blockquote><blockquote><p>由于不同手机的分辨率和宽度像素不确定，还有手机的像素密度值。我们还需要调整七巧板点位置的相对比例（这个下边会有相关代码）：</p></blockquote></blockquote><p>此处我们按照整个屏幕来调整，首先先获取手机相关信息，除此之外手机还有一个像素密度值pixelRatio：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">uni.getSystemInfo({</span><br><span class="line"> success: <span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> <span class="keyword">this</span>.systemInfo = res;</span><br><span class="line"> <span class="built_in">console</span>.log(res);</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p></p><p>获取系统信息：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">errMsg: <span class="string">"getSystemInfo:ok"</span></span><br><span class="line">language: <span class="string">"zh-CN"</span></span><br><span class="line">model: <span class="string">"iPhone"</span></span><br><span class="line">pixelRatio: <span class="number">2</span></span><br><span class="line">platform: <span class="string">"ios"</span></span><br><span class="line">screenHeight: <span class="number">667</span></span><br><span class="line">screenWidth: <span class="number">375</span></span><br><span class="line">statusBarHeight: <span class="number">0</span></span><br><span class="line">system: <span class="string">"iOS 13.2.3"</span></span><br><span class="line">windowBottom: <span class="number">0</span></span><br><span class="line">windowHeight: <span class="number">623</span></span><br><span class="line">windowTop: <span class="number">44</span></span><br><span class="line">windowWidth: <span class="number">375</span></span><br></pre></td></tr></table></figure><p></p><h3 id="根据系统和屏幕信息给canvas设置width和height："><a href="#根据系统和屏幕信息给canvas设置width和height：" class="headerlink" title="根据系统和屏幕信息给canvas设置width和height："></a>根据系统和屏幕信息给canvas设置width和height：</h3><p>给canvas设置width和height：</p><h4 id="h5设置为："><a href="#h5设置为：" class="headerlink" title="h5设置为："></a>h5设置为：</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> dpr = uni.getSystemInfoSync().pixelRatio;</span><br><span class="line"><span class="keyword">this</span>.canvas.width = <span class="keyword">this</span>.systemInfo.windowWidth * dpr;</span><br><span class="line"><span class="keyword">this</span>.canvas.height = <span class="keyword">this</span>.systemInfo.windowWidth * dpr;</span><br></pre></td></tr></table></figure><h4 id="小程序设置为："><a href="#小程序设置为：" class="headerlink" title="小程序设置为："></a>小程序设置为：</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> dpr = uni.getSystemInfoSync().pixelRatio;</span><br><span class="line"><span class="keyword">this</span>.canvas.width = res[<span class="number">0</span>].width * dpr;</span><br><span class="line"><span class="keyword">this</span>.canvas.height = res[<span class="number">0</span>].width * dpr;</span><br></pre></td></tr></table></figure><p>由于手机端有pixelRatio像素密度，真实的手机端需要canvas缩放，负责显示为半个canvas，所以在小程序端需要添加（h5端添加显示错乱）：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.ctx.scale(dpr, dpr);</span><br></pre></td></tr></table></figure><h3 id="用canvas画七巧板："><a href="#用canvas画七巧板：" class="headerlink" title="用canvas画七巧板："></a>用canvas画七巧板：</h3><p>七巧板点位置的数字：</p><p>【0，200，400，600，800】</p><p>如果不调整，不是全屏展示整个七巧板，可以按照最小手机的分辨率相对按比例缩小；如果要全屏展示七巧板，我们需要获取屏幕的宽度，然后按照比例进行缩放上述点位置；</p><p>获取到canvas，然后接下来就是画七巧板。我们吧这个方法提出来直接写个方法，获取到canvas，执行this.draw();</p><p>画之前，先按照比例缩放七巧板点位置的比例：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.tangram.map(<span class="function"><span class="params">plece</span> =></span> {</span><br><span class="line"> <span class="keyword">return</span> plece.p.map(<span class="function"><span class="params">coordinate</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (coordinate.x === <span class="number">200</span>) {</span><br><span class="line"> coordinate.x = <span class="keyword">this</span>.systemInfo.windowWidth / <span class="number">4</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (coordinate.x === <span class="number">400</span>) {</span><br><span class="line"> coordinate.x = <span class="keyword">this</span>.systemInfo.windowWidth / <span class="number">2</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (coordinate.x === <span class="number">600</span>) {</span><br><span class="line"> coordinate.x = (<span class="keyword">this</span>.systemInfo.windowWidth / <span class="number">4</span>) * <span class="number">3</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (coordinate.x === <span class="number">800</span>) {</span><br><span class="line"> coordinate.x = <span class="keyword">this</span>.systemInfo.windowWidth;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (coordinate.y === <span class="number">200</span>) {</span><br><span class="line"> coordinate.y = <span class="keyword">this</span>.systemInfo.windowWidth / <span class="number">4</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (coordinate.y === <span class="number">400</span>) {</span><br><span class="line"> coordinate.y = <span class="keyword">this</span>.systemInfo.windowWidth / <span class="number">2</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (coordinate.y === <span class="number">600</span>) {</span><br><span class="line"> coordinate.y = (<span class="keyword">this</span>.systemInfo.windowWidth / <span class="number">4</span>) * <span class="number">3</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (coordinate.y === <span class="number">800</span>) {</span><br><span class="line"> coordinate.y = <span class="keyword">this</span>.systemInfo.windowWidth;</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line">});</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < <span class="keyword">this</span>.tangram.length; i++) {</span><br><span class="line"> <span class="keyword">this</span>.draw(<span class="keyword">this</span>.tangram[i], ctx);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><p>draw()方法：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">draw(plece, cxt) {</span><br><span class="line"> cxt.beginPath();</span><br><span class="line"> cxt.moveTo(plece.p[<span class="number">0</span>].x, plece.p[<span class="number">0</span>].y);</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i < plece.p.length; i++) {</span><br><span class="line"> cxt.lineTo(plece.p[i].x, plece.p[i].y);</span><br><span class="line"> }</span><br><span class="line"> cxt.closePath();</span><br><span class="line"> cxt.fillStyle = plece.color;</span><br><span class="line"> cxt.fill();</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><p>画七巧板</p><p>代码中使用this，需要data里边定义变量：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">systemInfo: {},</span><br><span class="line">canvas: <span class="literal">null</span>,</span><br><span class="line">ctx: <span class="literal">null</span>,</span><br><span class="line">tangram: []</span><br></pre></td></tr></table></figure><p></p><p>完结，如果想体验直接扫码访问小程序，进入首页，点击体验或者授权都可以，</p><p>菜单canvas下，点击Tangram.js，就可以浏览七巧板效果；</p><h3 id="体验地址"><a href="#体验地址" class="headerlink" title="体验地址"></a>体验地址</h3><h4 id="小程序码："><a href="#小程序码：" class="headerlink" title="小程序码："></a>小程序码：</h4><p><img src="/img/wechatcode.png" alt="image"></p><h4 id="h5访问地址："><a href="#h5访问地址：" class="headerlink" title="h5访问地址："></a>h5访问地址：</h4><p><a href="https://algate.github.io/HammerUI/">h5展示-浏览器打开手机浏览模式F12</a></p><h4 id="公众号访问："><a href="#公众号访问：" class="headerlink" title="公众号访问："></a>公众号访问：</h4><p><img src="/img/wx-onion.png" alt="image"></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 14:15:47 GMT+0800 (GMT+08:00) --><p></p><center>每周的工作状态<br><br><img src="/images/tangram/work.gif" alt="ima
</summary>
<category term="前端" scheme="http://algate.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="小程序" scheme="http://algate.github.io/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
</entry>
<entry>
<title>承认别人的牛逼才是真正的牛逼</title>
<link href="http://algate.github.io/archives/54500.html"/>
<id>http://algate.github.io/archives/54500.html</id>
<published>2020-03-26T12:19:00.000Z</published>
<updated>2020-03-26T09:33:56.095Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><blockquote><blockquote><p>这世间有一种恶，叫见不得你好。<br>你有没有发现，越是无能的人，越是不愿意承认别人的能力。<br>但其实，承认别人的牛逼，才是真正的牛逼。</p></blockquote></blockquote><p><img src="/images/note01-01.jpg" alt="image"></p><p>这世间有一种恶，叫见不得你好。</p><p>尤其是在当下互联网生态下，隔着屏幕“越是得不到，越是要攻击。”</p><p>当财富蜂拥入驻到一个极其平凡人的身上时，周围人则会想尽办法将一切晦暗的思想嫁接在他身上。</p><p>也将这个社会的戾气，越引越爆。</p><p>在这些眼里，别人的优秀都是假的。</p><p>仿佛是给屌丝们给自己找了个借口：</p><p>“这世上根本就没有人真正做到优秀，所以我做不到也很正常。”</p><p>一副见不得别人好的丑恶嘴脸。</p><p>古人说富贵当思原由，不是无道理。</p><p>人活在世，不要老问凭什么，要多问为什么？</p><p>想想什么网红这么多，只有李佳琦和李子柒能够脱颖而出。</p><p>好好思考一下，为什么条条道路通罗马，而你活在非洲。</p><p>为什么成功的那个人不是你？</p><p>为什么加薪的那个人不是你？</p><p>不思考不反省，思维也就越发贫穷，穷则生戾。</p><p>如此循环…</p><p>我们都听过这么一句话：“比你优秀的人，比你更努力。”</p><p>而不努力的你，正在掉进“贫困陷井”中。</p><p>换句话说，久而久之，穷不仅仅是没钱这么简单，而是思维上的贫穷。</p><p>穷人缺什么？</p><p>表面缺资金，本质缺野心，脑子缺观念，机会缺了解，骨子缺勇气，改变缺行动，事业缺毅力。</p><p>影视剧《新上海滩》中有这样一个镜头，阅历丰厚的冯敬尧问年轻气盛的丁力：</p><p>“穷人最缺的是什么？”</p><p>丁力回答：“穷人最缺的当然是钱。”</p><p>冯敬尧摇摇头说：“是野心。”</p><p>“老天安排你是个穷人，你若认命你就会穷一辈子，若不认命就得有改变的野心。”</p><p>没有了改变的野心，自然就没有勇气，又谈何毅力？</p><p>这背后是一个个“穷人”逆袭，不认命的故事。</p><p>而这些酸他们的人，不过一群躲在屏幕后面loser。</p><p>人穷不可怕，心穷才是真正的可悲。</p><p>“长得好看，肯定是整的。”</p><p>“嫁得好，肯定是为了钱。”</p><p>“升职加薪，肯定是背后有关系。”</p><p>你有没有发现，越是无能的人，越是不愿意承认别人的能力。</p><p>但其实，承认别人的牛逼，才是真正的牛逼。</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><blockquote><blockquote><p>这世间有一种恶，叫见不得你好。<br>你有没有发现，越是无能的人，越是不愿意承认别人的能力。<b
</summary>
<category term="日记" scheme="http://algate.github.io/categories/%E6%97%A5%E8%AE%B0/"/>
<category term="心态" scheme="http://algate.github.io/tags/%E5%BF%83%E6%80%81/"/>
</entry>
<entry>
<title>ES6下对象的解构赋值</title>
<link href="http://algate.github.io/archives/JS191228.html"/>
<id>http://algate.github.io/archives/JS191228.html</id>
<published>2019-12-28T02:38:30.000Z</published>
<updated>2020-01-02T08:18:00.531Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h2 id="对象的解构赋值"><a href="#对象的解构赋值" class="headerlink" title="对象的解构赋值"></a>对象的解构赋值</h2><p>对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。<br>先看个例子：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> { bar, foo } = { <span class="attr">foo</span>: <span class="string">"aaa"</span>, <span class="attr">bar</span>: <span class="string">"bbb"</span> };</span><br><span class="line">foo <span class="comment">// "aaa"</span></span><br><span class="line">bar <span class="comment">// "bbb"</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> { baz } = { <span class="attr">foo</span>: <span class="string">"aaa"</span>, <span class="attr">bar</span>: <span class="string">"bbb"</span> };</span><br><span class="line">baz <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure><p></p><p>那么再来看个<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> { <span class="attr">foo</span>: baz } = { <span class="attr">foo</span>: <span class="string">"aaa"</span>, <span class="attr">bar</span>: <span class="string">"bbb"</span> };</span><br><span class="line">baz <span class="comment">// "aaa"</span></span><br><span class="line">foo <span class="comment">// error: foo is not defined</span></span><br></pre></td></tr></table></figure><p></p><p>foo为啥会报错呢？<br>大家需要首先记住的是：<strong>对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。</strong><br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = {</span><br><span class="line"> p: [</span><br><span class="line"> <span class="string">'Hello'</span>,</span><br><span class="line"> { <span class="attr">y</span>: <span class="string">'World'</span> }</span><br><span class="line"> ]</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> { <span class="attr">p</span>: [x, { y }] } = obj;</span><br><span class="line">x <span class="comment">// "Hello"</span></span><br><span class="line">y <span class="comment">// "World"</span></span><br></pre></td></tr></table></figure><p></p><p>大家猜猜 打印p的话，会是什么结果呢？显而易见，大家自己打印看看。<br>注意，p是模式，不是变量。偏要赋值就要变成变量：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> { p, <span class="attr">p</span>: [x, { y }] } = obj;</span><br></pre></td></tr></table></figure><p></p><p>我们看看复杂一点的例子：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> node = {</span><br><span class="line"> loc: {</span><br><span class="line"> start: {</span><br><span class="line"> line: <span class="number">1</span>,</span><br><span class="line"> column: <span class="number">5</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> { loc, <span class="attr">loc</span>: { start }, <span class="attr">loc</span>: { <span class="attr">start</span>: { line }} } = node;</span><br><span class="line">line <span class="comment">// 1</span></span><br><span class="line">collumn <span class="comment">// ??</span></span><br><span class="line">loc <span class="comment">// ??</span></span><br><span class="line">start <span class="comment">// ??</span></span><br></pre></td></tr></table></figure><p></p><p>大家说说结果：对了就可以说明你的掌握模式和变量的区别了。<br>解释：<strong>上面代码有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。注意，最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量。</strong>（概括的说：冒号左边的都是模式，没有冒号或者冒号右边的是变量）</p><p>对象的解构也可以指定默认值。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> {x = <span class="number">3</span>} = {};</span><br><span class="line">x <span class="comment">// 3</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> {x, y = <span class="number">5</span>} = {<span class="attr">x</span>: <span class="number">1</span>};</span><br><span class="line">x <span class="comment">// 1</span></span><br><span class="line">y <span class="comment">// 5</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> {<span class="attr">x</span>: y = <span class="number">3</span>} = {};</span><br><span class="line">y <span class="comment">// 3</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> {<span class="attr">x</span>: y = <span class="number">3</span>} = {<span class="attr">x</span>: <span class="number">5</span>};</span><br><span class="line">y <span class="comment">// 5</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> { <span class="attr">message</span>: msg = <span class="string">'Something went wrong'</span> } = {};</span><br><span class="line">msg <span class="comment">// "Something went wrong"</span></span><br></pre></td></tr></table></figure><blockquote><p>还有一个需要注意的是：</p></blockquote><p>默认值生效的条件是，对象的属性值严格等于undefined。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> {x = <span class="number">3</span>} = {<span class="attr">x</span>: <span class="literal">undefined</span>};</span><br><span class="line">x <span class="comment">// 3</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> {x = <span class="number">3</span>} = {<span class="attr">x</span>: <span class="literal">null</span>};</span><br><span class="line">x <span class="comment">// null</span></span><br></pre></td></tr></table></figure><p>最重要的对象解构赋值就是这些。完……</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h2 id="对象的解构赋值"><a href="#对象的解构赋值" class="headerlink" title="对象的解构赋值"></a>
</summary>
<category term="前端" scheme="http://algate.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="ES6" scheme="http://algate.github.io/tags/ES6/"/>
</entry>
<entry>
<title>Powershell使用命令</title>
<link href="http://algate.github.io/archives/JS191226.html"/>
<id>http://algate.github.io/archives/JS191226.html</id>
<published>2019-12-26T04:09:30.000Z</published>
<updated>2019-12-25T06:05:25.620Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h1 id="1-PS工具常用命令集合："><a href="#1-PS工具常用命令集合：" class="headerlink" title="1 PS工具常用命令集合："></a>1 PS工具常用命令集合：</h1><h2 id="1-1-在当前文件夹下打开PS："><a href="#1-1-在当前文件夹下打开PS：" class="headerlink" title="1.1 在当前文件夹下打开PS："></a>1.1 在当前文件夹下打开PS：</h2><p>按住Shift 右击鼠标<br>选择<code>在此处打开Powershell窗口</code></p><h2 id="1-2-PS中打开当前文件夹"><a href="#1-2-PS中打开当前文件夹" class="headerlink" title="1.2 PS中打开当前文件夹"></a>1.2 PS中打开当前文件夹</h2><p>有时候，开着PS可是呢，要打开当前资源管理器，对文件进行处理，目录太深，如何快捷打开当前文件夹<br>有了PS当然是通过命令来处理了：<br></p><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">start</span> .</span><br></pre></td></tr></table></figure><p></p><blockquote><p>这是最简单的，当然还有别的方法：<br>explorer(gl) 如果不输入<code>(gl)</code>则是打开计算机(Win+E)<br>……别的不写了，太复杂了，有一个就够用了</p></blockquote><h2 id="1-3-PS中新建文件-文件夹"><a href="#1-3-PS中新建文件-文件夹" class="headerlink" title="1.3 PS中新建文件/文件夹"></a>1.3 PS中新建文件/文件夹</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">新建文件</span><br><span class="line">New-Item file (只能新建文件)</span><br></pre></td></tr></table></figure><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">新建文件夹</span><br><span class="line"><span class="built_in">md</span>/<span class="built_in">mkdir</span> filefolder （只能新建文件夹）</span><br></pre></td></tr></table></figure><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">新建文件/文件夹</span><br><span class="line">New-Item filefolder -<span class="built_in">type</span> File/Directory</span><br></pre></td></tr></table></figure><h2 id="1-4-PS中删除文件和文件夹"><a href="#1-4-PS中删除文件和文件夹" class="headerlink" title="1.4 PS中删除文件和文件夹"></a>1.4 PS中删除文件和文件夹</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Remove-Item file/filefolder</span><br></pre></td></tr></table></figure><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ri/<span class="built_in">rd</span>/rm/<span class="built_in">rmdir</span>/<span class="built_in">erase</span> file/filefolder</span><br></pre></td></tr></table></figure><h2 id="1-5-打开cmd"><a href="#1-5-打开cmd" class="headerlink" title="1.5 打开cmd"></a>1.5 打开cmd</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">start</span> <span class="built_in">cmd</span></span><br></pre></td></tr></table></figure><h2 id="1-6-资源管理器打开文件夹"><a href="#1-6-资源管理器打开文件夹" class="headerlink" title="1.6 资源管理器打开文件夹"></a>1.6 资源管理器打开文件夹</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">start</span> folder</span><br></pre></td></tr></table></figure><blockquote><p>md 为mkdir的缩写</p></blockquote><h2 id="1-5-PS查看文件内容"><a href="#1-5-PS查看文件内容" class="headerlink" title="1.5 PS查看文件内容"></a>1.5 PS查看文件内容</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">get-content file （后缀也得加上）</span><br></pre></td></tr></table></figure><h2 id="1-6-PS清空命令行"><a href="#1-6-PS清空命令行" class="headerlink" title="1.6 PS清空命令行"></a>1.6 PS清空命令行</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cls</span></span><br></pre></td></tr></table></figure><h2 id="1-7-PS目录查找"><a href="#1-7-PS目录查找" class="headerlink" title="1.7 PS目录查找"></a>1.7 PS目录查找</h2><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span>.. (返回上级菜单)</span><br><span class="line"><span class="built_in">cd</span> filefloder (访问目录问价夹)</span><br></pre></td></tr></table></figure><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h1 id="1-PS工具常用命令集合："><a href="#1-PS工具常用命令集合：" class="headerlink" title="1
</summary>
<category term="计算机" scheme="http://algate.github.io/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA/"/>
<category term="计算机" scheme="http://algate.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA/"/>
<category term="Powershell" scheme="http://algate.github.io/tags/Powershell/"/>
</entry>
<entry>
<title>删除系统找不到的文件</title>
<link href="http://algate.github.io/archives/JS191225.html"/>
<id>http://algate.github.io/archives/JS191225.html</id>
<published>2019-12-25T14:37:30.000Z</published>
<updated>2019-12-25T02:52:14.812Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h2 id="删除文件时提示“找不到该项目”，怎么解决"><a href="#删除文件时提示“找不到该项目”，怎么解决" class="headerlink" title="删除文件时提示“找不到该项目”，怎么解决?"></a>删除文件时提示“找不到该项目”，怎么解决?</h2><p><img src="/images/20191225/computer-del.jpg" alt="image"></p><p>经过三番五次的尝试，发现都不行，你是不是想重启电脑试试！</p><p>现在有个很简单的方法，试了一下，果然好用，推荐个大家</p><h3 id="1-新建一个文件"><a href="#1-新建一个文件" class="headerlink" title="1.新建一个文件"></a>1.新建一个文件</h3><p>名字为啥无所谓</p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">New-Item <span class="selector-tag">del</span>.bat</span><br></pre></td></tr></table></figure><h3 id="2-打开文件输入以下运行命令"><a href="#2-打开文件输入以下运行命令" class="headerlink" title="2.打开文件输入以下运行命令"></a>2.打开文件输入以下运行命令</h3><figure class="highlight jboss-cli"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">DEL <span class="string">/F</span> <span class="string">/A</span> <span class="string">/Q</span> \\?\%1</span><br><span class="line">RD <span class="string">/S</span> <span class="string">/Q</span> \\?\%1</span><br></pre></td></tr></table></figure><h3 id="3-删除文件"><a href="#3-删除文件" class="headerlink" title="3.删除文件"></a>3.删除文件</h3><p>把系统不存在的文件或者文件夹拖到该bat文件上。你就会发现神奇的事情!</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h2 id="删除文件时提示“找不到该项目”，怎么解决"><a href="#删除文件时提示“找不到该项目”，怎么解决" class="header
</summary>
<category term="计算机" scheme="http://algate.github.io/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA/"/>
<category term="计算机" scheme="http://algate.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA/"/>
<category term="技术支持" scheme="http://algate.github.io/tags/%E6%8A%80%E6%9C%AF%E6%94%AF%E6%8C%81/"/>
</entry>
<entry>
<title>JavaScript-Array迭代器方法</title>
<link href="http://algate.github.io/archives/JS191224.html"/>
<id>http://algate.github.io/archives/JS191224.html</id>
<published>2019-12-24T08:49:30.000Z</published>
<updated>2020-05-29T07:17:39.751Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h3 id="【1】-第一组迭代器方法不产生任何新数组，要么对于数组中的每个元素执行某种操作，要么返回一个值；"><a href="#【1】-第一组迭代器方法不产生任何新数组，要么对于数组中的每个元素执行某种操作，要么返回一个值；" class="headerlink" title="【1】 第一组迭代器方法不产生任何新数组，要么对于数组中的每个元素执行某种操作，要么返回一个值；"></a>【1】 第一组迭代器方法<code>不产生任何新数组</code>，要么对于数组中的每个元素执行某种操作，要么返回一个值；</h3><h4 id="1-forEach-接受一个函数作为参数，对数组中的每个元素使用该函数"><a href="#1-forEach-接受一个函数作为参数，对数组中的每个元素使用该函数" class="headerlink" title="1.forEach() 接受一个函数作为参数，对数组中的每个元素使用该函数"></a>1.forEach() 接受一个函数作为参数，对数组中的每个元素使用该函数</h4><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">square</span><span class="params">(num)</span> {</span></span><br><span class="line"> print(num, num * num);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var nums = [];</span><br><span class="line"><span class="keyword">for</span> (var <span class="built_in">i</span> = <span class="number">0</span>; <span class="built_in">i</span> < <span class="number">10</span>; ++<span class="built_in">i</span>) {</span><br><span class="line"> nums[<span class="built_in">i</span>] = <span class="built_in">i</span>+<span class="number">1</span>;</span><br><span class="line">}</span><br><span class="line">nums.forEach(square);</span><br></pre></td></tr></table></figure><a id="more"></a><h4 id="2-every-接受一个返回值为布尔类型的函数，对数组中的每个元素使用该函数。对于所有的元素，该函数返回true，则该方法返回true"><a href="#2-every-接受一个返回值为布尔类型的函数，对数组中的每个元素使用该函数。对于所有的元素，该函数返回true，则该方法返回true" class="headerlink" title="2.every() 接受一个返回值为布尔类型的函数，对数组中的每个元素使用该函数。对于所有的元素，该函数返回true，则该方法返回true"></a>2.every() 接受一个返回值为布尔类型的函数，对数组中的每个元素使用该函数。对于所有的元素，该函数返回true，则该方法返回true</h4><figure class="highlight maxima"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function isEven(<span class="built_in">num</span>) {</span><br><span class="line"> <span class="built_in">return</span> <span class="built_in">num</span> <span class="symbol">%</span> <span class="number">2</span> == <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="built_in">var</span> nums = [<span class="number">2</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">8</span>,<span class="number">10</span>];</span><br><span class="line"><span class="built_in">var</span> <span class="built_in">even</span> = nums.<span class="built_in">every</span>(isEven);</span><br><span class="line"><span class="keyword">if</span> (<span class="built_in">even</span>) {</span><br><span class="line"> <span class="built_in">print</span>(<span class="string">"all numbers are even"</span>);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">else</span> {</span><br><span class="line"> <span class="built_in">print</span>(<span class="string">"some numbers are odd"</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><blockquote><p>some() 方法也接受一个返回值为布尔类型的函数，只要有一个元素使得该函数返回true，该方法就返回true。</p></blockquote><figure class="highlight lsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">function isEven(num) {</span><br><span class="line"> return num % <span class="number">2</span> == <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">var nums = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>,<span class="number">10</span>];</span><br><span class="line">var someEven = nums.some(isEven);</span><br><span class="line">if (someEven) {</span><br><span class="line"> print(<span class="string">"some numbers are even"</span>);</span><br><span class="line">}</span><br><span class="line">else {</span><br><span class="line"> print(<span class="string">"no numbers are even"</span>);</span><br><span class="line">}</span><br><span class="line">nums = [<span class="number">1</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">7</span>,<span class="number">9</span>];</span><br><span class="line">var someEven = nums.some(isEven);</span><br><span class="line">if (someEven) {</span><br><span class="line"> print(<span class="string">"some numbers are even"</span>);</span><br><span class="line">}</span><br><span class="line">else {</span><br><span class="line"> print(<span class="string">"no numbers are even"</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="3-reduce-接受一个函数，返回一个值。-它会从一个累加值开始，不断对累加值和数组中的后续元素调用该函数，最后返回累加值。"><a href="#3-reduce-接受一个函数，返回一个值。-它会从一个累加值开始，不断对累加值和数组中的后续元素调用该函数，最后返回累加值。" class="headerlink" title="3.reduce() 接受一个函数，返回一个值。 它会从一个累加值开始，不断对累加值和数组中的后续元素调用该函数，最后返回累加值。"></a>3.reduce() 接受一个函数，返回一个值。 它会从一个累加值开始，不断对累加值和数组中的后续元素调用该函数，最后返回累加值。</h4><blockquote><p>也可以用来将数组中的元素连接成一个长字符串<br>reduceRight() 与 reduce()类似，是从右往左执行。</p></blockquote><h3 id="【2】-生成新数组的迭代器方法"><a href="#【2】-生成新数组的迭代器方法" class="headerlink" title="【2】 生成新数组的迭代器方法"></a>【2】 <code>生成新数组</code>的迭代器方法</h3><h4 id="1-map-和forEach-有点儿像，对数组中的每个元素使用某个函数。区别就是，map-返回一个新的数组，该数组的元素是对原有元素应用某个函数得到的结果。"><a href="#1-map-和forEach-有点儿像，对数组中的每个元素使用某个函数。区别就是，map-返回一个新的数组，该数组的元素是对原有元素应用某个函数得到的结果。" class="headerlink" title="1.map() 和forEach()有点儿像，对数组中的每个元素使用某个函数。区别就是，map()返回一个新的数组，该数组的元素是对原有元素应用某个函数得到的结果。"></a>1.map() 和forEach()有点儿像，对数组中的每个元素使用某个函数。区别就是，map()返回一个新的数组，该数组的元素是对原有元素应用某个函数得到的结果。</h4><figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">curve</span></span>(grade) {</span><br><span class="line"> retuan grade += <span class="number">5</span>;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> grades = [<span class="number">77</span>, <span class="number">65</span>, <span class="number">81</span>, <span class="number">92</span>, <span class="number">83</span>];</span><br><span class="line"><span class="keyword">var</span> <span class="keyword">new</span><span class="type">grades</span> = grade.map(curve);</span><br><span class="line">print(<span class="keyword">new</span><span class="type">grades</span>);</span><br></pre></td></tr></table></figure><h4 id="2-filter-和every类似，传入一个返回值为布尔类型的函数。和every-和some-不同的是，当对数组中的所有元素应用该函数，返回结果均为true时，该方法并不返回true，而是返回一个新的数组，该数组只包含原数组元素应用该函数后返回结果为true的元素。"><a href="#2-filter-和every类似，传入一个返回值为布尔类型的函数。和every-和some-不同的是，当对数组中的所有元素应用该函数，返回结果均为true时，该方法并不返回true，而是返回一个新的数组，该数组只包含原数组元素应用该函数后返回结果为true的元素。" class="headerlink" title="2.filter() 和every类似，传入一个返回值为布尔类型的函数。和every()和some()不同的是，当对数组中的所有元素应用该函数，返回结果均为true时，该方法并不返回true，而是返回一个新的数组，该数组只包含原数组元素应用该函数后返回结果为true的元素。"></a>2.filter() 和every类似，传入一个返回值为布尔类型的函数。和every()和some()不同的是，当对数组中的所有元素应用该函数，返回结果均为true时，该方法并不返回true，而是返回一个新的数组，<code>该数组只包含原数组元素应用该函数后返回结果为true的元素。</code></h4><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isEven</span><span class="params">(num)</span> </span>{</span><br><span class="line"> <span class="keyword">return</span> num % <span class="number">2</span> == <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isOdd</span><span class="params">(num)</span> </span>{</span><br><span class="line"> <span class="keyword">return</span> num % <span class="number">2</span> != <span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> nums = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < <span class="number">20</span>; ++i) {</span><br><span class="line"> nums[i] = i+<span class="number">1</span>;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> evens = nums.filter(isEven);</span><br><span class="line"><span class="keyword">print</span>(<span class="string">"Even numbers: "</span>);</span><br><span class="line"><span class="keyword">print</span>(evens);</span><br><span class="line"><span class="keyword">var</span> odds = nums.filter(isOdd);</span><br><span class="line"><span class="keyword">print</span>(<span class="string">"Odd numbers: "</span>);</span><br><span class="line"><span class="keyword">print</span>(odds);</span><br></pre></td></tr></table></figure><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h3 id="【1】-第一组迭代器方法不产生任何新数组，要么对于数组中的每个元素执行某种操作，要么返回一个值；"><a href="#【1】-第一组迭代器方法不产生任何新数组，要么对于数组中的每个元素执行某种操作，要么返回一个值；" class="headerlink" title="【1】 第一组迭代器方法不产生任何新数组，要么对于数组中的每个元素执行某种操作，要么返回一个值；"></a>【1】 第一组迭代器方法<code>不产生任何新数组</code>，要么对于数组中的每个元素执行某种操作，要么返回一个值；</h3><h4 id="1-forEach-接受一个函数作为参数，对数组中的每个元素使用该函数"><a href="#1-forEach-接受一个函数作为参数，对数组中的每个元素使用该函数" class="headerlink" title="1.forEach() 接受一个函数作为参数，对数组中的每个元素使用该函数"></a>1.forEach() 接受一个函数作为参数，对数组中的每个元素使用该函数</h4><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">square</span><span class="params">(num)</span> &#123;</span></span><br><span class="line"> print(num, num * num);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var nums = [];</span><br><span class="line"><span class="keyword">for</span> (var <span class="built_in">i</span> = <span class="number">0</span>; <span class="built_in">i</span> &lt; <span class="number">10</span>; ++<span class="built_in">i</span>) &#123;</span><br><span class="line"> nums[<span class="built_in">i</span>] = <span class="built_in">i</span>+<span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line">nums.forEach(square);</span><br></pre></td></tr></table></figure>
</summary>
<category term="前端" scheme="http://algate.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="JavaScript" scheme="http://algate.github.io/tags/JavaScript/"/>
<category term="数据结构与算法" scheme="http://algate.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/"/>
<category term="迭代器方法" scheme="http://algate.github.io/tags/%E8%BF%AD%E4%BB%A3%E5%99%A8%E6%96%B9%E6%B3%95/"/>
</entry>
<entry>
<title>我借用了别人的小程序</title>
<link href="http://algate.github.io/archives/JS191017.html"/>
<id>http://algate.github.io/archives/JS191017.html</id>
<published>2019-10-17T02:38:30.000Z</published>
<updated>2019-10-18T08:40:23.091Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><p>如何发布小程序？<br>我要开始写我自己的UniAppUI组件了。敬请期待……</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><p>如何发布小程序？<br>我要开始写我自己的UniAppUI组件了。敬请期待……</p><!-- rebuild by neat -->
</summary>
<category term="前端" scheme="http://algate.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="小程序" scheme="http://algate.github.io/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
</entry>
<entry>
<title>微信公众号Django-内网穿透-服务器配置-python环境-token验证.md</title>
<link href="http://algate.github.io/archives/JS190831.html"/>
<id>http://algate.github.io/archives/JS190831.html</id>
<published>2019-08-31T04:44:30.000Z</published>
<updated>2019-08-31T08:49:38.408Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><blockquote><blockquote><blockquote><p>说明: 微信公众号文档，以及python，好友后续的内容涉及的相关知识，都在python2.7版本下进行的测试验证<br>python3.0+版本出现各种问题，so，以下内容都在python2.7的环境下有效,先安装python2.7</p></blockquote></blockquote></blockquote><h2 id="1-微信公众号开发者文档服务器配置"><a href="#1-微信公众号开发者文档服务器配置" class="headerlink" title="1.微信公众号开发者文档服务器配置"></a>1.微信公众号开发者文档服务器配置</h2><h3 id="1-1-搭建服务-Python-Web服务"><a href="#1-1-搭建服务-Python-Web服务" class="headerlink" title="1-1.搭建服务(Python Web服务)"></a>1-1.搭建服务(Python Web服务)</h3><p><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1472017492_58YV5" target="_blank" rel="noopener">开发者文档</a><br>这里就用Django搭建服务了，方便省事(不用自己写代码了)</p><h2 id="2-搭建Django-Python-Web-框架"><a href="#2-搭建Django-Python-Web-框架" class="headerlink" title="2.搭建Django(Python Web 框架)"></a>2.搭建Django(Python Web 框架)</h2><h3 id="2-1-安装Django"><a href="#2-1-安装Django" class="headerlink" title="2.1 安装Django"></a>2.1 安装Django</h3><p><a href="https://docs.djangoproject.com/zh-hans/2.1/topics/" target="_blank" rel="noopener">Django官方</a><br>直接看 如何在Windows上安装Django？</p><p>[1]<code>pip install Django</code>(推荐 pip为python的安装工具也可以使用easy_install django来进行安装)</p><h3 id="2-2-创建your-first-Django-app"><a href="#2-2-创建your-first-Django-app" class="headerlink" title="2.2 创建your first Django app"></a>2.2 创建your first Django app</h3><p><a href="https://docs.djangoproject.com/en/2.2/intro/tutorial01/" target="_blank" rel="noopener">https://docs.djangoproject.com/en/2.2/intro/tutorial01/</a></p><p><code>django-admin startproject mysite</code> mysite为你要创建的web站文件夹 我的为 DjangoWechat<br>创建完之后，文件夹下会有一个文件夹，cd之后，里边还有个一相同的文件夹名</p><pre><code>mysite/manage.pymysite/ __init__.py settings.py urls.py wsgi.py</code></pre><h3 id="2-3-启动服务"><a href="#2-3-启动服务" class="headerlink" title="2.3 启动服务"></a>2.3 启动服务</h3><p><code>py manage.py runserver 8080</code><br>打开浏览器就可以看到成功的默认页面</p><h3 id="2-4-部署自己的app项目"><a href="#2-4-部署自己的app项目" class="headerlink" title="2.4 部署自己的app项目"></a>2.4 部署自己的app项目</h3><p>首先创建一个存放你项目的app<br><code>python manage.py startapp polls</code> 我的是wechat</p><pre><code>polls/__init__.pyadmin.pyapps.pymigrations/ __init__.pymodels.pytests.pyviews.py</code></pre><blockquote><blockquote><p>Django默认是吧页面放到templates下的，资源是放在static下的<br>一般打包的项目index.html加一个static文件夹，<br>so 复制你的项目到polls下，把index.html放到templates下即可，不需要修改你项目里的路径</p></blockquote></blockquote><h3 id="2-5-访问服务下的index-html"><a href="#2-5-访问服务下的index-html" class="headerlink" title="2.5 访问服务下的index.html"></a>2.5 访问服务下的index.html</h3><p>2.5.1 修改Djangon项目下urls.py</p><pre><code># 导入appfrom polls(wechat) import views# addurl(r'^$', views.home, name='home'),</code></pre><p>2.5.2 修改polls(wechat)下views.py</p><pre><code># from django.shortcuts import renderfrom django.shortcuts import render, render_to_response, HttpResponsedef home(request):return render_to_response('index.html')</code></pre><p>现在应该可以看到index.html效果展示了</p><h2 id="3-微信服务器配置token验证"><a href="#3-微信服务器配置token验证" class="headerlink" title="3.微信服务器配置token验证"></a>3.微信服务器配置token验证</h2><h3 id="3-1-公众号登录-基础配置-服务器配置"><a href="#3-1-公众号登录-基础配置-服务器配置" class="headerlink" title="3.1 公众号登录 - 基础配置 - 服务器配置"></a>3.1 公众号登录 - 基础配置 - 服务器配置</h3><p>服务器地址(URL) ： http://此处可以通过内网穿透来实现自己的域名/weixin/(weixin这个自己定义，需要和Django下的定义的接口一致就行)<br>令牌(Token)：设置自己的我是起的项目名CloudUI<br>消息加解密密钥(EncodingAESKey)：点击按钮自动生成</p><h3 id="3-2-点击提交，你会发现报错"><a href="#3-2-点击提交，你会发现报错" class="headerlink" title="3.2 点击提交，你会发现报错"></a>3.2 点击提交，你会发现报错</h3><p>token验证失败 - 只是最多的提示，就是微信发送请求，没哟得到正确的结果<br>请求超时，说明服务没起</p><h2 id="4-Django服务添加验证接口"><a href="#4-Django服务添加验证接口" class="headerlink" title="4.Django服务添加验证接口"></a>4.Django服务添加验证接口</h2><h3 id="4-1-修改Django项目下的urls-py"><a href="#4-1-修改Django项目下的urls-py" class="headerlink" title="4.1 修改Django项目下的urls.py"></a>4.1 修改Django项目下的urls.py</h3><p>4.1.1修改Djangon项目下urls.py</p><pre><code># 添加接口(views为之前修改首页导入的app的入口模块，wechat为定义的app下的访问的模块方法)url(r'weixin/.*', views.wechat),</code></pre><p>4.1.2 修改polls(wechat)下views.py</p><pre><code># add wechat-tokenfrom django.views.decorators.csrf import csrf_exempt # 解除csrf验证from wechat_sdk import WechatConffrom wechat_sdk import WechatBasic## add wechat-tokenconf = WechatConf( # 实例化配置信息对象 token='', # 服务器配置-Token appid='', # 公众号开发信息-开发者ID appsecret='', # 公众号开发信息-开发者密码 encrypt_mode='normal', # 服务器配置-明文模式 encoding_aes_key='' # 服务器配置-EncodingAESKey)@csrf_exempt # 去除csrf验证def wechat(request): signature = request.GET.get('signature') # 获取请求信息 timestamp = request.GET.get('timestamp') nonce = request.GET.get('nonce') wechat_instance = WechatBasic(conf=conf) # 实例化微信基类对象 if not wechat_instance.check_signature(signature=signature, timestamp=timestamp, nonce=nonce): # 检查验证请求的签名 return HttpResponseBadRequest('Verify Failed') else: if request.method == 'GET': return HttpResponse(request.GET.get('echostr', None)) # 返回请求中的回复信息</code></pre><h3 id="4-2-安装wechat-sdk"><a href="#4-2-安装wechat-sdk" class="headerlink" title="4.2 安装wechat-sdk"></a>4.2 安装wechat-sdk</h3><p><code>pip install wechat-sdk</code></p><p>此处服务如果报错 |_</p><h3 id="4-3-Unable-to-find-vcvarsall-bat"><a href="#4-3-Unable-to-find-vcvarsall-bat" class="headerlink" title="4.3 Unable to find vcvarsall.bat"></a>4.3 Unable to find vcvarsall.bat</h3><p>(有可能是找不到模块导致的)<br>(安装python的时候可能报错 - 此处如果报错跟这个可能关系不大 - 往上翻)报错往上翻，不是文档往上翻<br><a href="https://www.cnblogs.com/yyds/p/7065637.html" target="_blank" rel="noopener">Unable to find vcvarsall.bat</a></p><h3 id="4-4-安装Crypto"><a href="#4-4-安装Crypto" class="headerlink" title="4.4 安装Crypto"></a>4.4 安装Crypto</h3><p>官方验证有个Python实例(用于验证的)：</p><pre><code>目录: E:\JavascriptCode\webPy\微信公众号\SampleCode\PythonMode LastWriteTime Length Name---- ------------- ------ -----a---- 2017/7/27 20:40 795 ierror.py-a---- 2017/7/27 20:40 2372 Sample.py-a---- 2017/7/27 20:40 9400 WXBizMsgCrypt.py-a---- 2017/7/27 20:40 0 __init__.py</code></pre><p>如果用到WXBizMsgCrypt.py，在windows会报错<br><code>from Crypto.Cipher import AES</code> ImportError: No module named ‘Crypto’</p><p>可以直接<code>pip install Crypto</code> 如果成功，直接看第五步，如果不成功就接着看。</p><p>里边有这么一段：<br>“””<br>关于Crypto.Cipher模块，ImportError: No module named ‘Crypto’解决方案<br>请到官方网站 <a href="https://www.dlitz.net/software/pycrypto/" target="_blank" rel="noopener">https://www.dlitz.net/software/pycrypto/</a> 下载pycrypto。<br>下载后，按照README中的“Installation”小节的提示进行pycrypto安装。<br>“””</p><p>下载pycrypto-2.6.1.tar.gz文件<br>接4.4</p><h3 id="4-5-解压pycrypto下找到readme文件的Installation"><a href="#4-5-解压pycrypto下找到readme文件的Installation" class="headerlink" title="4.5 解压pycrypto下找到readme文件的Installation"></a>4.5 解压pycrypto下找到readme文件的Installation</h3><p>执行 <code>python setup.py install</code></p><p>会发现报错<code>Unable to find vcvarsall.bat</code></p><p>(此处关系不大，否则python安装会提示)先验证vb，vc是否安装？<a href="https://www.cnblogs.com/yyds/p/7065637.html" target="_blank" rel="noopener">Unable to find vcvarsall.bat</a></p><p>如果还是报错</p><p>Python安装目录\Lib\site-packages下是否有Crypto<br>如果有，保证首字母大写<br>如果没有，copy一份放进去。重新执行 py setup.py install（pip install Crypto）即可，只要最后出现successing的字样就表示你成功了！</p><h2 id="5-内网穿透"><a href="#5-内网穿透" class="headerlink" title="5.内网穿透"></a>5.内网穿透</h2><h3 id="5-1-网上随便找一个就ok，只要能外网访问到项目就ok"><a href="#5-1-网上随便找一个就ok，只要能外网访问到项目就ok" class="headerlink" title="5.1 网上随便找一个就ok，只要能外网访问到项目就ok"></a>5.1 网上随便找一个就ok，只要能外网访问到项目就ok</h3><p>Django 与 设置的外网访问的 端口号要保持一致</p><p>127.0.0.1带上微信请求的接口自己本地先测试下。是否ok，欧克的话就可以公众号验证token了。<br>此处需要把127.0.0.1 /内网穿透的域名 配置到Django环境下settings.py的<code>ALLOWED_HOSTS = []</code>里</p><p>如果不成功那就看看报错出在哪里。慢慢解决</p><p>此处的域名访问填写到微信公众号的服务器配置里<br>分别填写token，密钥<br>然后提交，就会发现token验证成功了，如果报错，请上翻查找原因</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><blockquote><blockquote><blockquote><p>说明: 微信公众号文档，以及python，好友后续的内容涉及的相关知识，
</summary>
<category term="前端" scheme="http://algate.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="微信公众号" scheme="http://algate.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7/"/>
</entry>
<entry>
<title>内网穿透工具</title>
<link href="http://algate.github.io/archives/JS190829.html"/>
<id>http://algate.github.io/archives/JS190829.html</id>
<published>2019-08-29T03:20:30.000Z</published>
<updated>2019-12-25T06:31:34.383Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h2 id="1-内网穿透工具"><a href="#1-内网穿透工具" class="headerlink" title="1.内网穿透工具"></a>1.内网穿透工具</h2><h3 id="1-1-ngrok"><a href="#1-1-ngrok" class="headerlink" title="1-1.ngrok"></a>1-1.ngrok</h3><h3 id="1-2-Natapp"><a href="#1-2-Natapp" class="headerlink" title="1-2.Natapp"></a>1-2.Natapp</h3><h3 id="1-3-localtunnel"><a href="#1-3-localtunnel" class="headerlink" title="1-3.localtunnel"></a>1-3.localtunnel</h3><p>安装localtunnel<br><code>npm install -g localtunnel</code><br>开启localtunnel服务</p><p>1）指定的端口号 –port 8000 必须与 localhost的8000相对应<br>2）–subdomain mitu : 指定前缀为 mitu<br>3） lt 为localtunnel 缩写4. 最后, 在外网浏览器输入 <a href="https://mitu.localtunnel.me" target="_blank" rel="noopener">https://mitu.localtunnel.me</a> 即可访问本地的localhost:8000， 需要注意的是，localtunnel的服务器是国外，有时候访问可能不太理想</p><h3 id="1-4-uTools"><a href="#1-4-uTools" class="headerlink" title="1-4.uTools:"></a>1-4.uTools:</h3><h3 id="1-5-open-dingtalk-pierced"><a href="#1-5-open-dingtalk-pierced" class="headerlink" title="1-5.open-dingtalk/pierced"></a>1-5.open-dingtalk/pierced</h3><p><a href="https://github.com/open-dingtalk/pierced" target="_blank" rel="noopener">地址</a><br>cmd下运行命令</p><p><a href="http://u.tools/" target="_blank" rel="noopener">http://u.tools/</a></p><p>其他<a href="https://www.jianshu.com/p/cdc446e51675" target="_blank" rel="noopener">参考地址</a><br>前5个都是基于国外的ngrok来进行二次开发的。</p><p>1、Ngrok</p><p>ngrok 是一个反向代理，通过在公共端点和本地运行的 Web 服务器之间建立一个安全的通道，实现内网主机的服务可以暴露给外网。ngrok 可捕获和分析所有通道上的流量，便于后期分析和重放，所以ngrok可以很方便地协助服务端程序测试。</p><p>参考博客：10分钟教你搭建自己的ngrok服务器</p><p>2、Natapp</p><p>natapp是 基于ngrok的国内收费内网穿透工具，类似花生壳，有免费版本，比花生壳好。免费版本：提供http,https,tcp全隧道穿透，随机域名/TCP端口，不定时强制更换域名/端口，自定义本地端口</p><p>参考文章：NATAPP1分钟快速新手图文教程</p><p>3、小米球</p><p>小米球是基于ngrok二次开发的内网穿透工具，支持多协议、多隧道、多端口同时映射(http、https、tcp等等…)，同时支持多种系统win、linux、linux_arm、mac等。具体的使用直接参考官网。</p><p>4、Sunny-Ngrok</p><p>Sunny-Ngrok同样是ngrok二次开发的内网穿透工具，支持http,https协议，同时支持更丰富的系统和语言：linux、win、mac、openwrt、 python、php等。</p><p>教程：Sunny-Ngrok使用教程</p><p>5、echosite</p><p>echosite同样ngrok二次开发的内网穿透工具，支持多种协议，以前是全部免费的，现在推出了收费版和免费版，可根据自己的需要去选择。</p><p>参考教程：EchoSite—让内网穿透变得简单</p><p>6、Ssh、autossh</p><p>ssh 配合autossh工具使用，因为autossh会容错，自动重新启动SSH会话和隧道。autossh是一个程序，用于启动ssh的副本并进行监控，在死亡或停止传输流量时根据需要重新启动它。 这个想法来自rstunnel（Reliable SSH Tunnel），但是在C中实现。作者的观点是，它不像匆匆忙忙的工作那么容易。使用端口转发环路或远程回显服务进行连接监视。在遇到连接拒绝等快速故障时，关闭连接尝试的速度。在OpenBSD，Linux，Solaris，Mac OS X，Cygwin和AIX上编译和测试; 应该在其他BSD上工作。免费软件。</p><p>使用教程：SSH内网穿透</p><p>7、Lanproxy</p><p>lanproxy是一个将局域网个人电脑、服务器代理到公网的内网穿透工具，目前仅支持tcp流量转发，可支持任何tcp上层协议（访问内网网站、本地支付接口调试、ssh访问、远程桌面…）。目前市面上提供类似服务的有花生壳、TeamView、GoToMyCloud等等，但要使用第三方的公网服务器就必须为第三方付费，并且这些服务都有各种各样的限制，此外，由于数据包会流经第三方，因此对数据安全也是一大隐患。</p><p>参考教程：业余草推荐一款局域网（内网）穿透工具lanproxy</p><p>8、Spike</p><p>Spike是一个可以用来将你的内网服务暴露在公网的快速的反向代理，基于ReactPHP，采用IO多路复用模型。采用Php实现。</p><p>参考教程：使用 PHP 实现的的内网穿透工具 “Spike”</p><p>9、Frp</p><p>frp 是一个可用于内网穿透的高性能的反向代理应用，支持 tcp, udp, http, https 协议。利用处于内网或防火墙后的机器，对外网环境提供 http 或 https 服务。对于 http, https 服务支持基于域名的虚拟主机，支持自定义域名绑定，使多个域名可以共用一个80端口。利用处于内网或防火墙后的机器，对外网环境提供 tcp 和 udp 服务，例如在家里通过 ssh 访问处于公司内网环境内的主机。</p><p>教程：一款很好用的内网穿透工具–FRP、使用frp实现内网穿透</p><p>10、Fcn</p><p>FCN[free connect]是一款傻瓜式的一键接入私有网络的工具, fcn利用公共服务器以及数据加密技术实现：在免公网IP环境下，在任意联网机器上透明接入服务端所在局域网网段。支持多种系统，有免费版和付费版</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h2 id="1-内网穿透工具"><a href="#1-内网穿透工具" class="headerlink" title="1.内网穿透工具"><
</summary>
<category term="工具" scheme="http://algate.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="前端工具" scheme="http://algate.github.io/tags/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/"/>
</entry>
<entry>
<title>JavaScript好用的Web-Api</title>
<link href="http://algate.github.io/archives/JS190826.html"/>
<id>http://algate.github.io/archives/JS190826.html</id>
<published>2019-08-26T02:57:30.000Z</published>
<updated>2019-09-06T03:50:29.600Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h3 id="1-closest（元素向上查询）"><a href="#1-closest（元素向上查询）" class="headerlink" title="1.closest（元素向上查询）"></a>1.closest（元素向上查询）</h3><ul><li>closest<br>跟querySelector相反，该元素可以向上查询，也就是可以查询到父元素：<br>document.querySelector(“li”).closest(“#nav”);</li></ul><h3 id="2-dataset（获取元素以”data-“为前缀的属性集合）"><a href="#2-dataset（获取元素以”data-“为前缀的属性集合）" class="headerlink" title="2.dataset（获取元素以”data-“为前缀的属性集合）"></a>2.dataset（获取元素以”data-“为前缀的属性集合）</h3><ul><li>dataset<br>就跟原生微信小程序一样，能获取标签上以”data-“为前缀的属性集合：</li></ul><p></p><p data-name="蜘蛛侠" data-age="16"></p><br>document.querySelector(“p”).dataset; // {name: “蜘蛛侠”, age: “16”}<br>注意：虽然可以用getAttribute方法获取任何属性值，但是性质却不一样，这是开发规范问题，凡是自定义属性都要加上data-前缀哦<p></p><h3 id="3-URLSearchParams（查询参数）"><a href="#3-URLSearchParams（查询参数）" class="headerlink" title="3.URLSearchParams（查询参数）"></a>3.URLSearchParams（查询参数）</h3><ul><li>URLSearchParams<br>假设浏览器的url参数是 “?name=蜘蛛侠&age=16”：</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> URLSearchParams(location.search).get(<span class="string">"name"</span>); <span class="comment">// 蜘蛛侠</span></span><br></pre></td></tr></table></figure><h3 id="4-hidden（隐藏元素）"><a href="#4-hidden（隐藏元素）" class="headerlink" title="4.hidden（隐藏元素）"></a>4.hidden（隐藏元素）</h3><p>这是一个html属性，规定元素是否隐藏，表现跟css的display: none一致：<br><code><div hidden>我被隐藏了</div></code><br><code>document.querySelector("div").hidden = true / false;</code></p><h3 id="5-classList（类名控制器）"><a href="#5-classList（类名控制器）" class="headerlink" title="5.classList（类名控制器）"></a>5.classList（类名控制器）</h3><ul><li>classList<br>这是一个对象，该对象里封装了许多操作元素类名的方法：<br><code><p class="title"></p></code><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> elem = <span class="built_in">document</span>.querySelector(<span class="string">"p"</span>);</span><br><span class="line"><span class="comment">// 增加类名</span></span><br><span class="line">elem.classList.add(<span class="string">"title-new"</span>); <span class="comment">// "title title-new"</span></span><br><span class="line"><span class="comment">// 删除类名</span></span><br><span class="line">elem.classList.remove(<span class="string">"title"</span>); <span class="comment">// "title-new"</span></span><br><span class="line"><span class="comment">// 切换类名（有则删、无则增，常用于一些切换操作，如显示/隐藏）</span></span><br><span class="line">elem.classList.toggle(<span class="string">"title"</span>); <span class="comment">// "title-new title"</span></span><br><span class="line"><span class="comment">// 替换类名</span></span><br><span class="line">elem.classList.replace(<span class="string">"title"</span>, <span class="string">"title-old"</span>); <span class="comment">// "title-new title-old"</span></span><br><span class="line"><span class="comment">// 是否包含指定类名</span></span><br><span class="line">elem.classList.contains(<span class="string">"title"</span>); <span class="comment">// false</span></span><br></pre></td></tr></table></figure></li></ul><h3 id="6-contains（判断是否包含指定元素）"><a href="#6-contains（判断是否包含指定元素）" class="headerlink" title="6.contains（判断是否包含指定元素）"></a>6.contains（判断是否包含指定元素）</h3><ul><li>contains<br>可以判断指定元素是否包含了指定的子元素：<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">document.querySelector("div").contains(document.querySelector("p")); // true</span><br></pre></td></tr></table></figure></li></ul><h3 id="7-online-state（网络状态）"><a href="#7-online-state（网络状态）" class="headerlink" title="7.online state（网络状态）"></a>7.online state（网络状态）</h3><ul><li>online state<br>监听当前的网络状态变动，然后执行对应的方法：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">"online"</span>, xxx);</span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">"offline"</span>, () => {</span><br><span class="line"> alert(<span class="string">"你断网啦！"</span>);</span><br><span class="line">});</span><br></pre></td></tr></table></figure></li></ul><p>使用场景：提示用户已断网，直接一个弹框把用户吓懵</p><h3 id="8-battery-state（电池状态）"><a href="#8-battery-state（电池状态）" class="headerlink" title="8.battery state（电池状态）"></a>8.battery state（电池状态）</h3><ul><li>battery state<br>获取设备的电池状态：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">navigator.getBattery().then(<span class="function"><span class="params">battery</span> =></span> <span class="built_in">console</span>.log(battery));</span><br><span class="line"><span class="comment">// 返回</span></span><br><span class="line">{</span><br><span class="line"> charging, <span class="comment">// 是否在充电</span></span><br><span class="line"> chargingTime, <span class="comment">// 充满电所需时间</span></span><br><span class="line"> dischargingTime, <span class="comment">// 当前电量可使用时间</span></span><br><span class="line"> level, 剩余电量</span><br><span class="line"></span><br><span class="line"> onchargingchange, <span class="comment">// 监听充电状态变化</span></span><br><span class="line"> onchargingtimechange, <span class="comment">// 监听充满电所需时间变化</span></span><br><span class="line"> ondischargingtimechange, <span class="comment">// 监听当前电量可使用时间变化</span></span><br><span class="line"> onlevelchange <span class="comment">// 监听电量变化</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><p>使用场景：提示用户电量已充满，或者为了让用户有安全感，电量低于99%的时候来个弹框提示”该充电啦”</p><h3 id="9-vibration（设备震动）"><a href="#9-vibration（设备震动）" class="headerlink" title="9.vibration（设备震动）"></a>9.vibration（设备震动）</h3><p>嘻嘻，使设备进行震动：<br>// 震动一次<br>navigator.vibrate(100);<br>// 连续震动，震动200ms、暂停100ms、震动300ms<br>navigator.vibrate([200, 100, 300]);<br>效果如下：不好意思你得用你自己的手握住手机才能感受得到;<br>使用场景：通过振动来提供感官反馈，比如太久没有触摸屏幕的时候连续震动提醒用户</p><h3 id="10-page-visibility（页面可见性）"><a href="#10-page-visibility（页面可见性）" class="headerlink" title="10.page visibility（页面可见性）"></a>10.page visibility（页面可见性）</h3><p>顾名思义，这个API是用来监听页面可见性变化的，在PC端标签栏切换、最小化会触发、在移动端程序切到后台会触发，简单说就是页面消失了🤦♂️<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">"visibilitychange"</span>, () => {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`页面可见性：<span class="subst">${<span class="built_in">document</span>.visibilityState}</span>`</span>);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><p></p><p>PC端效果如下：<br><img src="/images/js_webapi_visibility.gif" alt="image"><br>移动端效果如下：<br><img src="/images/js_webapi_visibility_app.gif" alt="image"><br>使用场景：当程序切到后台的时候，如果当前有视频播放或者一些动画执行，可以先暂停</p><h3 id="11-deviceOrientation（陀螺仪）"><a href="#11-deviceOrientation（陀螺仪）" class="headerlink" title="11.deviceOrientation（陀螺仪）"></a>11.deviceOrientation（陀螺仪）</h3><ul><li>deviceOrientation<br>陀螺仪，也就是设备的方向，又名重力感应，该API在IOS设备上失效的解决办法，将域名协议改成https；<br><img src="/images/js_webapi_deviceOrientation.jpg" alt="image"><br>从左到右分别为alpha、beta、gamma:<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">"deviceorientation"</span>, event => {</span><br><span class="line"> <span class="keyword">let</span> {</span><br><span class="line"> alpha,</span><br><span class="line"> beta,</span><br><span class="line"> gamma</span><br><span class="line"> } = event;</span><br><span class="line"></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`alpha：<span class="subst">${alpha}</span>`</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`beta：<span class="subst">${beta}</span>`</span>);</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">`gamma：<span class="subst">${gamma}</span>`</span>);</span><br><span class="line">});</span><br></pre></td></tr></table></figure></li></ul><p>使用场景：页面上的某些元素需要根据手机摆动进行移动，达到视差的效果，比如王者荣耀进入游戏的那个界面，手机转动背景图会跟着动</p><h3 id="12-toDataUrl（画布内容转base64）"><a href="#12-toDataUrl（画布内容转base64）" class="headerlink" title="12.toDataUrl（画布内容转base64）"></a>12.toDataUrl（画布内容转base64）</h3><ul><li>toDataURL<br>这个canvas的API，作用是将画布的内容转换成一个base64的图片地址：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> canvas = <span class="built_in">document</span>.querySelector(<span class="string">"canvas"</span>);</span><br><span class="line"><span class="keyword">let</span> context = canvas.getContext(<span class="string">"2d"</span>);</span><br><span class="line"><span class="comment">//……</span></span><br><span class="line"><span class="keyword">let</span> url = canvas.toDataURL(<span class="string">"image/png"</span>); <span class="comment">// 将画布内容转换成base64地址</span></span><br></pre></td></tr></table></figure></li></ul><p>使用a标签进行图片下载时，图片链接跨域（图片是我的掘金头像），无法进行下载而是进行图片预览：<br></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"xxx"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"xxx"</span> <span class="attr">download</span>=<span class="string">"avatar"</span>></span>下载图片<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure><p></p><p>封装以下代码便可解决✅<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> downloadImage = <span class="function">(<span class="params">url, name</span>) =></span> {</span><br><span class="line"> <span class="comment">// 实例化画布</span></span><br><span class="line"> <span class="keyword">let</span> canvas = <span class="built_in">document</span>.createElement(<span class="string">"canvas"</span>);</span><br><span class="line"> <span class="keyword">let</span> context = canvas.getContext(<span class="string">"2d"</span>);</span><br><span class="line"> <span class="comment">// 实例化一个图片对象</span></span><br><span class="line"> <span class="keyword">let</span> image = <span class="keyword">new</span> Image();</span><br><span class="line"> image.crossOrigin = <span class="string">"Anonymous"</span>;</span><br><span class="line"> image.src = url;</span><br><span class="line"> <span class="comment">// 当图片加载完毕</span></span><br><span class="line"> image.onload = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="comment">// 将图片画在画布上</span></span><br><span class="line"> canvas.height = image.height;</span><br><span class="line"> canvas.width = image.width;</span><br><span class="line"> context.drawImage(image, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line"> <span class="comment">// 将画布的内容转换成base64地址</span></span><br><span class="line"> <span class="keyword">let</span> dataURL = canvas.toDataURL(<span class="string">"image/png"</span>);</span><br><span class="line"> <span class="comment">// 创建a标签模拟点击进行下载</span></span><br><span class="line"> <span class="keyword">let</span> a = <span class="built_in">document</span>.createElement(<span class="string">"a"</span>);</span><br><span class="line"> a.hidden = <span class="literal">true</span>;</span><br><span class="line"> a.href = dataURL;</span><br><span class="line"> a.download = name;</span><br><span class="line"> <span class="built_in">document</span>.body.appendChild(a);</span><br><span class="line"> a.click();</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><p>或者将当前的DOM转换成图片进行下载，常用于生成海报，推荐插件html2canvas，大家可以自己去搜;</p><h3 id="13-customEvent（自定义事件）"><a href="#13-customEvent（自定义事件）" class="headerlink" title="13.customEvent（自定义事件）"></a>13.customEvent（自定义事件）</h3><ul><li>customEvent<br>自定义事件，就跟vue里面的on跟emit一样；</li></ul><p>监听自定义事件：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">"follow"</span>, event => {</span><br><span class="line"> <span class="built_in">console</span>.log(event.detail); <span class="comment">// 输出 {name: "前端宇宙情报局"}</span></span><br><span class="line">});</span><br><span class="line">派发自定义事件：</span><br><span class="line"><span class="built_in">window</span>.dispatchEvent(<span class="keyword">new</span> CustomEvent(<span class="string">"follow"</span>, {</span><br><span class="line"> detail: {</span><br><span class="line"> name: <span class="string">"前端宇宙情报局"</span></span><br><span class="line"> }</span><br><span class="line">}));</span><br></pre></td></tr></table></figure><p></p><h3 id="14-notification（桌面通知）"><a href="#14-notification（桌面通知）" class="headerlink" title="14.notification（桌面通知）"></a>14.notification（桌面通知）</h3><ul><li>notification<br>PC端的桌面通知，如网页端的微信，当收到消息时，右下角会出现一个通知（尽管你把浏览器最小化），因为这个通知时独立于浏览器的，是系统的一个原生控件：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> notice = <span class="keyword">new</span> Notification(<span class="string">"前端宇宙情报局"</span>, {</span><br><span class="line"> body: <span class="string">"这20个不常用的Web API真的有用吗?，别问，问就是有用🈶"</span>,</span><br><span class="line"> icon: <span class="string">"我的掘金头像"</span>,</span><br><span class="line"> data: {</span><br><span class="line"> url: <span class="string">"https://www.baidu.com"</span></span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="comment">// 点击回调</span></span><br><span class="line">notice.onclick = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="built_in">window</span>.open(notice.data.url); <span class="comment">// 当用户点击通知时，在浏览器打开百度网站</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><p>效果如下：<br><img src="/images/js_webapi_notification.gif" alt="image"></p><p>注意：想要成功的调起通知，首先要用户的授权✅</p><p>Notification.requestPermission(prem => {<br>prem == “granted” // 同意<br>prem == “denied” // 拒绝<br>})<br>所以，再调用之前先向用户发起请求：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> permission = Notification.permission;</span><br><span class="line"><span class="keyword">if</span> (permission == <span class="string">"granted"</span>) {</span><br><span class="line"> <span class="comment">// 已同意，开始发送通知</span></span><br><span class="line"> ...</span><br><span class="line">} <span class="keyword">else</span> <span class="keyword">if</span> (permission == <span class="string">"denied"</span>) {</span><br><span class="line"> <span class="comment">// 不同意，发不了咯</span></span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">// 其他状态，可以重新发送授权提示</span></span><br><span class="line"> Notification.requestPermission();</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="15-fullScreen（全屏）"><a href="#15-fullScreen（全屏）" class="headerlink" title="15.fullScreen（全屏）"></a>15.fullScreen（全屏）</h3><ul><li>fullScreen<br>全屏不咯? 之前的一个项目刚好用上，不仅仅可以作用在documentElement上，还可以作用在指定元素：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * @method launchFullScreen 开启全屏</span></span><br><span class="line"><span class="comment"> * @param {Object} elem = document.documentElement 作用的元素</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> launchFullScreen = <span class="function">(<span class="params">elem = <span class="built_in">document</span>.documentElement</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span>(elem.requestFullScreen) {</span><br><span class="line"> elem.requestFullScreen();</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span>(elem.mozRequestFullScreen) {</span><br><span class="line"> elem.mozRequestFullScreen();</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span>(elem.webkitRequestFullScreen) {</span><br><span class="line"> elem.webkitRequestFullScreen();</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><p>作用在documentElement上没啥可以介绍的咯，就相当于F11开启全屏：<br>那么作用在指定元素会是什么效果呢?<br><img src="/images/js_webapi_fullScreen.gif" alt="image"><br>就像效果图一样，会直接开启全屏，并且只显示指定的元素，元素的宽高填充了整个屏幕✅<br>关闭全屏的时候需要注意的是，统一用document对象：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * @method exitFullScreen 关闭全屏</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> exitFullScreen = <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>.exitFullscreen) {</span><br><span class="line"> <span class="built_in">document</span>.exitFullscreen();</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="built_in">document</span>.mozCancelFullScreen) {</span><br><span class="line"> <span class="built_in">document</span>.mozCancelFullScreen();</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (<span class="built_in">document</span>.webkitCancelFullScreen) {</span><br><span class="line"> <span class="built_in">document</span>.webkitCancelFullScreen();</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><p>使用场景：需要让用户专注去做某件事，比如代码编辑区的全屏</p><h3 id="16-orientation（屏幕方向）"><a href="#16-orientation（屏幕方向）" class="headerlink" title="16.orientation（屏幕方向）"></a>16.orientation（屏幕方向）</h3><ul><li>orientation<br>可以监听用户手机设备的旋转方向变化：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">"orientationchange"</span>, () => {</span><br><span class="line"> <span class="built_in">document</span>.body.innerHTML += <span class="string">`<p>屏幕旋转后的角度值：<span class="subst">${<span class="built_in">window</span>.orientation}</span></p>`</span>;</span><br><span class="line">}, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure></li></ul><p>效果如下：<br><img src="/images/js_webapi_orientation.gif" alt="image"><br>也可以使用css的媒体查询：<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 竖屏时样式 */</span></span><br><span class="line">@media all and (orientation: portrait) {</span><br><span class="line"> body::after {</span><br><span class="line"> content: <span class="string">"竖屏"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">/* 横屏时样式 */</span></span><br><span class="line">@media all and (orientation: landscape) {</span><br><span class="line"> body::after {</span><br><span class="line"> content: <span class="string">"横屏"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><p>使用场景：页面需要用户开启横屏来获得更好的体验</p><h3 id="17-getBoundingClientRect（元素空间结构详细信息）"><a href="#17-getBoundingClientRect（元素空间结构详细信息）" class="headerlink" title="17.getBoundingClientRect（元素空间结构详细信息）"></a>17.getBoundingClientRect（元素空间结构详细信息）</h3><ul><li>getBoundingClientRect<br>可以获取指定元素在当前页面的空间信息：<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">elem.getBoundingClientRect();</span><br><span class="line"><span class="comment">// 返回</span></span><br><span class="line">{</span><br><span class="line"> x: <span class="number">604.875</span>,</span><br><span class="line"> y: <span class="number">1312</span>,</span><br><span class="line"> width: <span class="number">701.625</span>,</span><br><span class="line"> height: <span class="number">31</span>,</span><br><span class="line"> top: <span class="number">1312</span>,</span><br><span class="line"> right: <span class="number">1306.5</span>,</span><br><span class="line"> bottom: <span class="number">1343</span>,</span><br><span class="line"> left: <span class="number">604.875</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><p>注意：top是距离文档顶部的距离，y则是距离可视窗口（浏览器屏幕）的顶部距离，如果浏览器滚动，top值不变，y值会变</p><p>· MDN <a href="https://developer.mozilla.org/zh-CN/docs/Web/API" target="_blank" rel="noopener">Web API接口</a></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h3 id="1-closest（元素向上查询）"><a href="#1-closest（元素向上查询）" class="headerlink"
</summary>
<category term="前端" scheme="http://algate.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="JavaScript" scheme="http://algate.github.io/tags/JavaScript/"/>
<category term="WebApi" scheme="http://algate.github.io/tags/WebApi/"/>
</entry>
<entry>
<title>JavaScript工具相关使用</title>
<link href="http://algate.github.io/archives/JS190426.html"/>
<id>http://algate.github.io/archives/JS190426.html</id>
<published>2019-04-26T02:38:30.000Z</published>
<updated>2019-08-26T03:33:07.431Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h3 id="1-serve"><a href="#1-serve" class="headerlink" title="1.serve"></a>1.serve</h3><p>不用express,不用部署http环境,可以直接运行编译后代码</p><p>用法：serve -s ./docs -p 8888</p><p>安装：node环境<br>全局安装 serve 依赖 （ cnpm install -g serve ）</p><h3 id="2-font-spider"><a href="#2-font-spider" class="headerlink" title="2.font-spider"></a>2.font-spider</h3><p>打包文件之后，可以压缩页面中引用的字体文件（字体图标除外）</p><p>用法：font-spider ./html文件路径</p><p>安装：cnpm install font-spider -g</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h3 id="1-serve"><a href="#1-serve" class="headerlink" title="1.serve"></a>
</summary>
<category term="前端" scheme="http://algate.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="JavaScript" scheme="http://algate.github.io/tags/JavaScript/"/>
<category term="打包工具" scheme="http://algate.github.io/tags/%E6%89%93%E5%8C%85%E5%B7%A5%E5%85%B7/"/>
</entry>
<entry>
<title>睡前收入睡后收入第一节</title>
<link href="http://algate.github.io/archives/54500.html"/>
<id>http://algate.github.io/archives/54500.html</id>
<published>2019-04-16T12:19:00.000Z</published>
<updated>2019-12-25T02:37:57.289Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><blockquote><blockquote><p>睡前收入，睡后收入。你能明白，你就实现了自由！</p></blockquote></blockquote><p><img src="/images/note01-01.jpg" alt="image"></p><p>一个人，只要不是含着金钥匙出生的，财富最初总是靠出售体力或智力劳动换来的，并在满足我们消费需求之后，通过配置在不同的资产上获取。套用一句流行语，或者是“睡前收入”，或者是“睡后收入”。</p><p>所谓睡前收入，就是你干活就有、睡着了就没有的那种，使用自己的体力或者智力还钱。所谓睡后收入，就是被动性收入，哪怕你睡着了，它也在自动增值。两种收入形态中，很明显，睡后收入占比越高，你就有越多可供自由支配的时间，所做选择受到的制约也就越少。收入来源全部由睡后收入构成，就进入了所谓财务自由状态。</p><p>受限于认知水平，我们最先接触到的睡后收入，可能都是银行存款,还是年回报率“高”达0.35%的活期存款，其后由于你多学习了一点点，你可能开始会搞阿里余额宝、腾讯理财通、甲银行B理财…… ，收益率开始从0.35%提升到3%~5%之间。<br>这一步很容易实现，是因为这个回报率依然远在社会平均财富增长值之下，属于将自己辛辛苦苦卖体力或者脑力换来的财富，无偿地送给别人一部分。将财富从自己口袋里掏出来.</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><blockquote><blockquote><p>睡前收入，睡后收入。你能明白，你就实现了自由！</p></blockquote></blockq
</summary>
<category term="日记" scheme="http://algate.github.io/categories/%E6%97%A5%E8%AE%B0/"/>
<category term="理财" scheme="http://algate.github.io/tags/%E7%90%86%E8%B4%A2/"/>
</entry>
<entry>
<title>Node好用的工具集绵</title>
<link href="http://algate.github.io/archives/201903091523.html"/>
<id>http://algate.github.io/archives/201903091523.html</id>
<published>2019-03-09T07:23:01.000Z</published>
<updated>2019-12-24T08:11:20.496Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h2 id="No-1-serve"><a href="#No-1-serve" class="headerlink" title="No.1 serve"></a>No.1 serve</h2><p>cnpm install -g serve</p><p>写博客发布后、项目打包要上线…… 你要花一分钟预览下，index.html启动的文件是否可以正产使用<br>之前，我一直使用node+http-server+express 等搭建的弄得环境来启动。需要把文件拷贝到搭建的环境目录里，费时费力</p><p>无意中，我发现了一个好用的Node工具 很简单的名字: serve</p><p>打包之后，发布后，可以直接启动ps，运行命令<code>serve -s -p 8080</code><br>如果在文件夹里边启动ps,直接<code>serve</code>就可以了<br>如果实在文件夹外部，<code>serve folder</code>也可以了</p><p>可以加端口号，<code>-p 5001</code> 默认是 <code>5000</code></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h2 id="No-1-serve"><a href="#No-1-serve" class="headerlink" title="No.1 se
</summary>
<category term="工具" scheme="http://algate.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="node" scheme="http://algate.github.io/tags/node/"/>
<category term="dependencies" scheme="http://algate.github.io/tags/dependencies/"/>
</entry>
<entry>
<title>uniapp大揭秘-初遇</title>
<link href="http://algate.github.io/archives/201903091436.html"/>
<id>http://algate.github.io/archives/201903091436.html</id>
<published>2019-03-09T06:36:01.000Z</published>
<updated>2019-12-24T08:11:20.506Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h3 id="1-uniapp命令行"><a href="#1-uniapp命令行" class="headerlink" title="1.uniapp命令行"></a>1.uniapp命令行</h3><p>命令行敲击的快感，谁用谁知道，so为的项目是vue安装项目的</p><h3 id="2-uniapp-pages-json"><a href="#2-uniapp-pages-json" class="headerlink" title="2.uniapp-pages.json"></a>2.uniapp-pages.json</h3><p>要访问的每个页面都要在此文件中进行初始配置</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> pages:[{</span><br><span class="line"> "path": "pages/ucenter/ucenter",</span><br><span class="line"> "style": {</span><br><span class="line"> <!-- 此处为单个文件配置，不过不配置，优先使用globalStyle里的配置内容 --></span><br><span class="line"> "navigationBarTitleText": "不谈理想",</span><br><span class="line"> "navigationBarBackgroundColor": "#1C88E8",</span><br><span class="line"> "navigationBarTextStyle": "white",</span><br><span class="line"> /* 是否开启下拉刷新 */</span><br><span class="line"> "enablePullDownRefresh" : true</span><br><span class="line"> "app-plus": {</span><br><span class="line"> "bounce": "none",</span><br><span class="line"> <!-- titleNView设置为false，顶部导航就没有了 --></span><br><span class="line"> "titleNView": {</span><br><span class="line"> "buttons": [{</span><br><span class="line"> "text": "\uf0e0",</span><br><span class="line"> "fontSrc": "/static/fonts/fontawesome-webfont.ttf",</span><br><span class="line"> "fontSize": "22px",</span><br><span class="line"> "float": "left"</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"text"</span>: <span class="string">"\uf1de"</span>,</span><br><span class="line"> <span class="attr">"fontSrc"</span>: <span class="string">"/static/fonts/fontawesome-webfont.ttf"</span>,</span><br><span class="line"> <span class="attr">"fontSize"</span>: <span class="string">"22px"</span></span><br><span class="line"> }]</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> "h5": {</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line"> /* 应用小程序组件 */</span><br><span class="line"> "usingComponents": {</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line"> /* 窗口背景色 */</span><br><span class="line"> "backgroundColor": "#ECEFF2"</span><br><span class="line"> }</span><br><span class="line"> }],</span><br><span class="line"> <!-- 页面菜单栏显示 --></span><br><span class="line"> "tabBar": {</span><br><span class="line"> "color": "#73787C",</span><br><span class="line"> "selectedColor": "#1B88EF",</span><br><span class="line"> "backgroundColor": "#FFFFFF",</span><br><span class="line"> "borderStyle": "white",</span><br><span class="line"> "list": [{</span><br><span class="line"> "pagePath": "pages/list/list",</span><br><span class="line"> "iconPath": "static/home.png",</span><br><span class="line"> "selectedIconPath": "static/home-active.png",</span><br><span class="line"> "text": "发现"</span><br><span class="line"> },{</span><br><span class="line"> "pagePath": "pages/bookrack/list",</span><br><span class="line"> "iconPath": "static/home.png",</span><br><span class="line"> "selectedIconPath": "static/home-active.png",</span><br><span class="line"> "text": "书架"</span><br><span class="line"> },{</span><br><span class="line"> "pagePath": "pages/idea/list",</span><br><span class="line"> "iconPath": "static/home.png",</span><br><span class="line"> "selectedIconPath": "static/home-active.png",</span><br><span class="line"> "text": "想法"</span><br><span class="line"> }, {</span><br><span class="line"> "pagePath": "pages/ucenter/ucenter",</span><br><span class="line"> "iconPath": "static/center.png",</span><br><span class="line"> "selectedIconPath": "static/center-active.png",</span><br><span class="line"> "text": "我"</span><br><span class="line"> }]</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><h3 id="3-uniapp-manifest-json"><a href="#3-uniapp-manifest-json" class="headerlink" title="3.uniapp-manifest.json"></a>3.uniapp-manifest.json</h3><p>项目整体配置文件<br>最近自己写项目遇到个问题，请求接口设置代理的问题，网上写的没有一个我能用的，最后在自己的不断尝试中竟然解决了。<br>1.未设置DevServer，假如你8080端口号没被占用，启动项目，就是8080端口号<br>2.假如8080端口号被占用，启动项目，就是8081.这个非常人性化了。假如先启动该项目，启动别的8080就不行了哦，注意<br>3.router，base初始的时候是很长一段路径，我是为了解决代理问题才改的，你可以不改哦！<br>4.proxy: pathRewrite-是吧路径中的字段替换成什么，跟你创建的vue，react等项目一样。<br></p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"h5"</span> : {</span><br><span class="line"> <span class="attr">"router"</span> : {</span><br><span class="line"> <span class="attr">"base"</span> : <span class="string">"/"</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">"template"</span> : <span class="string">"h5.template.html"</span>,</span><br><span class="line"> <span class="attr">"devServer"</span>: {</span><br><span class="line"> <span class="attr">"port"</span>: <span class="number">8081</span>,</span><br><span class="line"> <span class="attr">"disableHostCheck"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">"proxy"</span>: {</span><br><span class="line"> <span class="attr">"/api"</span>: {</span><br><span class="line"> <span class="attr">"target"</span>: <span class="string">"https://api.douban.com"</span>,</span><br><span class="line"> <span class="attr">"changeOrigin"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">"secure"</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">"pathRewrite"</span>: {<span class="attr">"^/api"</span> : <span class="string">""</span>}</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><p>这是我的配置文件，本想贴出原始代码的，不过，写这篇文章时，正好没有网络。</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><h3 id="1-uniapp命令行"><a href="#1-uniapp命令行" class="headerlink" title="1.uni
</summary>
<category term="前端" scheme="http://algate.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="uniapp" scheme="http://algate.github.io/tags/uniapp/"/>
<category term="移动端" scheme="http://algate.github.io/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/"/>
</entry>
<entry>
<title>永久免费翻樯大杀器(不限速)</title>
<link href="http://algate.github.io/archives/61443.html"/>
<id>http://algate.github.io/archives/61443.html</id>
<published>2017-08-24T08:12:19.000Z</published>
<updated>2019-12-25T06:43:50.653Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><blockquote><p>网上免费翻墙的网站、软件、账号越来越少了，不是要天天签到就是不定时更换帐号密码，速度不理想，也不稳定。今天推荐GFW.Press。需要翻墙注册，无翻墙软件的可下载Lantern，用法不多说，自己动手丰衣足食。</p></blockquote><h3 id="现在已经大家都能够翻樯了-接下来就要使用免费服务了"><a href="#现在已经大家都能够翻樯了-接下来就要使用免费服务了" class="headerlink" title="现在已经大家都能够翻樯了.接下来就要使用免费服务了:"></a>现在已经大家都能够翻樯了.接下来就要使用免费服务了:</h3><h4 id="1-登录gfw-press官网-这里需要翻樯"><a href="#1-登录gfw-press官网-这里需要翻樯" class="headerlink" title="1.登录gfw.press官网(这里需要翻樯)"></a>1.登录gfw.press官网<strong>(这里需要翻樯)</strong></h4><h4 id="2-点击注册"><a href="#2-点击注册" class="headerlink" title="2.点击注册"></a>2.点击注册</h4><h4 id="3-注册成功后点击登录-你将会看到节点信息"><a href="#3-注册成功后点击登录-你将会看到节点信息" class="headerlink" title="3.注册成功后点击登录,你将会看到节点信息"></a>3.注册成功后点击登录,你将会看到节点信息</h4><p><img src="http://dn-cnode.qbox.me/FjRR4JHK1lc6SzxNtnAc8HmumyOH" alt="image"></p><h4 id="4-下载gfw-press软件"><a href="#4-下载gfw-press软件" class="headerlink" title="4.下载gfw.press软件"></a>4.下载gfw.press软件</h4><h4 id="5-安装完毕后双击打开-并安装gfw-press官网中提供的账号填入节点-端口以及密码"><a href="#5-安装完毕后双击打开-并安装gfw-press官网中提供的账号填入节点-端口以及密码" class="headerlink" title="5.安装完毕后双击打开,并安装gfw.press官网中提供的账号填入节点,端口以及密码."></a>5.安装完毕后双击打开,并安装gfw.press官网中提供的账号填入节点,端口以及密码.</h4><h4 id="6-打开谷歌浏览器-搜索chrome网上应用店-打开并搜索插件switchomega-安装插件-这里需要翻樯"><a href="#6-打开谷歌浏览器-搜索chrome网上应用店-打开并搜索插件switchomega-安装插件-这里需要翻樯" class="headerlink" title="6.打开谷歌浏览器,搜索chrome网上应用店,打开并搜索插件switchomega,安装插件 (这里需要翻樯)"></a>6.打开谷歌浏览器,搜索chrome网上应用店,打开并搜索插件switchomega,安装插件 (这里需要翻樯)</h4><p><img src="http://dn-cnode.qbox.me/FjJmrA7AVIocymjZN_-SN2RgrPih" alt="image"></p><h4 id="7-下载完毕后-你的谷歌浏览器右上角将多出一个小图标-单击选项按钮进入管理界面"><a href="#7-下载完毕后-你的谷歌浏览器右上角将多出一个小图标-单击选项按钮进入管理界面" class="headerlink" title="7.下载完毕后,你的谷歌浏览器右上角将多出一个小图标.单击选项按钮进入管理界面."></a>7.下载完毕后,你的谷歌浏览器右上角将多出一个小图标.单击选项按钮进入管理界面.</h4><p><img src="http://n//dn-cnode.qbox.me/FvkjspPx9UswCmRl07ZUkxnqSJ8q" alt="image"></p><h4 id="8-进入管理界面后-进行如下配置"><a href="#8-进入管理界面后-进行如下配置" class="headerlink" title="8.进入管理界面后,进行如下配置"></a>8.进入管理界面后,进行如下配置</h4><ul><li>新建情景模式</li></ul><p><img src="http://dn-cnode.qbox.me/FkRw9vxJhAECricmXA4xbjG318x6" alt="image"></p><ul><li>填入路由信息</li></ul><p><img src="http://dn-cnode.qbox.me/FqqxP52d_OWXfxc2BZMuHViObcsm" alt="image"></p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><blockquote><p>网上免费翻墙的网站、软件、账号越来越少了，不是要天天签到就是不定时更换帐号密码，速度不理想，也不稳定。今天推荐GFW.P
</summary>
<category term="工具" scheme="http://algate.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="翻墙" scheme="http://algate.github.io/tags/%E7%BF%BB%E5%A2%99/"/>
</entry>
<entry>
<title>JavaScript代码检查工具对比</title>
<link href="http://algate.github.io/archives/26064.html"/>
<id>http://algate.github.io/archives/26064.html</id>
<published>2017-04-03T07:51:30.000Z</published>
<updated>2019-02-27T03:29:53.800Z</updated>
<content type="html"><![CDATA[<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503571860528&di=0fecd1d75a0d57851a782f0da053a047&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3845209004%2C4113255300%26fm%3D214%26gp%3D0.jpg" alt="image"></p><p>JavaScript代码校验工具能够让你在写代码时避免一些低级的错误。尽管我有很多年的开发经验，我仍然会犯一些语法错误并且忘记处理我的错误。一个好的校验工具或者格式化工具，可以让我避免这些错误，以免浪费我的时间。一个好的校验工具还能确保一个项目保持一个固定的代码风格。</p><p>有很多关于JavaScript的校验工具，你怎样选择其中的某一个呢？让我们一起来看看它们有什么样的特性以及优缺点。接下来我要介绍四种常用的选择：JSLint，JSHint，JSCS和ESLint。</p><h2 id="Overview"><a href="#Overview" class="headerlink" title="Overview"></a>Overview</h2><p>这四个工具的基本用法都是类似的，它们定义了一套规则用来解析和报告js文件里面的问题。它们都可以通过npm来进行安装。可以通过命令行来调用它们，给命令行传递文件参数，也可以作为grunt这一类工具的插件被使用，或者可以集成到编辑器中。它们都支持使用注释作为配置。</p><p>以上就是它们所有的相似之处了，每一个工具都有优缺点，只是有些工具相比于其它工具更加有优势。</p><h2 id="JSLint"><a href="#JSLint" class="headerlink" title="JSLint"></a>JSLint</h2><p>JSLint是这四种校验工具中最为古老的。Douglas Crockford（译注:《JavaScript 语言精粹》的作者）在2002年创造了它，它是强制使用的，为了保留它所认为的JavaScript这门语言的精华部分。如果你认同他的观点，对你而言，JSLint将会是一个好的工具。安装完成马上即可使用。</p><p>JSLint的缺点是它是不可以进行配置和扩展的。你不能禁用它的某些特性，并且缺乏文档。它的官网并没有什么用处，例如，它缺少如果将这个工具整合到你的编辑器的任何信息。</p><h3 id="优点："><a href="#优点：" class="headerlink" title="优点："></a>优点：</h3><ul><li>配置规则都已经定好了，安装即可使用（如果你同意这些强制的规则的话）</li></ul><h3 id="缺点："><a href="#缺点：" class="headerlink" title="缺点："></a>缺点：</h3><ul><li>JSLint没有可配置文件，你无法对它的规则进行更改</li><li>配置规则的数量有限，有些规则无法禁用</li><li>不支持自定义规则</li><li>缺少文档</li><li>很难定位到哪条规则导致了错误</li></ul><h2 id="JSCSC"><a href="#JSCSC" class="headerlink" title="JSCSC"></a>JSCSC</h2><p>JSCS和以上两个都是不同的，如果不给它一个配置文件或者使用一套预设的规则，它将什么也不做不了，不过你可以从别的网站下载配置文件，所以这并不是什么大问题，并且它有很多的预设规则，比如说jQuery的代码风格的预设规则以及Google的代码风格的预设规则。</p><p>它有超过90种不同的规则，并且你可以通过插件创造自定义规则。JSCS也支持自定义输出报告，这使得其更容易与需要其以特定格式输入的工具集成。</p><p>JSCS是一个代码风格检查器，这意味着它只捕获与代码格式相关的问题，而不包含潜在的错误。因此，它比其他工具的灵活性更低，但是如果您需要强制执行特定的编码风格，那么JSCS就可以做的很好。</p><h3 id="优点：-1"><a href="#优点：-1" class="headerlink" title="优点："></a>优点：</h3><ul><li>支持自定义输出报告，可以使其更容易和其它工具进行集成</li><li>如果您遵循现有的可用编码风格之一，预设和现成的配置文件可以轻松设置</li><li>在报告中，有一个标志包含在规则名之中，所以很容易找出是哪条规则导致了错误</li><li>可以利用自定义的插件进行拓展</li></ul><h3 id="缺点：-1"><a href="#缺点：-1" class="headerlink" title="缺点："></a>缺点：</h3><ul><li>只检测到代码风格的违规，不检测潜在的错误，比如说未使用的变量或者变量的全局污染等</li><li>四个工具中性能最差的，但是这并不是一个典型用途的问题</li></ul><h2 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h2><p>ESLint是这四个工具中最新的，它被设计为易于拓展的，具有大量的自定义规则，并且很容易通过插件的形式来安装。它输出简洁的报告，但是默认包含规则的名称，因此你始终知道是那条规则导致了错误的信息。</p><p>ESLint的文档多少有些混乱，规则的列表容易查找，并且按逻辑进行分类，但配置说明在某些地方有点混乱。然而，它提供了如何对编辑器进行集成，插件和示例的链接。</p><h3 id="优点：-2"><a href="#优点：-2" class="headerlink" title="优点："></a>优点：</h3><ul><li>灵活：任何规则都可以切换使用，并且有些规则有额外的配置可以使用</li><li>可拓展性好，并且有很多可用的插件</li><li>易于理解的输出报告</li><li>包含一些其它工具所没有的规则，使得ESLint更容易检测出代码中潜在的错误</li><li>对ES6的支持性最好，是唯一支持JSX的工具</li><li>支持自定义输出报告</li></ul><h3 id="缺点：-2"><a href="#缺点：-2" class="headerlink" title="缺点："></a>缺点：</h3><ul><li>需要一些配置</li><li>性能差，但这并不是主要的障碍</li></ul><h2 id="推荐"><a href="#推荐" class="headerlink" title="推荐"></a>推荐</h2><p>一个好的校验工具是捕捉问题非常重要的一步，但是它只能检测出它的规则许可范围之内的错误。对于更多简单明了的bug的捕捉，我建议使用单元测试，Code reviews也是也是不错的方式。</p><!-- rebuild by neat -->]]></content>
<summary type="html">
<!-- build time:Wed Jul 29 2020 13:46:53 GMT+0800 (GMT+08:00) --><p><img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9
</summary>
<category term="前端" scheme="http://algate.github.io/categories/%E5%89%8D%E7%AB%AF/"/>
<category term="JavaScript" scheme="http://algate.github.io/tags/JavaScript/"/>
<category term="jsLint" scheme="http://algate.github.io/tags/jsLint/"/>
</entry>
</feed>