首页
归档
关于
友人帐
Search
1
Mac OS 终端利器 iTerm2 + Oh My Zsh
12,528 阅读
2
前端 History 路由及 API 反向代理的 Nginx 配置
10,185 阅读
3
解决 Xcode Command Line Tools 错误或无法安装问题
4,763 阅读
4
Mac下右键使用VSCode打开项目
3,477 阅读
5
Nodejs 爬取one和墨迹天气定时发邮件
3,042 阅读
码上世界
内容分享
生活印记
其他
登录
Search
小小孩
累计撰写
84
篇文章
累计收到
164
条评论
首页
栏目
码上世界
内容分享
生活印记
其他
页面
归档
关于
友人帐
搜索到
41
篇与
码上世界
的结果
2021-08-05
JavaScript 工具函数汇总
JavaScript 工具函数汇总
2021年08月05日
177 阅读
1 评论
0 点赞
2021-07-01
CSS Gap(沟槽)
做页面时,经常遇到 多列表设计(如图),要求块与块上下间距一样!像以前,我们一般使用 margin 或者 padding 来做处理,但是使用这些是很烦人的,特别是多行多列的时候更麻烦但是出现 gap 事情就变得简单起来示例<style> .container { display:flex; flex-wrap:wrap; gap: 20px; padding:20px; } .list { flex-basis: 100px; height:100px; background:blue; } </style> <div class="container"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> </div> ;
2021年07月01日
243 阅读
3 评论
1 点赞
2021-06-24
解决 concurrently 和 webpackbar 混用的错乱
concurrently熟悉前端应该知道concurrentlyconcurrently 可以并行地运行多个命令(同时跑前端页面和后端接口 mock 的服务);一般都是concurrently \"npm run mock\" \"npm run dev\"等于说开了两个终端任务 npm run mock 和 npm run devwebpackbarwebpackbar 是 webpack 美化插件,用于 Webpack 构建时输出优雅的进度条,清晰美观输出混乱如果你项目使用了 webpackbar,且用 concurrently 运行多个命令时 ,会发现 webpackbar 的进度条美化失效了,页面会输出大量乱糟糟的信息 解决可以看到因为可能 concurrently 会在每个命令前添加 编号 (如下图),导致进度条解析不成功,导致输出混乱查看 concurrently 的文档发现了这个翻译出来就是 仅输出进程的原始输出,禁用 concurrently 的美化和着色意思就是加了这个命令 concurrently 就不会处理你的命令行输出了{callout color="#f0ad4e"}命令改成如下就可以了{/callout}concurrently -r \"npm run mock\" \"npm run dev\"添加了 -r 配置之后,构建就就很完美了
2021年06月24日
300 阅读
0 评论
0 点赞
2021-01-12
nginx 判断移动端还是电脑跳转域名或不同的文件
经常会遇到这种需求,根据访问终端的不同,来选择跳转不同的内容。一般区分小屏幕移动端和电脑端而区分访问内容。这有两种办法,一种是根据终端跳转域名,还有一种是根据终端访问的文件不同。下边就说下 nginx 对于这两种办法的配置跳转域名比如 www.domain.com 是 PC 端网址 而 m.domain.com是移动端网址server { listen 80; server_name www.domain.com domain.com; root /data/domain; charset utf-8; if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){ # 跳转判断 rewrite ^/(.*)$ http://m.domain.com$uri redirect; # redirect表示302跳转(暂时性转移) } index index.html index.htm; #... }跳转不同的文件server { listen 80; server_name www.domain.com domain.com; root /data/domain; #默认PC端访问内容 charset utf-8; if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){ # 跳转判断 root /data/mobile_domain; #移动端访问内容 } index index.html index.htm; #... }
2021年01月12日
830 阅读
0 评论
0 点赞
2020-12-06
H5 语音朗读 API
前段时间有同学问我 h5 有没有朗读 api ,一开始他找了 云服务的 api ,其实 h5 本身自带朗读h5 中相关的 API 有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthesis)”,这两个名词听上去很高大上其实就是 “语音转文字”,和“文字变语音”,这次我们看看我们要使用的“文字变语音”(SpeechSynthesisUtterance) 。兼容性用之前我先来看看兼容性可以看到 IE 不支持 ,部分移动端不支持,其他的都还好!简单用法先来个最简单的使用例子 读出 "羽叶风雨 Nice"var utterThis = new SpeechSynthesisUtterance("羽叶风雨 Nice"); speechSynthesis.speak(utterThis);浏览器 使用一下,(真~不~错~)。支持属性当然还有其他玩法 ,api 还支持 语言 音量 语速 音高text – 要合成的文字内容,字符串。lang – 使用的语言,字符串, 例如:"zh-cn"或'ja-JP'。voiceURI – 指定希望使用的声音和服务,字符串。volume – 声音的音量,区间范围是 0 到 1,默认是 1。rate – 语速,数值,默认值是 1,范围是 0.1 到 10,表示语速的倍数,例如 2 表示正常语速的两倍。pitch – 表示说话的音高,数值,范围从 0(最小)到 2(最大)。默认值为 1。根据这些属性我来封装成语音函数function speak(textToSpeak) { var u = new SpeechSynthesisUtterance(); u.text = textToSpeak; //汉语 u.lang = "zh-CN"; //速度 u.rate = 1; // 其他属性 speechSynthesis.speak(u); } speak("支付宝到账,100万,元");😄 😁 😆试试别的语言function speak(textToSpeak) { var u = new SpeechSynthesisUtterance(); u.text = textToSpeak; //汉语 u.lang = "ja-JP"; //速度 u.rate = 1; speechSynthesis.speak(u); } speak("雨の降る夜は"); //雨下的夜😛 😝 😜回调方法不仅如此,该实例对象还暴露了一些方法:onstart – 语音开始时触发。onpause – 语音暂停时触发。onresume – 语音重新开始时触发。onend – 语音结束时触发。onboundary - 当语音达到单词或句子边界时触发。onerror - 语音发生错误时触发。onmark - 语音发生错误时触发。示例 在语音读完打印 "真的到账了!!!"function speak(textToSpeak, fun) { var u = new SpeechSynthesisUtterance(); u.text = textToSpeak; //汉语 u.lang = "zh-CN"; //速度 u.rate = 1; // 其他属性 speechSynthesis.speak(u); u.onend = function () { fun && fun(); }; } speak("支付宝到账,100万,元", function () { console.log("真的到账了!!!"); });speechSynthesis我们看到上面例子还是用了 speechSynthesis 对象,它是是语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。SpeechSynthesis.cancel() - 移除所有语音谈话队列中的谈话。speechSynthesis.getVoices() - 返回当前设备所有可用声音的 SpeechSynthesisVoice 列表。SpeechSynthesis.pause() - 把 SpeechSynthesis 对象置为暂停状态。SpeechSynthesis.resume() - 把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。SpeechSynthesis.speak() - 添加一个 utterance 到语音谈话队列;它将会在其他语音谈话播放完之后播放。我来看看我的浏览器支持哪些语音包列表 ,运行 speechSynthesis.getVoices()总结语音API还不太成熟,可以当成彩蛋类来用!比如消息提醒,或者可能为以后无障碍提供帮助!
2020年12月06日
831 阅读
0 评论
0 点赞
2020-12-04
css 适配暗黑模式
自从苹果支持暗黑模式后,各个 APP 网站都支持暗黑模式,之前很多都是 js 手动切换模式,其实纯 css 媒体特性也能完全适配prefers-color-schemeprefers-color-scheme 是 CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。语法no-preference 表示系统未知用户在这方面的选项。light 表示系统选择使用浅色主题的界面。dark 表示系统选择使用暗色主题的界面。例子<div class="day">Day</div> <div class="night">Night</div> @media (prefers-color-scheme: dark) { .day { background: #333; color: white; } .night { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day { background: white; color: #555; } .night { background: #eee; color: black; } }实际使用正常模式的下 我们正常写 css 代码 , 如果需要根据系统显示暗黑模式即可添加如下代码... // 正常css 代码 @media (prefers-color-scheme: dark) { ... //暗黑模式css代码; }兼容性好用是好用 ,如果考虑兼容性 就需要注意了(我是不考虑兼容性)
2020年12月04日
893 阅读
0 评论
0 点赞
2020-10-31
解决 Xcode Command Line Tools 错误或无法安装问题
问题发现升级 Mac系统后,发现 Xcode Command Line Tools 出现问题了在我构建项目时 出现了No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.当我运行/usr/sbin/pkgutil --packages | grep CL/usr/sbin/pkgutil --pkg-info com.apple.pkg.CLTools_Executables发现没有任何输出 无语😒 , 可能 Mac 升级把我的包搞丢了 试了下 sudo xcode-select --reset 运行后 并没有正常解决办法办法一 命令行安装命令行运行以下命令, 然后输入root密码来删除Xcode Command Line Toolssudo rm -rf $(xcode-select -print-path)再运行以下来命令重新安装xcode-select --install 重新安装结束后检查是否一切正常正常会如下图所示 如果重装不了 就试试办法二办法二 手动下载安装苹果开发官网(需要登录苹果账号) https://developer.apple.com/download/more/?=command%20line%20tools 会列出所有版本的安装包手动下载Command Line Tools for Xcode 双击安装一步一步安装
2020年10月31日
4,763 阅读
1 评论
1 点赞
2020-10-17
ES2020 新运算符 '??'
ES2020 新的运算符 ??ES2020 新的特性新增了一个运算符 ?? (空值合并运算符)什么是 ??空值合并运算符并不是什么全新的东西。它只是一种获得两者中的第一个不是 null/undefined值的语法。 a ?? b 的结果是:如果 a 是已定义的,则结果为 a,如果 a 不是已定义的,则结果为 b。等于说,如果第一个参数a不是 null/undefined,则 ?? 返回第一个参数a。否则,返回第二个参数b。 翻译一下 就是result = a ?? b; result = (a !== null && a !== undefined) ? a : b;与|| 比较咋一看 有点跟 || 像,空值合并运算符 ?? 是最近才被添加到 JavaScript 中的,它的出现是因为人们对 || 的使用不太满意。例如如下代码const a = 0,b=1; const result1 = a ||b // 1 const result2 = a ||b // 0它们之间重要的区别是:|| 返回第一个 真 值。?? 返回第一个 已定义的 值。在上面代码中a b 是已经定义的值,不存在未定义! || 的语法类似找到第一个值的 Boolean(a) 是 true 的运算付.?? 运算符的优先级?? 运算符的优先级相当低:在 MDN 文档中 中为 5。因此,?? 在 = 和 ? 之前计算,但在大多数其他运算符之后计算。let a = null; let b = null; // 重要:使用括号 let c = (a ?? 100) * (b ?? 50); alert(c); // 5000否则,如果我们省略了括号,则由于 * 的优先级比 ?? 高,它会先执行,进而导致错误的结果。// 没有括号 let c = a ?? 100 * b ?? 50; // 就变成了与下面这行代码的计算方式相同 let c = a ?? (100 * b) ?? 50; // 明显不是我们想要的 已知问题出于安全原因,JavaScript 禁止将?? 与 && 或 || 一起使用,除非使用括号明确指定了优先级。下面的代码会触发一个语法错误:let result = 1 && 2 ?? 3; // Syntax erro 可以明确地使用括号来解决这个问题:let result = (1 && 2) ?? 3; // 2 总结空值合并运算符 ?? 提供了一种从列表中选择第一个已定义的值。?? 运算符的优先级非常低,在表达式中使用它时请添加括号。如果没有明确添加括号,不能将其与 || 或 && 一起使用。
2020年10月17日
644 阅读
0 评论
0 点赞
2020-09-14
JavaScript 中精度问题及简单解决办法
JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示。其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在 ES5 规范 中指出了指数位E的取值范围是 [-1074, 971]。想用有限的位来表示无穷的数字,显然是不可能的,因此会出现一些列精度问题 比如 0.1 + 0.2 !== 0.3解决思路一般是把浮点数转化为字符串,模拟实际运算的过程。以下是 简单的 解决办法// 两个浮点数求和 function fpAdd(num1, num2) { let r1, r2; try { r1 = num1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = num2.toString().split(".")[1].length; } catch (e) { r2 = 0; } const m = Math.pow(10, Math.max(r1, r2)); return Math.round(num1 * m + num2 * m) / m; } // 两个浮点数相减 function fpSub(num1, num2) { var r1, r2 try { r1 = num1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = num2.toString().split(".")[1].length; } catch (e) { r2 = 0; } const m = Math.pow(10, Math.max(r1, r2)); const n = (r1 >= r2) ? r1 : r2; return (Math.round(num1 * m - num2 * m) / m).toFixed(n); } // 两个浮点数相除 function fpDiv(num1, num2) { var t1, t2 try { t1 = num1.toString().split('.')[1].length; } catch (e) { t1 = 0; } try { t2 = num2.toString().split(".")[1].length; } catch (e) { t2 = 0; } const r1 = Number(num1.toString().replace(".", "")); const r2 = Number(num2.toString().replace(".", "")); return (r1 / r2) * Math.pow(10, t2 - t1); } // 两个浮点数相乘 function fpMul(num1, num2) { const m = 0, s1 = num1.toString(), s2 = num2.toString(); try { m += s1.split(".")[1].length } catch (e) { }; try { m += s2.split(".")[1].length } catch (e) { }; return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m); }
2020年09月14日
613 阅读
0 评论
0 点赞
2020-08-28
H5 移动端开发经常遇到的问题
搜罗了一些 H5 移动端开发经常遇到的问题,来方便以后查阅!还会继续添加!1. 弹出数字键盘<!-- 有"#" "*"符号输入 --> <input type="tel" /> <!-- 纯数字 --> <input pattern="\d*" />安卓跟 IOS 的表现形式应该不一样,大家可以自己试试。当运用了正则 pattern 后,就不用关注 input 的类型了2. 调用系统的某些功能<!-- 拨号 --> <a href="tel:10086">打电话给: 10086</a> <!-- 发送短信 --> <a href="sms:10086">发短信给: 10086</a> <!-- 发送邮件 --> <a href="mailto:839626987@qq.com">发邮件给:839626987@qq.com</a> <!-- 选择照片或者拍摄照片 --> <input type="file" accept="image/*" /> <!-- 选择视频或者拍摄视频 --> <input type="file" accept="video/*" /> <!-- 多选 --> <input type="file" multiple />3. 打开原生应用<a href="weixin://">打开微信</a> <a href="alipays://">打开支付宝</a> <a href="alipays://platformapi/startapp?saId=10000007" >打开支付宝的扫一扫功能</a > <a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>这种方式叫做 URL Scheme,是一种协议,一般用来访问 APP 或者 APP 中的某个功能/页面(如唤醒 APP 后打开指定页面或者使用某些功能)😒URL Scheme 的基本格式如下:行为(应用的某个功能/页面) | scheme://[path][?query] | | 应用标识 功能需要的参数一般是由 APP 开发者自己定义,比如规定一些参数或者路径让其他开发者来访问,就像上面的例子 🍤注意事项唤醒 APP 的条件是你的手机已经安装了该 APP某些浏览器会禁用此协议,比如微信内部浏览器(除非开了白名单)4. 解决 active 伪类失效<body ontouchstart></body>给 body 注册一个空事件即可 😂5. 忽略自动识别<!-- 忽略浏览器自动识别数字为电话号码 --> <meta name="format-detection" content="telephone=no" /> <!-- 忽略浏览器自动识别邮箱账号 --> <meta name="format-detection" content="email=no" />当页面上的内容包含了手机号/邮箱等,会自动转换成可点击的链接 😁比如你有如下代码:但是有些浏览器会识别为手机,并且可以点击拨号。6. 解决 input 失焦后页面没有回弹一般出现在 IOS 设备中的微信内部浏览器,出现的条件为:页面高度过小聚焦时,页面需要往上移动的时候所以一般 input 在页面上方或者顶部都不会出现无法回弹 🤣解决办法为,在聚焦时,获取当前滚动条高度,然后失焦时,赋值之前获取的高度:<template> <input type="text" @focus="focus" @blur="blur" /> </template> <script> export default { data() { return { scrollTop: 0 }; }, methods: { focus() { this.scrollTop = document.scrollingElement.scrollTop; }, blur() { document.scrollingElement.scrollTo(0, this.scrollTop); } } }; </script>6. 禁止长按以上行为可以总结成这几个(每个手机以及浏览器的表现形式不一样):长按图片保存、长按选择文字、长按链接/手机号/邮箱时呼出菜单。想要禁止这些浏览器的默认行为,可以使用以下 CSS:// 禁止长按图片保存 img { -webkit-touch-callout: none; pointer-events: none; // 像微信浏览器还是无法禁止,加上这行样式即可 } // 禁止长按选择文字 div { -webkit-user-select: none; } // 禁止长按呼出菜单 div { -webkit-touch-callout: none; }7. 滑动不顺畅,粘手一般出现在 IOS 设备中,自定义盒子使用了 overflow: auto || scroll 后出现的情况。优化代码:div { -webkit-overflow-scrolling: touch; }8. 屏幕旋转为横屏时,字体大小会变具体出现的情况不明 😒,有时候有有时候没有,欢迎指出。优化代码:* { -webkit-text-size-adjust: 100%; }9. 最简单的 rem 自适应大家都知道,rem 的值是根据根元素的字体大小相对计算的,但是我们每个设备的大小不一样,所以根元素的字体大小要动态设置 😂html { font-size: calc(100vw / 3.75); } body { font-size: .14rem; }这是最简单的,稍微复杂的可以使用我正在使用的 rem.js10. 滑动穿透当你想在出现遮罩的时候,锁住用户的滚动行为,你可以这么做。假设 HTML 结构如下: 我是弹框 CSS 样式如下:.mask { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba($color: #333, $alpha: 0.6); .content { padding: 20px; background-color: #fff; width: 300px; } }可以看到,当在遮罩上滑动的时候,是会穿透到父节点的,最简单的办法就是阻住默认行为:document.querySelector(".mask").addEventListener("touchmove", event => { event.preventDefault(); });如果在 vue 中,你可以这么写:<div class="mask" @touchumove.prevent></div> 如果.content 也有滚动条,那么只要阻止遮罩本身就行:document.querySelector(".mask").addEventListener("touchmove", event => { if (event.target.classList.contains("mask")) event.preventDefault(); });或者:<div class="mask" @touchumove.self.prevent></div> 这样,当出现遮罩的时候用户的滑动就会被锁住啦 👌
2020年08月28日
626 阅读
0 评论
1 点赞
1
2
3
...
5