-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
604 lines (523 loc) · 27.1 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>https://smart.hyggehyy.com/</id>
<title>Hyggehyy</title>
<updated>2021-03-17T22:28:14.431Z</updated>
<generator>Saber</generator>
<author>
<name/>
<uri>https://smart.hyggehyy.com</uri>
</author>
<link rel="alternate" href="https://smart.hyggehyy.com"/>
<link rel="self" href="https://smart.hyggehyy.com/atom.xml"/>
<subtitle>Everything is gonna be ok.</subtitle>
<rights>All rights reserved</rights>
<entry>
<title type="html"><![CDATA[App端动态绘制分享卡片]]></title>
<id>https://smart.hyggehyy.com/2021/03/16/App%E7%AB%AF%E5%8A%A8%E6%80%81%E7%BB%98%E5%88%B6%E5%88%86%E4%BA%AB%E5%8D%A1%E7%89%87</id>
<link href="https://smart.hyggehyy.com/2021/03/16/App%E7%AB%AF%E5%8A%A8%E6%80%81%E7%BB%98%E5%88%B6%E5%88%86%E4%BA%AB%E5%8D%A1%E7%89%87"/>
<updated>2021-03-17T22:27:44.524Z</updated>
<summary type="html"><![CDATA[需求是在不同用户信息和分享内容的情况下，动态绘制下面的分享卡片，用户可以保存到手机中或通过分享API即时分享。
]]></summary>
<content type="html"><![CDATA[<h2 id="遇到问题">遇到问题</h2> <p>需求是在不同用户信息和分享内容的情况下，动态绘制下面的分享卡片，用户可以保存到手机中或通过分享API即时分享。</p> <img src="https://ls-img-store.oss-cn-qingdao.aliyuncs.com/img/post-2021-3-17.png" style="zoom:25%;"> <p>在H5端是很好实现的， 大致流程是：</p> <ol><li>使用<code>html2canvs</code>把html转化成canvas</li> <li><code>canvas.toDataURL(type, encoderOptions);</code> canvas转图片base64</li> <li><code>dataURLtoBlob()</code> base64转图片二进制 blob 对象</li> <li><code>URL.createObjectURL()</code> blob对象转对象URL</li> <li>使用<code><a></code>或者<code>uni.downloadFile()</code>下载图片即可</li></ol> <p>但在App端，视图层和逻辑层是分离的，在逻辑层拿不到视图层的<code>document</code>对象，也就无法使用<code>html2canvas</code>。</p> <p>又尝试了内置的<code>wxs</code>，由于<code>wxs</code>是运行在视图层的脚本语言，自然可以使用<code>document</code>对象，但是，在App端中无法使用<code><a></code>标签下载文件，<code>wxs</code>又不能使用<code>uni</code>各种接口，即使是通过<code>ownerInstance</code>传值给<code>uni</code>，然后调用<code>uni.downloadFile()</code>下载，也因为跨越两个脚本环境、且对象URL只针对当前环境有效的原因，也无法顺利进行。</p> <h2 id="可行方案">可行方案</h2> <p>使用canvas手动绘制出卡片内容，然后使用<code>uni.canvasToTempFilePath()</code>获取对象URL和<code>uni.saveImageToPhotosAlbum()</code>保存图片到相册即可。</p> <h2 id="实现细节">实现细节</h2> <p>代码细节</p> <div class="saber-highlight" data-lang="js"><pre class="saber-highlight-code language-js"><code class="language-js">changeCanvas: function() {
let ctx = uni.createCanvasContext('myCanvas')
let centerStr = 119
// 深灰色背景
ctx.fillStyle = '#555'
ctx.fillRect(0, 0, 238, 456)
// 白色背景
// ctx.fillStyle = '#fff'
// ctx.fillRect(10, 28, 218, 398)
ctx.beginPath()
ctx.moveTo(20, 28)
// 左上角
ctx.arc(20, 38, 10, Math.PI, Math.PI*3/2)
// 上边线
ctx.lineTo(218, 28)
// 右上角
ctx.arc(215, 38, 10, Math.PI*3/2, 0)
// 右边线
ctx.lineTo(225, 412)
// 右下角
ctx.arc(215, 412, 10, 0, Math.PI/2)
// 下边线
ctx.lineTo(20, 422)
// 左下角
ctx.arc(20, 412, 10, Math.PI/2, Math.PI)
// 左边线
ctx.lineTo(10, 38)
// ctx.closePath()
ctx.fillStyle = '#fff'
ctx.fill()
// 用户名
ctx.textAlign = 'center'
// ctx.setTextAlign('center')
ctx.fillStyle = '#333'
ctx.setFontSize(18)
ctx.fillText('Hello', centerStr, 69)
// 广告语
ctx.fillStyle = '#999'
ctx.setFontSize(10)
ctx.fillText('在'+this.$mConfig.appName+'App发现了一篇好文章', centerStr, 90)
// 文章标题
ctx.fillStyle = '#333'
ctx.setFontSize(18)
let str = this.passageDetail.title
ctx.fillText(str.substring(0, 10), centerStr, 260)
if(str.length > 10) ctx.fillText(str.substring(10, 18)+'...', centerStr, 282)
// 文章摘要
ctx.fillStyle = '#888'
ctx.setFontSize(12)
let profile = this.passageDetail.describe
ctx.fillText(profile.substring(0, 13), centerStr, 310)
if(profile.length > 10) ctx.fillText(profile.substring(13, 22)+'...', centerStr, 329)
// 间隔线
ctx.strokeStyle = '#CED0D1'
ctx.moveTo(30, 350)
ctx.lineTo(208, 350)
ctx.stroke()
// 提示
ctx.textAlign = 'left'
ctx.fillText('长按识别二维码收听', 90, 380)
ctx.fillText(this.userinfo.user_nickname, 90, 399)
// 文章logo
// ctx.drawImage(this.shareImgMetarials[1].path, 80, 126, 119, 119)
ctx.drawImage(this.passageDetail.thumbnail, 66, 109, 119, 119)
// 二维码
ctx.drawImage(this.shareQrcode, 30, 360, 46, 46)
// 用户logo
ctx.save()
ctx.stroke()
ctx.beginPath();
ctx.moveTo(62, 12)
ctx.arc(117, 27, 15, 0, Math.PI*2, false);
ctx.clip();
ctx.drawImage(this.userinfo.avatar, 102, 12, 30, 30)
ctx.restore()
ctx.draw()
}</code></pre></div><h2 id="总结">总结</h2> <p>App的混合开发确实方便快捷，但是也会在不时遇到的因为非原生开发带来的棘手问题时，感觉力不从心， 而转向原生开发又违背混合开发的初心，现在只能先暂时寄希望于行业能力慢慢迭代，打破这个循环。</p>]]></content>
<published>2021-03-16T00:00:00.000Z</published>
</entry>
<entry>
<title type="html"><![CDATA[跳转第三方App]]></title>
<id>https://smart.hyggehyy.com/2021/03/07/%E8%B7%B3%E8%BD%AC%E7%AC%AC%E4%B8%89%E6%96%B9App</id>
<link href="https://smart.hyggehyy.com/2021/03/07/%E8%B7%B3%E8%BD%AC%E7%AC%AC%E4%B8%89%E6%96%B9App"/>
<updated>2021-03-07T09:40:03.161Z</updated>
<summary type="html"><![CDATA[项目中遇到了需要跳转第三方App的需求，在当前项目App跳转至自家其他App。
]]></summary>
<content type="html"><![CDATA[<h2 id="遇到问题">遇到问题</h2> <p>项目中遇到了需要跳转第三方App的需求，在当前项目App跳转至自家其他App。</p> <h2 id="可行方案">可行方案</h2> <p>查阅资料后发现5+API中有需要的功能接口<code>plus.runtime.launchApplication</code>，直接调用即可。</p> <p>首先判断用户设备上是否安装了需要跳转的App，如果有则跳转，否则执行其他操作（如：下载App等）。</p> <p>在App间跳转时也可以携带参数，方便联动，需要使用接口<code>plus.runtime.openUR</code>。</p> <h2 id="实现细节">实现细节</h2> <p>假设<strong>应用A</strong>跳转至<strong>应用B</strong></p> <p>判断用户设备中是否安装<strong>应用B</strong></p> <p><em><code>pname</code>参数是<strong>应用B</strong>的包名</em></p> <div class="saber-highlight" data-lang="js"><pre class="saber-highlight-code language-js"><code class="language-js">plus.runtime.isApplicationExist({
pname: 'com.tencent.mm' // 以微信为例
})</code></pre></div><p>跳转</p> <div class="saber-highlight" data-lang="js"><pre class="saber-highlight-code language-js"><code class="language-js">plus.runtime.launchApplication({
pname: 'com.tencent.mm'
}, err => {
console.log('Error:', err)
} );</code></pre></div><h3 id="传递参数">传递参数</h3> <p>App间传递参数的话，需要使用<code>scheme</code>，先在<strong>应用B</strong>manifest.json中首先声明<code>scheme</code>。</p> <p><img src="https://ls-img-store.oss-cn-qingdao.aliyuncs.com/img/20210307.png" alt="20210307"></p> <p><strong>应用A</strong>执行跳转操作</p> <div class="saber-highlight" data-lang="js"><pre class="saber-highlight-code language-js"><code class="language-js">plus.runtime.openURL("zsffkop://search?key=cruiser");</code></pre></div><p><strong>应用B</strong>可以在<code>onshow()</code>中获取参数</p> <div class="saber-highlight" data-lang="js"><pre class="saber-highlight-code language-js"><code class="language-js">onShow(){
// #ifdef APP-PLUS
console.log('arguments: ', plus.runtime.arguments) // zsffkop://search?key=cruiser
// #endif
}</code></pre></div>]]></content>
<published>2021-03-07T00:00:00.000Z</published>
</entry>
<entry>
<title type="html"><![CDATA[简易3D模型]]></title>
<id>https://smart.hyggehyy.com/2021/02/28/%E7%AE%80%E6%98%933D%E6%A8%A1%E5%9E%8B</id>
<link href="https://smart.hyggehyy.com/2021/02/28/%E7%AE%80%E6%98%933D%E6%A8%A1%E5%9E%8B"/>
<updated>2021-03-07T09:40:11.149Z</updated>
<summary type="html"><![CDATA[年前兴起了酒包装定制的热潮，公司也有个相关项目，其中，需要一个页面来展示酒盒定制后的3D旋转模型。效果图如下：
]]></summary>
<content type="html"><![CDATA[<h2 id="遇到问题">遇到问题</h2> <p>年前兴起了酒包装定制的热潮，公司也有个相关项目，其中，需要一个页面来展示酒盒定制后的3D旋转模型。效果图如下：</p> <p><img src="https://ls-img-store.oss-cn-qingdao.aliyuncs.com/img/box3dDemo.gif" alt=""></p> <h2 id="可行方案">可行方案</h2> <p>由于页面需要的只是一个拥有包装图案的简单立方体，没必要建模，仅通过<code>three.js</code>自带的模型即可解决。虽然之前没有接触过<code>three.js</code>，但上手还算容易，通过调整<a rel="noopener noreferrer" target="_blank" href="http://www.webgl3d.cn/Three.js/">案例</a>中的一些参数即可实现需要的效果。</p> <h2 id="实现细节">实现细节</h2> <p>使用<code>three.js</code>通过内置模型实现效果，一般需要以下几步：</p> <p><img src="https://ls-img-store.oss-cn-qingdao.aliyuncs.com/img/image-20210307154645717.png" alt="image-20210307154645717"></p> <p>关键代码如下：</p> <div class="saber-highlight" data-lang="js"><pre class="saber-highlight-code language-js"><code class="language-js">boxModelLoad: function(boxImg){
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
// 由于模型大小并不确定，所以在长宽高中计算中最大值，然后其他两边按比例做小，以确保每个边都在屏幕显示范围之内
let norm = 336
let maxSize = this.boxModelSize[0]
let maxIndex = 0
for(let m in this.boxModelSize) {
if(Number(this.boxModelSize[m]) > maxSize) {
maxSize = Number(this.boxModelSize[m])
maxIndex = m
}
}
let propotion = norm /maxSize
for(let m in this.boxModelSize) {
if(maxIndex == m) this.boxModelSize[maxIndex] = norm
else {
this.boxModelSize[m] = propotion *this.boxModelSize[m]
}
}
/**
* 创建网格模型
* 创建一个立方体对象
* 长宽高由上面计算得出
*/
var geometry = new THREE.BoxGeometry(this.boxModelSize[1], this.boxModelSize[2], this.boxModelSize[0]);
var mesh
var textureLoader = new THREE.TextureLoader();
/**
* 准备材质对象
* 立方体六个平面需要六个不同的图片
*/
// 前
var texture1 = textureLoader.load(boxImg);
var material_1 = new THREE.MeshLambertMaterial({
map: texture1, // 设置纹理贴图
});
// 后
var texture2 = textureLoader.load(this.boxModelBackLink ? this.boxModelBackLink: boxImg);
var material_2 = new THREE.MeshLambertMaterial({
map: texture2, // 设置纹理贴图
});
// 上
var texture3 = textureLoader.load(this.boxModelTopLink);
var material_3 = new THREE.MeshLambertMaterial({
map: texture3, // 设置纹理贴图
});
// 下
var texture4 = textureLoader.load('data:image/png;base64,iVBORw0KGgoAAkJggg==');
var material_4 = new THREE.MeshLambertMaterial({
map: texture4, // 设置纹理贴图
});
// 左
var texture5 = textureLoader.load(this.boxModelLeftLink);
var material_5 = new THREE.MeshLambertMaterial({
map: texture5, // 设置纹理贴图
});
// 右
var texture6 = textureLoader.load(this.boxModelRightLink);
var material_6 = new THREE.MeshLambertMaterial({
map: texture6, // 设置纹理贴图
});
var materialArr = [material_1, material_2, material_3, material_4, material_5, material_6]
//网格模型对象Mesh
mesh = new THREE.Mesh(geometry, materialArr);
//网格模型添加到场景中
scene.add(mesh);
/**
* 光源位置
* 分为点光源和环境光两种
*/
//点光源
// var point = new THREE.PointLight(0xaaaaaa);
// point.position.set(400, 160, 300); //点光源位置
// point.castShadow = true; // default false
// scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
/**
* 相机设置
* 创建相机对象
*/
var width = window.innerWidth; //窗口宽度
var height = 350; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(900, 100, 100); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
//设置canvas的像素比为当前设备的屏幕像素比，避免高分屏下模糊
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xf8f8f8, 1); //设置背景颜色
//在需要的元素中插入canvas对象
document.getElementById('boxModel').appendChild(renderer.domElement);
/**
* 执行渲染操作
* 并添加旋转效果
*/
let T0 = new Date();//上次时间
function render() {
let T1 = new Date();//本次时间
let t = T1-T0;//时间差
T0 = T1;//把本次时间赋值给上次时间
requestAnimationFrame(render);
renderer.render(scene,camera);//执行渲染操作
mesh.rotateY(0.0005*t);//旋转角速度0.001弧度每毫秒
}
render();
}</code></pre></div><h2 id="总结">总结</h2> <p><code>three.js</code>还有许多其他功能，但是如果不是经常使用的话，也没有必要每个都去了解，大概浏览下功能，需要的时候再去挑着细看，也不失为一个提高效率的办法。</p>]]></content>
<published>2021-02-28T00:00:00.000Z</published>
</entry>
<entry>
<title type="html"><![CDATA[音频播放控制]]></title>
<id>https://smart.hyggehyy.com/2021/02/25/%E9%9F%B3%E9%A2%91%E6%92%AD%E6%94%BE</id>
<link href="https://smart.hyggehyy.com/2021/02/25/%E9%9F%B3%E9%A2%91%E6%92%AD%E6%94%BE"/>
<updated>2021-03-07T09:40:16.236Z</updated>
<summary type="html"><![CDATA[最近做知识付费app的项目时，需要一个音频/视频播放页，视频播放直接使用官方提供的<video>组件就可，但是在做音频播放页面时遇到了两个问题：
]]></summary>
<content type="html"><![CDATA[<h2 id="遇到问题">遇到问题</h2> <p>最近做知识付费app的项目时，需要一个音频/视频播放页，视频播放直接使用官方提供的<code><video></code>组件就可，但是在做音频播放页面时遇到了两个问题：</p> <ul><li>关于音频播放的音频组件<code><audio></code>力不从心，难以实现<strong>倍速播放</strong>功能（硬伤</li> <li>音频播放进度条</li></ul> <h2 id="可行方案">可行方案</h2> <p>针对第一个问题，可以使用<code><video></code>组件实现，然后通过css把<code><video></code>隐藏。</p> <p>针对第二个问题，由于项目中引入了<code>uView</code>框架，便采用了<code>u-slider</code>来实现，但其中一些拖拉/点击/进度控制等效果仍需自行解决。</p> <h2 id="实现细节">实现细节</h2> <p>首先，贴下效果图：</p> <img src="https://ls-img-store.oss-cn-qingdao.aliyuncs.com/img/audio.png" alt="audio" style="zoom:25%;"> <h3 id="解决问题一">解决问题一</h3> <p>代码如下：</p> <div class="saber-highlight" data-lang="vue"><pre class="saber-highlight-code language-vue"><code class="language-vue"><!-- template -->
<video id="myVideo" :src="audioUrl" :initial-time="initialTime" class="hidden" @timeupdate="timeupdate" ref="video"></video>
<!-- script -->
export default {
data() {
return {
videoContext: null, // 资源对象 在mount()中初始化
audioUrl '', // 音频地址
initialTime: '', // 初始播放位置
playbackRateList: ['0.5', '0.8', '1.0', '1.25', '1.5'], // 倍速可选值
playbackRateIndex: 2, // 当前倍速Index
processUnit2Second： 0， // 进度条滑动一个单位时音频秒数的变化 在mount()中初始化
}
}，
methods: {
/**
* @@description 视频方法
*
*/
// 倍速
setRate: function(num) {
// 当前时间进度倍率
if(num === 0.5) this.interval = 2000
if(num === 0.8) this.interval = 1250
if(num === 1) this.interval = 1000
if(num === 1.25) this.interval = 800
if(num === 1.5) this.interval = 666.666667
this.auidoControl(false)
// 视频倍率
this.videoContext.playbackRate(num)
},
// 播放
play: function() {
this.videoContext.play()
},
// 暂停
stop: function() {
this.videoContext.pause()
},
// 跳转到置顶时间位置
seek: function(sec) {
this.videoContext.seek(sec)
},
// 播放进度变化时触发
timeupdate: function(evt) {
// console.log(evt.target.currentTime)
},
/**
* @description 功能区点击事件
* id: 0,
name: '目录'
id: 1,
name: '倍速',
id: 2,
name: '定时'
id: 3,
name: '下载'
id: 4,
name: '评论'
*
*/
funcClick: function(item, index) {
// 倍速播放
if(item.id === 1) {
// 样式变化
if(this.playbackRateIndex === 4) this.playbackRateIndex = 0
else this.playbackRateIndex ++
this.$set(item, 'name', 'x' + String(this.playbackRateList[this.playbackRateIndex]))
// 音频进度条变化
this.setRate(Number(this.playbackRateList[this.playbackRateIndex]))
}
},
},
mounted() {
// 获取视频对象
this.videoContext = uni.createVideoContext('myVideo')
// 滑动一格进度条 当前音频秒数的变化长度
this.processUnit2Second = this.parseTime(this.audioLength) / 100
}
}
<!-- css -->
.hidden {
position: fixed;
z-index: -1;
width: 1rpx;
height: 1rpx;
}</code></pre></div><h3 id="解决问题二">解决问题二</h3> <p>两个需要实现的细节：</p> <ol><li>拖动进度条时，左侧的播放时间需要跟随变化，且音频从<code>touchend()</code>触发时的位置开始播放，点击进度条同理。（代码见下）</li> <li>倍速播放时，进度条同时倍速前进。（相关代码见“解决问题一”）</li></ol> <div class="saber-highlight" data-lang="vue"><pre class="saber-highlight-code language-vue"><code class="language-vue"><!-- template -->
<view class="process__line" @tap="checkAudioProcess">
<u-slider
class=""
use-slot
active-color="#537AE0"
v-model="processValue"
@start="processStart"
@moving="processMoving"
@end="processEnd"
>
<view class="">
<view class="process__line__badge"></view>
</view>
</u-slider>
</view>
<!-- script -->
export default {
data(){
return {
processMask: false, // 禁用watch中processVale监听
audioNow: '00:00', // 当前音频播放时间
audioLength: '00:21', // 音频时长
processValue: 0, // 音频进度条当前值
}
}，
methods: {
/**
* @description 播放状态调整
* @param {Boolean} control 兼容在播放时拖动/点击进度条的情况
*/
auidoControl: function(control=true) {
let _this = this
if(control) this.playing = !this.playing
else clearInterval(this.playingInterval)
this.processMask = false
// 视频控制
if(this.playing) {
// 如果当前音频已经播放结束 则重头播放
if(this.audioNow == this.audioLength) {
this.audioNow = '00:00'
this.processValue = 0
}
this.playingInterval = setInterval(() => {
_this.audioNow = _this.parseSeconds(_this.parseTime(_this.audioNow) + 1)
let res = Decimal.div(_this.parseTime(_this.audioNow), _this.parseTime(_this.audioLength)).toNumber() *100
_this.processValue = String(res).split('.')[0]
// 当前音频播放完毕 执行相应事件
if(_this.processValue >= 100) {
clearInterval(_this.playingInterval)
this.playing = false
// 播放下一首
}
}, this.interval)
this.play()
}
else {
clearInterval(this.playingInterval)
this.stop()
}
},
checkAudioProcess: function() {
this.processMask = true
}
},
watch: {
// 当点击进度条时 相应地调整音频播放进度
processValue: function() {
let _this = this
setTimeout(() => {
if(_this.processMask) {
_this.audioNow = _this.parseSeconds(_this.processValue * _this.processUnit2Second)
_this.auidoControl(false)
_this.seek(_this.parseTime(_this.audioNow))
}
}, 50)
}
},
}
<!-- css -->
.process {
margin: 80rpx 0;
&__time {
opacity: .3;
font-size: 24rpx;
}
&__line {
width: 500rpx;
&__badge {
position: relative;
top: 2rpx;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
background-color: #fff;
&::after {
content: '';
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #666;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
}</code></pre></div><h2 id="总结">总结</h2> <p>想到解决办法后，在实施过程中并没有什么坑点，所以终归是个经验问题。</p> <p>在处理进度条时，本来是自己尝试写一个的，但实现后发现拖拉过程并不流畅，想来应该是逻辑层和视图层的通信频率没有处理好，等有时间填坑。</p>]]></content>
<published>2021-02-25T00:00:00.000Z</published>
</entry>
<entry>
<title type="html"><![CDATA[uniapp功能模块汇总]]></title>
<id>https://smart.hyggehyy.com/2021/01/31/uniapp%E5%8A%9F%E8%83%BD%E6%A8%A1%E5%9D%97%E6%B1%87%E6%80%BB</id>
<link href="https://smart.hyggehyy.com/2021/01/31/uniapp%E5%8A%9F%E8%83%BD%E6%A8%A1%E5%9D%97%E6%B1%87%E6%80%BB"/>
<updated>2021-03-07T09:40:32.497Z</updated>
<summary type="html"><![CDATA[一些功能模块在每个项目中都会用到，将它们抽象或汇总出来，复用到每个项目中去，是一个省时省力的方法。
]]></summary>
<content type="html"><![CDATA[<p>一些功能模块在每个项目中都会用到，将它们抽象或汇总出来，复用到每个项目中去，是一个省时省力的方法。</p> <p>下面以常用项目目录的形式，说明复用度高的一些功能模块。</p> <div class="saber-highlight" data-lang=""><pre class="saber-highlight-code language-text"><code class="language-text">D:.
│ App.vue
│ main.js
│ manifest.json
│ package-lock.json
│ pages.json
│ tree.res
│ uni.scss
│
├─common
│ ├─font // 字体
│ │ iconfont.ttf
│ │
│ ├─js // 工具库
│ │ graceChecker.js // 表单验证
│ │ http.js // request 封装
│ │ mixins.js // 页面工具组
│ │ region.js // 地址列表
│ │ utils.js // 常用工具函数
│ │
│ ├─style // 样式
│ │ │ common.scss // 页面样式
│ │ │
│ │ └─colorui
│ │
│ └─vender
│
├─components // 组件
│ nodata.vue // 页面展示管理
│ joy-page.vue // 页面状态管理
│ page-header.vue // 页面导航栏
│
├─config // 配置信息
│ api.index.js // 数据接口信息
│ form-check-rule.js // 表单验证
│ mapping.index.js // 数据映射表
│ route.index.js // 路由信息
│
├─pages
│
├─static
│
├─store
│
├─uView // UI框架
│
└─unpackage</code></pre></div>]]></content>
<published>2021-01-31T00:00:00.000Z</published>
</entry>
<entry>
<title type="html"><![CDATA[uniapp技术解决方案]]></title>
<id>https://smart.hyggehyy.com/2021/01/17/uniapp%E6%8A%80%E6%9C%AF%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88</id>
<link href="https://smart.hyggehyy.com/2021/01/17/uniapp%E6%8A%80%E6%9C%AF%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"/>
<updated>2021-03-07T09:40:40.917Z</updated>
<summary type="html"><![CDATA[uniapp 作为前端全端开发工具，很好的弥合了各种前端应用的差异，基本上实现了“一套代码全端实现”。
]]></summary>
<content type="html"><![CDATA[<p>uniapp 作为前端全端开发工具，很好的弥合了各种前端应用的差异，基本上实现了“一套代码全端实现”。</p> <p>在使用过程中，难免遇到各种问题，填坑是常态，所以下面整理的填坑思维导图就很有必要了。</p> <p><img src="https://ls-img-store.oss-cn-qingdao.aliyuncs.com/img/article-01-verticle.png" alt=""></p>]]></content>
<published>2021-01-17T00:00:00.000Z</published>
</entry>
</feed>