-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
447 lines (215 loc) · 137 KB
/
search.xml
File metadata and controls
447 lines (215 loc) · 137 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
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Vue 项目迁移支付宝小程序</title>
<link href="/2019/06/16/DhD8NUszU5shbfEAkH/"/>
<url>/2019/06/16/DhD8NUszU5shbfEAkH/</url>
<content type="html"><![CDATA[<h5 id="公司近期急需上线一个支付宝小程序-和前段时间上线的H5保持一致-H5采用Vue开发-因项目周期太赶-只有一周时间-从项目立项-开发-联调-测试-上线-所有大部分代码采用复制粘贴的方式-记录一些开发过程中的酸甜苦辣"><a href="#公司近期急需上线一个支付宝小程序-和前段时间上线的H5保持一致-H5采用Vue开发-因项目周期太赶-只有一周时间-从项目立项-开发-联调-测试-上线-所有大部分代码采用复制粘贴的方式-记录一些开发过程中的酸甜苦辣" class="headerlink" title="公司近期急需上线一个支付宝小程序,和前段时间上线的H5保持一致,H5采用Vue开发,因项目周期太赶,只有一周时间,从项目立项,开发,联调,测试,上线.所有大部分代码采用复制粘贴的方式.记录一些开发过程中的酸甜苦辣."></a>公司近期急需上线一个支付宝小程序,和前段时间上线的H5保持一致,H5采用Vue开发,因项目周期太赶,只有一周时间,从项目立项,开发,联调,测试,上线.所有大部分代码采用复制粘贴的方式.记录一些开发过程中的酸甜苦辣.</h5><a id="more"></a><h4 id="与微信小程序差异"><a href="#与微信小程序差异" class="headerlink" title="与微信小程序差异"></a>与微信小程序差异</h4><blockquote><p>支付宝小程序是第一次接触,先简单介绍一些和微信小程序的差异对比</p></blockquote><ul><li>JS API 命名空间不同</li></ul><figure class="highlight ini"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">wx.navigateTo</span> => my.navigateTo</span><br></pre></td></tr></table></figure><ul><li>绑定事件从bind改为on开头，并且采用驼峰形式</li></ul><figure class="highlight ini"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">bindchange</span>=<span class="string">"event"</span> => <span class="literal">on</span>Change=<span class="string">"event"</span></span><br></pre></td></tr></table></figure><ul><li>if 和 for语句写法不同</li></ul><figure class="highlight groovy"><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="string">wx:</span><span class="keyword">if</span> => <span class="string">a:</span><span class="keyword">if</span></span><br><span class="line"><span class="string">wx:</span><span class="keyword">for</span> => <span class="string">a:</span><span class="keyword">for</span></span><br><span class="line"><span class="string">wx:</span>key => <span class="string">a:</span>key</span><br><span class="line"><span class="string">wx:</span><span class="keyword">for</span>-item => <span class="string">a:</span><span class="keyword">for</span>-item</span><br><span class="line"><span class="string">wx:</span><span class="keyword">for</span>-index => <span class="string">a:</span><span class="keyword">for</span>-index</span><br><span class="line"><span class="comment">// 另外支付宝还增加了一个key属性，key 是比 a:key 更通用的写法，里面可以填充任意表达式和字符串。在 for 中使用 key 来提高性能。</span></span><br></pre></td></tr></table></figure><ul><li>JS API 方法名调整</li></ul><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></pre></td><td class="code"><pre><span class="line">wx.request() => my.httpRequest() <span class="comment">// 网络请求</span></span><br><span class="line">wx.login() => my.getAuthCode() <span class="comment">// 用户登陆获取授权码</span></span><br><span class="line">wx.showModal() => my.confirm() <span class="comment">// 确认框</span></span><br><span class="line">wx.getUserInfo() => my.getAuthUserInfo() <span class="comment">// 获取用户信息</span></span><br><span class="line">wx.requestPayment() => my.tradePay() <span class="comment">// 支付</span></span><br><span class="line">wx.saveImageToPhotosAlbum() => my.saveImage() <span class="comment">// 保存在线图片</span></span><br><span class="line">wx.setNavigationBarTitle() => my.setNavigationBar() <span class="comment">//导航栏标题</span></span><br><span class="line">wx.setNavigationBarColor() => my.setNavigationBar() <span class="comment">//导航栏颜色</span></span><br><span class="line">wx.getClipboardData() => my.getClipboard() <span class="comment">//获取剪贴板数据</span></span><br><span class="line">wx.setClipboardData() => my.setClipboard() <span class="comment">//设置剪贴板数据</span></span><br><span class="line">wx.scanCode() => my.scan() <span class="comment">// 扫一扫</span></span><br><span class="line"></span><br><span class="line">更多请查阅官方文档</span><br></pre></td></tr></table></figure><ul><li>支付宝多了一个更高性能设置数据的方法 <code>spliceData</code></li></ul><figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$spliceData({</span><br><span class="line"><span class="string">'a.b'</span>:[<span class="number">1</span>,<span class="number">0</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h4 id="从Vue中迁移-vue-gt-小程序"><a href="#从Vue中迁移-vue-gt-小程序" class="headerlink" title="从Vue中迁移 vue => 小程序"></a>从Vue中迁移 vue => 小程序</h4><p>1, HTML 替换标签</p><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></pre></td><td class="code"><pre><span class="line"><span class="attr">span</span> => text</span><br><span class="line"><span class="attr">img</span> => image</span><br><span class="line"><span class="attr">div</span> => view // 常用的块元素都替换成view</span><br><span class="line"><span class="attr">template</span> => block</span><br></pre></td></tr></table></figure><p>2, CSS,因在vue中使用了scss,所以需转换成css到小程序中, 并替换对应的标签选择器,如p,ul,li改用其他的选择器</p><p>3, 模板语法替换</p><figure class="highlight stylus"><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="comment">// 条件渲染</span></span><br><span class="line"><<span class="selector-tag">div</span> v-<span class="keyword">if</span>=<span class="string">"data == 1"</span>> => <view <span class="selector-tag">a</span>:<span class="keyword">if</span>=<span class="string">"{{data == 1}}"</span>></span><br><span class="line"></span><br><span class="line"><span class="comment">//列表渲染</span></span><br><span class="line"><<span class="selector-tag">div</span> v-<span class="keyword">for</span>=<span class="string">"(item,index) in List"</span>> => <view <span class="selector-tag">a</span>:<span class="keyword">for</span>=<span class="string">"{{List}}"</span>></span><br><span class="line"></span><br><span class="line"><span class="comment">// 数据绑定</span></span><br><span class="line"><<span class="selector-tag">div</span> :id=<span class="string">"data"</span>> => <view id=<span class="string">"{{data}}"</span>></span><br><span class="line"></span><br><span class="line"><span class="comment">// 事件绑定</span></span><br><span class="line"><<span class="selector-tag">div</span> @click=<span class="string">"event"</span>> => <view onTap=<span class="string">"event"</span>></span><br><span class="line"></span><br><span class="line"><span class="comment">// 路由调整</span></span><br><span class="line"><router-link :to=<span class="string">"{name:'other-page',query:{some-data:data}}"</span>> =></span><br><span class="line"><navigator url=<span class="string">"../other-page?some-data={{data}}"</span>></span><br></pre></td></tr></table></figure><p>4, JS 语法替换</p><figure class="highlight kotlin"><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">- methods里面的方法提取到 与小程序的onLoad层级并列</span><br><span class="line">- 赋值 <span class="keyword">this</span>.someData = <span class="number">1</span> => my.setData({someData: <span class="number">1</span>})</span><br><span class="line">- 取值 <span class="keyword">this</span>.someData => <span class="keyword">this</span>.<span class="keyword">data</span>.someData</span><br><span class="line">- mounted() => onShow()</span><br></pre></td></tr></table></figure><p>5, 遇到的问题</p><p>1, 经常会遇到编译后提示<code>程序错误,请前往控制台查看</code>,发生这种情况的原因目前遇到的有以下:</p><ul><li>标签未闭合, 闭合错误</li><li>标签嵌套有误,或是模板语法中获取变量时报错. </li><li>这种错误不会详细提示错误位置,只能通过大量注释代码不断缩小发生错误的范围</li></ul><p>2, 界面显示和实际dom结构不同</p><ul><li>标签未闭合, 闭合错误</li></ul><figure class="highlight arduino"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><<span class="built_in">image</span> src=<span class="string">"XXXXXXXXX"</span> alt /> <span class="comment">//图片标签一定要闭合,在H5中不闭合一般不会有问题</span></span><br></pre></td></tr></table></figure><ul><li>涉及模板变量的不要换行,不然会引起渲染不准确</li></ul><figure class="highlight django"><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="xml">// vue</span></span><br><span class="line"><span class="xml"></span><span class="template-variable">{{countDownStr.day}}</span><span class="xml">:</span></span><br><span class="line"><span class="xml"></span><span class="template-variable">{{countDownStr.hou}}</span><span class="xml">:</span></span><br><span class="line"><span class="xml"></span><span class="template-variable">{{countDownStr.min}}</span><span class="xml">:</span></span><br><span class="line"><span class="xml"></span><span class="template-variable">{{countDownStr.sec}}</span><span class="xml"></span></span><br><span class="line"><span class="xml">// 小程序</span></span><br><span class="line"><span class="xml"></span><span class="template-variable">{{countDownStr.day}}</span><span class="xml">:</span><span class="template-variable">{{countDownStr.hou}}</span><span class="xml">:</span><span class="template-variable">{{countDownStr.min}}</span><span class="xml">:</span><span class="template-variable">{{countDownStr.sec}}</span><span class="xml"></span></span><br></pre></td></tr></table></figure><ul><li>条件判断也不可换行处理</li></ul><figure class="highlight stan"><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">// vue</span></span><br><span class="line"><div</span><br><span class="line"> v-<span class="name">if</span>="<span class="title">data</span> &&</span><br><span class="line"> <span class="title">data</span>.a &&</span><br><span class="line"> <span class="title">data</span>.a.b"></span><br><span class="line"><span class="comment">// 小程序</span></span><br><span class="line"><view a:<span class="name">if</span>="{{<span class="title">data</span> && <span class="title">data</span>.a && <span class="title">data</span>.a.b}}"></span><br></pre></td></tr></table></figure><h6 id="参考"><a href="#参考" class="headerlink" title="参考:"></a>参考:</h6><p><a href="https://docs.alipay.com/mini/developer/getting-started" target="_blank" rel="noopener">支付宝小程序开发文档</a></p><p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener">微信小程序开发文档</a></p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> Vue </tag>
<tag> 小程序 </tag>
</tags>
</entry>
<entry>
<title>Vue 如何实现多级组件嵌套通信</title>
<link href="/2019/04/28/7jkAv81CRkRmuC9q/"/>
<url>/2019/04/28/7jkAv81CRkRmuC9q/</url>
<content type="html"><![CDATA[<p>Vue中组件之间多层传递属性是一个比较常见的业务场景。<br>比如：A –> B –> C<br>A组件包含B组件，B组件又包含C组件。<br>现在，状态维护在A组件中，通过props的方式层层传递到C组件，而C组件接收这个数据，并在内部修改这个数据后，再告之A组件。<br><a id="more"></a><br><img src="http://image.huodao.hk/recovery_admin/upload_img/20190429/60cdfba01d70575724679ab16f1415b1.png" alt="attrs"></p><p><strong>A 组件与 B 组件之间的通信： （父子组件）：</strong><br>如上图所示，A、B、C三个组件依次嵌套，按照 Vue 的开发习惯，父子组件通信可以通过以下方式实现：</p><ul><li>A to B 通过props的方式向子组件传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现</li><li>通过设置全局Vuex共享状态，通过 computed 计算属性和 commit mutation的方式实现数据的获取和更新，以达到父子组件通信的目的。</li><li>Vue Event Bus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递。</li></ul><p><strong>A 组件与 C 组件之间的通信： （跨多级的组件嵌套关系）</strong><br>如上图，A 组件与 C 组件之间属于跨多级的组件嵌套关系，以往两者之间如需实现通信，往往通过以下方式实现：</p><ul><li>借助 B 组件的中转，从上到下props依次传递，从下至上，$emit事件的传递，达到跨级组件通信的效果</li><li>借助Vuex的全局状态共享</li><li>Vue Event Bus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递。</li></ul><blockquote><p>第一种通过props和$emit的方式，使得组件之间的业务逻辑臃肿不堪，B组件在其中仅仅充当的是一个中转站的作用。如使用第二种 Vuex的方式，某些情况下似乎又有点大材小用的意味，（仅仅是想实现组件之间的一个数据传递，并非数据共享的概念）。第三种情况的使用在实际的项目操作中发现，如不能实现很好的事件监听与发布的管理，往往容易导致数据流的混乱，在多人协作的项目中，不利于项目的维护。</p></blockquote><h4 id="attrs以及-listeners的出现解决的就是第一种情况的问题-Vue2-4-0新增-，B-组件在其中传递props以及事件的过程中，不必在写多余的代码，仅仅是将-attrs以及-listeners向上或者向下传递即可。"><a href="#attrs以及-listeners的出现解决的就是第一种情况的问题-Vue2-4-0新增-，B-组件在其中传递props以及事件的过程中，不必在写多余的代码，仅仅是将-attrs以及-listeners向上或者向下传递即可。" class="headerlink" title="$attrs以及$listeners的出现解决的就是第一种情况的问题(Vue2.4.0新增)，B 组件在其中传递props以及事件的过程中，不必在写多余的代码，仅仅是将$attrs以及$listeners向上或者向下传递即可。"></a><code>$attrs</code>以及<code>$listeners</code>的出现解决的就是第一种情况的问题(Vue2.4.0新增)，B 组件在其中传递props以及事件的过程中，不必在写多余的代码，仅仅是将$attrs以及$listeners向上或者向下传递即可。</h4><p>A(发起者) –> B($attrs,$listeners) –>C（使用者）<br>从顶层到使用层之间的层不再需要逐一列出来属性，只需要统一设置传递即可。</p><p>示例代码：<br><figure class="highlight xml"><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">A组件（App.vue）</span><br><span class="line"><span class="tag"><<span class="name">template</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">child1</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:p-child1</span>=<span class="string">"child1"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">:p-child2</span>=<span class="string">"child2"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">v-on:test1</span>=<span class="string">"onTest1"</span> //此处监听了两个事件，可以在<span class="attr">B</span>组件或者<span class="attr">C</span>组件中直接触发</span></span><br><span class="line"><span class="tag"> <span class="attr">v-on:test2</span>=<span class="string">"onTest2"</span>></span> </span><br><span class="line"> <span class="tag"></<span class="name">child1</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">template</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">import</span> Child1 <span class="keyword">from</span> <span class="string">'./Child1.vue'</span>;</span></span><br><span class="line"><span class="javascript"> <span class="keyword">export</span> <span class="keyword">default</span> {</span></span><br><span class="line"><span class="undefined"> data () {</span></span><br><span class="line"><span class="actionscript"> <span class="keyword">return</span> {};</span></span><br><span class="line"><span class="undefined"> },</span></span><br><span class="line"><span class="undefined">components: { Child1 },</span></span><br><span class="line"><span class="undefined"> methods: {</span></span><br><span class="line"><span class="undefined"> onTest1 () {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(<span class="string">'test1 running...'</span>);</span></span><br><span class="line"><span class="undefined"> },</span></span><br><span class="line"><span class="undefined"> onTest2 () {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(<span class="string">'test2 running'</span>);</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"> };</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></p><figure class="highlight django"><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"><span class="xml">B组件（Child1.vue）</span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">template</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child-1"</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span>in child1:<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span>props: </span><span class="template-variable">{{pChild1}}</span><span class="xml"><span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span>$attrs: </span><span class="template-variable">{{$attrs}}</span><span class="xml"><span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">hr</span>></span></span></span><br><span class="line"><span class="xml"> <span class="comment"><!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 --></span></span></span><br><span class="line"><span class="xml"> <span class="comment"><!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中 props声明的） --></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">child2</span> <span class="attr">v-bind</span>=<span class="string">"$attrs"</span> <span class="attr">v-on</span>=<span class="string">"$listeners"</span>></span><span class="tag"></<span class="name">child2</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">template</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span></span><br><span class="line"><span class="xml"> import Child2 from './Child2.vue';</span></span><br><span class="line"><span class="xml"> export default {</span></span><br><span class="line"><span class="xml"> props: ['pChild1'],</span></span><br><span class="line"><span class="xml"> data () {</span></span><br><span class="line"><span class="xml"> return {};</span></span><br><span class="line"><span class="xml"> },</span></span><br><span class="line"><span class="xml"> inheritAttrs: false,</span></span><br><span class="line"><span class="xml"> components: { Child2 },</span></span><br><span class="line"><span class="xml"> mounted () {</span></span><br><span class="line"><span class="xml"> this.$emit('test1');</span></span><br><span class="line"><span class="xml"> }</span></span><br><span class="line"><span class="xml"> };</span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><figure class="highlight django"><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="xml">C 组件 (Child2.vue)</span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">template</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child-2"</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span>in child2:<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span>props: </span><span class="template-variable">{{pChild2}}</span><span class="xml"><span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">p</span>></span>$attrs: </span><span class="template-variable">{{$attrs}}</span><span class="xml"><span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">hr</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">template</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></span></span><br><span class="line"><span class="xml">export default {</span></span><br><span class="line"><span class="xml"> props: ['pChild2'],</span></span><br><span class="line"><span class="xml"> data () {</span></span><br><span class="line"><span class="xml"> return {};</span></span><br><span class="line"><span class="xml"> },</span></span><br><span class="line"><span class="xml"> inheritAttrs: false,</span></span><br><span class="line"><span class="xml"> mounted () {</span></span><br><span class="line"><span class="xml"> this.$emit('test2');</span></span><br><span class="line"><span class="xml"> }</span></span><br><span class="line"><span class="xml">};</span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><h3 id="attrs"><a href="#attrs" class="headerlink" title="$attrs"></a>$attrs</h3><p> 包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。</p><h3 id="listeners"><a href="#listeners" class="headerlink" title="$listeners"></a>$listeners</h3><p>包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。</p><h3 id="inheritAttrs"><a href="#inheritAttrs" class="headerlink" title="inheritAttrs"></a>inheritAttrs</h3><p>默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。<br>默认inheritAttrs不设置的情况下组件会将未被使用的props绑定到HTML中的属性中，这并不是我们想要的效果，设置inheritAttrs为false这些默认设置的不必要的属性将去掉。<br>告诉组件不要使用默认的方式添加属性，而是通过 $attrs 对象直接为目标元素添加属性。</p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> Vue </tag>
<tag> 前端 </tag>
</tags>
</entry>
<entry>
<title>前端项目本地一键远程部署服务器</title>
<link href="/2019/01/21/HoD5bXhsG4jEsXpjXE/"/>
<url>/2019/01/21/HoD5bXhsG4jEsXpjXE/</url>
<content type="html"><![CDATA[<p>正常前端代码开发完成，部署代码需连接xshell或者SFTP工具进入到项目目录，更换静态文件才能完成部署。为提高前端部署效率，不再手动通过工具连接远程替换代码，在本地使用脚本完成远程连接及代码部署。<br><a id="more"></a></p><h3 id="环境搭建"><a href="#环境搭建" class="headerlink" title="环境搭建"></a>环境搭建</h3><h5 id="因为使用脚本登录远程服务器，需使用到ssh的免密码登录（基于密钥），实现流程如下："><a href="#因为使用脚本登录远程服务器，需使用到ssh的免密码登录（基于密钥），实现流程如下：" class="headerlink" title="因为使用脚本登录远程服务器，需使用到ssh的免密码登录（基于密钥），实现流程如下："></a>因为使用脚本登录远程服务器，需使用到ssh的免密码登录（基于密钥），实现流程如下：</h5><h5 id="1、在客户端生成一对密钥（如已生成过，可跳过此步骤）"><a href="#1、在客户端生成一对密钥（如已生成过，可跳过此步骤）" class="headerlink" title="1、在客户端生成一对密钥（如已生成过，可跳过此步骤）"></a>1、在客户端生成一对密钥（如已生成过，可跳过此步骤）</h5><p>基于空口令生成一个新的ssh密钥，以实现无密码登录：<br><figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -P <span class="string">''</span> -f ~<span class="regexp">/.ssh/i</span>d_rsa</span><br></pre></td></tr></table></figure></p><p>参数说明：</p><p>-t 加密算法类型，这里是使用rsa算法</p><p>-P 指定私钥的密码，不需要可以不指定</p><p>-f 指定生成秘钥对保持的位置</p><h5 id="2、将客户端公钥发送到服务器，使用ssh-copy-id"><a href="#2、将客户端公钥发送到服务器，使用ssh-copy-id" class="headerlink" title="2、将客户端公钥发送到服务器，使用ssh-copy-id"></a>2、将客户端公钥发送到服务器，使用ssh-copy-id</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">ssh-copy-id</span> <span class="selector-tag">root</span>@<span class="keyword">100</span>.<span class="keyword">100</span>.<span class="keyword">100</span>.<span class="keyword">100</span> -p <span class="number">6666</span></span><br></pre></td></tr></table></figure><p><img src="https://upload-images.jianshu.io/upload_images/10832850-61c54aef5abd1902.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="menu.saveimg.savepath20190119135334.jpg"></p><h5 id="3、配置自定义连接名，ssh的用户配置文件是放在当前用户根目录下的-ssh-文件夹里（-ssh-config，不存在则新创建一个），其配置写法如下："><a href="#3、配置自定义连接名，ssh的用户配置文件是放在当前用户根目录下的-ssh-文件夹里（-ssh-config，不存在则新创建一个），其配置写法如下：" class="headerlink" title="3、配置自定义连接名，ssh的用户配置文件是放在当前用户根目录下的 .ssh 文件夹里（~/.ssh/config，不存在则新创建一个），其配置写法如下："></a>3、配置自定义连接名，ssh的用户配置文件是放在当前用户根目录下的 .ssh 文件夹里（~/.ssh/config，不存在则新创建一个），其配置写法如下：</h5><figure class="highlight routeros"><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">Host pptest</span><br><span class="line"> HostName 115.29.185.212</span><br><span class="line"> <span class="built_in"> Port </span> 6666</span><br><span class="line"> <span class="built_in"> User </span> www</span><br><span class="line"> IdentityFile ~/.ssh/id_rsa</span><br></pre></td></tr></table></figure><p><img src="https://upload-images.jianshu.io/upload_images/10832850-da35738581ca099f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="menu.saveimg.savepath20190119144806.jpg"></p><h3 id="脚本"><a href="#脚本" class="headerlink" title="脚本"></a>脚本</h3><h5 id="1，在项目根目录处新建配置文件-deploy-conf-方便管理"><a href="#1，在项目根目录处新建配置文件-deploy-conf-方便管理" class="headerlink" title="1，在项目根目录处新建配置文件 deploy.conf 方便管理"></a>1，在项目根目录处新建配置文件 <code>deploy.conf</code> 方便管理</h5><figure class="highlight makefile"><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><br><span class="line">prod_branch=master //需部署的代码分支</span><br><span class="line">prod_host=prodName // 自定义连接名</span><br><span class="line">prod_user=www //服务器用户名</span><br><span class="line">prod_path=webstatic //需部署的服务器目录</span><br><span class="line"></span><br><span class="line">// 测试环境</span><br><span class="line">test_branch=master</span><br><span class="line">test_host=testName</span><br><span class="line">test_user=www</span><br><span class="line">test_path=webstatic</span><br></pre></td></tr></table></figure><h5 id="2，在项目根目录新建脚本文件-deploy-sh"><a href="#2，在项目根目录新建脚本文件-deploy-sh" class="headerlink" title="2，在项目根目录新建脚本文件 deploy.sh"></a>2，在项目根目录新建脚本文件 <code>deploy.sh</code></h5><figure class="highlight bash"><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></pre></td><td class="code"><pre><span class="line"><span class="meta">#!/bin/sh</span></span><br><span class="line"><span class="comment">#获取环境名</span></span><br><span class="line">env=<span class="string">''</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> [ x<span class="variable">$1</span> != x ];<span class="keyword">then</span></span><br><span class="line"> env=<span class="variable">$1</span></span><br><span class="line"><span class="keyword">else</span></span><br><span class="line"> env=<span class="string">'prod'</span></span><br><span class="line"><span class="keyword">fi</span></span><br><span class="line"></span><br><span class="line"><span class="comment">#获取当前分支名</span></span><br><span class="line">curr_branch=`git symbolic-ref --short -q HEAD`</span><br><span class="line"><span class="built_in">echo</span> <span class="string">'当前工作分支 => '</span><span class="variable">${curr_branch}</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'读取配置文件:'</span></span><br><span class="line">deploy_branch=`sed <span class="string">'/^'</span><span class="variable">${env}</span>_branch<span class="string">'=/!d;s/.*=//'</span> deploy.conf`</span><br><span class="line">deploy_host=`sed <span class="string">'/^'</span><span class="variable">${env}</span>_host<span class="string">'=/!d;s/.*=//'</span> deploy.conf`</span><br><span class="line">deploy_user=`sed <span class="string">'/^'</span><span class="variable">${env}</span>_user<span class="string">'=/!d;s/.*=//'</span> deploy.conf`</span><br><span class="line">deploy_path=`sed <span class="string">'/^'</span><span class="variable">${env}</span>_path<span class="string">'=/!d;s/.*=//'</span> deploy.conf`</span><br><span class="line">deploy_mark=`sed <span class="string">'/^'</span><span class="variable">${env}</span>_mark<span class="string">'=/!d;s/.*=//'</span> deploy.conf`</span><br><span class="line"><span class="built_in">echo</span> <span class="string">'分支 => '</span><span class="variable">${deploy_branch}</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'地址 => '</span><span class="variable">${deploy_host}</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'用户 => '</span><span class="variable">${deploy_user}</span></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'路径 => '</span><span class="variable">${deploy_path}</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'储存当前修改'</span></span><br><span class="line">git stash</span><br><span class="line"></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'切换到需发布的分支 => '</span><span class="variable">${deploy_branch}</span></span><br><span class="line">git checkout <span class="variable">$deploy_branch</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'编译项目'</span></span><br><span class="line">npm run build</span><br><span class="line"></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'备份中'</span></span><br><span class="line">ssh <span class="variable">${deploy_host}</span> <span class="string">"rm -rf ./"</span><span class="variable">${deploy_path}</span><span class="string">"/back.tar"</span></span><br><span class="line">ssh <span class="variable">${deploy_host}</span> <span class="string">"tar -cvf "</span><span class="variable">${deploy_path}</span><span class="string">"/back.tar "</span><span class="variable">${deploy_path}</span><span class="string">"/dist"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'上传中'</span></span><br><span class="line">scp -r ./dist <span class="variable">${deploy_host}</span>:<span class="variable">${deploy_path}</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'切回工作分支 => '</span><span class="variable">${curr_branch}</span></span><br><span class="line">git checkout <span class="variable">$curr_branch</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'释放修改'</span></span><br><span class="line">git stash pop</span><br><span class="line"></span><br><span class="line"><span class="built_in">echo</span> <span class="string">'部署完成'</span></span><br></pre></td></tr></table></figure><h5 id="3，执行部署，-测试环境：sh-deploy-sh-test，生产环境：sh-deploy-sh"><a href="#3，执行部署，-测试环境：sh-deploy-sh-test，生产环境：sh-deploy-sh" class="headerlink" title="3，执行部署， 测试环境：sh ./deploy.sh test，生产环境：sh ./deploy.sh"></a>3，执行部署， 测试环境：<code>sh ./deploy.sh test</code>，生产环境：<code>sh ./deploy.sh</code></h5><figure class="highlight coq"><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">sh ./deploy.sh test</span><br><span class="line">当前工作分支 => master</span><br><span class="line">读取配置文件:</span><br><span class="line">分支 => master</span><br><span class="line">地址 => pptest</span><br><span class="line">用户 => www</span><br><span class="line">路径 => pp.huodao.hk</span><br><span class="line"></span><br><span class="line">编译项目</span><br><span class="line">...</span><br><span class="line">备份中</span><br><span class="line">...</span><br><span class="line">上传中</span><br><span class="line">...</span><br><span class="line">部署成功</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> Linux </tag>
<tag> shell </tag>
<tag> Git </tag>
</tags>
</entry>
<entry>
<title>Git HEAD detached from XXX 解决</title>
<link href="/2019/01/19/q1Sm4GU8ycP/"/>
<url>/2019/01/19/q1Sm4GU8ycP/</url>
<content type="html"><![CDATA[<p>Git 中的 HEAD 可以理解为一个指针，我们可以在命令行中输入 cat .git/HEAD 查看当前 HEAD 指向哪儿，一般它指向当前工作目录所在分支的最新提交。<br><a id="more"></a><br><figure class="highlight dts"><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">cat .git/HEAD</span><br><span class="line"><span class="symbol">ref:</span> refs<span class="meta-keyword">/heads/</span><span class="params"><branch name></span> <span class="comment">// 正常</span></span><br><span class="line">cad0be9ceb89f474c39360c4de337d4a8194cab0 <span class="comment">// 游离状态</span></span><br></pre></td></tr></table></figure></p><p>使用git checkout 来移动HEAD指针，移动的对象可以是分支指针也可以是快照。<br>HEAD指针可以指向快照也可以指向branch。当指向branch时提交后会和branch指针一起向后移动，当不指向branch提交时时则会在一个detached状态。</p><p>当使用 git checkout < branch_name> 切换分支时，HEAD 会移动到指定分支。<br><figure class="highlight applescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git checkout <branch <span class="built_in">name</span>></span><br></pre></td></tr></table></figure></p><p>但是如果使用的是 git checkout <commit id>，即切换到指定的某一次提交，HEAD 就会处于 detached 状态（游离状态）<br><img src="https://upload-images.jianshu.io/upload_images/10832850-61e0553e78afd1e3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="使用webStorm checkout"></commit></p><figure class="highlight applescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git checkout <commit <span class="built_in">id</span>></span><br></pre></td></tr></table></figure><h3 id="HEAD-游离状态的利与弊"><a href="#HEAD-游离状态的利与弊" class="headerlink" title="HEAD 游离状态的利与弊"></a>HEAD 游离状态的利与弊</h3><p>利: 我们可以很方便地在历史版本之间互相切换，比如需要回到某次提交，直接 checkout 对应的 commit id 或者 tag 名即可。</p><p>弊：在这个基础上的提交会新开一个匿名分支且提交是无法可见保存的，一旦切到别的分支，游离状态以后的提交就不可追溯了。<br><figure class="highlight lisp"><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">git branch</span><br><span class="line">* (<span class="name">HEAD</span> detached at <span class="number">925</span>fda6)</span><br><span class="line">master</span><br></pre></td></tr></table></figure></p><p><img src="https://upload-images.jianshu.io/upload_images/10832850-1dbe926bf1c27e8f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="在游离状态无法提交修改"></p><h3 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h3><p>1，查看当前分支状态<br><figure class="highlight lisp"><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">git branch</span><br><span class="line">* (<span class="name">HEAD</span> detached at <span class="number">925</span>fda6)</span><br><span class="line">master</span><br></pre></td></tr></table></figure></p><p>2，新建一个临时 tem 分支，把当前提交的代码放到整个分支<br><figure class="highlight armasm"><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="symbol">git</span> <span class="keyword">branch </span>tem</span><br><span class="line"><span class="symbol">git</span> checkout tem</span><br></pre></td></tr></table></figure></p><p>3，换回要回到的那个分支，这里是 master<br><figure class="highlight crmsh"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git checkout <span class="literal">master</span></span><br></pre></td></tr></table></figure></p><p>4，然后 merge 刚才创建的临时分支<br><figure class="highlight routeros"><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">git merge tem</span><br><span class="line">Updating cad0be9<span class="built_in">..</span>2437c6b</span><br><span class="line">Fast-forward</span><br><span class="line"><span class="built_in">..</span><span class="built_in">..</span><span class="built_in">..</span></span><br></pre></td></tr></table></figure></p><p>5，检查是否有冲突，没有就提交到远端<br><figure class="highlight maxima"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">push</span> <span class="built_in">origin</span> master</span><br></pre></td></tr></table></figure></p><p>6，删除临时分支<br><figure class="highlight armasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">git</span> <span class="keyword">branch </span>-d tem</span><br></pre></td></tr></table></figure></p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> Git </tag>
</tags>
</entry>
<entry>
<title>Exif.js 读取图像的元数据，判断上传图片方向是否正确</title>
<link href="/2018/08/22/Exifjs/"/>
<url>/2018/08/22/Exifjs/</url>
<content type="html"><![CDATA[<p>有时候需要对用户上传的图片判断方向是否正确，此时需要知道原图片的拍摄信息，可借助Exif.js实现。<br><a id="more"></a></p><blockquote><p>Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。</p></blockquote><p>代码如下：<br><figure class="highlight xml"><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">src</span>=<span class="string">"exif.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></p><figure class="highlight actionscript"><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">EXIF.getData(imgElement, <span class="function"><span class="keyword">function</span><span class="params">()</span></span>{</span><br><span class="line"> EXIF.getAllTags(<span class="keyword">this</span>); <span class="comment">//获取图像的全部数据，值以对象的方式返回</span></span><br><span class="line"> EXIF.pretty(<span class="keyword">this</span>); <span class="comment">//获取图像的全部数据，值以字符串的方式返回</span></span><br><span class="line"> <span class="keyword">var</span> orientation = EXIF.getTag(<span class="keyword">this</span>, <span class="string">'Orientation'</span>); <span class="comment">//获取图像的某个数据</span></span><br><span class="line"> <span class="keyword">if</span> (orientation == <span class="number">3</span>) {</span><br><span class="line"> <span class="comment">//旋转180度</span></span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (orientation == <span class="number">6</span>) {</span><br><span class="line"> <span class="comment">//旋转90度</span></span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (orientation == <span class="number">8</span>) {</span><br><span class="line"> <span class="comment">//旋转270度</span></span><br><span class="line"> };</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h5 id="Demo"><a href="#Demo" class="headerlink" title="Demo"></a>Demo</h5><p><a href="https://jordonwang.github.io/demo/%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E6%96%B9%E5%90%91.html">获取用户上传图片方向</a></p><h5 id="官方示例"><a href="#官方示例" class="headerlink" title="官方示例"></a>官方示例</h5><p><a href="http://code.ciaoca.com/javascript/exif-js/demo/upfile" target="_blank" rel="noopener">Exif.js 读取图像的元数据</a></p>]]></content>
<categories>
<category> 前端 </category>
<category> JS </category>
</categories>
<tags>
<tag> WEB </tag>
</tags>
</entry>
<entry>
<title>Vue 开发中遇到的问题及解决</title>
<link href="/2018/07/07/vue-special-remarks/"/>
<url>/2018/07/07/vue-special-remarks/</url>
<content type="html"><![CDATA[<p>以下记录在开发Vue项目中遇到的相关问题及解决办法，不定期更新。<br><a id="more"></a></p><h5 id="在微信中使用Vue项目如涉及微信支付，路由模式应使用哈希模式，且在支付页面需特殊处理，不然会有支付权限的问题。"><a href="#在微信中使用Vue项目如涉及微信支付，路由模式应使用哈希模式，且在支付页面需特殊处理，不然会有支付权限的问题。" class="headerlink" title="在微信中使用Vue项目如涉及微信支付，路由模式应使用哈希模式，且在支付页面需特殊处理，不然会有支付权限的问题。"></a>在微信中使用Vue项目如涉及微信支付，路由模式应使用哈希模式，且在支付页面需特殊处理，不然会有支付权限的问题。</h5><figure class="highlight stylus"><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="selector-tag">var</span> pos = location<span class="selector-class">.href</span><span class="selector-class">.indexOf</span>(<span class="string">'#'</span>)</span><br><span class="line"><span class="selector-tag">var</span> my_url = location<span class="selector-class">.href</span><span class="selector-class">.split</span>(<span class="string">'#'</span>)</span><br><span class="line"><span class="keyword">if</span> (location<span class="selector-class">.href</span>[pos - <span class="number">1</span>] !== <span class="string">'?'</span>) {</span><br><span class="line"> location<span class="selector-class">.href</span> = my_url[<span class="number">0</span>] + <span class="string">'?#'</span> +my_url[<span class="number">1</span>]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h5 id="页面中报错"><a href="#页面中报错" class="headerlink" title="页面中报错"></a>页面中报错</h5><p><font color="red">[Vue warn]: Invalid value for option “components”: expected an Object, but got Array.</font><br><br>在开发过程中发现这个错误，很明显是提升配置组件时对应的值应该是一个对象不是数组，但是找遍了自己所有的页面和组件中都没有写错，此时该联想到是不是第三方的库版本太老旧引起的。我最终发现我出现这个报错的原因是引用了太旧版本的bootstarp-vue引起的。升级到新一点的版本久没有问题了。</p><hr><h5 id="页面中报错-1"><a href="#页面中报错-1" class="headerlink" title="页面中报错"></a>页面中报错</h5><p><font color="red">Injection “elFormItem” not found</font><br><br>这个错误是ElementUI引起的，原因是ElementUI过高或是Vue过低引起，都升级到最新版即可。</p><hr><h5 id="Vue-cli-npm-run-dev时报错"><a href="#Vue-cli-npm-run-dev时报错" class="headerlink" title="Vue_cli npm run dev时报错"></a>Vue_cli npm run dev时报错</h5><p><font color="red">No parser and no filepath given, using ‘babylon’ the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.</font><br><br>是prettier模块导致的报错，查了下发现In prettier 1.13.0, default parser was removed with a minor version(used to be babylon), this breaks the formatter here.意思是在prettier的 1.13.0版本，默认的一个解析器被移除了导致项目创建失败<br>解决办法把node_modules里的prettier删掉，重现下个之前的版本 npm install prettier@~1.12.0再运行就可以了<br><a href="https://blog.csdn.net/claire_cz/article/details/80483420" target="_blank" rel="noopener">参考</a></p><hr><h5 id="chrome-devtools-工具vue不可使用-提示"><a href="#chrome-devtools-工具vue不可使用-提示" class="headerlink" title="chrome devtools 工具vue不可使用,提示"></a>chrome devtools 工具vue不可使用,提示</h5><p><code>Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author</code><br>应该引用开发版本的vue.js而不是压缩版本vue.min.js。</p><hr><h5 id="使用vue-cli的项目开发环境通过loaclhost可以访问，但不能通过ip访问（在app内嵌入web网页在开发环境指向自己的本机电脑启动的服务，通过IP不能访问，提示访问被拒绝）"><a href="#使用vue-cli的项目开发环境通过loaclhost可以访问，但不能通过ip访问（在app内嵌入web网页在开发环境指向自己的本机电脑启动的服务，通过IP不能访问，提示访问被拒绝）" class="headerlink" title="使用vue-cli的项目开发环境通过loaclhost可以访问，但不能通过ip访问（在app内嵌入web网页在开发环境指向自己的本机电脑启动的服务，通过IP不能访问，提示访问被拒绝）"></a>使用vue-cli的项目开发环境通过loaclhost可以访问，但不能通过ip访问（在app内嵌入web网页在开发环境指向自己的本机电脑启动的服务，通过IP不能访问，提示访问被拒绝）</h5><p>修改config/index.js host: ‘localhost’ 改为 host: ‘0.0.0.0’,</p><hr><h5 id="开发环境调用后台接口跨域"><a href="#开发环境调用后台接口跨域" class="headerlink" title="开发环境调用后台接口跨域"></a>开发环境调用后台接口跨域</h5><p>修改config/index.js;将所有的接口都加上一个特殊的字段（我这里的用的api匹配），在代理这层匹配成功后会代理到目标地址。<br><figure class="highlight less"><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="attribute">proxyTable</span>: {</span><br><span class="line"> <span class="string">'/api'</span>: {</span><br><span class="line"> <span class="attribute">target</span>: <span class="string">'http://example.com'</span>,</span><br><span class="line"> <span class="attribute">changeOrigin</span>: true,</span><br><span class="line"> <span class="attribute">pathRewrite</span>:{</span><br><span class="line"> <span class="string">'/api'</span>:<span class="string">''</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>]]></content>
<categories>
<category> 前端 </category>
<category> Vue </category>
</categories>
<tags>
<tag> WEB </tag>
</tags>
</entry>
<entry>
<title>Vue_cli中webpack相关优化</title>
<link href="/2018/07/07/vue-cli-optimization/"/>
<url>/2018/07/07/vue-cli-optimization/</url>
<content type="html"><![CDATA[<p>在webpack管理的项目中如果不优化的情况下，webpack打包出来的文件很是庞大，会导致项目在首屏加载的时间过长，体验很不好。以下优化手段不定期更新。<br><a id="more"></a></p><h4 id="导致打包文件庞大的原因"><a href="#导致打包文件庞大的原因" class="headerlink" title="导致打包文件庞大的原因"></a>导致打包文件庞大的原因</h4><p>可以通过配置package.json命令 <code>"analyz": "NODE_ENV=production npm_config_report=true npm run build"</code>,运行<code>npm run analyz</code>，即可在很直观的看到造成包庞大的原因。<br><img src="https://upload-images.jianshu.io/upload_images/10832850-cf2d3cdbd6cd4c32.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="微信截图_20180623182928.png"></p><h4 id="路由组件懒加载"><a href="#路由组件懒加载" class="headerlink" title="路由组件懒加载"></a>路由组件懒加载</h4><p>把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应的组件，实现路由组件的懒加载。<br><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Full = <span class="function"><span class="params">r</span> =></span> <span class="built_in">require</span>.ensure([], <span class="function"><span class="params">()</span> =></span> r(<span class="built_in">require</span>(<span class="string">'@/views/Full'</span>)), <span class="string">'Full'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 路由切换时增加loading</span></span><br><span class="line"><span class="keyword">const</span> Full = <span class="function"><span class="params">resolve</span> =></span> {</span><br><span class="line"> Loading.open()</span><br><span class="line"> <span class="built_in">require</span>.ensure([], <span class="function"><span class="params">()</span> =></span> {</span><br><span class="line"> resolve(<span class="built_in">require</span>(<span class="string">'@/views/Full'</span>))</span><br><span class="line"> Loading.close()</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h4 id="CDN引入资源"><a href="#CDN引入资源" class="headerlink" title="CDN引入资源"></a>CDN引入资源</h4><h5 id="1-在根目录下的index-html头部引入相关CDN地址。"><a href="#1-在根目录下的index-html头部引入相关CDN地址。" class="headerlink" title="1 在根目录下的index.html头部引入相关CDN地址。"></a>1 在根目录下的index.html头部引入相关CDN地址。</h5><figure class="highlight xml"><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">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"//cdn.bootcss.com/element-ui/2.0.8/theme-chalk/index.css"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/vue/2.5.3/vue.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/axios/0.17.1/axios.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/element-ui/2.0.8/index.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h5 id="2-更改webpack-config-js配置externals如下；本身代码中引入的模块不需要删除，配置过externals后更改webpack会过滤掉。"><a href="#2-更改webpack-config-js配置externals如下；本身代码中引入的模块不需要删除，配置过externals后更改webpack会过滤掉。" class="headerlink" title="2 更改webpack.config.js配置externals如下；本身代码中引入的模块不需要删除，配置过externals后更改webpack会过滤掉。"></a>2 更改webpack.config.js配置externals如下；本身代码中引入的模块不需要删除，配置过externals后更改webpack会过滤掉。</h5><blockquote><p><strong>externals</strong>: 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。<br><figure class="highlight java"><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">module</span>.<span class="keyword">exports</span> = {</span><br><span class="line"> entry: {</span><br><span class="line"> app: <span class="string">'./src/main.js'</span></span><br><span class="line"> },</span><br><span class="line"> externals:{</span><br><span class="line"> <span class="string">'vue'</span>: <span class="string">'Vue'</span>,</span><br><span class="line"> <span class="string">'vue-router'</span>: <span class="string">'VueRouter'</span></span><br><span class="line"> ...</span><br><span class="line"> }</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p></blockquote><h4 id="引入该引入的包"><a href="#引入该引入的包" class="headerlink" title="引入该引入的包"></a>引入该引入的包</h4><p>使用Vue的项目更多操作的数据，而不是节点，所以就不必要引入JQuery这类的库及插件。UI框架尽量统一用一个即可，如只是使用到了改UI框架的部分组件，就不要全局引入，应按需引入。</p><h4 id="生产环境，去除源码"><a href="#生产环境，去除源码" class="headerlink" title="生产环境，去除源码"></a>生产环境，去除源码</h4><p>生产环境不生成sourceMap，sourceMap是用来debug编译后的文件，也就是在服务器上是可以看到源代码的，如果调试及测试都没问题，最后发布生产的时候可省去sourceMap文件。</p><figure class="highlight n1ql"><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">vue-cli脚手架config目录下<span class="keyword">index</span>.js配置文件productionSourceMap设置为<span class="literal">false</span></span><br><span class="line"><span class="keyword">build</span>：{</span><br><span class="line"> ...</span><br><span class="line"> productionSourceMap：<span class="literal">false</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="开启gzip压缩"><a href="#开启gzip压缩" class="headerlink" title="开启gzip压缩"></a>开启gzip压缩</h4><p>vue-cli脚手架config目录下index.js配置文件productionGzip设置为true<br><figure class="highlight jboss-cli"><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">build：{</span><br><span class="line"> <span class="string">...</span></span><br><span class="line"> productionGzip：<span class="literal">true</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>build/webpack.prod.conf.js 有gzip的详细配置<br><figure class="highlight stylus"><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="keyword">if</span> (config<span class="selector-class">.build</span><span class="selector-class">.productionGzip</span>) {</span><br><span class="line"> <span class="selector-tag">var</span> CompressionWebpackPlugin = require(<span class="string">'compression-webpack-plugin'</span>)</span><br><span class="line"></span><br><span class="line"> webpackConfig<span class="selector-class">.plugins</span><span class="selector-class">.push</span>(</span><br><span class="line"> new CompressionWebpackPlugin({</span><br><span class="line"> asset: <span class="string">'[path].gz[query]'</span>,</span><br><span class="line"> algorithm: <span class="string">'gzip'</span>,</span><br><span class="line"> test: new RegExp(</span><br><span class="line"> <span class="string">'\\.('</span> +</span><br><span class="line"> config<span class="selector-class">.build</span><span class="selector-class">.productionGzipExtensions</span><span class="selector-class">.join</span>(<span class="string">'|'</span>) +</span><br><span class="line"> <span class="string">')$'</span></span><br><span class="line"> ),</span><br><span class="line"> threshold: <span class="number">10240</span>,</span><br><span class="line"> minRatio: <span class="number">0.8</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>CSS 默认压缩文件是可以使用，js需额外配置ngnix才可使用，正确的Response Headers有Content-Enconding: gzip 即配置OK的。<br><figure class="highlight applescript"><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">conf目录下的nginx.conf</span><br><span class="line"></span><br><span class="line">gzip <span class="keyword">on</span>;</span><br><span class="line">gzip_types <span class="built_in">text</span>/plain <span class="built_in">application</span>/x-javascript <span class="built_in">application</span>/javascript <span class="built_in">text</span>/css <span class="built_in">application</span>/xml <span class="built_in">text</span>/javascript <span class="built_in">application</span>/x-httpd-php image/jpeg image/gif image/png;</span><br></pre></td></tr></table></figure></p>]]></content>
<categories>
<category> 前端 </category>
<category> Vue </category>
</categories>
<tags>
<tag> webpack </tag>
<tag> 优化 </tag>
</tags>
</entry>
<entry>
<title>使用CSS3制作倒影 box-reflect</title>
<link href="/2018/07/07/css-box-reflect/"/>
<url>/2018/07/07/css-box-reflect/</url>
<content type="html"><![CDATA[<p><html></html></p><p></p><p style="-webkit-box-reflect: below 1px -webkit-linear-gradient(transparent,transparent 15%,rgba(0,0,0,.4));font-size: 20px;">CSS3中的box-reflect特性可以实现对图片和文字的倒影效果。</p><br><p></p><p><html><img style="-webkit-box-reflect: below 1px -webkit-linear-gradient(transparent,transparent 30%,rgba(0,0,0,.4));" src="https://gw.alipayobjects.com/os/q/cms/images/jjb2or1y/1e5ea903-12df-4dc8-a823-41cd66f6258c_w500_h277.jpeg"></html><br><a id="more"></a><br><br><br><br><br><br></p><h4 id="语法"><a href="#语法" class="headerlink" title="语法:"></a>语法:</h4><figure class="highlight pf"><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">-webkit-box-reflect：<span class="keyword">none</span> | <span class="variable"><direction></span> <span class="variable"><offset></span>? <span class="variable"><mask-box-image></span>?</span><br><span class="line"> box-reflect：<span class="keyword">none</span> | <span class="variable"><direction></span> <span class="variable"><offset></span>? <span class="variable"><mask-box-image></span>?</span><br></pre></td></tr></table></figure><h4 id="取值："><a href="#取值：" class="headerlink" title="取值："></a>取值：</h4><p>none：</p><pre><code>无倒影</code></pre><p>direction</p><pre><code>above：指定倒影在对象的上边below：指定倒影在对象的下边left：指定倒影在对象的左边right：指定倒影在对象的右边</code></pre><p>offset</p><pre><code>length：用长度值来定义倒影与对象之间的间隔。可以为负值percentage：用百分比来定义倒影与对象之间的间隔。可以为负值</code></pre><p>mask-box-image</p><pre><code>none：无遮罩图像url：使用绝对或相对地址指定遮罩图像。(必须是png格式的图片)linear-gradient：使用线性渐变创建遮罩图像。radial-gradient：使用径向(放射性)渐变创建遮罩图像。repeating-linear-gradient：使用重复的线性渐变创建背遮罩像。repeating-radial-gradient：使用重复的径向(放射性)渐变创建遮罩图像。</code></pre>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> WEB </tag>
<tag> 前端 </tag>
<tag> CSS </tag>
</tags>
</entry>
<entry>
<title>前端emoji表情字符串处理</title>
<link href="/2018/06/06/emoji-string/"/>
<url>/2018/06/06/emoji-string/</url>
<content type="html"><![CDATA[<p>emoji表情存储需要数据库存储字段的编码方式为utf8mb4，且该编码方式需数据库为 5.5.3 及以上版本。而且发现设置了utf8mb4编码后，还是会有部分emoji表情存储不了，所以改用前端转码后再存入数据库，读取的时候再解码：<br><a id="more"></a><br>转码：<br><figure class="highlight zephir"><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="function"><span class="keyword">function</span> <span class="title">utf16toEntities</span><span class="params">(str)</span> </span>{</span><br><span class="line"> <span class="keyword">var</span> patt=/[\ud800-\udbff][\udc00-\udfff]/g; <span class="comment">// 检测utf16字符正则</span></span><br><span class="line"> str = str.replace(patt, <span class="function"><span class="keyword">function</span><span class="params">(char)</span></span>{</span><br><span class="line"> <span class="keyword">var</span> H, L, code;</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">char</span>.length===<span class="number">2</span>) {</span><br><span class="line"> H = <span class="keyword">char</span>.charCodeAt(<span class="number">0</span>); <span class="comment">// 取出高位</span></span><br><span class="line"> L = <span class="keyword">char</span>.charCodeAt(<span class="number">1</span>); <span class="comment">// 取出低位</span></span><br><span class="line"> code = (H - <span class="number">0xD800</span>) * <span class="number">0x400</span> + <span class="number">0x10000</span> + L - <span class="number">0xDC00</span>; <span class="comment">// 转换算法</span></span><br><span class="line"> <span class="keyword">return</span> <span class="string">"&#"</span> + code + <span class="string">";"</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">char</span>;</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">return</span> str;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p><p>解码：<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><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">uncodeUtf16</span>(<span class="params">str</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> reg = <span class="regexp">/\&#.*?;/g</span>;</span><br><span class="line"> <span class="keyword">var</span> result = str.replace(reg,<span class="function"><span class="keyword">function</span>(<span class="params">char</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> H,L,code;</span><br><span class="line"> <span class="keyword">if</span>(char.length == <span class="number">9</span> ){</span><br><span class="line"> code = <span class="built_in">parseInt</span>(char.match(<span class="regexp">/[0-9]+/g</span>));</span><br><span class="line"> H = <span class="built_in">Math</span>.floor((code<span class="number">-0x10000</span>) / <span class="number">0x400</span>)+<span class="number">0xD800</span>;</span><br><span class="line"> L = (code - <span class="number">0x10000</span>) % <span class="number">0x400</span> + <span class="number">0xDC00</span>;</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">unescape</span>(<span class="string">"%u"</span>+H.toString(<span class="number">16</span>)+<span class="string">"%u"</span>+L.toString(<span class="number">16</span>));</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">return</span> char;</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> <span class="keyword">return</span> result;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p><p>参考：<br><a href="https://blog.csdn.net/binjly/article/details/47321043" target="_blank" rel="noopener">移动前端手机输入法自带emoji表情字符处理</a></p>]]></content>
<categories>
<category> 前端 </category>
<category> JS </category>
</categories>
<tags>
<tag> WEB </tag>
</tags>
</entry>
<entry>
<title>IntersectionObserver使用</title>
<link href="/2018/05/26/IntersectionObserver/"/>
<url>/2018/05/26/IntersectionObserver/</url>
<content type="html"><![CDATA[<p>IntersectionObserver用来监听一个目标元素是否出现在web页面的可视区域。<br><a id="more"></a><br>传统方式监听一个元素是否出现在可视区，可以监听scroll事件，计算目标元素距离顶部的距离减去页面滑出的距离；如果大于0且小于窗口的高度则表明是可见的。<br><figure class="highlight basic"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">0 </span>< $(<span class="string">"targetDom"</span>).offset().top - $(document).scrollTop() < $(<span class="keyword">window</span>).height()</span><br></pre></td></tr></table></figure></p><p>但是此方法需监听scroll事件，对性能要求高。</p><h5 id="IntersectionObserver-API，可以自动”观察”元素是否可见，IntersectionObserver是浏览器原生提供的一个构造函数，第一个参数元素可见性发生变化的回调函数，第二个是配置参数（可选）"><a href="#IntersectionObserver-API，可以自动”观察”元素是否可见，IntersectionObserver是浏览器原生提供的一个构造函数，第一个参数元素可见性发生变化的回调函数，第二个是配置参数（可选）" class="headerlink" title="IntersectionObserver API，可以自动”观察”元素是否可见，IntersectionObserver是浏览器原生提供的一个构造函数，第一个参数元素可见性发生变化的回调函数，第二个是配置参数（可选）"></a>IntersectionObserver API，可以自动”观察”元素是否可见，IntersectionObserver是浏览器原生提供的一个构造函数，第一个参数元素可见性发生变化的回调函数，第二个是配置参数（可选）</h5><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"><span class="number">1.</span> 创建一个观察实例</span><br><span class="line"><span class="keyword">var</span> io = <span class="keyword">new</span> IntersectionObserver(callback, option);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 开始观察</span></span><br><span class="line">io.observe(<span class="built_in">document</span>.getElementById(<span class="string">'example'</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 停止观察</span></span><br><span class="line">io.unobserve(element);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 关闭观察器</span></span><br><span class="line">io.disconnect();</span><br></pre></td></tr></table></figure><h5 id="callback"><a href="#callback" class="headerlink" title="callback"></a>callback</h5><p>callback会在元素刚开始进入视线和完全离开视线触发：<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="keyword">var</span> io = <span class="keyword">new</span> IntersectionObserver(</span><br><span class="line"> entries => {</span><br><span class="line"> <span class="built_in">console</span>.log(entries);</span><br><span class="line"> }</span><br><span class="line">)</span><br></pre></td></tr></table></figure></p><p>回调函数返回IntersectionObserverEntry的对象有以下属性：<br><figure class="highlight dts"><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">{</span><br><span class="line"><span class="symbol"> time:</span> <span class="number">3893.92</span>,</span><br><span class="line"><span class="symbol"> rootBounds:</span> <span class="class">ClientRect </span>{</span><br><span class="line"><span class="symbol"> bottom:</span> <span class="number">920</span>,</span><br><span class="line"><span class="symbol"> height:</span> <span class="number">1024</span>,</span><br><span class="line"><span class="symbol"> left:</span> <span class="number">0</span>,</span><br><span class="line"><span class="symbol"> right:</span> <span class="number">1024</span>,</span><br><span class="line"><span class="symbol"> top:</span> <span class="number">0</span>,</span><br><span class="line"><span class="symbol"> width:</span> <span class="number">920</span></span><br><span class="line"> },</span><br><span class="line"><span class="symbol"> boundingClientRect:</span> <span class="class">ClientRect </span>{</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> },</span><br><span class="line"><span class="symbol"> intersectionRect:</span> <span class="class">ClientRect </span>{</span><br><span class="line"> <span class="comment">// ...</span></span><br><span class="line"> },</span><br><span class="line"><span class="symbol"> intersectionRatio:</span> <span class="number">0.54</span>,</span><br><span class="line"><span class="symbol"> target:</span> element</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><figure class="highlight aspectj"><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">time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒</span><br><span class="line"><span class="keyword">target</span>：被观察的目标元素，是一个 DOM 节点对象</span><br><span class="line">rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回<span class="keyword">null</span></span><br><span class="line">boundingClientRect：目标元素的矩形区域的信息</span><br><span class="line">intersectionRect：目标元素与视口（或根元素）的交叉区域的信息</span><br><span class="line">intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为<span class="number">1</span>，完全不可见时小于等于<span class="number">0</span></span><br></pre></td></tr></table></figure><h5 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</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></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> IntersectionObserver(<span class="function"><span class="keyword">function</span>(<span class="params">entries</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (!(entries[<span class="number">0</span>].intersectionRatio <= <span class="number">0</span>)) {</span><br><span class="line"> loadData()</span><br><span class="line"> }</span><br><span class="line">}).observe(<span class="built_in">document</span>.querySelector(<span class="string">"targetDOM"</span>)),</span><br></pre></td></tr></table></figure><h5 id="Option-参数"><a href="#Option-参数" class="headerlink" title="Option 参数"></a>Option 参数</h5><p>1 threshold 属性<br>threshold属性决定了什么时候触发回调函数。对应的值是一个数组，默认是[0]<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></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> IntersectionObserver(</span><br><span class="line"> entries => {<span class="comment">/* ... */</span>},</span><br><span class="line"> {</span><br><span class="line"> threshold: [<span class="number">0</span>, <span class="number">0.25</span>, <span class="number">0.5</span>, <span class="number">0.75</span>, <span class="number">1</span>] <span class="comment">//当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。</span></span><br><span class="line"> }</span><br><span class="line">);</span><br></pre></td></tr></table></figure></p><p>2 root 属性，rootMargin 属性<br>很多时候，目标元素不仅会随着窗口滚动，还会在容器里面滚动（比如在iframe窗口里滚动）。<br><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"><span class="keyword">var</span> opts = {</span><br><span class="line"> root: <span class="built_in">document</span>.<span class="built_in">querySelector</span>(<span class="string">'.container'</span>),</span><br><span class="line"> rootMargin: <span class="string">"500px 0px"</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> observer = <span class="keyword">new</span> IntersectionObserver(</span><br><span class="line"> callback,</span><br><span class="line"> opts</span><br><span class="line">);</span><br></pre></td></tr></table></figure></p><p>上面代码中，除了root属性，还有rootMargin属性。后者定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值。<br>这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。</p><h5 id="IntersectionObserver-API-是异步触发"><a href="#IntersectionObserver-API-是异步触发" class="headerlink" title="IntersectionObserver API 是异步触发"></a>IntersectionObserver API 是异步触发</h5><p>只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。</p><h5 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h5><p><a href="http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html" target="_blank" rel="noopener">IntersectionObserver API 使用教程</a></p>]]></content>
<categories>
<category> 前端 </category>
<category> JS </category>
</categories>
<tags>
<tag> WEB </tag>
</tags>
</entry>
<entry>
<title>移动端Web Video视频播放兼容处理</title>
<link href="/2018/05/25/html5-video-compatible/"/>
<url>/2018/05/25/html5-video-compatible/</url>
<content type="html"><![CDATA[<blockquote><p>最近因为项目中用到了视频播放，所以使用了HTML5中的video标签，但是遇到了的各种兼容问题。背景：项目运行在支付宝内的网页，被第三方测试机构测出安卓和IOS中视觉不一样。<br><a id="more"></a></p></blockquote><h5 id="1-video标签有一个层级问题，永远大于页面其他元素的层级。这样就会导致如果页面有其他内容需要展示在页面上方的时候，比如弹层之类的，这样就会出现以下的情况。"><a href="#1-video标签有一个层级问题，永远大于页面其他元素的层级。这样就会导致如果页面有其他内容需要展示在页面上方的时候，比如弹层之类的，这样就会出现以下的情况。" class="headerlink" title="1. video标签有一个层级问题，永远大于页面其他元素的层级。这样就会导致如果页面有其他内容需要展示在页面上方的时候，比如弹层之类的，这样就会出现以下的情况。"></a>1. video标签有一个层级问题，永远大于页面其他元素的层级。这样就会导致如果页面有其他内容需要展示在页面上方的时候，比如弹层之类的，这样就会出现以下的情况。</h5><p><img src="https://upload-images.jianshu.io/upload_images/10832850-f2a73cfaec9c39fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="视频播放时点开其他的弹层（安卓）"><br>在安卓机型中，如果在视频的播放中的情况点开了其他置于视频上方的元素时，此时视频会挡住点开的元素，不管弹层的层级多高。PS: IOS系统中没有此问题。解决思路大概可如下：<br><figure class="highlight markdown"><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="bullet">1. </span>暂停播放中的视频</span><br><span class="line"><span class="bullet">2. </span>隐藏视频标签</span><br><span class="line"><span class="bullet">3. </span>写一个和视频大小一样的标签占位在原视频标签处，里面可放一张视频的封面图</span><br><span class="line"><span class="bullet">4. </span>显示其他弹出层内容</span><br><span class="line"><span class="bullet">5. </span>关闭弹层时，隐藏占位的封面图，显示视频标签并播放</span><br></pre></td></tr></table></figure></p><h5 id="2-视频在播放的情况下滚动页面，当视频消失在视线中的时候安卓和IOS的视觉效果不一样。IOS中会正常消失，而在安卓系统中会自动置顶在页面顶端。"><a href="#2-视频在播放的情况下滚动页面，当视频消失在视线中的时候安卓和IOS的视觉效果不一样。IOS中会正常消失，而在安卓系统中会自动置顶在页面顶端。" class="headerlink" title="2. 视频在播放的情况下滚动页面，当视频消失在视线中的时候安卓和IOS的视觉效果不一样。IOS中会正常消失，而在安卓系统中会自动置顶在页面顶端。"></a>2. 视频在播放的情况下滚动页面，当视频消失在视线中的时候安卓和IOS的视觉效果不一样。IOS中会正常消失，而在安卓系统中会自动置顶在页面顶端。</h5><p><img src="https://upload-images.jianshu.io/upload_images/10832850-ab95efac52870969.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="安卓中视频自动置顶"><br>解决思路：因为此问题是在视频播放的时候才会有这个问题，所有通过获取视频元素距离窗口的高度，当即将离开视线的时候暂停视频。最终还是失败：<br>在安卓中慢速的滑动时是没有问题的，视频暂停，不再置顶，正常的离开视线。但是当很快速的滑动时，还是控制不了它置顶在页面的顶部。下面的代码也考虑用了时间差来判断速度控制暂时，不过还是会先出现置顶，后才会暂停视频。<br>IOS中在自带的浏览器中是没有问题的，但是在<em>支付宝的内置浏览器</em> 中出现了问题，在手指滑动屏幕后，页面自动滚动的过程中，监听不了scroll事件，所以导致高度的计算值一直没有变化，当滚动停止后才更新高度。这样跟预期的想法也差了很远，所以这个方案也被kill。<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><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"><span class="keyword">var</span> touchHight = <span class="number">0</span></span><br><span class="line"><span class="keyword">var</span> dateTime = <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">$(<span class="string">'.warper'</span>).on(<span class="string">'scroll'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> v = $(<span class="string">'#video-active'</span>).offset().top - $(<span class="built_in">window</span>).scrollTop();</span><br><span class="line"> <span class="keyword">var</span> touchHightDiff = touchHight - v</span><br><span class="line"> <span class="keyword">var</span> timeDiff = <span class="keyword">new</span> <span class="built_in">Date</span>() - dateTime</span><br><span class="line"> touchHight = v</span><br><span class="line"> dateTime = <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span>(timeDiff < <span class="number">25</span> && touchHightDiff > <span class="number">20</span>){</span><br><span class="line"> $(<span class="string">'#video-active'</span>).trigger(<span class="string">'pause'</span>)</span><br><span class="line"> <span class="keyword">return</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(v<<span class="number">30</span> ){</span><br><span class="line"> $(<span class="string">'#video-active'</span>).trigger(<span class="string">'pause'</span>)</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(v><span class="number">30</span>){</span><br><span class="line"> $(<span class="string">'#video-active'</span>).trigger(<span class="string">'play'</span>);</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p><h5 id="3-考虑播放视频的时候全屏展示，退出就暂停视频播放。这样就不会有很大的视觉差别了。"><a href="#3-考虑播放视频的时候全屏展示，退出就暂停视频播放。这样就不会有很大的视觉差别了。" class="headerlink" title="3. 考虑播放视频的时候全屏展示，退出就暂停视频播放。这样就不会有很大的视觉差别了。"></a>3. 考虑播放视频的时候全屏展示，退出就暂停视频播放。这样就不会有很大的视觉差别了。</h5><p>这里引用第三方插件video.js,虽然播放的时候全屏显示，但是又有其他问题了。<br>安卓在退出全屏暂停播放后，再次点击播放的时候不会全屏了，正常播放了。这又和预期的效果不一样了，所以每次播放前视频都是隐藏，用图片代替，点击播放的时候再显示视频并全屏播放，暂停时再次隐藏视频，显示代替图片。这个过程中会有一些问题，安卓在退出全屏后并没有如期隐藏；IOS在暂停后再次播放的时候视频没有了画面。经过多次调试在全屏开始前都增加一个延时定时器会解决相关问题。如下，兼容代码：<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><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 播放视频 视频播放时开启全屏播放</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">videoPlayer</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">// 视频初始化</span></span><br><span class="line"> <span class="keyword">var</span> myPlayer = videoJs(<span class="string">'#video'</span>,{</span><br><span class="line"> width:<span class="string">'100%'</span>,</span><br><span class="line"> controls:<span class="literal">false</span>,</span><br><span class="line"> autoplay:<span class="literal">false</span></span><br><span class="line"> });</span><br><span class="line"> <span class="comment">// 视频模拟点击开始缓存视频</span></span><br><span class="line"> myPlayer.play();</span><br><span class="line"> setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> myPlayer.pause();</span><br><span class="line"> },<span class="number">300</span>)</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 点击替代图片全屏播放视频</span></span><br><span class="line"> $(<span class="string">"#videoPoster .play"</span>).click(<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 class="string">'#videoPoster'</span>).hide();</span><br><span class="line"> $(<span class="string">'#video'</span>).show()</span><br><span class="line"> <span class="comment">// 全屏播放</span></span><br><span class="line"> setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> myPlayer.requestFullscreen();</span><br><span class="line"> myPlayer.play();</span><br><span class="line"> },<span class="number">300</span>)</span><br><span class="line"> });</span><br><span class="line"> <span class="comment">// 视频退出全屏会自动暂停触发暂停事件</span></span><br><span class="line"> myPlayer.on(<span class="string">"pause"</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 class="string">'#videoPoster'</span>).show()</span><br><span class="line"> $(<span class="string">'#video'</span>).hide()</span><br><span class="line"> });</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><p>就这样，还是可能会更换其他的方案。</p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> WEB </tag>
<tag> 移动端 </tag>
<tag> 兼容 </tag>
</tags>
</entry>
<entry>
<title>理想三旬 The road of youth</title>
<link href="/2018/05/19/The-road-of-youth/"/>
<url>/2018/05/19/The-road-of-youth/</url>
<content type="html"><![CDATA[<p>非常喜欢陈叔的理想三旬，今天无意中发现了一个英文版本的The road of youth，这声线好好听。<br><a id="more"></a></p><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=3&id=910442393&auto=1&height=66"></iframe><p>词：唐映枫 曲：陈鸿宇<br>翻唱：Leo&Mia<br>雨后有车驶来<br>Raining bus hides in dawn<br>驶过暮色苍白<br>Moving passes the lawn<br>旧铁皮往南开，恋人已不在<br>Old driver sheds tears his lover has gone<br>收听浓烟下的<br>Radio under the smoke<br>诗歌电台<br>Palying our song<br>不动情的咳嗽，至少看起来<br>Whose garment is torn,whose dream around shade<br>归途也还可爱<br>The way home filled with flame<br>琴弦少了姿态<br>The strings losing some blames<br>再不见那夜里，听歌的小孩<br>Listening to trains, the noise with railways<br>时光匆匆独白<br>Time telling story to her<br>将颠沛磨成卡带<br>recovering the suffer<br>已枯卷的情怀，踏碎成年代<br>The lonely night, arouse up dreamers</p><p>就老去吧，孤独别醒来<br>When the day is gone, let the day feel strong<br>你渴望的离开<br>Your hoping to go<br>只是无处停摆<br>Just to siwing alone<br>就歌唱吧，眼睛眯起来<br>When the night is on, let the night left lone<br>而热泪的崩坏<br>Your wishing to grow<br>只是没抵达的存在<br>Just for chasing with the dawn</p><p>青春又醉倒在<br>Youth lie in the bloom<br>籍籍无名的怀<br>No pain and no sorrow gloom<br>靠嬉笑来虚度，聚散得慷慨<br>Wasting time of dreak leaving without mood<br>辗转却去不到<br>Using coins to toss<br>对的站台<br>follow the souls<br>如果漂泊是成长，必经的路牌<br>Drifting in the growth meeting with a blouse<br>你迷醒岁月中<br>Sleep with the naive gown<br>那贫瘠的未来<br>When the future is done<br>像遗憾季节里，未结果的爱<br>Just like the sweat love though within no cores<br>弄脏了每一页诗<br>Mess every single word up<br>吻最疼痛的告白<br>Feel every ache in the lips<br>而风声吹到这，已不需要释怀<br>When the wind blowing here, no time for release<br>就老去吧，孤独别醒来<br>When the day is gone, let the day feel strong<br>你渴望的离开<br>Your hoping to go<br>只是无处停摆<br>Just to siwing alone<br>就歌唱吧，眼睛眯起来<br>When the night is on, let the night left lone<br>而热泪的崩坏<br>Your wishing to grow<br>只是没抵达的存在<br>Just for chasing with the dawn</p><p>就甜蜜地忍耐<br>The wind has felt tired<br>繁星润湿窗台<br>Starry windows in eyes<br>光影跳动着像在，困倦里说爱<br>Light jumping out says love in the hide<br>再无谓的感慨<br>No more space for sign<br>以为明白<br>Till the drine<br>梦倒塌的地方，今已爬满青苔<br>When the sun goes hide, the primes follow mind</p><p>视频地址：<a href="https://v.qq.com/x/page/r0546vyagxd.html" target="_blank" rel="noopener">英文版理想三旬The Road of Youth</a></p>]]></content>
<categories>
<category> 理想三旬 </category>
</categories>
<tags>
<tag> 民谣 </tag>
</tags>
</entry>
<entry>
<title>Hexo博客搭建遇到的相关问题解答</title>
<link href="/2018/05/13/Hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E9%81%87%E5%88%B0%E7%9A%84%E7%9B%B8%E5%85%B3%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94/"/>
<url>/2018/05/13/Hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E9%81%87%E5%88%B0%E7%9A%84%E7%9B%B8%E5%85%B3%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94/</url>
<content type="html"><![CDATA[<h4 id="Q-如何使用github的根目录访问Hexo搭建的博客网站"><a href="#Q-如何使用github的根目录访问Hexo搭建的博客网站" class="headerlink" title="Q: 如何使用github的根目录访问Hexo搭建的博客网站?"></a>Q: 如何使用github的根目录访问Hexo搭建的博客网站?</h4><a id="more"></a><h5 id="A"><a href="#A" class="headerlink" title="A:"></a>A:</h5><ol><li><p>建立与你用户名对应的仓库，仓库名如下：</p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">your_user_name<span class="selector-class">.github</span><span class="selector-class">.io</span></span><br></pre></td></tr></table></figure></li><li><p>Hexo 根配置文件如下：</p></li></ol><figure class="highlight groovy"><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">url:</span> <span class="string">https:</span><span class="comment">//your_user_name.github.io/</span></span><br><span class="line"><span class="string">root:</span> /</span><br></pre></td></tr></table></figure><ol start="3"><li>此时即可通过<a href="https://your_user_name.github.io/" target="_blank" rel="noopener">https://your_user_name.github.io</a>访问，不用携带子路径。</li></ol><hr><h4 id="Q-Hexo-categories，tags，about页面不显示解决办法"><a href="#Q-Hexo-categories，tags，about页面不显示解决办法" class="headerlink" title="Q: Hexo categories，tags，about页面不显示解决办法?"></a>Q: Hexo categories，tags，about页面不显示解决办法?</h4><h5 id="A-1"><a href="#A-1" class="headerlink" title="A:"></a>A:</h5><ol><li>默认初始化的时候是没有categories和tags等页面的，如果需要，执行如下命令新增相关页面：</li></ol><figure class="highlight routeros"><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">hexo new<span class="built_in"> page </span><span class="string">"tags"</span></span><br><span class="line"></span><br><span class="line">hexo new<span class="built_in"> page </span><span class="string">"categories"</span></span><br><span class="line"></span><br><span class="line">hexo new<span class="built_in"> page </span><span class="string">"about"</span></span><br></pre></td></tr></table></figure><ol start="2"><li><p>编辑 /tags/index.md /categories/index.md /about/index.md</p><figure class="highlight dts"><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="comment">// tags</span></span><br><span class="line"><span class="symbol">type:</span> tags</span><br><span class="line"><span class="symbol">layout:</span> tags</span><br><span class="line"></span><br><span class="line"><span class="comment">// categories</span></span><br><span class="line"><span class="symbol">type:</span> categories</span><br><span class="line"><span class="symbol">layout:</span> categories</span><br><span class="line"></span><br><span class="line"><span class="comment">// about</span></span><br><span class="line"><span class="symbol">title:</span> about</span><br><span class="line"><span class="symbol">layout:</span> about</span><br></pre></td></tr></table></figure></li><li><p>有一点要注意的是，上面layout对应的值要与实际你用的主题中的layout的名称要对上，不然会造成页面加载不出来</p></li></ol><figure class="highlight dts"><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="comment">// categories 我的主题categories页实际的layout名是category.ejs</span></span><br><span class="line"><span class="symbol">title:</span> categories</span><br><span class="line"><span class="symbol">layout:</span> category</span><br></pre></td></tr></table></figure><hr><h4 id="Q-Hexo-categories，tags有中文的情况下会导致url访问路径也会带上中文，怎么设置别名"><a href="#Q-Hexo-categories，tags有中文的情况下会导致url访问路径也会带上中文，怎么设置别名" class="headerlink" title="Q: Hexo categories，tags有中文的情况下会导致url访问路径也会带上中文，怎么设置别名?"></a>Q: Hexo categories，tags有中文的情况下会导致url访问路径也会带上中文，怎么设置别名?</h4><p>比如分类我们设置的是：</p><figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">categories:</span> 前端</span><br></pre></td></tr></table></figure><p>那么在生成页面后，分类列表就会出现前端这个选项，它的访问路径是：</p><figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="regexp">/categories/</span>前端</span><br></pre></td></tr></table></figure><h5 id="A-2"><a href="#A-2" class="headerlink" title="A:"></a>A:</h5><ol><li><p>打开根目录下的配置文件 _config.yml ，找到如下位置做更改：</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">default_category</span>: uncategorized</span><br><span class="line"></span><br><span class="line"><span class="attribute">category_map:</span></span><br><span class="line"> 前端: fontend</span><br><span class="line"><span class="attribute">tag_map:</span></span><br><span class="line"> 测试: test</span><br></pre></td></tr></table></figure></li><li><p>此时的访问路径将是：</p></li></ol><figure class="highlight coffeescript"><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="regexp">/categories/fontend/</span></span><br><span class="line"><span class="regexp">/tags/test/</span></span><br></pre></td></tr></table></figure><hr><h4 id="Q-Hexo主题中如何实现多级分类？"><a href="#Q-Hexo主题中如何实现多级分类？" class="headerlink" title="Q: Hexo主题中如何实现多级分类？"></a>Q: Hexo主题中如何实现多级分类？</h4><h5 id="A-3"><a href="#A-3" class="headerlink" title="A:"></a>A:</h5><ol><li>在主题文件夹中找到 layout/category.ejs 文件，修改成如下所示：<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><% <span class="keyword">if</span> (site.categories.length){ %></span><br><span class="line"><div <span class="class"><span class="keyword">class</span></span>=<span class="string">"widget tag"</span>></span><br><span class="line"> <h3 <span class="class"><span class="keyword">class</span></span>=<span class="string">"title"</span>><span class="xml"><span class="tag"><<span class="name">%=</span> <span class="attr">__</span>('<span class="attr">categories</span>') %></span><span class="tag"></<span class="name">h3</span>></span></span></span><br><span class="line"> <%- list_categories(site.categories) %></span><br><span class="line"><<span class="regexp">/div></span></span><br><span class="line"><span class="regexp"><% } %></span></span><br></pre></td></tr></table></figure></li></ol><blockquote><p>如果不显示多级分类了，只需设置list_categories函数的参数即可<br>list_categories(site.categories,{depth: 1}) 这样就只会显示一级分类了。</p></blockquote>]]></content>
<categories>
<category> 前端 </category>
<category> 其他 </category>
</categories>
<tags>
<tag> Hexo </tag>
</tags>
</entry>
<entry>
<title>npm 同时执行多条监听命令</title>
<link href="/2018/04/20/npm-mult-cmds/"/>
<url>/2018/04/20/npm-mult-cmds/</url>
<content type="html"><![CDATA[<p>在全栈开发中，难免会遇到同时需启动多个服务，按照常规的方式需要开启多个窗口，这样难免有些麻烦。<br>下面介绍一种只需要一条npm执行多条命令，即可开启多个服务：<br><a id="more"></a></p><h4 id="1-安装-concurrently"><a href="#1-安装-concurrently" class="headerlink" title="1.安装 concurrently:"></a>1.安装 concurrently:</h4><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">npm install -g concurrently</span><br></pre></td></tr></table></figure><h4 id="2-更改package-json的-scripts"><a href="#2-更改package-json的-scripts" class="headerlink" title="2.更改package.json的 scripts:"></a>2.更改package.json的 scripts:</h4><p> 方便同时启动多个服务，此时后端的代码是在前端代码中的一个目录，这样方便操作。<br><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">"scripts": {</span><br><span class="line"> "client": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",</span><br><span class="line"> "server" : "node node/bin/www",</span><br><span class="line"> "start": "concurrent \"npm run client\" \"npm run server\""</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></p><h4 id="3-启动"><a href="#3-启动" class="headerlink" title="3.启动:"></a>3.启动:</h4><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">npm run start</span><br></pre></td></tr></table></figure><p><img src="https://upload-images.jianshu.io/upload_images/10832850-a5973af4f54c7b10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="微信截图_20180420105210.png"></p>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> npm </tag>
</tags>
</entry>
<entry>
<title>移动端弹出遮罩层后 禁止页面滚动</title>
<link href="/2018/03/10/forbid-scrolling/"/>
<url>/2018/03/10/forbid-scrolling/</url>
<content type="html"><![CDATA[<p>在开发移动web的时候，相信大家都会遇到当有 fixed定位遮罩层弹出时，在屏幕上滑动能够滑动背景下面的内容，这在大部分场景下都不是和友好的，解决方法如下：<br><a id="more"></a></p><h4 id="1-CSS-overflow-hidden"><a href="#1-CSS-overflow-hidden" class="headerlink" title="1. CSS overflow:hidden"></a>1. CSS overflow:hidden</h4><p>一般这种情况如果需要阻止滚动嘴简单的方法就是弹层弹出后，给body设置样式 overflow:hidden;在弹层隐藏的同时去掉加上的css, 不过这种并不适用与body的高度刚好是页面的高度，实际下层穿透滚动的元素是在body中的其他元素。 不能完全禁止，还是会有元素可以滚动。<br><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></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>{</span><br><span class="line"> <span class="attribute">overflow</span>:hidden</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p><h4 id="2-JS-preventDefault"><a href="#2-JS-preventDefault" class="headerlink" title="2. JS preventDefault"></a>2. JS preventDefault</h4><p>监听touchmove事件并阻止默认事件<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">'mask'</span>).addEventListener(<span class="string">'touchmove'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>{</span><br><span class="line"> event.preventDefault();</span><br><span class="line">})</span><br></pre></td></tr></table></figure></p>]]></content>
<categories>
<category> 前端 </category>
<category> JS </category>
</categories>
<tags>
<tag> WEB </tag>
<tag> HTML5 </tag>
</tags>
</entry>
<entry>
<title>iOS web html5 移动端 软键盘弹起遮挡输入框 输入框定位不准确</title>
<link href="/2017/12/14/ios-web-input/"/>
<url>/2017/12/14/ios-web-input/</url>
<content type="html"><![CDATA[<p>移动web当有输入框fixed定位在底部的时候，点击输入，弹起软键盘，iOS在将页面推上的时候会回弹一下，导致键盘刚好遮挡到输入框。而且在页面不同高度弹起的键盘对输入框的位置还不一样。（所受影响的元素此时是fixed定位）。<br><a id="more"></a></p><h4 id="1-当换起键盘的时候把输入框的fixed定位改为relative定位到页面的底部，当输入完成离开输入框的时候，再把输入框的定位改为fixed。这样不会引起输入框的位置不可控。处理较为简单。"><a href="#1-当换起键盘的时候把输入框的fixed定位改为relative定位到页面的底部，当输入完成离开输入框的时候，再把输入框的定位改为fixed。这样不会引起输入框的位置不可控。处理较为简单。" class="headerlink" title="1. 当换起键盘的时候把输入框的fixed定位改为relative定位到页面的底部，当输入完成离开输入框的时候，再把输入框的定位改为fixed。这样不会引起输入框的位置不可控。处理较为简单。"></a>1. 当换起键盘的时候把输入框的fixed定位改为relative定位到页面的底部，当输入完成离开输入框的时候，再把输入框的定位改为fixed。这样不会引起输入框的位置不可控。处理较为简单。</h4><p><img src="https://upload-images.jianshu.io/upload_images/10832850-48491caaef3d5b3f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/400" alt="触发留言之前的界面.jpg"></p><p><img src="https://upload-images.jianshu.io/upload_images/10832850-a26f05498f52e1e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/400" alt="换起输入框之后的界面.jpg"><br>代码如下：<br><figure class="highlight js"><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">if</span>(isiOS){</span><br><span class="line"> $(<span class="built_in">document</span>).on(<span class="string">"focusin"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">// $('.postMsgBg') 输入框</span></span><br><span class="line"> $(<span class="string">'.postMsgBg'</span>).css(<span class="string">'position'</span>,<span class="string">'relative'</span>)</span><br><span class="line"> <span class="keyword">var</span> clientHeight= <span class="built_in">document</span>.body.clientHeight;</span><br><span class="line"> setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> $(<span class="built_in">window</span>).scrollTop(clientHeight);</span><br><span class="line"> },<span class="number">300</span>);</span><br><span class="line"> });</span><br><span class="line"> $(<span class="built_in">document</span>).on(<span class="string">'focusout'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'.postMsgBg'</span>).css(<span class="string">'position'</span>,<span class="string">'fixed'</span>)</span><br><span class="line"> });</span><br><span class="line">};</span><br></pre></td></tr></table></figure></p><p>以上的方法是可以解决弹起键盘后输入框乱跳的问题，但是每次都会跳到屏幕的最下方，这样会比较突兀，相对体验不是很友好。</p><h4 id="2-在body下面新建一个具有absolute属性的元素，将页面所有的模块放在此元素中。在此元素的同级新建一个定位为fixed的元素（输入框）。这样每次弹起也不会造成输入框乱跳，并且每次弹起的位置是在点击的位置。"><a href="#2-在body下面新建一个具有absolute属性的元素，将页面所有的模块放在此元素中。在此元素的同级新建一个定位为fixed的元素（输入框）。这样每次弹起也不会造成输入框乱跳，并且每次弹起的位置是在点击的位置。" class="headerlink" title="2. 在body下面新建一个具有absolute属性的元素，将页面所有的模块放在此元素中。在此元素的同级新建一个定位为fixed的元素（输入框）。这样每次弹起也不会造成输入框乱跳，并且每次弹起的位置是在点击的位置。"></a>2. 在body下面新建一个具有absolute属性的元素，将页面所有的模块放在此元素中。在此元素的同级新建一个定位为fixed的元素（输入框）。这样每次弹起也不会造成输入框乱跳，并且每次弹起的位置是在点击的位置。</h4><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><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="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'warper'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'content'</span>></span><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><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"fix-bottom"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></span><br><span class="line"><span class="css"> <span class="selector-class">.warper</span>{</span></span><br><span class="line"><span class="undefined"> position: absolute;</span></span><br><span class="line"><span class="undefined"> width: 100%;</span></span><br><span class="line"><span class="undefined"> left: 0;</span></span><br><span class="line"><span class="undefined"> right: 0;</span></span><br><span class="line"><span class="undefined"> top: 0;</span></span><br><span class="line"><span class="undefined"> bottom: 0;</span></span><br><span class="line"><span class="undefined"> overflow-y: scroll;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">-webkit-overflow-scrolling</span>: <span class="selector-tag">touch</span>;<span class="comment">/* 解决ios滑动不流畅问题 */</span></span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.fix-bottom</span>{</span></span><br><span class="line"><span class="css"> <span class="selector-tag">position</span><span class="selector-pseudo">:fixed</span>;</span></span><br><span class="line"><span class="css"> <span class="selector-tag">bottom</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line"><span class="undefined"> width: 100%;</span></span><br><span class="line"><span class="undefined"> }</span></span><br><span class="line"><span class="undefined"></span><span class="tag"></<span class="name">style</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 前端 </category>
</categories>
<tags>
<tag> WEB </tag>
<tag> HTML5 </tag>
<tag> 移动端 </tag>
<tag> 兼容 </tag>
</tags>
</entry>
</search>