-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
541 lines (334 loc) · 126 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>一颗牛肉丸</title>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2019-09-19T13:47:22.125Z</updated>
<id>http://yoursite.com/</id>
<author>
<name>牛肉丸</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>flutter多个底部浮动按钮</title>
<link href="http://yoursite.com/2019/09/19/flutter-multi-floating-action-button/"/>
<id>http://yoursite.com/2019/09/19/flutter-multi-floating-action-button/</id>
<published>2019-09-19T13:44:39.000Z</published>
<updated>2019-09-19T13:47:22.125Z</updated>
<content type="html"><![CDATA[<p>就是底部按钮点一下后弹出多个。</p><p><a href="https://www.filledstacks.com/snippet/multi-fab-menu-in-flutter-with-unicorndial/" target="_blank" rel="noopener">原文链接</a></p><a id="more"></a><h1 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h1><p><img src="http://wx1.sinaimg.cn/mw690/77bffd19ly1g70cyotx8wj20di0o0jrs.jpg" alt="1568541573994"></p><h1 id="引入-unicorndial"><a href="#引入-unicorndial" class="headerlink" title="引入 unicorndial"></a>引入 unicorndial</h1><p>在 pubspec.yaml 中添加以下内容:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">dependencies:</span><br><span class="line"> flutter:</span><br><span class="line"> sdk: flutter</span><br><span class="line"> unicorndial:</span><br></pre></td></tr></table></figure><p>现在很方便, 不需要写版本.</p><p>在要实现这个效果的界面引入:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import 'package:unicorndial/unicorndial.dart';</span><br></pre></td></tr></table></figure><h1 id="创建一个用来添加子图标的方法-addOption"><a href="#创建一个用来添加子图标的方法-addOption" class="headerlink" title="创建一个用来添加子图标的方法 addOption"></a>创建一个用来添加子图标的方法 addOption</h1><figure class="highlight dart"><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"> Widget _addOption({IconData iconData, <span class="built_in">Function</span> onPressed}) {<span class="comment">//传入子图标图标和点击事件</span></span><br><span class="line"> <span class="keyword">return</span> UnicornButton(<span class="comment">//返回 UnicornButton</span></span><br><span class="line"> currentButton: FloatingActionButton(</span><br><span class="line"> backgroundColor: Colors.purple[<span class="number">500</span>],</span><br><span class="line"> mini: <span class="keyword">true</span>,<span class="comment">//小尺寸</span></span><br><span class="line"> child: Icon(iconData),</span><br><span class="line"> onPressed: onPressed,</span><br><span class="line"> ));</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="创建一个用来获取子图标的方法-getAddMenu"><a href="#创建一个用来获取子图标的方法-getAddMenu" class="headerlink" title="创建一个用来获取子图标的方法 getAddMenu"></a>创建一个用来获取子图标的方法 getAddMenu</h1><figure class="highlight dart"><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="built_in">List</span><UnicornButton> getAddMenu() {</span><br><span class="line"> <span class="built_in">List</span><UnicornButton> children = [];<span class="comment">//返回 UnicornButton 列表</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 在这里添加子图标</span></span><br><span class="line"> children.add(_addOption(iconData: Icons.person, </span><br><span class="line"> onPressed: (){</span><br><span class="line"> <span class="comment">//点击事件</span></span><br><span class="line"> }));</span><br><span class="line"> children.add(_addOption(iconData: Icons.photo_size_select_large,</span><br><span class="line"> onPressed:() {</span><br><span class="line"> <span class="comment">//点击事件</span></span><br><span class="line"> }));</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> children;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="在页面中添加-UnicornDialer"><a href="#在页面中添加-UnicornDialer" class="headerlink" title="在页面中添加 UnicornDialer"></a>在页面中添加 UnicornDialer</h1><figure class="highlight dart"><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">floatingActionButton: UnicornDialer(<span class="comment">//UnicornDialer</span></span><br><span class="line"> parentButtonBackground: Colors.purple[<span class="number">700</span>],</span><br><span class="line"> orientation: UnicornOrientation.VERTICAL,<span class="comment">//弹出子图标的方向</span></span><br><span class="line"> parentButton: Icon(Icons.add),</span><br><span class="line"> childButtons: getAddMenu(),<span class="comment">//点击时调用 getAddMenu()</span></span><br><span class="line">),</span><br></pre></td></tr></table></figure><h1 id="完整-main-dart-代码"><a href="#完整-main-dart-代码" class="headerlink" title="完整 main.dart 代码"></a>完整 main.dart 代码</h1><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'package:flutter/material.dart'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">'package:fluttertoast/fluttertoast.dart'</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">'package:unicorndial/unicorndial.dart'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">void</span> main() => runApp(MyApp());</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyApp</span> <span class="keyword">extends</span> <span class="title">StatelessWidget</span> </span>{</span><br><span class="line"> <span class="meta">@override</span></span><br><span class="line"> Widget build(BuildContext context) {</span><br><span class="line"> <span class="keyword">return</span> MaterialApp(</span><br><span class="line"> title: <span class="string">'SQFlite Demo'</span>,</span><br><span class="line"> theme: ThemeData(</span><br><span class="line"> primarySwatch: Colors.blue,</span><br><span class="line"> ),</span><br><span class="line"> home: MyHomePage(),</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="class"><span class="keyword">class</span> <span class="title">MyHomePage</span> <span class="keyword">extends</span> <span class="title">StatelessWidget</span> </span>{</span><br><span class="line"></span><br><span class="line"> <span class="comment">// reference to our single class that manages the database</span></span><br><span class="line"> <span class="keyword">final</span> dbHelper = DatabaseHelper.instance;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// homepage layout</span></span><br><span class="line"> <span class="meta">@override</span></span><br><span class="line"> Widget build(BuildContext context) {</span><br><span class="line"> <span class="keyword">return</span> Scaffold(</span><br><span class="line"> <span class="comment">// appBar: AppBar(</span></span><br><span class="line"> <span class="comment">// title: Text('sqflite'),</span></span><br><span class="line"> <span class="comment">// ),</span></span><br><span class="line"> body: Center(</span><br><span class="line"> child: Column(</span><br><span class="line"> mainAxisAlignment: MainAxisAlignment.center,</span><br><span class="line"> children: <Widget>[</span><br><span class="line"> ],</span><br><span class="line"> ),</span><br><span class="line"> ),</span><br><span class="line"> floatingActionButton: UnicornDialer(</span><br><span class="line"> parentButtonBackground: Colors.purple[<span class="number">700</span>],</span><br><span class="line"> orientation: UnicornOrientation.VERTICAL,</span><br><span class="line"> parentButton: Icon(Icons.add),</span><br><span class="line"> childButtons: getAddMenu(),</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="built_in">List</span><UnicornButton> getAddMenu() {</span><br><span class="line"> <span class="built_in">List</span><UnicornButton> children = [];</span><br><span class="line"></span><br><span class="line"> <span class="comment">// Add Children here</span></span><br><span class="line"> children.add(_addOption(iconData: Icons.person, </span><br><span class="line"> onPressed: (){</span><br><span class="line"> }));</span><br><span class="line"> children.add(_addOption(iconData: Icons.photo_size_select_large,</span><br><span class="line"> onPressed:() {</span><br><span class="line"> }));</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> children;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> Widget _addOption({IconData iconData, <span class="built_in">Function</span> onPressed}) {</span><br><span class="line"> <span class="keyword">return</span> UnicornButton(</span><br><span class="line"> currentButton: FloatingActionButton(</span><br><span class="line"> backgroundColor: Colors.purple[<span class="number">500</span>],</span><br><span class="line"> mini: <span class="keyword">true</span>,</span><br><span class="line"> child: Icon(iconData),</span><br><span class="line"> onPressed: onPressed,</span><br><span class="line"> ));</span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<p>就是底部按钮点一下后弹出多个。</p>
<p><a href="https://www.filledstacks.com/snippet/multi-fab-menu-in-flutter-with-unicorndial/" target="_blank" rel="noopener">原文链接</a></p>
</summary>
<category term="flutter" scheme="http://yoursite.com/categories/flutter/"/>
<category term="flutter" scheme="http://yoursite.com/tags/flutter/"/>
<category term="ui" scheme="http://yoursite.com/tags/ui/"/>
</entry>
<entry>
<title>biocard 收集 app</title>
<link href="http://yoursite.com/2019/08/09/prepare-for-biocard-collector/"/>
<id>http://yoursite.com/2019/08/09/prepare-for-biocard-collector/</id>
<published>2019-08-09T13:46:37.000Z</published>
<updated>2019-08-10T00:56:09.309Z</updated>
<content type="html"><![CDATA[<p>biocard 电子册. 新坑+1</p><a id="more"></a><p>数据库很简单, 一个 agent 表, 一个 biocard 表就完事了</p><h1 id="数据库"><a href="#数据库" class="headerlink" title="数据库"></a>数据库</h1><h2 id="agent-表"><a href="#agent-表" class="headerlink" title="agent 表"></a>agent 表</h2><table><thead><tr><th>column name</th><th>type</th><th>remark</th></tr></thead><tbody><tr><td>id</td><td>int</td><td></td></tr><tr><td>agentName</td><td>verchar</td><td></td></tr><tr><td>faction</td><td>int</td><td>Res/Enl/Ofc</td></tr><tr><td>createdTime</td><td>datetime</td></tr></tbody></table><h2 id="biocard-表"><a href="#biocard-表" class="headerlink" title="biocard 表"></a>biocard 表</h2><p>由于特工们是可以改名换阵营的，所以需要再这个表中体现出他制作该 biocard 时的信息</p><table><thead><tr><th>column name</th><th>type</th><th>remark</th></tr></thead><tbody><tr><td>id</td><td>int</td><td></td></tr><tr><td>agentId</td><td>int</td><td></td></tr><tr><td>agentName</td><td>verchar</td><td></td></tr><tr><td>faction</td><td>int</td></tr></tbody></table>]]></content>
<summary type="html">
<p>biocard 电子册. 新坑+1</p>
</summary>
<category term="笔记" scheme="http://yoursite.com/categories/%E7%AC%94%E8%AE%B0/"/>
<category term="TODO" scheme="http://yoursite.com/tags/TODO/"/>
<category term="ingress" scheme="http://yoursite.com/tags/ingress/"/>
</entry>
<entry>
<title>记账本准备工作</title>
<link href="http://yoursite.com/2019/07/08/prepare-for-pocket-book/"/>
<id>http://yoursite.com/2019/07/08/prepare-for-pocket-book/</id>
<published>2019-07-08T03:14:02.000Z</published>
<updated>2019-08-09T13:31:14.599Z</updated>
<content type="html"><![CDATA[<p>流产—</p><p>发现别人已经做了一个很好的app，而且开源了，没必要再造轮子了 <a href="https://play.google.com/store/apps/details?id=me.bakumon.moneykeeper&hl=en_US" target="_blank" rel="noopener">传送门</a></p><p>关于记账本 app 的一些想法和准备工作</p><a id="more"></a><h1 id="设想"><a href="#设想" class="headerlink" title="设想"></a>设想</h1><p>一个最基本功能是记流水账, 附加功能是小金库记录功能的记账本.</p><p>小金库即各种基础现金源, 包括现金, 银行卡, 储蓄账户等, 不包括电话卡, 公交卡等.</p><p>流水账包括出和入的, 每一笔都需要人工录入, 目前设想参数:</p><table><thead><tr><th>参数</th><th>功能 / 备注</th></tr></thead><tbody><tr><td>id</td><td>id</td></tr><tr><td>现金源id</td><td>完成这笔流水的现金源</td></tr><tr><td>金额</td><td>通过正负分辨进出</td></tr><tr><td>备注</td><td>备注</td></tr><tr><td>时间</td></tr></tbody></table><p>现金源流水:</p><blockquote><p>每次产生流水都会自动生成现金源流水, 现金源流水在查看现金源资金情况的时候展示</p></blockquote><table><thead><tr><th>参数</th><th>功能 / 备注</th></tr></thead><tbody><tr><td>id</td><td>id</td></tr><tr><td>现金源id</td><td>现金源id</td></tr><tr><td>金额</td><td>通过正负分辨进出</td></tr><tr><td>对应流水id</td><td></td></tr><tr><td>备注</td><td>备注</td></tr><tr><td>时间</td></tr></tbody></table><h1 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h1><ol><li>流水账记录 CRUD</li><li>现金源记录 CRUD</li><li>流水折线图</li><li>数据导出 csv</li></ol><h1 id="难点"><a href="#难点" class="headerlink" title="难点"></a>难点</h1><h2 id="现金源之间的转账如果涉及到手续费如何记录"><a href="#现金源之间的转账如果涉及到手续费如何记录" class="headerlink" title="现金源之间的转账如果涉及到手续费如何记录:"></a>现金源之间的转账如果涉及到手续费如何记录:</h2><p>为现金源之间的转账设立专门的入口, 用户手动选择两个现金源, 填写转账金额, 手续费, 确认后提交两条流水, 现金源为转出的现金源, 金额为手续费, 备注为”现金源1转账xx金额至现金源2”. 同时分别为现金源1, 2生成两条流水. 然后再从现金源1中减去转账金额和手续费, 现金源2中增加转账金额.</p><h2 id="若用户修改现金源金额如何记录"><a href="#若用户修改现金源金额如何记录" class="headerlink" title="若用户修改现金源金额如何记录:"></a>若用户修改现金源金额如何记录:</h2><p>直接记录流水, 自动生成金额, 备注为”用户修改”</p>]]></content>
<summary type="html">
<p>流产—</p>
<p>发现别人已经做了一个很好的app，而且开源了，没必要再造轮子了 <a href="https://play.google.com/store/apps/details?id=me.bakumon.moneykeeper&amp;hl=en_US" target="_blank" rel="noopener">传送门</a></p>
<p>关于记账本 app 的一些想法和准备工作</p>
</summary>
<category term="笔记" scheme="http://yoursite.com/categories/%E7%AC%94%E8%AE%B0/"/>
<category term="TODO" scheme="http://yoursite.com/tags/TODO/"/>
<category term="记录" scheme="http://yoursite.com/tags/%E8%AE%B0%E5%BD%95/"/>
</entry>
<entry>
<title>flutter 简易登录窗口</title>
<link href="http://yoursite.com/2019/05/18/flutter-simple-log-in-window/"/>
<id>http://yoursite.com/2019/05/18/flutter-simple-log-in-window/</id>
<published>2019-05-18T11:51:20.000Z</published>
<updated>2019-05-20T09:58:49.569Z</updated>
<content type="html"><![CDATA[<blockquote><p>通过这个界面熟悉熟悉 dart 语言, flutter 界面布局方式</p><p>文章主要列出比较关键的点</p><p><a href="https://github.com/ResFeng/flutter_simple_log_in_window" target="_blank" rel="noopener">github</a></p></blockquote><a id="more"></a><h1 id="主要组件"><a href="#主要组件" class="headerlink" title="主要组件:"></a>主要组件:</h1><ol><li>Row: 横向排列组件</li><li>TextField: 文本框</li><li>GestureDetector: 为文本添加事件</li><li>Text: 文本</li><li>FlatButton: 按钮</li></ol><p>以上都可以通过 google: Flutter + 组件名 查询到对应的文档</p><h1 id="home-指定"><a href="#home-指定" class="headerlink" title="home 指定"></a>home 指定</h1><p>dart 通过 main.dart 中的 runApp() 函数来指定程序入口, 在入口类里通过设置 home 属性确定入口页面.</p><p>当页面指定为其他 dart 文件中的类时, 需要在 main 中 import 该 dart 文件.</p><h1 id="主要的几个点"><a href="#主要的几个点" class="headerlink" title="主要的几个点"></a>主要的几个点</h1><h2 id="获取-TextField-的值"><a href="#获取-TextField-的值" class="headerlink" title="获取 TextField 的值"></a>获取 TextField 的值</h2><ol><li>设置一个 key: final _key = TextEditingController();</li><li>在 TextField 中添加属性: controller: _key,</li><li>在别的组件的事件中使用: _key.text</li></ol><h2 id="为-Text-添加点击事件"><a href="#为-Text-添加点击事件" class="headerlink" title="为 Text 添加点击事件"></a>为 Text 添加点击事件</h2><p>由于 dart 并没有给 Text 直接添加点击事件的属性, 因此需要借助 GestureDetector, 在 GestureDetector 中嵌套 Text, 同时为 GestureDector 添加点击事件.</p><h2 id="登录时判断电话-密码是否为空-并根据判断设置-errorText"><a href="#登录时判断电话-密码是否为空-并根据判断设置-errorText" class="headerlink" title="登录时判断电话 / 密码是否为空, 并根据判断设置 errorText"></a>登录时判断电话 / 密码是否为空, 并根据判断设置 errorText</h2><p>这里直接通过 <a href="#获取 TextField 的值">获取 TextField 的值</a> 判断值是否为空: _key.text.isEmpty</p><p>errorText: 使 TextField 显示错误提示文字( 默认为红色, 位于输入框下方 ). 当使用该属性时, labelText 也会变色( 跟随默认色 ). errorText 设置值为 null 时不起作用.</p><ol><li><p>设置 flag: _isPhoneEmpty = false;</p></li><li><p>设置 errorText: errorText: _isPhoneEmpty? “手机号为空” : null,</p></li><li><p>为登录按钮添加事件: </p> <figure class="highlight dart"><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">onTap:(){</span><br><span class="line">setState((){</span><br><span class="line"> _keyPhone.text.isEmpty? _isPhoneEmpty = <span class="keyword">true</span> : _isPhoneEmpty = <span class="keyword">false</span>;</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><p>根据提示( 鼠标移过去 )说明, 该函数可以向框架声明某一对象的属性已被修改, 从而使该属性做出相应动作. 具体等看文档</p><h2 id="TextField-获取焦点"><a href="#TextField-获取焦点" class="headerlink" title="TextField 获取焦点"></a>TextField 获取焦点</h2><ol><li><p>设置 FocusNode _passwordFocusNode = FocusNode();</p></li><li><p>为密码设置 focusNode: focus Node: _passwordFocusNode</p></li><li><p>为 phone 设置完成事件:</p> <figure class="highlight dart"><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">onEditingComplete: (){</span><br><span class="line"> FocusScope.of(context).requestFocus(_passwordFocusNode);</span><br><span class="line">},</span><br></pre></td></tr></table></figure></li><li><p>为 phone 设置回车按钮样式: textInputAction: TextInputAction.next ( 这一步只是为了好看 )</p></li></ol><p>这样当输完号码后, 点击回车就自动跳转到密码输入框了.</p><p>密码输入框用类似的方法实现, 回车 -> 登录.</p><p>根据提示说明, FocusNode 是焦点树的叶, 可以获取到焦点( 英文原文: A leaf node in the focus tree that can receive focus. ). </p><h2 id="为密码输入框添加-可见-不可见-按钮"><a href="#为密码输入框添加-可见-不可见-按钮" class="headerlink" title="为密码输入框添加 可见/不可见 按钮"></a>为密码输入框添加 可见/不可见 按钮</h2><ol><li><p>定义一个 bool 参数: bool passwordVisible = false;</p></li><li><p>密码 TextField 中添加属性: </p> <figure class="highlight dart"><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">suffixIcon: IconButton(</span><br><span class="line"> icon: Icon(</span><br><span class="line"> passwordVisible ? Icons.visibility : Icons.visibility_off,</span><br><span class="line"> color: passwordVisible ? Colors.blue : Colors.grey,</span><br><span class="line"> ),</span><br><span class="line"> onPressed: (){</span><br><span class="line"> setState(() {</span><br><span class="line"> passwordVisible = !passwordVisible; </span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line">),</span><br></pre></td></tr></table></figure></li></ol><h2 id="登录等待界面"><a href="#登录等待界面" class="headerlink" title="登录等待界面"></a>登录等待界面</h2><p>在点击登录后应该会有一个转圈圈等待界面的, 增强交互感.</p><ol><li><p>设置 flag: bool _showLoading = false;</p></li><li><p>用一个 List 来存放主界面( 手机号, 密码输入框, 忘记密码, 登录按钮 ), 和根据 flag 来决定是否加入 loading 界面. </p><p> 详见: login_page.dart: _logInWindow().</p></li><li><p>点击登录后判断是否符合登录条件, 是的话就通过 setState() 设置 _showLoading = true;</p></li></ol><h2 id="异步处理"><a href="#异步处理" class="headerlink" title="异步处理"></a>异步处理</h2><p><a href="https://dart.dev/tutorials/language/futures" target="_blank" rel="noopener">官方文档</a></p><p>登录的时候一方面向服务器发起请求, 另一方面维持 loading 状态, 等待服务器响应. </p><p>详见 login_page.dart: _logInProcess()</p><h1 id="TODO"><a href="#TODO" class="headerlink" title="TODO"></a>TODO</h1><ul><li style="list-style: none"><input type="checkbox" checked> 添加背景</li><li style="list-style: none"><input type="checkbox" checked> 添加方框并美化</li></ul>]]></content>
<summary type="html">
<blockquote>
<p>通过这个界面熟悉熟悉 dart 语言, flutter 界面布局方式</p>
<p>文章主要列出比较关键的点</p>
<p><a href="https://github.com/ResFeng/flutter_simple_log_in_window" target="_blank" rel="noopener">github</a></p>
</blockquote>
</summary>
<category term="flutter" scheme="http://yoursite.com/categories/flutter/"/>
<category term="flutter" scheme="http://yoursite.com/tags/flutter/"/>
<category term="demo" scheme="http://yoursite.com/tags/demo/"/>
<category term="TODO" scheme="http://yoursite.com/tags/TODO/"/>
</entry>
<entry>
<title>Flutter 里的坑</title>
<link href="http://yoursite.com/2019/05/16/issues-in-flutter/"/>
<id>http://yoursite.com/2019/05/16/issues-in-flutter/</id>
<published>2019-05-16T11:59:49.000Z</published>
<updated>2019-05-19T11:26:53.964Z</updated>
<content type="html"><![CDATA[<p>flutter 虽好, 但坑也很多</p><a id="more"></a><h1 id="官方-bug"><a href="#官方-bug" class="headerlink" title="官方 bug"></a>官方 bug</h1><h2 id="在-Row-里放-TextField-出错"><a href="#在-Row-里放-TextField-出错" class="headerlink" title="在 Row 里放 TextField 出错"></a>在 Row 里放 TextField 出错</h2><blockquote><p><a href="https://github.com/flutter/flutter/issues/24724" target="_blank" rel="noopener">参考链接</a></p></blockquote><p>在官方解决这个 bug 前, 只能通过以下方式解决:</p><figure class="highlight dart"><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">Row(</span><br><span class="line"> children: <Widget>[</span><br><span class="line"> Expanded(child: TextField()),</span><br><span class="line"> ],</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p>这时如果在这个 TextField 前还有其他组件会发现其他组件被挤在了一边. 因为 Expanded 会自动填充 Row 所有剩余空间.</p><p>解决方法是把其他组件分别放在 Container 中, 并给 Container 设置宽度, 提前占据一定空间. 从这里可以大概看到为什么放 TextField 会出 bug 了.</p><figure class="highlight dart"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Container(</span><br><span class="line"> width: <span class="number">60</span>,</span><br><span class="line"> child: <span class="keyword">new</span> Text(</span><br><span class="line"> <span class="string">'unit'</span>,</span><br><span class="line"> style: _biggerFont,</span><br><span class="line"> ),</span><br><span class="line">),</span><br></pre></td></tr></table></figure><h1 id="坑"><a href="#坑" class="headerlink" title="坑"></a>坑</h1><h2 id="引用图片"><a href="#引用图片" class="headerlink" title="引用图片"></a>引用图片</h2><blockquote><p><a href="https://flutter.dev/docs/development/ui/assets-and-images" target="_blank" rel="noopener">官方文档</a></p></blockquote><p>要给程序插上背景图片, 网上找了教程基本都是写:</p><figure class="highlight dart"><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">decoration: BoxDecoration(</span><br><span class="line"> image: DecorationImage(</span><br><span class="line"> image: AssetImage(<span class="string">"img/~.jpg"</span>),</span><br><span class="line"> fit: BoxFit.cover,</span><br><span class="line"> )</span><br><span class="line">),</span><br></pre></td></tr></table></figure><p>但基本都没提到要在 pubspec.yaml 中引入这些图片, 在 <a href="https://github.com/flutter/flutter/issues/11199" target="_blank" rel="noopener">github</a> 看了别人的回答才知道又踩坑了~~</p><p>如果你的图片项目根目录中则在 pubspec.yaml 添加一下内容:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">flutter</span><br><span class="line">assets:</span><br><span class="line">- img/</span><br></pre></td></tr></table></figure><p>这里好像热重启不起效, 挺烦的. 还有大家好像更习惯 images ?</p>]]></content>
<summary type="html">
<p>flutter 虽好, 但坑也很多</p>
</summary>
<category term="flutter" scheme="http://yoursite.com/categories/flutter/"/>
<category term="issues" scheme="http://yoursite.com/tags/issues/"/>
</entry>
<entry>
<title>初试 Flutter</title>
<link href="http://yoursite.com/2019/05/12/hello-flutter/"/>
<id>http://yoursite.com/2019/05/12/hello-flutter/</id>
<published>2019-05-12T08:17:40.000Z</published>
<updated>2019-05-12T11:25:43.247Z</updated>
<content type="html"><![CDATA[<blockquote><p>坑太多了</p></blockquote><a id="more"></a><h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>突然抽风要试试 Flutter. 然后就一路踩着坑过来了.</p><p>系统: win10 1803</p><h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><p>由于之前已经装好了 git, android studio, vs code, idea. 这里就不赘述了.</p><ol><li><p><a href="https://flutter.dev/docs/get-started/install" target="_blank" rel="noopener">Flutter 下载地址</a> 谷歌非常良心地提供了中国专用下载地址.</p></li><li><p>解压下载后的压缩包到一个不需要管理员权限地地址</p></li><li><p>进入 ~/flutter/bin 复制地址</p></li><li><p>系统变量和用户变量中的 path 添加步骤3复制的地址 ( 看别人写的好像只要用户变量就可以了 )</p><p> 打开 powershell 输入 flutter doctor 可看到检测信息</p></li><li><p>用户变量添加: FLUTTER_STORAGE_BASE_URL 值为: <a href="https://storage.flutter-io.cn" target="_blank" rel="noopener">https://storage.flutter-io.cn</a></p><p>PUB_HOSTED_URL 值为: <a href="https://pub.flutter-io.cn" target="_blank" rel="noopener">https://pub.flutter-io.cn</a></p><p>这一步是方便国内下载库什么的</p></li><li><p>vs code 中安装 dart, flutter 这两个插件</p></li><li><p>ctrl+shift+p 输入 flutter, 选择 Flutter: New Project, 输入工程名, 选择存储位置. 等待初始化</p><p> 完成后按 f5 启动, 等待机器出行那个 demo. 注意右下角要选中机器.</p></li></ol><h1 id="坑"><a href="#坑" class="headerlink" title="坑"></a>坑</h1><p>Flutter 入门的坑太多了.</p><h2 id="卡在-flutter-packages-get"><a href="#卡在-flutter-packages-get" class="headerlink" title="卡在 flutter packages get"></a>卡在 flutter packages get</h2><p>这是因为被墙了, 先 x 掉这个任务, 然后在 terminal 中设置代理( 参考之前的 <a href="https://blog.fm7077.ml/2019/04/30/hexo-deploy-on-firebase/" target="_blank" rel="noopener">博文</a> ), 然后输入 flutter packages get, 等待下完</p><h2 id="卡在-installing-build-app-outputs-apk-app-apk"><a href="#卡在-installing-build-app-outputs-apk-app-apk" class="headerlink" title="卡在 installing build\app\outputs\apk\app.apk"></a>卡在 installing build\app\outputs\apk\app.apk</h2><p>在 vs code 中, 运行时不知道为什么会卡在这里. 程序能正常安装到手机上, 但自动打开的是个白色页面, 得手动清楚后台在打开 app 才能正常显示. 然后 console 就一直显示 installing build\app\outputs\apk\app.apk. 这时点击 Hot reload 无效.</p><p>在 android studio 上点击运行后程序正常安装也正常显示, 但和 vs code 中一样的问题. 同时 reload 按钮无法按.</p><p><em>更新</em>: 这时由于在上一个 issue 中设置了代理造成的. 关闭代理后, 在 terminal 中输入 flutter run 可看到程序正常安装运行, 同时可按 r 进行 hot reload</p><p>但按 f5 运行后还是有同样的问题, csdn 上看到这篇<a href="https://blog.csdn.net/weixin_34033624/article/details/87563259" target="_blank" rel="noopener">博文</a> 照做了一下</p><p>咦, 重启了一下 vs code 就好了, 真实神奇. 有知道原因的同学麻烦评论一下.</p><blockquote><p>其实 problems 中之前还出现了: cannot download from xxxxx(忘了地址了). 不知道跟这个有没有关系</p></blockquote><h2 id="卡在creating-flutter-project"><a href="#卡在creating-flutter-project" class="headerlink" title="卡在creating flutter project"></a>卡在creating flutter project</h2><p>这个问题发生在 android studio 上. 应该是被墙了, 但不知道怎么给 flutter 设置翻墙.</p><p>解决办法是在 vs code 上新建, 或者通过 powershell 新建, 然后用 as 打开. 这也太蠢了. 还是直接用 vs code 好了.</p>]]></content>
<summary type="html">
<blockquote>
<p>坑太多了</p>
</blockquote>
</summary>
<category term="flutter" scheme="http://yoursite.com/categories/flutter/"/>
<category term="flutter" scheme="http://yoursite.com/tags/flutter/"/>
<category term="TODO" scheme="http://yoursite.com/tags/TODO/"/>
<category term="android" scheme="http://yoursite.com/tags/android/"/>
</entry>
<entry>
<title>在 firebase 上部署 hexo 静态博客</title>
<link href="http://yoursite.com/2019/04/30/hexo-deploy-on-firebase/"/>
<id>http://yoursite.com/2019/04/30/hexo-deploy-on-firebase/</id>
<published>2019-04-30T04:37:54.000Z</published>
<updated>2019-04-30T06:55:07.390Z</updated>
<content type="html"><![CDATA[<p>firebase 是股沟的一个 app 和 web 应用程序开发平台, 可以在上面部署静态博客.</p><p>本文主要 <a href="https://blog.erguotou.me/hexo-on-firebase.html" target="_blank" rel="noopener">参考链接</a></p><p>参考链接里有些东西</p><a id="more"></a><h1 id="注册-firebase-创建新项目"><a href="#注册-firebase-创建新项目" class="headerlink" title="注册 firebase, 创建新项目"></a>注册 firebase, 创建新项目</h1><p><a href="[https://console.firebase.google.com](https://console.firebase.google.com/">firebase 官网</a>)</p><p>按照提示创建, 这里没什么难度.</p><h2 id="关于自定义域名-如果没有跳过这一步"><a href="#关于自定义域名-如果没有跳过这一步" class="headerlink" title="关于自定义域名( 如果没有跳过这一步 )"></a>关于自定义域名( 如果没有跳过这一步 )</h2><p>firebase 默认提供了一个 项目id.firebaseapp.com 的域名.</p><p>要关联自己的域名的话</p><ol><li><p>在 开发/Hosting 中点击 “关联域名”</p></li><li><p>填写顶级域名( domain.com ), 或子域名( child.domain.com )</p></li><li><p>在 DNS 提供商( 一般域名服务商也有这功能 ) 填写 TXT 记录:</p><p> 如我在 freenom 买的域名, 在域名的 DNS management 页面中填写</p><p> name: 子域名或不填代表顶级域名( child/null )</p><p> type: TXT</p><p> target: 谷歌提供的一个验证码</p><p> 验证</p></li><li><p>成功后谷歌会给出两个 ip 地址, 跟步骤3类似填入 DNS 管理页面中. type 为A</p></li><li><p>坐等谷歌部署证书.</p></li></ol><h1 id="本地部署"><a href="#本地部署" class="headerlink" title="本地部署"></a>本地部署</h1><p>关于 hexo 具体内容见 👉 <a href="https://blog.fm7077.ml/2018/09/03/how_to_build_your_own_blog_website/" target="_blank" rel="noopener">链接</a>. (这里只需要在一个文件夹中 clone hexo 就可以了)</p><p>在 hexo 项目文件夹中打开 powershell 输入</p><figure class="highlight powershell"><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">npm install -g firebase-tools</span><br><span class="line"><span class="comment"># 安装后登录, powershell 翻墙问题见文末</span></span><br><span class="line">firebase login --no-localhost</span><br><span class="line"><span class="comment"># 问题选 y, 此时自动跳转到浏览器, 请求授权, 授权后复制那串认证码, 粘贴到 powershell 回车.</span></span><br><span class="line"><span class="comment"># 成功的话会显示 Success! Logged in as [email protected]</span></span><br><span class="line">firebase init</span><br><span class="line"><span class="comment"># 问题回答 y</span></span><br><span class="line"><span class="comment"># 空格选中 Configure and deploy Firebase Hosting sites 回车</span></span><br><span class="line"><span class="comment"># 选择项目</span></span><br><span class="line"><span class="comment"># 选择文件夹( 默认的 public 就对了 )</span></span><br><span class="line"><span class="comment"># 是否将链接都导向 /index.html, 看个人喜好选 y/n</span></span><br><span class="line"><span class="comment"># 是否覆盖 public/index.html 回答 N</span></span><br></pre></td></tr></table></figure><p>我配置好后的 firebase.json</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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">"hosting"</span>: {</span><br><span class="line"> <span class="attr">"public"</span>: <span class="string">"public"</span>,</span><br><span class="line"> <span class="attr">"ignore"</span>: [</span><br><span class="line"> <span class="string">"firebase.json"</span>,</span><br><span class="line"> <span class="string">"**/.*"</span>,</span><br><span class="line"> <span class="string">"**/node_modules/**"</span></span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>最后执行</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 每次都 clean 一下</span></span><br><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line"><span class="comment"># 此处也需要翻墙</span></span><br><span class="line">firebase deploy</span><br><span class="line"><span class="comment"># 等待成功后, 在浏览器输入地址查看</span></span><br></pre></td></tr></table></figure><h1 id="powershell-翻墙"><a href="#powershell-翻墙" class="headerlink" title="powershell 翻墙"></a>powershell 翻墙</h1><blockquote><p> <a href="https://async.sh/2018/07/30/quick-setup-http-proxy-using-powershell-profile/" target="_blank" rel="noopener">参考链接</a></p><p> <a href="https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_profiles?view=powershell-6#the-profile-files" target="_blank" rel="noopener">微软文档</a></p></blockquote><p>在 powershell 中输入</p><figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">$Profile</span></span><br></pre></td></tr></table></figure><p>他会返回一个文件的路径. 根据这个路径找到这个文件, 如果没有则创建它, 中间缺失的文件夹也创建.</p><p>然后在文末添加 <a href="https://async.sh/2018/07/30/quick-setup-http-proxy-using-powershell-profile/" target="_blank" rel="noopener">参考链接</a> 中的代码, 保存, 关闭.</p><p>在 powershell 中 输入 set-proxy ‘<a href="http://127.0.0.1:1080'" target="_blank" rel="noopener">http://127.0.0.1:1080'</a> ( 此处为 ssr/ss 的本地代理地址与端口, 按照实际情况填 )</p><p>更多详情见 <a href="https://async.sh/2018/07/30/quick-setup-http-proxy-using-powershell-profile/" target="_blank" rel="noopener">参考链接</a></p><p>如果遇到 “此系统上禁止运行脚本xxxxxxxxx”</p><p>则用管理员身份打开 powershell, 输入set-executionpolicy remotesigned 按须选择 y 或 a</p>]]></content>
<summary type="html">
<p>firebase 是股沟的一个 app 和 web 应用程序开发平台, 可以在上面部署静态博客.</p>
<p>本文主要 <a href="https://blog.erguotou.me/hexo-on-firebase.html" target="_blank" rel="noopener">参考链接</a></p>
<p>参考链接里有些东西</p>
</summary>
<category term="笔记" scheme="http://yoursite.com/categories/%E7%AC%94%E8%AE%B0/"/>
<category term="hexo" scheme="http://yoursite.com/tags/hexo/"/>
<category term="firebase" scheme="http://yoursite.com/tags/firebase/"/>
<category term="博客" scheme="http://yoursite.com/tags/%E5%8D%9A%E5%AE%A2/"/>
<category term="翻墙" scheme="http://yoursite.com/tags/%E7%BF%BB%E5%A2%99/"/>
</entry>
<entry>
<title>mysql 用户与权限</title>
<link href="http://yoursite.com/2019/04/20/mysql-user-permission/"/>
<id>http://yoursite.com/2019/04/20/mysql-user-permission/</id>
<published>2019-04-20T07:44:27.000Z</published>
<updated>2019-04-21T08:52:52.732Z</updated>
<content type="html"><![CDATA[<blockquote><p>为不同的用户分配不同的权限</p></blockquote><a id="more"></a><h1 id="用户"><a href="#用户" class="headerlink" title="用户"></a>用户</h1><h2 id="创建用户"><a href="#创建用户" class="headerlink" title="创建用户"></a>创建用户</h2><figure class="highlight sql"><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">create</span> <span class="keyword">user</span> <span class="string">'username'</span> @<span class="string">'ip address'</span> <span class="keyword">identified</span> <span class="keyword">by</span> <span class="string">'password'</span></span><br><span class="line"><span class="comment">-- set ip address as %: user can log in from any address( not include localhost( 127.0.0.1 ) )</span></span><br></pre></td></tr></table></figure><h1 id="权限"><a href="#权限" class="headerlink" title="权限"></a>权限</h1><h2 id="分配权限给用户"><a href="#分配权限给用户" class="headerlink" title="分配权限给用户"></a>分配权限给用户</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">grant all privileges on databasename.tablename to 'username'@'ip address'</span><br><span class="line">-- all can be replaced by other sql operations like select,update etc</span><br><span class="line">-- tablename can be replaced by *</span><br><span class="line">-- we can also append 'identified by new password' to set a different for this user</span><br></pre></td></tr></table></figure><h1 id="授权外网链接"><a href="#授权外网链接" class="headerlink" title="授权外网链接"></a>授权外网链接</h1><figure class="highlight bash"><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> /etc/mysql/mysql.conf.d</span><br><span class="line">sudo vim mysqld.cnf</span><br></pre></td></tr></table></figure><p>注释掉 bind-address = 127.0.0.1</p>]]></content>
<summary type="html">
<blockquote>
<p>为不同的用户分配不同的权限</p>
</blockquote>
</summary>
<category term="mysql" scheme="http://yoursite.com/categories/mysql/"/>
<category term="mysql" scheme="http://yoursite.com/tags/mysql/"/>
</entry>
<entry>
<title>部署 war 到 tomcat</title>
<link href="http://yoursite.com/2019/04/19/deploy-war-on-tomcat/"/>
<id>http://yoursite.com/2019/04/19/deploy-war-on-tomcat/</id>
<published>2019-04-18T23:29:43.000Z</published>
<updated>2019-04-18T23:39:07.740Z</updated>
<content type="html"><![CDATA[<blockquote><p><a href="https://blog.csdn.net/jingru2017/article/details/79020469" target="_blank" rel="noopener">参考链接1</a></p><p><a href="https://stackoverflow.com/questions/5109112/how-to-deploy-a-war-file-in-tomcat-7" target="_blank" rel="noopener">参考链接2</a></p></blockquote><a id="more"></a><p>把 war 文件放在 /tomcat 根目录/webapps 下</p><p>启动 /tomcat 根目录/bin/startup.bat</p><p>主要有几个要注意的地方</p><ol><li><p>win 系统中, 如果 tomcat 安装在 c 盘, 那么应该以管理员身份运行 startup.bat</p></li><li><p>webapps 下的 ROOT 不能删除, 详见 参考链接1</p></li><li><p>默认状况下就算部署了 war 文件到 tomcat, 直接访问 localhost://8080, 返回的还是 tomcat 的默认界面, 应访问:</p><p> localhost://8080/sample</p><p> sample 即为 war 包名</p></li></ol>]]></content>
<summary type="html">
<blockquote>
<p><a href="https://blog.csdn.net/jingru2017/article/details/79020469" target="_blank" rel="noopener">参考链接1</a></p>
<p><a href="https://stackoverflow.com/questions/5109112/how-to-deploy-a-war-file-in-tomcat-7" target="_blank" rel="noopener">参考链接2</a></p>
</blockquote>
</summary>
<category term="笔记" scheme="http://yoursite.com/categories/%E7%AC%94%E8%AE%B0/"/>
<category term="war" scheme="http://yoursite.com/tags/war/"/>
<category term="tomcat" scheme="http://yoursite.com/tags/tomcat/"/>
<category term="web" scheme="http://yoursite.com/tags/web/"/>
</entry>
<entry>
<title>python 和 mysql 互动</title>
<link href="http://yoursite.com/2019/04/17/python-mysql/"/>
<id>http://yoursite.com/2019/04/17/python-mysql/</id>
<published>2019-04-17T14:51:23.000Z</published>
<updated>2019-04-17T14:57:26.428Z</updated>
<content type="html"><![CDATA[<blockquote><p><a href="https://www.w3schools.com/python/python_mysql_getstarted.asp" target="_blank" rel="noopener">参考链接</a></p></blockquote><a id="more"></a><h1 id="安装-mysql-包"><a href="#安装-mysql-包" class="headerlink" title="安装 mysql 包"></a>安装 mysql 包</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">pip install mysql-connector</span><br></pre></td></tr></table></figure><p>国内因为有那堵墙的存在, 速度会很慢. 代理麻烦又慢. 镜像是个不错的选择.</p><blockquote><p><a href="https://blog.csdn.net/wukai0909/article/details/62427437" target="_blank" rel="noopener">参考链接</a></p></blockquote><p>国内几个较大的镜像源</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">清华：https://pypi.tuna.tsinghua.edu.cn/simple</span><br><span class="line"></span><br><span class="line">阿里云：http://mirrors.aliyun.com/pypi/simple/</span><br><span class="line"></span><br><span class="line">中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/</span><br><span class="line"></span><br><span class="line">华中理工大学：http://pypi.hustunique.com/</span><br><span class="line"></span><br><span class="line">山东理工大学：http://pypi.sdutlinux.org/ </span><br><span class="line"></span><br><span class="line">豆瓣：http://pypi.douban.com/simple/</span><br></pre></td></tr></table></figure><p>linux: ~/.pip/pip.conf</p><p>win: c:/user/username/pip/pip.ini</p><p>添加内容:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[global]</span><br><span class="line">index-url = https://pypi.tuna.tsinghua.edu.cn/simple</span><br><span class="line">[install]</span><br><span class="line">trusted-host=mirrors.aliyun.com</span><br></pre></td></tr></table></figure><h1 id="CRUD"><a href="#CRUD" class="headerlink" title="CRUD"></a>CRUD</h1>]]></content>
<summary type="html">
<blockquote>
<p><a href="https://www.w3schools.com/python/python_mysql_getstarted.asp" target="_blank" rel="noopener">参考链接</a></p>
</blockquote>
</summary>
<category term="python" scheme="http://yoursite.com/categories/python/"/>
<category term="mysql" scheme="http://yoursite.com/tags/mysql/"/>
<category term="python" scheme="http://yoursite.com/tags/python/"/>
</entry>
<entry>
<title>用 Python 读取 csv 文件( 包括一丁点 python 使用教程)</title>
<link href="http://yoursite.com/2019/04/16/python-read-csv/"/>
<id>http://yoursite.com/2019/04/16/python-read-csv/</id>
<published>2019-04-16T11:23:48.000Z</published>
<updated>2019-04-17T06:20:32.693Z</updated>
<content type="html"><![CDATA[<blockquote><p>为了铲当年自己拉的粑粑不得不借用 Python. 自己拉的哭着也要铲掉.</p><p><a href="https://www.python.org/downloads/windows/" target="_blank" rel="noopener">python for win 下载地址</a></p><p><a href="https://www.programiz.com/python-programming/reading-csv-files" target="_blank" rel="noopener">Reference link</a></p><p><a href="https://blog.csdn.net/guoziqing506/article/details/52014506" target="_blank" rel="noopener">参考链接</a></p></blockquote><a id="more"></a><h1 id="安装-Python"><a href="#安装-Python" class="headerlink" title="安装 Python"></a>安装 Python</h1><p>安装 python 很简单, 直接在官网上下载安装包无脑安装就好了( 最后授权一个啥( 忘了 )就好了 ).</p><p>然后用 VS Code 编写 <a href="https://segmentfault.com/a/1190000015483593" target="_blank" rel="noopener">参考链接</a></p><h1 id="CSV-文件"><a href="#CSV-文件" class="headerlink" title="CSV 文件"></a>CSV 文件</h1><p>本质上就是用 ‘,’ 将值分隔的文件. 可以用 Excel 查看, 编辑.</p><table><thead><tr><th>name</th><th>age</th><th>city</th></tr></thead><tbody><tr><td>WNX</td><td>0</td><td>PK</td></tr><tr><td>HM</td><td>+1</td><td>SH</td></tr><tr><td>HLS</td><td>93</td><td>BM</td></tr></tbody></table><h1 id="读取"><a href="#读取" class="headerlink" title="读取"></a>读取</h1><figure class="highlight python"><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">import</span> csv</span><br><span class="line"><span class="comment"># 读取csv至字典</span></span><br><span class="line"><span class="comment"># 如果是 win 路径记得用 '/'</span></span><br><span class="line">csvFile = open(<span class="string">"test.csv"</span>, <span class="string">"r"</span>)</span><br><span class="line">reader = csv.reader(csvFile)</span><br><span class="line"></span><br><span class="line"><span class="comment"># 建立空字典</span></span><br><span class="line">result = {}</span><br><span class="line"><span class="keyword">for</span> item <span class="keyword">in</span> reader:</span><br><span class="line"> print(item)</span><br><span class="line">csvFile.close()</span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">['name', 'age', 'city']</span><br><span class="line">['WNX', '0', 'PK']</span><br><span class="line">['HM', '+1', 'SH']</span><br><span class="line">['HLS', '93', 'BM']</span><br></pre></td></tr></table></figure><h1 id="遍历"><a href="#遍历" class="headerlink" title="遍历"></a>遍历</h1><figure class="highlight python"><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">for</span> index, row <span class="keyword">in</span> data.iterrows():</span><br><span class="line"> print(row[<span class="number">0</span>])</span><br></pre></td></tr></table></figure><h1 id="写入"><a href="#写入" class="headerlink" title="写入"></a>写入</h1><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">data.to_csv(path, index=<span class="keyword">False</span>,encoding=<span class="string">'utf_8_sig'</span>)</span><br></pre></td></tr></table></figure><p>用 ‘utf_8_sig’ 编码, 防止用 excel 打开发现是乱码</p><h1 id="中文乱码"><a href="#中文乱码" class="headerlink" title="中文乱码"></a>中文乱码</h1><p>一个是编码造成一个是 code runner 自身地问题</p><p>编码地问题网上很多, code runner 可以通过 <a href="https://www.cnblogs.com/zhaoshizi/p/9050768.html" target="_blank" rel="noopener">参考链接</a> 解决</p><ol><li><p>让 code runner 输出到 terminal 里:</p><p>“code-runner.runInTerminal”: true,</p><p>注意: 如果此时 终端在 python 环境中, 将会报错. 应该执行以下 exit()</p></li><li><p>code runner 使用 utf8 编码:</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></pre></td><td class="code"><pre><span class="line">"code-runner.executorMap": {</span><br><span class="line">....</span><br><span class="line">"python": "set PYTHONIOENCODING=utf8 && python",</span><br><span class="line">....</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h1 id="导入外部包"><a href="#导入外部包" class="headerlink" title="导入外部包"></a>导入外部包</h1><ol><li>在 terminal 中 pip install package name</li><li>在文件中 import package name</li></ol><h1 id="关于-SyntaxError-invalid-syntax"><a href="#关于-SyntaxError-invalid-syntax" class="headerlink" title="关于 SyntaxError: invalid syntax"></a>关于 SyntaxError: invalid syntax</h1><blockquote><p><a href="https://stackoverflow.com/questions/51540391/invalid-syntax-error-when-running-python-from-inside-visual-studio-code" target="_blank" rel="noopener">参考链接</a></p></blockquote><p>选择 run current file in python interactive terminal 就会出现这个错误</p><p>重启 VS Code 就可以了</p><h1 id="优雅地在-VS-Code-上运行-python-文件"><a href="#优雅地在-VS-Code-上运行-python-文件" class="headerlink" title="优雅地在 VS Code 上运行 python 文件"></a>优雅地在 VS Code 上运行 python 文件</h1><blockquote><p><a href="https://stackoverflow.com/questions/49529153/visual-studio-code-is-not-showing-the-ouput-of-python" target="_blank" rel="noopener">参考链接</a></p></blockquote><ol><li>安装 <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner" target="_blank" rel="noopener">Code Runner Extension</a></li><li>在 py 文件中:<ol><li>ctrl + alt + N 或者 ctrl + shift + P, 输入 “Run Code”</li><li>在 output 中观察结果</li></ol></li></ol>]]></content>
<summary type="html">
<blockquote>
<p>为了铲当年自己拉的粑粑不得不借用 Python. 自己拉的哭着也要铲掉.</p>
<p><a href="https://www.python.org/downloads/windows/" target="_blank" rel="noopener">python for win 下载地址</a></p>
<p><a href="https://www.programiz.com/python-programming/reading-csv-files" target="_blank" rel="noopener">Reference link</a></p>
<p><a href="https://blog.csdn.net/guoziqing506/article/details/52014506" target="_blank" rel="noopener">参考链接</a></p>
</blockquote>
</summary>
<category term="python" scheme="http://yoursite.com/categories/python/"/>
<category term="python" scheme="http://yoursite.com/tags/python/"/>
<category term="csv" scheme="http://yoursite.com/tags/csv/"/>
</entry>
<entry>
<title>Echarts</title>
<link href="http://yoursite.com/2019/04/15/react-vis/"/>
<id>http://yoursite.com/2019/04/15/react-vis/</id>
<published>2019-04-15T00:12:59.000Z</published>
<updated>2019-04-17T04:07:24.862Z</updated>
<content type="html"><![CDATA[<blockquote><p>找了好久找到一个好用且免费的(好像还是国人开发的)</p><p><a href="https://echarts.baidu.com" target="_blank" rel="noopener">官网</a></p></blockquote><a id="more"></a>]]></content>
<summary type="html">
<blockquote>
<p>找了好久找到一个好用且免费的(好像还是国人开发的)</p>
<p><a href="https://echarts.baidu.com" target="_blank" rel="noopener">官网</a></p>
</blockquote>
</summary>
<category term="javascript" scheme="http://yoursite.com/categories/javascript/"/>
<category term="js" scheme="http://yoursite.com/tags/js/"/>
<category term="可视化" scheme="http://yoursite.com/tags/%E5%8F%AF%E8%A7%86%E5%8C%96/"/>
<category term="Echarts" scheme="http://yoursite.com/tags/Echarts/"/>
</entry>
<entry>
<title>关于 select2</title>
<link href="http://yoursite.com/2019/04/12/select2/"/>
<id>http://yoursite.com/2019/04/12/select2/</id>
<published>2019-04-12T06:59:05.000Z</published>
<updated>2019-04-17T04:07:36.240Z</updated>
<content type="html"><![CDATA[<blockquote><p><a href="https://github.com/select2/select2" target="_blank" rel="noopener">select2 github 仓库</a></p><p><a href="https://gitee.com/bruceouyang/dp-pro" target="_blank" rel="noopener">小林工程师 dp-pro gitee 仓库</a></p><p>本文所使用的 select2 由小林工程师二次封装过. </p></blockquote><a id="more"></a><h1 id="dp-pro-的-select2-的bug"><a href="#dp-pro-的-select2-的bug" class="headerlink" title="dp-pro 的 select2 的bug"></a>dp-pro 的 select2 的bug</h1><h2 id="dp-pro-中的源码"><a href="#dp-pro-中的源码" class="headerlink" title="dp-pro 中的源码"></a>dp-pro 中的源码</h2><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><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="tag"><<span class="name">h3</span>></span>&nbsp;&nbsp;&nbsp;省市区级联选择<span class="tag"></<span class="name">h3</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">select</span> <span class="attr">class</span>=<span class="string">"province form-control"</span>></span><span class="tag"></<span class="name">select</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">select</span> <span class="attr">class</span>=<span class="string">"city form-control"</span>></span><span class="tag"></<span class="name">select</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">select</span> <span class="attr">class</span>=<span class="string">"district form-control"</span>></span><span class="tag"></<span class="name">select</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><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><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 初始化省份选择，及级联函数</span></span><br><span class="line">$(<span class="string">'.province'</span>).selectBindEx({</span><br><span class="line"> url: <span class="string">'../../sys/area/select?areaCode=0'</span>,</span><br><span class="line"> placeholder: <span class="string">'请选择省份'</span>,</span><br><span class="line"> value: <span class="string">'areaCode'</span>,</span><br><span class="line"> text: <span class="string">'name'</span>,</span><br><span class="line"> change: <span class="function"><span class="keyword">function</span>(<span class="params">data</span>) </span>{</span><br><span class="line"> $(<span class="string">'.city'</span>).selectBindEx({</span><br><span class="line"> url: <span class="string">'../../sys/area/select?areaCode='</span> + data,</span><br><span class="line"> placeholder: <span class="string">'请选择地市'</span>,</span><br><span class="line"> value: <span class="string">'areaCode'</span>,</span><br><span class="line"> text: <span class="string">'name'</span>,</span><br><span class="line"> change: <span class="function"><span class="keyword">function</span>(<span class="params">data</span>) </span>{</span><br><span class="line"> $(<span class="string">'.district'</span>).selectBindEx({</span><br><span class="line"> url: <span class="string">'../../sys/area/select?areaCode='</span> + data,</span><br><span class="line"> placeholder: <span class="string">'请选择区县'</span>,</span><br><span class="line"> value: <span class="string">'areaCode'</span>,</span><br><span class="line"> text: <span class="string">'name'</span></span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> <span class="comment">// 选择省份后，清空地址选择</span></span><br><span class="line"> $(<span class="string">'.city'</span>).val(<span class="literal">null</span>).trigger(<span class="string">'change'</span>);</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="comment">// 初始化地市选择</span></span><br><span class="line">$(<span class="string">'.city'</span>).selectInitEx(<span class="string">'请选择地市'</span>);</span><br><span class="line"><span class="comment">// 初始化区县选择</span></span><br><span class="line">$(<span class="string">'.district'</span>).selectInitEx(<span class="string">'请选择区县'</span>);</span><br></pre></td></tr></table></figure><p>dp-pro 中的 select2 有级联选择的 demo 但有一个问题就是:</p><p>设有 A-B-C 三个级联选项, 选中 A 后, B 填充对应的内容 B1, 这时再选中 A 中某项, B 中就会新增内容 B2, 而 B1 还存在着, 没被删去.</p><h2 id="解决过程"><a href="#解决过程" class="headerlink" title="解决过程"></a>解决过程</h2><p>首先, 在 change 事件中加入: $(‘.city’).empty();</p><h2 id="一次点击多次请求"><a href="#一次点击多次请求" class="headerlink" title="一次点击多次请求"></a>一次点击多次请求</h2><p>每点击一次 A 后再点击 B 都会产生比上次多一次的请求, 这是因为每次点击 A 都会让 B 绑定一个新事件, 这就导致了多一次点击就多一次请求, 并且会积累下去. 这样是很不合理的, 所以应该在为 B 注册新事件时把之前的事件注销掉.</p><p>点进 selectBindEx 可以发现里面绑定的事件名为 change, 所以只需要每次点击 A 把 B 的 change 注销掉就行</p><p>$(‘.city’).off(‘change’)</p><h1 id="select-2-的显示与隐藏"><a href="#select-2-的显示与隐藏" class="headerlink" title="select 2 的显示与隐藏"></a>select 2 的显示与隐藏</h1><blockquote><p>有些时候需要动态控制下拉框的显示与隐藏, select2 与普通的下拉框有一点区别</p></blockquote><p>普通下拉框只需要通过更改 css 来控制它的显示与隐藏, 如下:</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="string">'#select'</span>).css(<span class="string">'display'</span>, <span class="string">''</span>);<span class="comment">//显示</span></span><br><span class="line">$(<span class="string">'#select'</span>).css(<span class="string">'display'</span>, <span class="string">'none'</span>);<span class="comment">//隐藏</span></span><br></pre></td></tr></table></figure><p>而这种方法对于 select2 是无效的, 需要通过它特定的方法</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="string">'#select2'</span>)..select2().next().show();<span class="comment">//显示</span></span><br><span class="line">$(<span class="string">'#select2'</span>)..select2().next().hide();<span class="comment">//隐藏</span></span><br></pre></td></tr></table></figure><h1 id="设置-select2-为只读"><a href="#设置-select2-为只读" class="headerlink" title="设置 select2 为只读"></a>设置 select2 为只读</h1><p>官方文档里的设置方法是:</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="string">'#select'</span>).select2(<span class="string">"readonly"</span>, <span class="literal">true</span>);</span><br></pre></td></tr></table></figure><p>但试了之后并不管用(可能是二次封装的问题), 还好官方给出的禁用选项是好使的:</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="string">'#select'</span>).select2(<span class="string">"enable"</span>, <span class="literal">false</span>);</span><br></pre></td></tr></table></figure><h1 id="加载更多"><a href="#加载更多" class="headerlink" title="加载更多"></a>加载更多</h1><blockquote><p><a href="https://www.codovel.com/select2-remote-data-source-and-load-more-function-with-laravel.html" target="_blank" rel="noopener">参考链接</a></p><p><a href="https://select2.org/data-sources/ajax" target="_blank" rel="noopener">官方文档</a></p></blockquote><p>为了减轻服务器负担, 结合实际情况一般都是在下拉框加载部分内容, 当用户下拉到底还有数据没加载时再向服务器发送请求.</p><p>前端: select2 设置</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><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></pre></td><td class="code"><pre><span class="line">$(<span class="string">'#select'</span>).select2({</span><br><span class="line"> theme: <span class="string">"bootstrap"</span>,</span><br><span class="line"> language: <span class="string">"zh-CN"</span>,</span><br><span class="line"> width: <span class="string">'off'</span>,</span><br><span class="line"> placeholder: <span class="string">'请输入关键字'</span>,</span><br><span class="line"> ajax: {</span><br><span class="line"> type: <span class="string">'post/get'</span>,<span class="comment">//这里好像一定要大写, 我写小写报错了</span></span><br><span class="line"> url: <span class="string">'请求链接'</span>,</span><br><span class="line"> dataType: <span class="string">'json'</span>,</span><br><span class="line"> contentType : <span class="string">'application/json'</span>,</span><br><span class="line"> delay: <span class="number">250</span>,<span class="comment">//用户输入后延时多长才向服务器发起请求(防止过于频繁的请求)</span></span><br><span class="line"> data: <span class="function"><span class="keyword">function</span>(<span class="params">params</span>)</span>{<span class="comment">//请求参数, 根据实际情况配置</span></span><br><span class="line"> <span class="keyword">if</span>(params.term == <span class="literal">null</span>){</span><br><span class="line"> params.term = <span class="string">''</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//这一步是根据空格拆分关键字, 选做</span></span><br><span class="line"> <span class="keyword">var</span> keyword = params.term.split(<span class="regexp">/\s+/</span>);</span><br><span class="line"> <span class="keyword">var</span> param = {</span><br><span class="line"> name: keyword,<span class="comment">//关键字</span></span><br><span class="line"> <span class="comment">//后台的分页查询需要用到以下参数</span></span><br><span class="line"> pageNumber: params.page || <span class="number">1</span>,<span class="comment">//pageNumber 是给服务器的, params.page 是下拉框已载入的页数</span></span><br><span class="line"> pageSize: <span class="number">10</span>,<span class="comment">//每页大小</span></span><br><span class="line"> sortOrder: <span class="string">"asc"</span>,<span class="comment">//排序</span></span><br><span class="line"> };</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">JSON</span>.stringify(param);</span><br><span class="line"> },</span><br><span class="line"> processResults: <span class="function"><span class="keyword">function</span>(<span class="params">r, params</span>) </span>{<span class="comment">//处理返回的结果, r 是服务器返回的结果, params 就是请求参数函数中的 params</span></span><br><span class="line"> params.page = params.page || <span class="number">1</span>;<span class="comment">//暂时不知道这里为什么这写, data 里的倒是很好理解, null||1=1</span></span><br><span class="line"> <span class="keyword">var</span> itemList = [];</span><br><span class="line"> $.each(r.rows, <span class="function"><span class="keyword">function</span>(<span class="params">idx, item</span>) </span>{<span class="comment">//处理返回的数据</span></span><br><span class="line"> itemList.push({<span class="attr">id</span>: item.id, <span class="attr">text</span>: item.name});</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> results: itemList,</span><br><span class="line"> pagination: {</span><br><span class="line"> more: r.pageNo<r.totalPages<span class="comment">//返回的参数中带有当前页数和总页数, 通过比对两个页数决定是否继续加载</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> cache: <span class="literal">true</span>,</span><br><span class="line"> },</span><br><span class="line"> minimumInputLength: <span class="number">1</span><span class="comment">//最少输入字符</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html">
<blockquote>
<p><a href="https://github.com/select2/select2" target="_blank" rel="noopener">select2 github 仓库</a></p>
<p><a href="https://gitee.com/bruceouyang/dp-pro" target="_blank" rel="noopener">小林工程师 dp-pro gitee 仓库</a></p>
<p>本文所使用的 select2 由小林工程师二次封装过. </p>
</blockquote>
</summary>
<category term="javascript" scheme="http://yoursite.com/categories/javascript/"/>
<category term="js" scheme="http://yoursite.com/tags/js/"/>
<category term="select2" scheme="http://yoursite.com/tags/select2/"/>
</entry>
<entry>
<title>微信企业向个人转账</title>
<link href="http://yoursite.com/2019/04/02/wechat-mch-pay/"/>
<id>http://yoursite.com/2019/04/02/wechat-mch-pay/</id>
<published>2019-04-02T05:47:41.000Z</published>
<updated>2019-04-19T08:36:12.422Z</updated>
<content type="html"><![CDATA[<p>.XmlPullParserException: resource not found:</p><p><a href="https://blog.csdn.net/qq_41187907/article/details/79978739" target="_blank" rel="noopener">https://blog.csdn.net/qq_41187907/article/details/79978739</a></p>]]></content>
<summary type="html">
<p>.XmlPullParserException: resource not found:</p>
<p><a href="https://blog.csdn.net/qq_41187907/article/details/79978739" target="_blank"
</summary>
<category term="wechat" scheme="http://yoursite.com/tags/wechat/"/>
<category term="wechatpay" scheme="http://yoursite.com/tags/wechatpay/"/>
</entry>
<entry>
<title>mysql_log</title>
<link href="http://yoursite.com/2019/03/14/mysql-log/"/>
<id>http://yoursite.com/2019/03/14/mysql-log/</id>
<published>2019-03-14T15:58:17.000Z</published>
<updated>2019-03-14T15:58:17.509Z</updated>
<summary type="html">
</summary>
</entry>
<entry>
<title>高德地图 JS API</title>
<link href="http://yoursite.com/2019/03/11/gaodeAPI/"/>
<id>http://yoursite.com/2019/03/11/gaodeAPI/</id>
<published>2019-03-11T08:26:25.000Z</published>
<updated>2019-03-11T11:11:04.927Z</updated>
<summary type="html">
</summary>
</entry>
<entry>
<title>通过 frp 实现内网穿透</title>
<link href="http://yoursite.com/2018/09/21/how_to_use_frp/"/>
<id>http://yoursite.com/2018/09/21/how_to_use_frp/</id>
<published>2018-09-21T06:14:00.000Z</published>
<updated>2019-04-17T04:04:41.873Z</updated>
<content type="html"><![CDATA[<h2 id="1-简介"><a href="#1-简介" class="headerlink" title="1. 简介"></a>1. 简介</h2><p>frp 是一个高性能的反向代理应用, 可以用来轻松穿透内网, 对外网提供服务, 支持 tcp, http, https 等协议, 并且 web 服务支持根据域名进行路由转发. </p><blockquote><p><a href="https://github.com/fatedier/frp/blob/master/README_zh.md" target="_blank" rel="noopener">frp中文文档</a></p><p><a href="https://github.com/fatedier/frp" target="_blank" rel="noopener">frp源码</a></p><p><a href="https://github.com/fatedier/frp/releases" target="_blank" rel="noopener">frp资源地址</a></p></blockquote><a id="more"></a><h2 id="2-准备"><a href="#2-准备" class="headerlink" title="2. 准备"></a>2. 准备</h2><ol><li>一台有公网 ip 的服务器, 即非局域网内的主机</li><li>一台需要实现内网穿透的机器</li><li>( 可选项 ) 一个域名</li></ol><h2 id="3-外网服务器配置-这里我用的是Ubuntu"><a href="#3-外网服务器配置-这里我用的是Ubuntu" class="headerlink" title="3. 外网服务器配置 ( 这里我用的是Ubuntu )"></a>3. 外网服务器配置 ( 这里我用的是Ubuntu )</h2><ol><li>下载</li></ol><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">wget https://github.com/fatedier/frp/releases/download/v版本号/frp_版本号_linux_amd64.tar.gz</span><br><span class="line"></span><br><span class="line">如我用的 0.21.0 版本则链接如下:</span><br><span class="line">wget https://github.com/fatedier/frp/releases/download/v0.21.0/frp_0.21.0_linux_amd64.tar.gz</span><br><span class="line">其实到 release 中选择所需包右键复制链接也可以</span><br></pre></td></tr></table></figure><ol start="2"><li>解压</li></ol><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">tar -zxvf frp_版本号_linux_amd64.tar.gz</span><br><span class="line"></span><br><span class="line">#同时因为是服务端, 并不需要客户端的东西, 可以删除掉</span><br><span class="line">rm -f frpc</span><br><span class="line">rm -f frpc.ini</span><br></pre></td></tr></table></figure><ol start="3"><li>cd 进 frp 文件夹, 修改服务端配置文件frps.ini ( 使用vim指令修改 )</li></ol><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim fprs.ini</span><br></pre></td></tr></table></figure><blockquote><p>关于 vim 的操作找个机会看一下, 这里用到的只有 i: 输入, esc: 退出编辑模式, :wq 保存退出</p></blockquote><figure class="highlight ini"><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="section">[common]</span></span><br><span class="line"><span class="comment">#这个是 frp 服务器的运行端口号</span></span><br><span class="line"><span class="attr">bind_port</span> = <span class="number">7000</span></span><br><span class="line"><span class="comment">#这个是http访问端口号</span></span><br><span class="line"><span class="attr">whost_http_port</span> = <span class="number">8080</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 同时我们可以设置管理端口</span></span><br><span class="line"><span class="attr">dashboard_port</span> = <span class="number">7500</span></span><br><span class="line"><span class="comment"># 用户名和密码默认为admin</span></span><br><span class="line"><span class="attr">dashboard_user</span> = admin</span><br><span class="line"><span class="attr">dashboard_pwd</span> = admin</span><br></pre></td></tr></table></figure><ol start="4"><li>启动服务端</li></ol><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">./frps -c ./frps.ini</span><br></pre></td></tr></table></figure><h2 id="4-客户端-我的台式机上装的是win7"><a href="#4-客户端-我的台式机上装的是win7" class="headerlink" title="4. 客户端 ( 我的台式机上装的是win7 )"></a>4. 客户端 ( 我的台式机上装的是win7 )</h2><ol><li>下载安装, 直接从github仓库上下载对应系统并解压, 步骤与服务端的类似</li><li>配置 frpc.ini</li></ol><figure class="highlight ini"><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="section">[common]</span></span><br><span class="line"><span class="comment"># 这里填的是服务端的公网 ip</span></span><br><span class="line"><span class="attr">server_addr</span> = xxx.xxx.xxx.xxx</span><br><span class="line"><span class="comment"># 这里填的是服务端的运行端口号</span></span><br><span class="line"><span class="attr">server_port</span> = <span class="number">7000</span></span><br><span class="line"></span><br><span class="line"><span class="section">[web]</span></span><br><span class="line"><span class="attr">type</span> = http</span><br><span class="line"><span class="comment"># 这里写 web 程序所在的主机的局域网内的地址, 由于是在台式机上也就是客户端运行的就直接写本地地址127.0.0.1</span></span><br><span class="line"><span class="attr">local_ip</span> = <span class="number">127.0</span>.<span class="number">0.1</span></span><br><span class="line"><span class="comment"># 这里写 web 程序的端口</span></span><br><span class="line"><span class="attr">local_port</span> = <span class="number">8080</span></span><br><span class="line"><span class="comment"># 如果有域名,则这里写域名, 且域名要解析到服务端的ip, 如果没有域名则直接写服务端ip. 我穷人没域名就直接用写服务端公网ip</span></span><br><span class="line"><span class="attr">custom_domains</span> = xxx.xxx.xxx.xxx</span><br></pre></td></tr></table></figure><ol start="3"><li>运行</li></ol><p>在 windows 上, 不能直接双击 frpc.exe运行, 而是要像服务端一样用命令行开启.</p><p>在 frp 文件夹中摁住 shift 同时点击鼠标<u>鼠标右键</u>, 选择 “ 在此处打开命令行窗口 “, 输入 .\frpc -c .\frpc.ini (这是 window 下的， 用 \, 如果是 linux 则用 /)</p>]]></content>
<summary type="html">
<h2 id="1-简介"><a href="#1-简介" class="headerlink" title="1. 简介"></a>1. 简介</h2><p>frp 是一个高性能的反向代理应用, 可以用来轻松穿透内网, 对外网提供服务, 支持 tcp, http, https 等协议, 并且 web 服务支持根据域名进行路由转发. </p>
<blockquote>
<p><a href="https://github.com/fatedier/frp/blob/master/README_zh.md" target="_blank" rel="noopener">frp中文文档</a></p>
<p><a href="https://github.com/fatedier/frp" target="_blank" rel="noopener">frp源码</a></p>
<p><a href="https://github.com/fatedier/frp/releases" target="_blank" rel="noopener">frp资源地址</a></p>
</blockquote>
</summary>
<category term="笔记" scheme="http://yoursite.com/categories/%E7%AC%94%E8%AE%B0/"/>
<category term="TODO" scheme="http://yoursite.com/tags/TODO/"/>
<category term="博客" scheme="http://yoursite.com/tags/%E5%8D%9A%E5%AE%A2/"/>
<category term="记录" scheme="http://yoursite.com/tags/%E8%AE%B0%E5%BD%95/"/>
<category term="内网穿透" scheme="http://yoursite.com/tags/%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F/"/>
</entry>
<entry>
<title>动态更改微信小程序的背景色</title>
<link href="http://yoursite.com/2018/09/10/change-wechat-small-app-list-background-Dynamically/"/>
<id>http://yoursite.com/2018/09/10/change-wechat-small-app-list-background-Dynamically/</id>
<published>2018-09-10T13:20:42.000Z</published>
<updated>2019-04-17T04:03:11.839Z</updated>
<content type="html"><![CDATA[<blockquote><p>如题, 内容继承自 <a href="https://blog.fm7077.ml/2018/09/06/multi-list-rendering-in-wechat-small-app/" target="_blank" rel="noopener">微信小程序里的列表渲染</a></p></blockquote><a id="more"></a><ol><li>在所需动态更改背景色的列表的所属数组里添加一个 background 属性( 随意取名 )</li><li>渲染列表的 wxml 标签中添加: style=”background:;”, 同时绑定一个点击监听事件: bindtap=”tap”</li><li>js 文件中 data 添加一个变量来记录最后一个被点击的 item( 列表的某一行 ), 初始值为 -1, lastSelected: -1</li><li>监听事件里判断上一个被选中 item 是否为 -1( 即没有上一个被选中的 item ), 是的话直接修改当前 item 背景, 否则修改上一个 item 为原色, 并修改现 item 的背景色.</li><li>done</li></ol><p>demo 等有空再做, TODO+1</p>]]></content>
<summary type="html">
<blockquote>
<p>如题, 内容继承自 <a href="https://blog.fm7077.ml/2018/09/06/multi-list-rendering-in-wechat-small-app/" target="_blank" rel="noopener">微信小程序里的列表渲染</a></p>
</blockquote>
</summary>
<category term="微信小程序" scheme="http://yoursite.com/categories/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="列表" scheme="http://yoursite.com/tags/%E5%88%97%E8%A1%A8/"/>
</entry>
<entry>
<title>微信小程序列表的事件绑定-进阶</title>
<link href="http://yoursite.com/2018/09/09/wx-for-listener/"/>
<id>http://yoursite.com/2018/09/09/wx-for-listener/</id>
<published>2018-09-09T11:21:27.000Z</published>
<updated>2019-04-17T04:08:43.583Z</updated>
<content type="html"><![CDATA[<blockquote><p>需求: 小程序列表中有一按钮, 按下后对列表中某项值进行改变</p><p>即, 按下按钮后要获取按钮所在行的索引值( 所在行行数 ), 通过该值获取同行别的元素的参数</p></blockquote><a id="more"></a><h1 id="具体需求分析"><a href="#具体需求分析" class="headerlink" title="具体需求分析"></a>具体需求分析</h1><p><img src="/2018/09/09/wx-for-listener/1536495363567.png" alt="1536495363567"></p><center><font color="#999999">我的小程序截图</font></center><p>当按下 + 或 - 对应行的数量加或减1, 所以需要统一的 ‘id’ 来标识每一行.</p><h1 id="具体实现"><a href="#具体实现" class="headerlink" title="具体实现"></a>具体实现</h1><p>在官网上查到, 可以用 wx:for-index=”index”, 同时用一个参数 id=”“ 来传这个参数 来为列表绑定下标. 见以下代码第一行. 再给这个列表绑定一个事件 tap_main. 每当触碰到列表, 返回的数据都会带 id, 这就是我想要的 “行数”.</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><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="tag"><<span class="name">view</span> <span class="attr">wx:for</span>=<span class="string">"{{arrayGood}}"</span> <span class="attr">wx:for-index</span>=<span class="string">"index"</span> <span class="attr">id</span>=<span class="string">"{{index}}"</span> <span class="attr">class</span>=<span class="string">"main_lists_item"</span> <span class="attr">wx:key</span>=<span class="string">"good_name"</span> <span class="attr">bindtap</span>=<span class="string">"tap_main"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">view</span> <span class="attr">data-name</span>=<span class="string">"{{item.good_name}}"</span> <span class="attr">class</span>=<span class="string">"main_lists_name"</span>></span>{{item.good_name}}<span class="tag"></<span class="name">view</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">view</span> <span class="attr">data-name</span>=<span class="string">"{{item.unit}}"</span> <span class="attr">class</span>=<span class="string">"main_lists_unit"</span>></span>{{item.unit}}<span class="tag"></<span class="name">view</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">view</span> <span class="attr">class</span>=<span class="string">"main_lists_num"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">data-name</span>=<span class="string">"{{item.num}}"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">type</span>=<span class="string">"text"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">class</span>=<span class="string">"item_num"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">value</span>=<span class="string">"{{item.num}}"</span>></span><span class="tag"></<span class="name">input</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">src</span>=<span class="string">"/src/img/add.png"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">style</span>=<span class="string">"width: 40rpx; height: 40rpx"</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">bindtap</span>=<span class="string">"tap_add"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">class</span>=<span class="string">"item_as"</span>></span><span class="tag"></<span class="name">image</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">image</span> <span class="attr">src</span>=<span class="string">"/src/img/sub.png"</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">style</span>=<span class="string">"width: 40rpx; height: 40rpx"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">bindtap</span>=<span class="string">"tap_sub"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">class</span>=<span class="string">"item_as"</span>></span><span class="tag"></<span class="name">image</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">view</span>></span></span><br><span class="line"><span class="tag"></<span class="name">view</span>></span></span><br></pre></td></tr></table></figure><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//数组结构</span></span><br><span class="line">arrayGood: [{</span><br><span class="line"> good_name: <span class="string">'good1'</span>,</span><br><span class="line"> unit: <span class="string">'克'</span>,</span><br><span class="line"> num: <span class="number">0</span>,</span><br><span class="line"> index: <span class="number">1</span>,</span><br><span class="line">},{</span><br><span class="line"> good_name: <span class="string">'good2'</span>,</span><br><span class="line"> unit: <span class="string">'米'</span>,</span><br><span class="line"> num: <span class="number">1</span>,</span><br><span class="line"> index: <span class="number">2</span>,</span><br><span class="line">},{</span><br><span class="line"> good_name: <span class="string">'good3'</span>,</span><br><span class="line"> unit: <span class="string">'千克'</span>,</span><br><span class="line"> num: <span class="number">0.01</span>,</span><br><span class="line"> index: <span class="number">3</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">tap_main: <span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(res)</span><br><span class="line">},</span><br></pre></td></tr></table></figure><center><font color="#999999">wxml, js 代码</font></center><p><img src="/2018/09/09/wx-for-listener/1536496168283.png" alt="1536496168283"></p><center><font color="#999999">点击事件获取到的数据</font></center><p>可见获取到的 id 在 res.currentTarget.dataset.id 中.</p><p>通过这个 id 就可以来操作数组中对应位置的值了.</p>]]></content>
<summary type="html">
<blockquote>
<p>需求: 小程序列表中有一按钮, 按下后对列表中某项值进行改变</p>
<p>即, 按下按钮后要获取按钮所在行的索引值( 所在行行数 ), 通过该值获取同行别的元素的参数</p>
</blockquote>
</summary>
<category term="微信小程序" scheme="http://yoursite.com/categories/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="列表" scheme="http://yoursite.com/tags/%E5%88%97%E8%A1%A8/"/>
<category term="微信小程序" scheme="http://yoursite.com/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="监听事件" scheme="http://yoursite.com/tags/%E7%9B%91%E5%90%AC%E4%BA%8B%E4%BB%B6/"/>
</entry>
<entry>
<title>微信小程序里的列表渲染</title>
<link href="http://yoursite.com/2018/09/06/multi-list-rendering-in-wechat-small-app/"/>
<id>http://yoursite.com/2018/09/06/multi-list-rendering-in-wechat-small-app/</id>
<published>2018-09-06T07:12:59.000Z</published>
<updated>2019-04-17T04:06:34.323Z</updated>
<content type="html"><![CDATA[<blockquote><p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html" target="_blank" rel="noopener">官方文档</a></p><p>关于如何在小程序页面中添加列表, 又如何给列表里的元素添加监听事件, 如何动态刷新列表</p><p>日常吐槽一下微信小程序 翔一样的文档</p></blockquote><a id="more"></a><h1 id="基础写法"><a href="#基础写法" class="headerlink" title="基础写法"></a>基础写法</h1><p>列表最基础的写法如下:</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="comment"><!--wxml 文件--></span></span><br><span class="line"><span class="tag"><<span class="name">view</span> <span class="attr">wx:for</span>=<span class="string">"{{array}}"</span>></span></span><br><span class="line"> {{index}}: {{item.message}}</span><br><span class="line"><span class="tag"></<span class="name">view</span>></span></span><br></pre></td></tr></table></figure><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="comment">//js 文件</span></span><br><span class="line">Page({</span><br><span class="line"> data: {</span><br><span class="line"> array: [{</span><br><span class="line"> message: <span class="string">'foo'</span>,</span><br><span class="line"> }, {</span><br><span class="line"> message: <span class="string">'bar'</span></span><br><span class="line"> }]</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><img src="/2018/09/06/multi-list-rendering-in-wechat-small-app/1536218458928.png" alt="1536218458928"></p><center><font color="#999999">效果图</font></center><h1 id="多列表-顺带滚动列表"><a href="#多列表-顺带滚动列表" class="headerlink" title="多列表( 顺带滚动列表 )"></a>多列表( 顺带滚动列表 )</h1><p>主要用在侧边栏中, 一个列表展示一级目录, 另一个展示二级目录</p><p>思路: 先用两个 view 将两个 scroll-view 包起来, 主轴设置为 column</p><p>再用一个 view 把上面两个 view 包起来, 主轴设置为 row</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><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = getApp()</span><br><span class="line">Page({</span><br><span class="line"> data: {</span><br><span class="line"> arrayType: [{</span><br><span class="line"> type_name: <span class="string">'测试类型1'</span></span><br><span class="line"> },{</span><br><span class="line"> type_name: <span class="string">'测试类型2'</span>，</span><br><span class="line"> }],</span><br><span class="line"> arrayBrand:[{</span><br><span class="line"> brand_name: <span class="string">'测试品牌1'</span></span><br><span class="line"> },{</span><br><span class="line"> brand_name: <span class="string">'测试品牌2'</span></span><br><span class="line"> }],</span><br><span class="line"> },</span><br><span class="line"> tap_type: <span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>{<span class="comment">//类型菜单监听事件</span></span><br><span class="line"> <span class="built_in">console</span>.log(res)</span><br><span class="line"> },</span><br><span class="line"> tap_brand: <span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>{<span class="comment">//品牌菜单监听事件</span></span><br><span class="line"> <span class="built_in">console</span>.log(res.currentTarget.dataset.name)</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure><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><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--wxml--></span>></span><br><span class="line"><span class="tag"><<span class="name">view</span> <span class="attr">class</span>=<span class="string">"side"</span>></span><span class="comment"><!--主轴设置为 column 的 view--></span></span><br><span class="line"> <span class="tag"><<span class="name">view</span> <span class="attr">class</span>=<span class="string">"lists"</span>></span><span class="comment"><!--主轴设置为 row 的 view1--></span></span><br><span class="line"> <span class="tag"><<span class="name">scroll-view</span> <span class="attr">class</span>=<span class="string">"type"</span> <span class="attr">scroll-y</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">view</span> <span class="attr">data-name</span>=<span class="string">"{{item.brand_name}}"</span> <span class="attr">class</span>=<span class="string">"list_item"</span> <span class="attr">wx:for</span>=<span class="string">{{arrayBrand}}</span> <span class="attr">wx:key</span>=<span class="string">"brandUnique"</span>></span><span class="comment"><!--这里--></span></span><br><span class="line"> {{item.type_name}}</span><br><span class="line"> <span class="tag"></<span class="name">view</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">scroll-view</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">view</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">view</span> <span class="attr">class</span>=<span class="string">"lists"</span>></span><span class="comment"><!--主轴设置为 row 的 view2--></span></span><br><span class="line"> <span class="tag"><<span class="name">scroll-view</span> <span class="attr">class</span>=<span class="string">"brand"</span> <span class="attr">wx:for</span>=<span class="string">"{{arrayBrand}}"</span> <span class="attr">scroll-y</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">view</span> <span class="attr">data-name</span>=<span class="string">"{{item.type_name}}"</span> <span class="attr">class</span>=<span class="string">"list_item"</span> <span class="attr">wx:for</span>=<span class="string">{{arrayType}}</span> <span class="attr">wx:key</span>=<span class="string">"typeUnique"</span>></span><span class="comment"><!--还有这里--></span></span><br><span class="line"> {{item.brand_name}}</span><br><span class="line"> <span class="tag"></<span class="name">view</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">scroll-view</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">view</span>></span></span><br><span class="line"><span class="tag"></<span class="name">view</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*wxss*/</span></span><br><span class="line"><span class="selector-class">.side</span>{</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">flex-direction</span>: row;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">position</span>: fixed; </span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgb</span>(236, 236, 236);</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.lists</span>{</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">flex-direction</span>: column;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;<span class="comment">/*这里一定要设置宽度, 高度, 不然 .side 设置的 flex 无法起作用*/</span></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.type</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200</span>rpx;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(255, 255, 255, 0.76);</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">2</span>rpx solid <span class="number">#0000005b</span></span><br><span class="line"> overflow: auto;</span><br><span class="line"> <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.brand</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1000</span>rpx; <span class="comment">/*这里是本来应该用 100%, 但底部的 tabbar 会挡到, 故按需选择高度*/</span></span><br><span class="line"> <span class="attribute">width</span>: <span class="number">600</span>rpx;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgb</span>(218, 218, 218);</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">2</span>rpx solid <span class="number">#0000005b</span></span><br><span class="line"> overflow: auto;</span><br><span class="line"> <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><img src="/2018/09/06/multi-list-rendering-in-wechat-small-app/1536235452461.png" alt="1536235452461"></p><center><font color="#999999">效果图</font></center><font color="#CC3333">注意: 使用 scroll-view 时, 应该把 for 循环写在 scroll-view 所包围的 内容中( 如上面的view )</font><h1 id="关于-wx-key"><a href="#关于-wx-key" class="headerlink" title="关于 wx:key"></a>关于 wx:key</h1><blockquote><p><a href="https://www.sunzhongwei.com/wechat-small-program-use-the-wx-key-promotion-wx-for-rendering-efficiency" target="_blank" rel="noopener">参考资料</a></p><p>官方说明:</p><p>当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。</p></blockquote><p>在进行上面的测试中会遇到一个 warning: Now you can provide attr “wx:key” for a “wx:for” to improve performance.</p><h2 id="作用"><a href="#作用" class="headerlink" title="作用"></a>作用</h2><p>加快动态改变数据时 wx:for 的渲染速度</p><p>所以, 如果列表数据时静态的, 可以不理会这个 warning</p><p>而对于需要动态修改列表内容的则建议加上这个进行</p><h2 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h2><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">scroll-view</span> <span class="attr">class</span>=<span class="string">"type"</span> <span class="attr">wx:for</span>=<span class="string">"{{arrayType}}"</span> <span class="attr">wx:key</span>=<span class="string">"typeUnique"</span> <span class="attr">scroll-y</span>></span></span><br><span class="line"> {{item.id}}</span><br><span class="line"> {{item.message}}</span><br><span class="line"><span class="tag"></<span class="name">scroll-view</span>></span></span><br></pre></td></tr></table></figure><p>key 值是数组中的一个元素, 建议 key 值不重复, 否则在重新渲染的时候无法起作用( 不会使程序奔溃 ), 并报出 warning</p><p>key 值不会影响排序</p><h1 id="列表点击事件-转"><a href="#列表点击事件-转" class="headerlink" title="列表点击事件 [转]"></a>列表点击事件 [转]</h1><blockquote><p><a href="https://blog.csdn.net/Aaron121314/article/details/79370166" target="_blank" rel="noopener">微信小程序 wx:for 点击事件</a></p></blockquote><p>需求: 点击列表中某处, 获取此处的内容. 常用于像上面展示的菜单.</p><p>为了实现这个内容, 需要在 scroll-view 中嵌套一个 view 以精确获取点击位置的值</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><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">scroll-view</span> <span class="attr">class</span>=<span class="string">"type"</span> <span class="attr">wx:for</span>=<span class="string">"{{arrayType}}"</span> <span class="attr">wx:key</span>=<span class="string">"typeUnique"</span> <span class="attr">scroll-y</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">view</span> <span class="attr">bindtap</span>=<span class="string">"tap_type"</span> <span class="attr">data-name</span>=<span class="string">"{{item.message}}"</span>></span></span><br><span class="line"> {{item.message}}</span><br><span class="line"> <span class="tag"></<span class="name">view</span>></span></span><br><span class="line"><span class="tag"></<span class="name">scroll-view</span>></span></span><br></pre></td></tr></table></figure><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">tap_type: <span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(res)</span><br><span class="line">},</span><br></pre></td></tr></table></figure><p>返回的值在 res.currentTarget.dataset.name 中</p><p><img src="/2018/09/06/multi-list-rendering-in-wechat-small-app/1536298100512.png" alt="1536298100512"></p><center><font color="#999999">web 应用返回的数据</font></center><h2 id="动态刷新列表"><a href="#动态刷新列表" class="headerlink" title="动态刷新列表"></a>动态刷新列表</h2><p>首先, 需要一个数据源, 这里直接从本地另一个 web 应用取</p><p>在 data 中初始化数据时就不需要赋值了, 声明一下就可以( 也可以按照需要赋值 )</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><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">data{</span><br><span class="line"> arrayType: [],</span><br><span class="line">},</span><br><span class="line">onLoad: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">const</span> that = <span class="keyword">this</span>;</span><br><span class="line"> wx.request({</span><br><span class="line"> url: app.globalData.serverAddress + <span class="string">'/wechat/goods/getTypes'</span>,</span><br><span class="line"> method: <span class="string">'POST'</span>,</span><br><span class="line"> header: {</span><br><span class="line"> <span class="string">'content-type'</span>: <span class="string">'application/x-www-form-urlencoded'</span></span><br><span class="line"> },</span><br><span class="line"> success: <span class="function"><span class="keyword">function</span> (<span class="params">res</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(res.data.types)</span><br><span class="line"> that.setData({<span class="comment">//这里点到 types 就可以了, 这样才是一个 array</span></span><br><span class="line"> arrayType: res.data.types</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><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><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">scroll-view</span> <span class="attr">class</span>=<span class="string">"type"</span> <span class="attr">scroll-y</span>></span></span><br><span class="line"> <span class="comment"><!--这里要注意, data-name 要改成传回来的数据对应的 key 名, 可变内容也一样--></span></span><br><span class="line"> <span class="tag"><<span class="name">view</span> <span class="attr">bindtap</span>=<span class="string">"tap_type"</span> <span class="attr">data-name</span>=<span class="string">"{{item.type_name}}"</span> <span class="attr">wx:for</span>=<span class="string">"{{arrayType}}"</span> <span class="attr">wx:key</span>=<span class="string">"typeUnique"</span>></span></span><br><span class="line"> {{item.type_name}}</span><br><span class="line"> <span class="tag"></<span class="name">view</span>></span></span><br><span class="line"><span class="tag"></<span class="name">scroll-view</span>></span></span><br></pre></td></tr></table></figure><p><img src="/2018/09/06/multi-list-rendering-in-wechat-small-app/1536320119439.png" alt="1536320119439"></p><center><font color="#999999">web 应用的数据</font></center><p><img src="/2018/09/06/multi-list-rendering-in-wechat-small-app/1536320336910.png" alt="1536320336910"></p><center><font color="#999999">效果图</font></center>]]></content>
<summary type="html">
<blockquote>
<p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html" target="_blank" rel="noopener">官方文档</a></p>
<p>关于如何在小程序页面中添加列表, 又如何给列表里的元素添加监听事件, 如何动态刷新列表</p>
<p>日常吐槽一下微信小程序 翔一样的文档</p>
</blockquote>
</summary>
<category term="微信小程序" scheme="http://yoursite.com/categories/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="列表" scheme="http://yoursite.com/tags/%E5%88%97%E8%A1%A8/"/>
<category term="微信小程序" scheme="http://yoursite.com/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<category term="wx:key" scheme="http://yoursite.com/tags/wx-key/"/>
<category term="scroll-view" scheme="http://yoursite.com/tags/scroll-view/"/>
</entry>
</feed>