-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
2095 lines (1088 loc) · 193 KB
/
Copy pathindex.html
File metadata and controls
2095 lines (1088 loc) · 193 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html class="theme-next pisces use-motion">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.0.1" rel="stylesheet" type="text/css" />
<meta name="keywords" content="Hexo, NexT" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.1" />
<meta property="og:type" content="website">
<meta property="og:title" content="暖色调">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="暖色调">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="暖色调">
<script type="text/javascript" id="hexo.configuration">
var NexT = window.NexT || {};
var CONFIG = {
scheme: 'Pisces',
sidebar: {"position":"left","display":"post"},
fancybox: true,
motion: true,
duoshuo: {
userId: 0,
author: '博主'
}
};
</script>
<link rel="canonical" href="http://yoursite.com/"/>
<title> 暖色调 </title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container one-collumn sidebar-position-left
page-home
">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">暖色调</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">Every little helps</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
分类
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
关于
</a>
</li>
<li class="menu-item menu-item-search">
<a href="#" class="popup-trigger">
<i class="menu-item-icon fa fa-search fa-fw"></i> <br />
搜索
</a>
</li>
</ul>
<div class="site-search">
<div class="popup">
<span class="search-icon fa fa-search"></span>
<input type="text" id="local-search-input">
<div id="local-search-result"></div>
<span class="popup-btn-close">close</span>
</div>
</div>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/10/10/基于wepy框架的微信小程序开发/" itemprop="url">
基于wepy框架的微信小程序开发
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time itemprop="dateCreated" datetime="2018-10-10T11:34:53+08:00" content="2018-10-10">
2018-10-10
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/前端技术/" itemprop="url" rel="index">
<span itemprop="name">前端技术</span>
</a>
</span>
</span>
<span class="post-comments-count">
|
<a href="/2018/10/10/基于wepy框架的微信小程序开发/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2018/10/10/基于wepy框架的微信小程序开发/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="wepy-housekeeper"><a href="#wepy-housekeeper" class="headerlink" title="wepy-housekeeper"></a>wepy-housekeeper</h1><p>微信小程序–你的个人生活管家</p>
<blockquote>
<p>本项目基于wepy框架搭建了用于记录生活的微信小程序，使用了微信运动、天气、图片轮播、redux数据管理、云函数云数据库及云存储等特性。首先简要介绍原生微信语法及wepy框架，然后依次对以上使用到的技术进行说明。</p>
</blockquote>
<h4 id="一、微信小程序原生语法"><a href="#一、微信小程序原生语法" class="headerlink" title="一、微信小程序原生语法"></a>一、微信小程序原生语法</h4><h5 id="1、应用结构"><a href="#1、应用结构" class="headerlink" title="1、应用结构"></a>1、应用结构</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">project</span><br><span class="line">├── pages</span><br><span class="line">| ├── index</span><br><span class="line">| | ├── index.js index 页面逻辑</span><br><span class="line">| | ├── index.json index 页面配置</span><br><span class="line">| | ├── index.wxml index 页面结构</span><br><span class="line">| | └── index.wxss index 页面样式</span><br><span class="line">| └── log</span><br><span class="line">| ├── log.js log 页面逻辑</span><br><span class="line">| ├── log.json log 页面配置</span><br><span class="line">| ├── log.wxml log 页面结构</span><br><span class="line">| └── log.wxss log 页面样式</span><br><span class="line">├── app.js 小程序逻辑</span><br><span class="line">├── app.json 小程序公共配置</span><br><span class="line">└── app.wxss 小程序公共样式</span><br></pre></td></tr></table></figure>
<h5 id="2、循环列表"><a href="#2、循环列表" class="headerlink" title="2、循环列表"></a>2、循环列表</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"</span><br><span class="line">wx:key="unique"></span><br><span class="line"> {{idx}}: {{itemName.message}}</span><br><span class="line"></view></span><br></pre></td></tr></table></figure>
<p>wx:for-item 可以指定数组当前元素的变量名，默认值：item</p>
<p>wx:for-index 可以指定数组当前下标的变量名，默认值：index</p>
<p>wx:key 代表唯一值的属性，如果item是数字，使用 wx:key=”*this”</p>
<h5 id="3、条件渲染"><a href="#3、条件渲染" class="headerlink" title="3、条件渲染"></a>3、条件渲染</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><view wx:if="{{length > 5}}"> 1 </view></span><br><span class="line"><view wx:elif="{{length > 2}}"> 2 </view></span><br><span class="line"><view wx:else> 3 </view></span><br></pre></td></tr></table></figure>
<h5 id="4、事件"><a href="#4、事件" class="headerlink" title="4、事件"></a>4、事件</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4"></view></span><br></pre></td></tr></table></figure>
<p>bind:（冒泡阶段）<br>catch:（冒泡阶段）将取消冒泡阶段；<br>capture-bind:（捕获阶段）<br>capture-catch:（捕获阶段）将中断捕获阶段和取消冒泡阶段。</p>
<h5 id="5、引用"><a href="#5、引用" class="headerlink" title="5、引用"></a>5、引用</h5><figure class="highlight plain"><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"><import src="item.wxml"/></span><br><span class="line"><include src="header.wxml"/></span><br></pre></td></tr></table></figure>
<p>import:只会 import 目标文件中定义的 template<br>include:将目标文件代码拷贝到include位置</p>
<h5 id="6、数据绑定"><a href="#6、数据绑定" class="headerlink" title="6、数据绑定"></a>6、数据绑定</h5><p>this.setData({title: ‘this is title’});</p>
<h4 id="二、wepy框架简介"><a href="#二、wepy框架简介" class="headerlink" title="二、wepy框架简介"></a>二、wepy框架简介</h4><h5 id="1、应用结构-1"><a href="#1、应用结构-1" class="headerlink" title="1、应用结构"></a>1、应用结构</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">project</span><br><span class="line">└── src</span><br><span class="line"> ├── pages</span><br><span class="line"> | ├── index.wpy index 页面逻辑、配置、结构、样式</span><br><span class="line"> | └── log.wpy log 页面逻辑、配置、结构、样式</span><br><span class="line"> └──app.wpy 小程序逻辑、公共配置、公共样式</span><br></pre></td></tr></table></figure>
<h5 id="2、app-wpy"><a href="#2、app-wpy" class="headerlink" title="2、app.wpy"></a>2、app.wpy</h5><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></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"><span class="keyword">import</span> wepy <span class="keyword">from</span> <span class="string">'wepy'</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="keyword">extends</span> <span class="title">wepy</span>.<span class="title">app</span> </span>{</span><br><span class="line"> config = {</span><br><span class="line"> <span class="string">"pages"</span>:[</span><br><span class="line"> <span class="string">"pages/index/index"</span></span><br><span class="line"> ],</span><br><span class="line"> <span class="string">"window"</span>:{</span><br><span class="line"> <span class="string">"backgroundTextStyle"</span>: <span class="string">"light"</span>,</span><br><span class="line"> <span class="string">"navigationBarBackgroundColor"</span>: <span class="string">"#fff"</span>,</span><br><span class="line"> <span class="string">"navigationBarTitleText"</span>: <span class="string">"WeChat"</span>,</span><br><span class="line"> <span class="string">"navigationBarTextStyle"</span>: <span class="string">"black"</span></span><br><span class="line"> },</span><br><span class="line"> <span class="string">"tabBar"</span>: { </span><br><span class="line"> <span class="string">"list"</span>: [] <span class="comment">//导航栏</span></span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> onLaunch() {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>);</span><br><span class="line"> }</span><br><span class="line"> globalData = {} <span class="comment">//全局数据</span></span><br><span class="line">}</span><br><span class="line"><<span class="regexp">/script></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"><style lang="less"></span></span><br><span class="line"><span class="regexp">/</span>** less **<span class="regexp">/</span></span><br><span class="line"><span class="regexp"></</span>style></span><br></pre></td></tr></table></figure>
<h5 id="3、page-wpy"><a href="#3、page-wpy" class="headerlink" title="3、page.wpy"></a>3、page.wpy</h5><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></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"><span class="keyword">import</span> wepy <span class="keyword">from</span> <span class="string">'wepy'</span>;</span><br><span class="line"><span class="keyword">import</span> Counter <span class="keyword">from</span> <span class="string">'../components/counter'</span>; <span class="comment">//自定义组件</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">Page</span> <span class="keyword">extends</span> <span class="title">wepy</span>.<span class="title">page</span> </span>{</span><br><span class="line"> config = {}; <span class="comment">// 页面的配置项</span></span><br><span class="line"> components = {<span class="attr">counter1</span>: Counter};</span><br><span class="line"></span><br><span class="line"> data = {}; <span class="comment">// 用于渲染的数据，template中直接使用，script中this.xx</span></span><br><span class="line"> computed = {}; <span class="comment">// 声明计算属性</span></span><br><span class="line"> watch = {}; <span class="comment">// 声明数据watcher</span></span><br><span class="line"> methods = {};<span class="comment">// wxml事件处理函数对象</span></span><br><span class="line"></span><br><span class="line"> events = {}; <span class="comment">// 用于监听组件之间的通信与交互事件的事件处理函数</span></span><br><span class="line"> onLoad() {}; <span class="comment">// 生命周期函数</span></span><br><span class="line"> <span class="comment">// Other properties / 普通自定义方法 / 自定义数据</span></span><br><span class="line">}</span><br><span class="line"><<span class="regexp">/script></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"><template lang="wxml"></span></span><br><span class="line"><span class="regexp"> <view></span></span><br><span class="line"><span class="regexp"> </</span>view></span><br><span class="line"> <counter1></counter1></span><br><span class="line"><<span class="regexp">/template></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"><style lang="less"></span></span><br><span class="line"><span class="regexp">/</span>** less **<span class="regexp">/</span></span><br><span class="line"><span class="regexp"></</span>style></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></pre></td><td class="code"><pre><span class="line">注意点：</span><br><span class="line"><span class="number">1</span>、<span class="keyword">this</span>.$parent来访问App实例</span><br><span class="line"><span class="number">2</span>、循环</span><br><span class="line"> <!-- 注意，使用<span class="keyword">for</span>属性，而不是使用wx:<span class="keyword">for</span>属性 --></span><br><span class="line"> <repeat <span class="keyword">for</span>=<span class="string">"{{list}}"</span> key=<span class="string">"index"</span> index=<span class="string">"index"</span> item=<span class="string">"item"</span>></span><br><span class="line"> <<span class="regexp">/repeat></span></span><br><span class="line"><span class="regexp"> </span></span><br><span class="line"><span class="regexp">3、事件绑定语法</span></span><br><span class="line"><span class="regexp"> bindtap="click" => @tap="click"</span></span><br><span class="line"><span class="regexp"> catchtap="click" => @tap.stop="click"</span></span><br><span class="line"><span class="regexp"> capture-bind:tap="click" => @tap.capture="click"</span></span><br><span class="line"><span class="regexp"> capture-catch:tap="click" => @tap.capture.stop="click"</span></span><br><span class="line"><span class="regexp"> </span></span><br><span class="line"><span class="regexp">4、数据绑定</span></span><br><span class="line"><span class="regexp"> this.title = 'this is title';</span></span><br><span class="line"><span class="regexp"> this.$apply();</span></span><br></pre></td></tr></table></figure>
<h4 id="三、项目解析"><a href="#三、项目解析" class="headerlink" title="三、项目解析"></a>三、项目解析</h4><p><img src="https://636c-cloud-demo-1110d2-1257658184.tcb.qcloud.la/app.png?sign=95927e838e6eecd74265f6972b0221d2&t=1539077533" alt="image"></p>
<h5 id="1、微信运动"><a href="#1、微信运动" class="headerlink" title="1、微信运动"></a>1、微信运动</h5><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></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 登录</span><br><span class="line"> <span class="keyword">async</span> getUserInfo(cb) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span>.globalData.userInfo) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">this</span>.globalData.userInfo;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> login = <span class="keyword">await</span> wepy.login();</span><br><span class="line"> <span class="keyword">const</span> res = <span class="keyword">await</span> wepy.getUserInfo();</span><br><span class="line"> <span class="keyword">const</span> userInfo = {...login, ...res.userInfo};</span><br><span class="line"> <span class="keyword">this</span>.globalData.userInfo = userInfo;</span><br><span class="line"> cb && cb(userInfo);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"><span class="number">2.</span> 获取微信运动数据（加密数据）</span><br><span class="line"> <span class="keyword">let</span> result = <span class="keyword">await</span> wepy.getWeRunData();</span><br><span class="line"><span class="number">3.</span> 解密数据</span><br><span class="line"> <span class="number">3.1</span> 调用https:<span class="comment">//api.weixin.qq.com/sns/jscode2session 接口获取openid及session_key</span></span><br><span class="line"> <span class="number">3.2</span> 调用云函数获取到解密后的微信步数</span><br><span class="line"> wx.cloud.callFunction({</span><br><span class="line"> name: <span class="string">'getRunData'</span>, <span class="comment">// 云函数名称</span></span><br><span class="line"> data: { <span class="comment">// 传给云函数的参数</span></span><br><span class="line"> encryptedData: data.encryptedData,</span><br><span class="line"> iv: data.iv,</span><br><span class="line"> session_key: res.data.session_key</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> <span class="number">3.3</span> 云函数</span><br><span class="line"> <span class="keyword">const</span> cloud = <span class="built_in">require</span>(<span class="string">'wx-server-sdk'</span>)</span><br><span class="line"> <span class="keyword">const</span> WXBizDataCrypt = <span class="built_in">require</span>(<span class="string">'WXBizDataCrypt.js'</span>);</span><br><span class="line"> <span class="keyword">const</span> AppId = <span class="string">'wxf6c91f679a67b89c'</span>;</span><br><span class="line"> cloud.init();</span><br><span class="line"> <span class="comment">// 云函数入口函数</span></span><br><span class="line"> exports.main = <span class="keyword">async</span> (event, context) => {</span><br><span class="line"> <span class="keyword">var</span> pc = <span class="keyword">new</span> WXBizDataCrypt(AppId, event.session_key);</span><br><span class="line"> <span class="keyword">return</span> pc.decryptData(event.encryptedData, event.iv);</span><br><span class="line"> };</span><br><span class="line"><span class="number">4.</span> 获取最后一天的步数</span><br><span class="line"> <span class="keyword">const</span> stepList = res.result.stepInfoList;</span><br><span class="line"> <span class="keyword">const</span> last = stepList[stepList.length - <span class="number">1</span>];</span><br><span class="line"> <span class="keyword">this</span>.lastDayStep = last.step;</span><br></pre></td></tr></table></figure>
<h5 id="2、定位及地理编码"><a href="#2、定位及地理编码" class="headerlink" title="2、定位及地理编码"></a>2、定位及地理编码</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>、定位，得到经纬度</span><br><span class="line"> <span class="keyword">const</span> res = <span class="keyword">await</span> wepy.getLocation();</span><br><span class="line"> <span class="keyword">const</span> latitude = res.latitude;<span class="comment">//纬度</span></span><br><span class="line"> <span class="keyword">const</span> longitude = res.longitude;<span class="comment">//经度</span></span><br><span class="line"><span class="number">2</span>、调用百度地图API进行地理编码</span><br><span class="line"> https:<span class="comment">//api.map.baidu.com/geocoder/v2/</span></span><br></pre></td></tr></table></figure>
<h5 id="3、图片轮播"><a href="#3、图片轮播" class="headerlink" title="3、图片轮播"></a>3、图片轮播</h5><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></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>、图片上传到云存储管理</span><br><span class="line"><span class="number">2</span>、将图片地址列表放到easyMock里</span><br><span class="line"><span class="number">3</span>、请求数据</span><br><span class="line"> <span class="keyword">let</span> result = <span class="keyword">await</span> wepy.request(<span class="keyword">this</span>.$parent.globalData.apiHost + <span class="string">'/banner/list'</span>);</span><br><span class="line"> <span class="keyword">let</span> urls = <span class="keyword">await</span> wx.cloud.getTempFileURL({</span><br><span class="line"> fileList: result.data.data</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">this</span>.banners = urls.fileList;</span><br><span class="line"><span class="number">4</span>、加载图片</span><br><span class="line"> <swiper</span><br><span class="line"> <span class="class"><span class="keyword">class</span></span>=<span class="string">"swiper_box"</span> </span><br><span class="line"> autoplay=<span class="string">"{{autoplay}}"</span></span><br><span class="line"> interval=<span class="string">"{{interval}}"</span></span><br><span class="line"> duration=<span class="string">"{{duration}}"</span></span><br><span class="line"> @change=<span class="string">"swiperchange"</span></span><br><span class="line"> ></span><br><span class="line"> <repeat <span class="keyword">for</span>=<span class="string">"{{banners}}"</span> key=<span class="string">"fileID"</span>></span><br><span class="line"> <swiper-item></span><br><span class="line"> <image</span><br><span class="line"> src=<span class="string">"{{item.tempFileURL}}"</span></span><br><span class="line"> <span class="class"><span class="keyword">class</span></span>=<span class="string">"slide-image"</span></span><br><span class="line"> width=<span class="string">"750rpx"</span></span><br><span class="line"> height=<span class="string">"400rpx"</span></span><br><span class="line"> /></span><br><span class="line"> <<span class="regexp">/swiper-item></span></span><br><span class="line"><span class="regexp"> </</span>repeat></span><br><span class="line"> <<span class="regexp">/swiper></span></span><br></pre></td></tr></table></figure>
<h5 id="4、天气、redux–组建间数据共享"><a href="#4、天气、redux–组建间数据共享" class="headerlink" title="4、天气、redux–组建间数据共享"></a>4、天气、redux–组建间数据共享</h5><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></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>、reducer</span><br><span class="line"></span><br><span class="line"> <span class="keyword">export</span> <span class="keyword">default</span> handleActions({</span><br><span class="line"> [GET_WEATHER] (state, action) {</span><br><span class="line"> <span class="keyword">const</span> data = action.payload.data.HeWeather5[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">const</span> weather = data.now;</span><br><span class="line"> <span class="keyword">const</span> weatherQuality = data.aqi;</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> ...state,</span><br><span class="line"> weather,</span><br><span class="line"> weatherQuality</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }, {</span><br><span class="line"> weather: {},</span><br><span class="line"> weatherQuality: {}</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"><span class="number">2</span>、action</span><br><span class="line"></span><br><span class="line"> <span class="keyword">export</span> <span class="keyword">const</span> getWeather = createAction(GET_WEATHER, <span class="keyword">async</span> city => {</span><br><span class="line"> <span class="keyword">const</span> url = <span class="string">"https://free-api.heweather.com/v5/weather"</span>;</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">await</span> wepy.request(<span class="string">`<span class="subst">${url}</span>?city=<span class="subst">${city}</span>&key=4a555d4d1adc451d8ceeaa73869c9519`</span>);</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"><span class="number">3</span>、组件内使用</span><br><span class="line"> <span class="keyword">import</span> { connect } <span class="keyword">from</span> <span class="string">'wepy-redux'</span>;</span><br><span class="line"></span><br><span class="line"> @connect({</span><br><span class="line"> weather(state) {</span><br><span class="line"> <span class="keyword">return</span> state.weather.weather;</span><br><span class="line"> },</span><br><span class="line"> weatherQuality(state) {</span><br><span class="line"> <span class="keyword">return</span> state.weather.weatherQuality;</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> getWeather,</span><br><span class="line"> getOpenId</span><br><span class="line"> })</span><br><span class="line"> <span class="comment">// 使用state xxx</span></span><br><span class="line"> <span class="comment">// 使用action this.methods.xxx()</span></span><br></pre></td></tr></table></figure>
<h5 id="5、写日记（云函数云数据库及云存储）"><a href="#5、写日记（云函数云数据库及云存储）" class="headerlink" title="5、写日记（云函数云数据库及云存储）"></a>5、写日记（云函数云数据库及云存储）</h5><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><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></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>、选择位置</span><br><span class="line"> <span class="keyword">const</span> res = <span class="keyword">await</span> wepy.chooseLocation();</span><br><span class="line"> <span class="keyword">this</span>.address = res.address;</span><br><span class="line"> <span class="keyword">this</span>.longitude = res.longitude;</span><br><span class="line"> <span class="keyword">this</span>.latitude = res.latitude;</span><br><span class="line"><span class="number">2</span>、日期选择器</span><br><span class="line"> <picker <span class="class"><span class="keyword">class</span></span>=<span class="string">"item-content"</span> mode=<span class="string">"date"</span> value=<span class="string">"{{date}}"</span> @change=<span class="string">"bindDateChange"</span>></span><br><span class="line"> <view <span class="class"><span class="keyword">class</span></span>=<span class="string">"weui-input"</span>>{{date}}<<span class="regexp">/view></span></span><br><span class="line"><span class="regexp"> </</span>picker></span><br><span class="line"><span class="number">3</span>、使用redux获取天气数据</span><br><span class="line"><span class="number">4</span>、图片选择及预览</span><br><span class="line"> <span class="keyword">async</span> chooseImage() {</span><br><span class="line"> <span class="keyword">const</span> res = <span class="keyword">await</span> wepy.chooseImage({</span><br><span class="line"> sourceType: [<span class="string">'camera'</span>, <span class="string">'album'</span>],</span><br><span class="line"> sizeType: [<span class="string">'compressed'</span>, <span class="string">'original'</span>],</span><br><span class="line"> count: <span class="number">9</span></span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">this</span>.imageList = res.tempFilePaths;</span><br><span class="line"> },</span><br><span class="line"> previewImage(e) {</span><br><span class="line"> <span class="keyword">const</span> current = e.target.dataset.src;</span><br><span class="line"> wx.previewImage({</span><br><span class="line"> current,</span><br><span class="line"> urls: <span class="keyword">this</span>.imageList</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"><span class="number">5</span>、提交数据（云存数、云函数、云数据库）</span><br><span class="line"> <span class="keyword">const</span> requsets = <span class="keyword">this</span>.imageList.map(<span class="function"><span class="params">tempFilePath</span> =></span> wepy.saveFile({tempFilePath})); <span class="comment">// 云存储</span></span><br><span class="line"> <span class="built_in">Promise</span>.all(requsets).then(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> <span class="keyword">const</span> imgs = u.pluck(res, <span class="string">'savedFilePath'</span>);</span><br><span class="line"> <span class="keyword">const</span> data = {...};</span><br><span class="line"> wx.cloud.callFunction({ <span class="comment">// 云函数</span></span><br><span class="line"> name: <span class="string">'addDiary'</span>,</span><br><span class="line"> data</span><br><span class="line"> }).then(<span class="function"><span class="params">()</span> =></span> <span class="keyword">this</span>.resetFormData());</span><br><span class="line"> });</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 云函数中的内容</span></span><br><span class="line"> cloud.init();</span><br><span class="line"> <span class="keyword">const</span> db = cloud.database();</span><br><span class="line"> exports.main = <span class="keyword">async</span> (event, context) => {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">await</span> db.collection(<span class="string">'diary'</span>).add({</span><br><span class="line"> data: {<span class="comment">// data 字段表示需新增的 JSON 数据}</span></span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">catch</span>(e) {</span><br><span class="line"> <span class="built_in">console</span>.error(e)</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p><img src="https://636c-cloud-demo-1110d2-1257658184.tcb.qcloud.la/add.png?sign=31096efdc765e188dd51f3272a2d327e&t=1539138862" alt="image"></p>
<h5 id="6、查看日记（云函数云数据库及云存储）"><a href="#6、查看日记（云函数云数据库及云存储）" class="headerlink" title="6、查看日记（云函数云数据库及云存储）"></a>6、查看日记（云函数云数据库及云存储）</h5><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></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>、分页加载数据</span><br><span class="line"> onReachBottom() { <span class="comment">// 拉到页面最低端触发，请求下一页数据</span></span><br><span class="line"> <span class="keyword">this</span>.curPage += <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">this</span>.getDiaryList(<span class="literal">true</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> onPullDownRefresh() { <span class="comment">// 拉到页面最上面触发，刷新数据</span></span><br><span class="line"> <span class="keyword">this</span>.curPage = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">this</span>.getDiaryList();</span><br><span class="line"> }</span><br><span class="line"><span class="number">2</span>、获取数据列表（通过云函数）</span><br><span class="line"> cloud.init();</span><br><span class="line"> <span class="keyword">const</span> db = cloud.database()</span><br><span class="line"> exports.main = <span class="keyword">async</span> (event, context) => {</span><br><span class="line"> <span class="keyword">const</span> skipNum = <span class="built_in">parseInt</span>((event.page - <span class="number">1</span>) * event.pageSize);</span><br><span class="line"> <span class="keyword">const</span> limitNum = <span class="built_in">parseInt</span>(event.pageSize);</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">await</span> db.collection(<span class="string">'diary'</span>)</span><br><span class="line"> .where({</span><br><span class="line"> userid: event.userid</span><br><span class="line"> })</span><br><span class="line"> .skip(skipNum)</span><br><span class="line"> .limit(limitNum)</span><br><span class="line"> .get();</span><br><span class="line"> };</span><br></pre></td></tr></table></figure>
<p><img src="https://636c-cloud-demo-1110d2-1257658184.tcb.qcloud.la/diary1.png?sign=bb7a5d53fb94afc53c4c3787716b6c22&t=1539079231/w/240" alt="image"></p>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/10/10/阿里大于短信服务/" itemprop="url">
短信服务
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time itemprop="dateCreated" datetime="2018-10-10T11:24:41+08:00" content="2018-10-10">
2018-10-10
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/后台/" itemprop="url" rel="index">
<span itemprop="name">后台</span>
</a>
</span>
</span>
<span class="post-comments-count">
|
<a href="/2018/10/10/阿里大于短信服务/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2018/10/10/阿里大于短信服务/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="方法一：阿里大于API，需要企业账号登录。"><a href="#方法一：阿里大于API，需要企业账号登录。" class="headerlink" title="方法一：阿里大于API，需要企业账号登录。"></a>方法一：<a href="http://www.alidayu.com/" target="_blank" rel="noopener">阿里大于API</a>，需要企业账号登录。</h1><p>alibaba.aliqin.ta.sms.num.send (短信发送)</p>
<p>第一步：注册账号。<br><img src="http://i4.piimg.com/567571/cebe1364637a5706.png" alt=""></p>
<p>第二步：创建短信签名和短信模板。<br><img src="http://i4.piimg.com/567571/12bea83b47e59536.png" alt=""></p>
<p>第三步：创建应用。<br><img src="http://i4.piimg.com/567571/bc212d014bf85e91.png" alt=""></p>
<p>第四步：下载SDK。<br><img src="http://i4.piimg.com/567571/63dc8583d27568f9.png" alt=""></p>
<p>第五步：调用接口。<br><figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">header(<span class="string">"Content-type: text/html; charset=utf-8"</span>);</span><br><span class="line"><span class="keyword">include</span> <span class="string">"TopSdk.php"</span>;</span><br><span class="line"><span class="keyword">include</span> <span class="string">"top/TopClient.php"</span>;</span><br><span class="line">date_default_timezone_set(<span class="string">'Asia/Shanghai'</span>); </span><br><span class="line"></span><br><span class="line">$c = <span class="keyword">new</span> TopClient;</span><br><span class="line">$c->appkey = <span class="string">"23270934"</span>;</span><br><span class="line">$c->secretKey = <span class="string">"******"</span>;</span><br><span class="line">$req = <span class="keyword">new</span> AlibabaAliqinFcSmsNumSendRequest;</span><br><span class="line">$req->setExtend(<span class="string">"123"</span>);</span><br><span class="line">$req->setSmsType(<span class="string">"normal"</span>);</span><br><span class="line">$req->setSmsFreeSignName(<span class="string">"三林镇建设项目"</span>);</span><br><span class="line">$req->setSmsParam(<span class="string">'{"product":"xiaoming","code":"987"}'</span>);</span><br><span class="line">$req->setRecNum(<span class="string">"13262208625"</span>);</span><br><span class="line">$req->setSmsTemplateCode(<span class="string">"SMS_2570065"</span>);</span><br><span class="line">$resp = $c->execute($req);</span><br></pre></td></tr></table></figure></p>
<h1 id="方法二：阿里百川API。"><a href="#方法二：阿里百川API。" class="headerlink" title="方法二：阿里百川API。"></a>方法二：阿里百川API。</h1><p><a href="http://baichuan.taobao.com/doc2/detail?spm=0.0.0.0.o6kDjh&treeId=42&articleId=103193&docType=1" target="_blank" rel="noopener">http://baichuan.taobao.com/doc2/detail?spm=0.0.0.0.o6kDjh&treeId=42&articleId=103193&docType=1</a><br>taobao.open.sms.sendmsg (发送短信)<br><img src="http://i4.piimg.com/567571/39428cbd71895ec7.png" alt=""></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><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></pre></td><td class="code"><pre><span class="line">header(<span class="string">"Content-type: text/html; charset=utf-8"</span>);</span><br><span class="line"><span class="keyword">include</span> <span class="string">"TopSdk.php"</span>;</span><br><span class="line"><span class="keyword">include</span> <span class="string">"top/TopClient.php"</span>;</span><br><span class="line">date_default_timezone_set(<span class="string">'Asia/Shanghai'</span>); </span><br><span class="line"></span><br><span class="line">$callback = <span class="keyword">isset</span>($_GET[<span class="string">'callback'</span>]) ? trim($_GET[<span class="string">'callback'</span>]) : <span class="string">''</span>;</span><br><span class="line">$name = <span class="keyword">isset</span>($_GET[<span class="string">'name'</span>]) ? trim($_GET[<span class="string">'name'</span>]) : <span class="string">'mm'</span>;</span><br><span class="line">$con = <span class="keyword">isset</span>($_GET[<span class="string">'con'</span>]) ? trim($_GET[<span class="string">'con'</span>]) : <span class="string">'wuuu'</span>;</span><br><span class="line">$mobile_num = <span class="keyword">isset</span>($_GET[<span class="string">'mobile_num'</span>]) ? trim($_GET[<span class="string">'mobile_num'</span>]) : <span class="string">'13262208625'</span>;</span><br><span class="line"></span><br><span class="line">$c = <span class="keyword">new</span> TopClient;</span><br><span class="line">$c->appkey = <span class="string">"23270857"</span>;</span><br><span class="line">$c->secretKey = <span class="string">"******"</span>;</span><br><span class="line">$req = <span class="keyword">new</span> OpenSmsSendmsgRequest;</span><br><span class="line">$send_message_request = <span class="keyword">new</span> SendMessageRequest;</span><br><span class="line">$send_message_request->template_id=<span class="string">"879"</span>;</span><br><span class="line">$send_message_request->signature_id=<span class="string">"795"</span>;</span><br><span class="line">$send_message_request->context=json_decode(<span class="string">"{\"name\":\""</span>.$name.<span class="string">"\",\"con\":\""</span>.$con.<span class="string">"\"}"</span>);</span><br><span class="line">$send_message_request->mobile=$mobile_num;</span><br><span class="line"></span><br><span class="line">$req->setSendMessageRequest(json_encode($send_message_request));</span><br><span class="line">$resp = $c->execute($req);</span><br><span class="line"></span><br><span class="line">$date = <span class="string">'success'</span>;</span><br><span class="line">$tmp= json_encode($date); <span class="comment">//json 数据</span></span><br><span class="line"><span class="keyword">echo</span> $callback . <span class="string">'('</span> . $tmp .<span class="string">')'</span>; <span class="comment">//返回格式，必需</span></span><br></pre></td></tr></table></figure>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/10/10/现代web前端开发工具和流程/" itemprop="url">
现代web前端开发工具和流程
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time itemprop="dateCreated" datetime="2018-10-10T11:24:40+08:00" content="2018-10-10">
2018-10-10
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/前端技术/" itemprop="url" rel="index">
<span itemprop="name">前端技术</span>
</a>
</span>
</span>
<span class="post-comments-count">
|
<a href="/2018/10/10/现代web前端开发工具和流程/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2018/10/10/现代web前端开发工具和流程/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="1-版本控制"><a href="#1-版本控制" class="headerlink" title="1.版本控制"></a>1.版本控制</h1><ul>
<li><strong>SVN</strong> </li>
<li><strong>GIT</strong><br>推荐使用git，git安装和图形化界面tortoiseGit安装，<a href="http://www.cnblogs.com/peterzd/archive/2012/04/22/2465230.html" target="_blank" rel="noopener">git与github联系</a>不在本文的讨论范围，请自行搜索。<br>在github中新建一个项目<br>在本地使用图形Git–>git clone<br>或者使用命令：<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">git clone git:<span class="comment">//github.com/someone/some_project.git</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>文件夹就是我们的项目文件夹。</p>
<h1 id="2-前端自动化"><a href="#2-前端自动化" class="headerlink" title="2.前端自动化"></a>2.前端自动化</h1><ul>
<li><strong><a href="http://www.gulpjs.com.cn/" target="_blank" rel="noopener">gulp</a></strong></li>
<li><strong><a href="http://www.gruntjs.net/" target="_blank" rel="noopener">grunt</a></strong></li>
</ul>
<h2 id="2-1-gulp"><a href="#2-1-gulp" class="headerlink" title="2.1 gulp"></a>2.1 <a href="http://www.gulpjs.com.cn/" target="_blank" rel="noopener">gulp</a></h2><p>Gulp通过流和代码优于配置策略来尽量简化任务编写的工作。当使用流时，Gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。</p>
<h3 id="2-1-1-安装命令行工具"><a href="#2-1-1-安装命令行工具" class="headerlink" title="2.1.1 安装命令行工具"></a>2.1.1 安装命令行工具</h3><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">npm install -g gulp</span><br></pre></td></tr></table></figure>
<h3 id="2-1-2-创建好package-json文件（包管理文件）-安装局部gulp"><a href="#2-1-2-创建好package-json文件（包管理文件）-安装局部gulp" class="headerlink" title="2.1.2 创建好package.json文件（包管理文件）,安装局部gulp"></a>2.1.2 创建好package.json文件（包管理文件）,安装局部gulp</h3><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">npm install --save-dev gulp</span><br></pre></td></tr></table></figure>
<p>下载的包会存放在项目的node_modules文件夹下<br>包依赖会加入到<code>package.json</code>中:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"devDependencies"</span>: {</span><br><span class="line"> <span class="string">"gulp"</span>: <span class="string">"^3.9.1"</span></span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p>
<h3 id="2-1-3-新建gulpfile-js文件"><a href="#2-1-3-新建gulpfile-js文件" class="headerlink" title="2.1.3 新建gulpfile.js文件"></a>2.1.3 新建gulpfile.js文件</h3><h4 id="四个主要API"><a href="#四个主要API" class="headerlink" title="四个主要API"></a>四个主要API</h4><ul>
<li>gulp.task(name[, deps], fn)：注册任务</li>
<li>gulp.src(globs[, options])：指明源文件路径</li>
<li>gulp.dest(path)：指明任务处理后的目标输出路径</li>
<li>gulp.watch(glob[, options], tasks)／gulp.watch(glob[, options, cb])：监视文件的变化并运行相应的任务。</li>
</ul>
<p>实例见<code>3.2 在gulpfile.js中配置</code>。</p>
<h3 id="2-1-4-运行"><a href="#2-1-4-运行" class="headerlink" title="2.1.4 运行"></a>2.1.4 运行</h3><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">gulp</span><br></pre></td></tr></table></figure>
<h2 id="2-2-grunt"><a href="#2-2-grunt" class="headerlink" title="2.2 grunt"></a>2.2 <a href="http://www.gruntjs.net/" target="_blank" rel="noopener">grunt</a></h2><h3 id="2-2-1-安装-grunt-cli"><a href="#2-2-1-安装-grunt-cli" class="headerlink" title="2.2.1 安装 grunt-cli"></a>2.2.1 安装 grunt-cli</h3><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">npm install grunt-cli -g</span><br></pre></td></tr></table></figure>
<h3 id="2-2-2-配置grunt"><a href="#2-2-2-配置grunt" class="headerlink" title="2.2.2 配置grunt"></a>2.2.2 配置grunt</h3><p>在项目中添加两份文件：package.json 和 Gruntfile。</p>
<ul>
<li>package.json //项目自动化所依赖的相关插件。</li>
<li>Gruntfile.js //项目自动化工作流配置文件。</li>
</ul>
<h4 id="安装Grunt-和-grunt插件"><a href="#安装Grunt-和-grunt插件" class="headerlink" title="安装Grunt 和 grunt插件"></a>安装Grunt 和 grunt插件</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install grunt --save-dev</span><br><span class="line">npm install grunt-contrib-jshint --save-dev</span><br></pre></td></tr></table></figure>
<h4 id="配置Gruntfile-js文件"><a href="#配置Gruntfile-js文件" class="headerlink" title="配置Gruntfile.js文件"></a>配置Gruntfile.js文件</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><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><br><span class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">grunt</span>) </span>{</span><br><span class="line"> <span class="comment">// Project configuration.</span></span><br><span class="line"> grunt.initConfig({</span><br><span class="line"> pkg: grunt.file.readJSON(<span class="string">'package.json'</span>),</span><br><span class="line"> uglify: {</span><br><span class="line"> options: {</span><br><span class="line"> banner: <span class="string">'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'</span></span><br><span class="line"> },</span><br><span class="line"> build: {</span><br><span class="line"> src: <span class="string">'src/<%= pkg.name %>.js'</span>,</span><br><span class="line"> dest: <span class="string">'build/<%= pkg.name %>.min.js'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 加载包含 "uglify" 任务的插件。</span></span><br><span class="line"> grunt.loadNpmTasks(<span class="string">'grunt-contrib-uglify'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 默认被执行的任务列表。</span></span><br><span class="line"> grunt.registerTask(<span class="string">'default'</span>, [<span class="string">'uglify'</span>]);</span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<h3 id="2-2-3-运行"><a href="#2-2-3-运行" class="headerlink" title="2.2.3 运行"></a>2.2.3 运行</h3><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">grunt</span><br></pre></td></tr></table></figure>
<h1 id="3-SASS"><a href="#3-SASS" class="headerlink" title="3.SASS"></a>3.SASS</h1><p>‘CSS预处理器’，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。</p>
<h2 id="3-1-安装"><a href="#3-1-安装" class="headerlink" title="3.1 安装"></a>3.1 安装</h2><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">npm install --save-dev gulp-sass</span><br><span class="line">npm install --save-dev gulp-watch</span><br></pre></td></tr></table></figure>
<p><code>gulp-sass</code>是用来将SASS转化为CSS的，<code>gulp-watch</code>是用来观察文件修改的变化<br>我们来看<code>package.json</code>文件的变化<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"devDependencies"</span>: {</span><br><span class="line"> <span class="string">"gulp"</span>:<span class="string">"^3.9.1"</span>,</span><br><span class="line"> <span class="string">"gulp-sass"</span>:<span class="string">"^2.3.1"</span>,</span><br><span class="line"> <span class="string">"gulp-watch"</span>:<span class="string">"^4.3.6"</span>,</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
<h2 id="3-2-在gulpfile-js-中配置"><a href="#3-2-在gulpfile-js-中配置" class="headerlink" title="3.2 在gulpfile.js 中配置"></a>3.2 在<code>gulpfile.js</code> 中配置</h2><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></pre></td><td class="code"><pre><span class="line"><span class="meta">'use strict'</span>;</span><br><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"><span class="keyword">var</span> sass = <span class="built_in">require</span>(<span class="string">'gulp-sass'</span>);</span><br><span class="line"><span class="keyword">var</span> path = {</span><br><span class="line"> sass_isstudy:<span class="string">'./modules/istudy/sass/'</span>,</span><br><span class="line">};</span><br><span class="line">gulp.task(<span class="string">'default'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// 将你的默认的任务代码放在这</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'sass'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> gulp.src(path.sass_isstudy+<span class="string">'*.scss'</span>)</span><br><span class="line"> .pipe(sass.sync().on(<span class="string">'error'</span>, sass.logError))</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./modules/istudy/css'</span>));</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'sass:watch'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> gulp.watch(path.sass_isstudy+<span class="string">'*.scss'</span>, [<span class="string">'sass'</span>]);</span><br><span class="line"> <span class="comment">// gulp.watch('./modules/istudy/sass/*.scss').on('change',livereload);</span></span><br><span class="line">}); <span class="comment">//监控sass变化</span></span><br></pre></td></tr></table></figure>
<h2 id="3-3-命令执行"><a href="#3-3-命令执行" class="headerlink" title="3.3 命令执行"></a>3.3 命令执行</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp sass:watch</span><br></pre></td></tr></table></figure>
<p>执行上诉命令，在sass文件修改、保存后，gulp就会将sass文件转化为css文件</p>
<h1 id="4-模块化编程"><a href="#4-模块化编程" class="headerlink" title="4.模块化编程"></a>4.模块化编程</h1><p>具体参见文章【javascript模块化编程】</p>
<h2 id="4-1-ES5时代"><a href="#4-1-ES5时代" class="headerlink" title="4.1 ES5时代"></a>4.1 <strong>ES5时代</strong></h2><p>以seajs为例：<br>CMD(Custom Module Definition)通用模块加载</p>
<h3 id="4-1-1-seajs"><a href="#4-1-1-seajs" class="headerlink" title="4.1.1 seajs"></a>4.1.1 seajs</h3><p><strong>引入seajs文件</strong><br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"../../common/jsext/sea-debug.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></p>
<p><strong>seajs 的简单配置</strong><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">seajs.config({</span><br><span class="line"> base: <span class="string">"../sea-modules/"</span>,</span><br><span class="line"> alias: {</span><br><span class="line"> <span class="string">"jquery"</span>: <span class="string">"jquery/jquery/1.10.1/jquery.js"</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">seajs.use(<span class="string">"../static/hello/src/main"</span>);<span class="comment">//入口</span></span><br></pre></td></tr></table></figure></p>
<p><strong>定义模块：</strong><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 所有模块都通过 define 来定义</span></span><br><span class="line">define(<span class="function"><span class="keyword">function</span>(<span class="params">require, exports, module</span>) </span>{</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 通过 require 引入依赖</span></span><br><span class="line"> <span class="keyword">var</span> $ = <span class="built_in">require</span>(<span class="string">'jquery'</span>);</span><br><span class="line"> <span class="keyword">var</span> Spinning = <span class="built_in">require</span>(<span class="string">'./spinning'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 通过 exports 对外提供接口</span></span><br><span class="line"> exports.doSomething = ...</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 或者通过 module.exports 提供整个接口</span></span><br><span class="line"> <span class="built_in">module</span>.exports = ...</span><br><span class="line"></span><br><span class="line">});</span><br></pre></td></tr></table></figure></p>
<h2 id="4-2-ES6时代"><a href="#4-2-ES6时代" class="headerlink" title="4.2 ES6时代"></a>4.2 <strong>ES6时代</strong></h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//bar.js</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">hello</span>(<span class="params">who</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">"hello "</span>+who;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> {hello};</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></pre></td><td class="code"><pre><span class="line"><span class="comment">//foo.js</span></span><br><span class="line"><span class="keyword">import</span> {hello} <span class="keyword">from</span> <span class="string">"bar"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> name = <span class="string">"zs"</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">awe</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(bar.hello(name).toUpperCase());</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> {awe};</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></pre></td><td class="code"><pre><span class="line"><span class="comment">//baz.js</span></span><br><span class="line"><span class="keyword">import</span> {bar} <span class="keyword">from</span> <span class="string">"bar"</span>;</span><br><span class="line"><span class="keyword">import</span> {foo} <span class="keyword">from</span> <span class="string">"foo"</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(bar.hello(<span class="string">'张三'</span>));<span class="comment">//hello 张三</span></span><br><span class="line"></span><br><span class="line">foo.awe();<span class="comment">//HELLO ZS</span></span><br></pre></td></tr></table></figure>
<p>当然现在需要使用babel转成es5，并且要使用打包工具browserify webpack rollup 等才能直接在现在的浏览器上运行。</p>
<h1 id="5-组件化"><a href="#5-组件化" class="headerlink" title="5.组件化"></a>5.组件化</h1><p>组件化的思路是将一个模块独立开来，比如要写一个选择器按钮，将其分为三层：</p>
<p> 数据层：用来决定按钮个数以及按钮是否选择<br> 表现层：按钮使用现有的ui组件<br> 逻辑层：按钮事件等逻辑处理</p>
<p>参考阅读：</p>
<ul>
<li><a href="http://blog.csdn.net/sunboy_2050/article/details/7529022" target="_blank" rel="noopener">Git 常用命令详解</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2012/06/sass.html" target="_blank" rel="noopener">SASS用法指南-阮一峰</a></li>
<li><a href="http://www.w3cplus.com/" target="_blank" rel="noopener">SASS入门</a></li>
<li>[阮一峰-es6入门]（<a href="http://es6.ruanyifeng.com/）" target="_blank" rel="noopener">http://es6.ruanyifeng.com/）</a></li>
</ul>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/10/10/热力图实现原理/" itemprop="url">
热力图实现原理
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time itemprop="dateCreated" datetime="2018-10-10T11:24:39+08:00" content="2018-10-10">
2018-10-10
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/项目总结/" itemprop="url" rel="index">
<span itemprop="name">项目总结</span>
</a>
</span>
</span>
<span class="post-comments-count">
|
<a href="/2018/10/10/热力图实现原理/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2018/10/10/热力图实现原理/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p><img src="http://i4.piimg.com/567571/b2fbd101d3f5b5bd.jpg" alt=""></p>
<h1 id="1-使用方法"><a href="#1-使用方法" class="headerlink" title="1 使用方法"></a>1 使用方法</h1><p>1）实例化一个热力图图层，传入图层ID号，并将其添加到地图上：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> heatmapLayer = <span class="keyword">new</span> gEcnu.Layer.Heatmap(<span class="string">'heatmapLayer'</span>);</span><br><span class="line">map.addLayer(heatmapLayer);</span><br></pre></td></tr></table></figure></p>
<p>2）为热力图添加数据：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> point = {</span><br><span class="line"> x: worldPoint.x, <span class="comment">//点的x坐标</span></span><br><span class="line"> y: worldPoint.y, <span class="comment">//点的y坐标</span></span><br><span class="line"> value: val, <span class="comment">//数值大小，最后表现为该点的颜色值</span></span><br><span class="line"> radius: radius <span class="comment">//该点的半径大小</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> data = { </span><br><span class="line"> max: max, <span class="comment">//数据中的最大值</span></span><br><span class="line"> data: [point,point,point...] <span class="comment">//其中point为每一个数据点</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.heatmapLayer.setData(data);</span><br></pre></td></tr></table></figure></p>
<h1 id="2-基本思路"><a href="#2-基本思路" class="headerlink" title="2 基本思路"></a>2 基本思路</h1><p>利用 HTML5 提供的 Canvas API的createRadialGradient方法对每个点绘制出渐变圆形，再使用drawImage方法绘制到一个画布上；创建一个宽为256px,高为1px的矩形，利用createLinearGradient方法对其进行填色；<br><img src="http://i1.piimg.com/567571/a257fb493cca451d.png" alt=""><br>最后根据画布上每个点的透明度判读该点使用的颜色，透明度的值越大，颜色越红，值越小，颜色越蓝。</p>
<h1 id="3-热力图的实现"><a href="#3-热力图的实现" class="headerlink" title="3 热力图的实现"></a>3 热力图的实现</h1><h2 id="3-1-插件形式的写法"><a href="#3-1-插件形式的写法" class="headerlink" title="3.1 插件形式的写法"></a>3.1 插件形式的写法</h2><h3 id="3-1-1-支持模块化环境"><a href="#3-1-1-支持模块化环境" class="headerlink" title="3.1.1 支持模块化环境"></a>3.1.1 支持模块化环境</h3><p>通过写成自执行匿名函数的形式，并将变量名、作用域以及函数主体以参数的形式传入。判读当前处于什么模式，如果符合CMD规范，就使用module.exports的形式导出；如果符合AMD规范，就使用define()的形式导出；若都不满足，则在传入的作用域中添加一个以传入的变量名为键名的属性，值为传入的函数体的执行结果。</p>
<h3 id="3-1-2-闭包的写法"><a href="#3-1-2-闭包的写法" class="headerlink" title="3.1.2 闭包的写法"></a>3.1.2 闭包的写法</h3><p>将不必对外暴露的函数和变量放在闭包中，转变为私有变量。通过这种方式，外部无法改变私有变量的值，保证变量不会被篡改。</p>
<h3 id="3-1-3-在文件开头加上分号"><a href="#3-1-3-在文件开头加上分号" class="headerlink" title="3.1.3 在文件开头加上分号"></a>3.1.3 在文件开头加上分号</h3><p>保证文件在被合并压缩时不会发生错误。因为文件的开头就是一对括号，在文件合并时，若上一个文件的最后是一个函数，就会产生直接执行该函数的结果，导致意想不到的错误，因此在文件的最开头初加上分号，防止错误的发生。<br><img src="http://i1.piimg.com/567571/1220aa985f356fc1.png" alt=""></p>
<h2 id="3-2-数据管理"><a href="#3-2-数据管理" class="headerlink" title="3.2 数据管理"></a>3.2 数据管理</h2><h3 id="3-2-1-数据存储"><a href="#3-2-1-数据存储" class="headerlink" title="3.2.1 数据存储"></a>3.2.1 数据存储</h3><p>改变传入数据的形式，将每个点的值value和半径radius都保存在一个二维数组中，第一维为点的x左边，第二维为点的y坐标，这样便于比较传入的数据与已经存储的数据，若传入的数据点中有点的x坐标和y坐标都相同的情况，则将该点的值累加。</p>
<h3 id="3-2-2-追加数据"><a href="#3-2-2-追加数据" class="headerlink" title="3.2.2 追加数据"></a>3.2.2 追加数据</h3><p>可以向Store中追加数据，若数据点不止一个，而是以数组的形式传入，则递归处理数据。若传入数据的值小于原来数据的最大值，则在Canvas中追加绘制该点的图形；反之若大于最大值，则需要重新绘制整个Canvas的内容。</p>
<h2 id="3-3-数据渲染"><a href="#3-3-数据渲染" class="headerlink" title="3.3 数据渲染"></a>3.3 数据渲染</h2><h3 id="3-3-1-预渲染"><a href="#3-3-1-预渲染" class="headerlink" title="3.3.1 预渲染"></a>3.3.1 预渲染</h3><p>由于数据量较大，将每个点绘制到画布时会导致频繁的重绘，因此考虑使用一个与目标Canvas画布同等大小且不可见的画布。由于离屏Canvas是不可见的，在DOM解析时，并不会对其进行渲染，只有将其再绘制到可见的目标画布上，才会解析样式进行渲染，因此绘制每一个点时都将其绘制到离屏画布中。</p>
<h3 id="3-3-2-绘制每个数据点的黑白渐变圆"><a href="#3-3-2-绘制每个数据点的黑白渐变圆" class="headerlink" title="3.3.2 绘制每个数据点的黑白渐变圆"></a>3.3.2 绘制每个数据点的黑白渐变圆</h3><p>创建一个临时的Canvas 画布，画布的宽和高都设置为半径值的2倍。根据数据点的半径值，以及模糊数，绘制一个矩形，矩形的大小等于画布的大小。并利用Canvas API的createRadialGradient方法绘制渐变圆，设置渐变圆的起点颜色为黑色，终点颜色为白色，对矩形进行填充，填充的结果如图所示。对于不同的模糊数，生成的渐变圆效果有所不同，如图左边的渐变圆模糊数blur为0.15，左边的渐变圆模糊数blur为0.8，在系统中我们将其设置为0.15。<br><img src="http://i4.piimg.com/567571/56ba43b2761a9966.jpg" alt=""> </p>
<p>根据每个点的value在最小值与最大值之间的百分比，设置预渲染画布的透明度，并使用drawImage方法将每一个点的数据绘制到预渲染画布中，最后得到如下的效果：<br><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">shadowCtx.globalAlpha = (value-min)/(max-min);</span><br><span class="line">shadowCtx.drawImage(tpl, rectX, rectY);</span><br></pre></td></tr></table></figure></p>
<p><img src="http://i4.piimg.com/567571/1f7cea12f9002334.png" alt=""></p>
<h3 id="3-3-3-创建颜色模板"><a href="#3-3-3-创建颜色模板" class="headerlink" title="3.3.3 创建颜色模板"></a>3.3.3 创建颜色模板</h3><p>在一个临时的Canvas 画布中，将画布的宽设置为256px,高设置为1px，同时绘制一个同等大小的矩形，利用createLinearGradient方法创建一条线性颜色渐变对其进行填色，使用Canvas API的getImageData方法得到ImageData对象，该对象的data属性中存放着每个点的R（红色）G（绿色）B（蓝色）A（透明度）信息，因此我们得到的data的长度为256*4=1024，每四个元素对应一个点的信息。如图前四个元素对应第一个蓝色像素点的信息。<br><img src="http://i1.piimg.com/567571/a257fb493cca451d.png" alt=""></p>
<h3 id="3-3-4-着色"><a href="#3-3-4-着色" class="headerlink" title="3.3.4 着色"></a>3.3.4 着色</h3><p>对预渲染画布着色，并将其绘制到可见Canvas画布中。同样使用getImageData方法得到预渲染画布的ImageData对象，取得data属性中每隔4个元素的值，即每个点的透明度。依据该值，以及颜色模板，对该点着色，若该点的值为0则赋为第一个点的颜色蓝色，若该点的值为255，则赋为最后一个点的颜色红色。将该点的RGBA属性设置为对应颜色的RGBA属性。<br>修改完成后，使用Canvas API的putImageData方法，将预渲染画布中的内容绘制到可见画布上。<br><img src="http://i4.piimg.com/567571/7d289451dae4bac4.png" alt=""></p>
<h1 id="4-与ccgis平台的对接"><a href="#4-与ccgis平台的对接" class="headerlink" title="4 与ccgis平台的对接"></a>4 与ccgis平台的对接</h1><h2 id="4-1-热力图层"><a href="#4-1-热力图层" class="headerlink" title="4.1 热力图层"></a>4.1 热力图层</h2><p>构造热力图层，继承自要素图层，初始化时将该图层的oClass属性设置为heatmapLayer<br><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">gEcnu.Layer.Heatmap = gEcnu.Layer.Feature.extend();</span><br></pre></td></tr></table></figure></p>
<p>当将其添加到地图时，使用gHeatmap.create创建热力图。添加数据时，先对数据进行预处理，将传入的世界坐标转为屏幕坐标。缩放地图时，每一个数据点的半径也要相应缩放，因此对半径乘以缩放系数。<br>传入要素集时，首先取得视窗范围内的要素，并将每个要素的坐标转换为屏幕坐标，最后使用setData方法添加到图层中。</p>
<h1 id="5-改进计划"><a href="#5-改进计划" class="headerlink" title="5 改进计划"></a>5 改进计划</h1><p>目前使用随机数作为模拟数据，进一步可以考虑应用到真实数据中。</p>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/10/10/数据抓取/" itemprop="url">
后台php实现数据实时抓取
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time itemprop="dateCreated" datetime="2018-10-10T11:24:38+08:00" content="2018-10-10">
2018-10-10
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/后台/" itemprop="url" rel="index">
<span itemprop="name">后台</span>
</a>
</span>
</span>
<span class="post-comments-count">
|
<a href="/2018/10/10/数据抓取/#comments" itemprop="discussionUrl">
<span class="post-comments-count ds-thread-count" data-thread-key="2018/10/10/数据抓取/" itemprop="commentsCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="1、设置参数"><a href="#1、设置参数" class="headerlink" title="1、设置参数"></a>1、设置参数</h1><p>date_default_timezone_set(“Asia/Shanghai”); //使得程序能够定时运行；<br>ignore_user_abort(); //即使Client断开(如关掉浏览器)，PHP脚本也可以继续执行；<br>set_time_limit(0); //执行时间为无限制，php默认执行时间是30秒，可以让程序无限制的执行下去；<br>$interval=60*60; // 每隔一小时运行一次</p>
<h1 id="2、定时数据抓取"><a href="#2、定时数据抓取" class="headerlink" title="2、定时数据抓取"></a>2、定时数据抓取</h1><p>在无限循环语句中，首先利用函数从url获取数据,然后将数据插入到数据库中（本文选用mysql数据库），最后使用sleep()函数设置等待一段时间后再进入下一次循环。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">do</span>{ </span><br><span class="line"></span><br><span class="line"> <span class="comment">/**********利用函数从url获取数据***************/</span></span><br><span class="line"> $json = GetCurl(<span class="string">"http://www.pm25.in/api/querys/<all_cities class="</span> <span class="string">"></all_cities>json?token=jzxqS2qpsYU3bRhkEjey"</span>); <span class="comment">//json数据文件</span></span><br><span class="line"> </span><br><span class="line"> <span class="comment">/**********把上述数据插入数据库****************/</span></span><br><span class="line"> $con = mysql_connect(<span class="string">"localhost"</span>,<span class="string">"root"</span>,<span class="string">""</span>);<span class="comment">//连接数据库</span></span><br><span class="line"> set_time_limit(<span class="number">0</span>);<span class="comment">//设置永远不超时</span></span><br><span class="line"> mysql_select_db(<span class="string">"airquality_db"</span>,$con);<span class="comment">//选择数据库</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"> sleep($interval); </span><br><span class="line"> </span><br><span class="line">}<span class="keyword">while</span>(<span class="literal">true</span>);</span><br></pre></td></tr></table></figure>
<p>从url中获取数据的函数如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">GetCurl</span>(<span class="params">$url</span>)</span>{</span><br><span class="line"> set_time_limit(<span class="number">0</span>);<span class="comment">//设置永远不超时</span></span><br><span class="line"> $curl = curl_init();</span><br><span class="line"> curl_setopt($curl,CURLOPT_RETURNTRANSFER,<span class="number">1</span>);<span class="comment">//获取url数据作为变量存储，设置为1或true</span></span><br><span class="line"> curl_setopt($curl,CURLOPT_URL, $url);</span><br><span class="line"> <span class="comment">//模拟用户使用的浏览器，在HTTP请求中包含一个"user-agent"头的字符串。</span></span><br><span class="line"> curl_setopt($curl,CURLOPT_USERAGENT, $_SERVER[<span class="string">'HTTP_USER_AGENT'</span>]);</span><br><span class="line"> $resp = curl_exec($curl);<span class="comment">//运行curl，请求网页</span></span><br><span class="line"> $json = json_decode($resp,<span class="literal">true</span>);</span><br><span class="line"> curl_close($curl);<span class="comment">//关闭curl请求</span></span><br><span class="line"> <span class="keyword">return</span> $json;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p>
<h1 id="3、数据抓取的网站"><a href="#3、数据抓取的网站" class="headerlink" title="3、数据抓取的网站"></a>3、数据抓取的网站</h1><h2 id="空气质量"><a href="#空气质量" class="headerlink" title="空气质量"></a>空气质量</h2><p><a href="http://www.pm25.in/api/querys/all_cities.json?token=jzxqS2qpsYU3bRhkEjey" target="_blank" rel="noopener">http://www.pm25.in/api/querys/all_cities.json?token=jzxqS2qpsYU3bRhkEjey</a></p>
<h2 id="气象"><a href="#气象" class="headerlink" title="气象"></a>气象</h2><p><a href="http://api.openweathermap.org/data/2.5/group?id=1796236,1799397,1808926,1799962,1790645&units=metric&APPID=94506fa9256f37bd13eae4126beb7d8d&lang=zh_cn" target="_blank" rel="noopener">http://api.openweathermap.org/data/2.5/group?id=1796236,1799397,1808926,1799962,1790645&units=metric&APPID=94506fa9256f37bd13eae4126beb7d8d&lang=zh_cn</a><br>Id代表城市，APPID代表密钥，lang代表语言。<br>更新时间好像是我自己测的，我让它每隔半小时获取一次，然后看到数据大约是一小时一次。</p>
<h1 id="4、存在问题"><a href="#4、存在问题" class="headerlink" title="4、存在问题"></a>4、存在问题</h1><p>数据抓取过程中发生断开连接现象(即循环过程中断)，需要重新运行PHP文件进行抓取。</p>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/10/10/在线地图配准实现原理/" itemprop="url">
在线地图配准实现原理
</a>
</h1>