- 博客(13)
- 收藏
- 关注
RSS订阅原创 webRTC实现跨端语音助手功能组件（实时播放后端返回音频文件）
需求在浏览器端实现类似天猫精灵的功能，可以呼起助手，也可以静默开启实时对话。跨端，可自定义规则。本文记录下大概思路。流程浏览器使用webRTC api获取用户音频需要https由于浏览器安全限制，正式环境需要https协议，相应的，和后端通信的websocket也需要wss协议使用getUserMedia APInavigator.getUserMedia, 回调里面会返回一个音频流。由于里面是一个arrayBuffer,需要将其转化为base64 用于websocket传给后端
2020-12-31 21:28:10
697
原创 很少用到,但掏出来让人感到牛逼的Web API
前几天听到同事突然喊道：“还能这样？”我过去一看，原来是对canvas画布转成了File文件，用到了一些比如blobToFile方法。这也让我反思，平常我们沉浸于复杂的业务，用的却是丰富的web api中的一角。以至于当实现我们不熟悉的业务的同时，竟然不知道该如何去实现。今天就来说说那些不常见的web api，找回刷文档的快乐。1.getSelection()首先是getSelection() 方法,可以返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。w
2020-09-19 09:21:15
240
原创 少侠做App吗，框（mì）架（jí）选好了吗？
当今app开发，选择之多可以用混乱来形容了。做了下面的表格，罗列了各大流行框架的各个维度对比，供大家参考。框架对比对比FlutterFlutter是其中当之无愧的明星产品。其生态还在不断扩大，只是国内不怎么火。他的开发体验也是极好。只是为啥是Dart?React Native依然是开发混合应用框架的中流砥柱，只是需要开发者掌握一部分原生的知识。同时有需要维护两套代码的弊端。ElectronElectron是最早进入人们视野的hybird框架之一。经久不衰，足见其有独.
2020-09-17 15:48:08
454
原创 为什么我从Flutter转投Electron的怀抱？
最近打算做一个应用来收集灵感和整理素材，帮助写文章。Flutter全平台，早如雷贯耳。想着可以一套代码运行在手机、平板、电脑，那就真的全方位收集素材，再简单打个服务器就可以爽歪歪了。结果flutter一上来就给我一顿打脸。由于想用拖动的方式收集素材，特别在iPad上可以多应用分屏，收集素材不需要再保存图片再导入图片到应用。另外复制文字可以直接通过拖动来获取。而现实是，Flutter sdk不支持外部应用拖动文件进来。其内部的Draggable和Dragtarget组件只能实现内部的拖动.
2020-09-17 10:42:22
3845
原创 momentjs太笨重，来试试这个库吧
moment.js开发时是大家处理日期对象的利器。大量的api，简便时区和国际化支持。而现在他的作者都觉得他太大了，不建议在新项目中使用它。让我们来看看为什么？1.太大了200多k的体积，即便在压缩之后还有60多k的大小。对于追求首屏加载的网页来说太慢了。2.处理速度太慢了，格式化时间用时长。由于moment为了兼容老版本的浏览器，比如IE8（我呸），未能使用最新的api，处理速度慢也是理所应当。3.可变的。多人共同开发的时候，极易出错。const one = new m.
2020-09-15 18:02:16
471
原创 初入前端，你一定要安装的VS Code插件
这几天看了一些刚学习前端#前端#的新人发来代码，总结几款易用的插件，可供规范代码和提升开发效率。VS Code （https://code.visualstudio.com/）首先2020年了，竟然真的还有同学竟然真的还有使用纯文本编辑器写代码。可能也和当年学习前端的我一样。看到有教程说，一定要注重基本功，在没用代码提示和代码错误提示的前提下，写出顺利运行的代码。这种类似苦行僧的学习方法，不讨论实际意义，对于新人其实是低效的，会把他们从有趣轻松的代码编辑带进记忆和报错的深渊。所以首先给.
2020-09-12 14:11:41
232
原创 JS动态添加css样式
JS动态添加css样式用到的特性是 CSSStyleSheet.添加style rulefunction click(){ const sheet = new CSSStyleSheet() sheet.insertRule(`body { font-size: 10px; }`); // 应用规则到document document.adoptedStyleSheets = [sheet];}替换规则sheet.replaceSync(`body { font-size:
2020-08-21 15:03:00
995
原创 Canvas实现2D地图飞线的渐变效果
思路使用canvas quadraticCruveTo 创建贝塞尔曲线requestAnimationFrame 制作动画重绘的时候，改变曲线渐变的位置，形成动画效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
2020-08-04 13:55:29
1066
原创 高德mesh添加纹理渐变颜色
最近使用高德的mesh画3D飞线颜色渐变的时候，研究了一下纹理的添加方式，下面是3D的mesh 添加渐变纹理，2D的同理。根据官方文档，我们需要关注mesh3个点1.vertice: 指的是构成面的点；2.face: 指的是根据vertice的顺序组成的面，这个比较绕，后面会详解；3.vertexColor: 对应是相应顺序的vertice的颜色。假如我们要画下面这个3Dmesh的曲面那么vertices就是8个A-H的坐标构成的长度为24的数组，注意顺序是A->H;vertexCo
2020-07-10 12:25:48
2921
1
原创 react函数是组件中使用 ref
react函数是组件中使用 ref之前重构组件的时候，打算用pure function重构，结果组件中使用了ref,重构起来非常蛋疼。今天发现了forwardRef这个神奇的方法。 const myButton = React.forwardRef((props, ref) => ( <button ref={ref}> {props.children} </button> ))可以愉快的使用ref, 再也不用往props里传ref了。...
2020-07-10 11:10:12
720
原创 高德地图密集的生成路径上的点
高德地图生成路径上的点需求问题点解决方法利用 moveAlong 方法具体实现这样就得到密集的点啦需求今天接到产品的一个需求，需要生成一条路径上，车速30km/h，每隔15s的位置。输出一个数组。问题点通过常用的路径规划api（高德地图路径规划api），例如AMap.Driving，我们可以得到包含转弯关键点的数据，但是并没有包括我们所需要的那么密集的点。解决方法通过AMap.Dri...
2020-04-29 23:13:51
844
原创 钉钉微应用 Android返回键自定义功能 兼容
钉钉微应用 Android返回键自定义功能 兼容问题最新的钉钉文档导航栏左侧显示的是标题，若想在Android设备上拦截返回按钮的行为，请参考事件回调。那么dd.biz.navigation.setLeft函数只能用于IOS端，碰到产品提出编辑页面做出改变返回需要提醒窗的这种需求，是不是懵逼了？对事件的监听 var clickFunction = (e) => { ...
2020-04-14 06:48:44
1531
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人