光就一个字-优快云博客

原创浅学Docker

Docker因玩，需要在云服务器安装mongodb环境，又常听后端小伙伴说docker怎么怎么好，于是学习一波，后将mongodb装在docker的容器中，看看它有多好。1、概念ps: 概念方面写多是自己的白话理解，直观、方便理解记忆。Docker就像个虚拟机，与主机环境分割，且能像应用程序安装包(.exe/.dmg)一样方便地打包、卸载、重装。其试错成本低、一致性高，无论是新手用于捣鼓服务器、还是老手用于做镜像备份都大有裨益。这也是我了解Docker以后决定使用它的原因。1.1 容器 c

2021-11-22 18:55:30 889 1

原创 Ubuntu配置Nginx部署Vue SPA项目

Nginx网页服务器。默认配置即支持systemd服务（守护进程）。守护进程可见上一篇博客：linux二探# ubuntu 平台安装（默认启动）$ sudo apt install nginx# 查看服务状态$ sudo systemctl status nginx# 启动$ nginx# 退出$ nginx stop# 修改配置后重启$ nginx -s reload# 可以配合 ps -ax | grep nginx 来查看当前 Nginx 使用的端口# ps是 P

2021-11-22 18:36:02 1927

原创 linux二探

linux近期想了解下服务端的知识查漏补缺，便买了个云服务器，终于可以在真实场景中学习并使用了，将理论学习内容记载如下。关于个人对云服务器的应用会另行发文。基于Ubuntu18.04概念守护进程daemon，不依赖命令行窗口开启而运行的进程。任务可分为前台任务（foreground job）。会独占命令行窗口，只有运行完成或手动中止，才能执行其他命令。后台任务（background job）。不需要命令行窗口即可运行。但不等于守护进程。# 以后台方式启动进程：在末尾加&$

2021-11-22 18:01:30 665

原创 uniapp 开发小记

uniapp 开发小记简单回顾下，如有纰漏后续更新。建议vue-cli的脚手架模式，统一IDE为vscode降低切换成本。建立脚手架：npm i -g @vue/clivue create -p dcloudio/uni-preset-vue uni-templatenpm run dev:platformnpm run build:platformnpm run serve开发模式基本是基于微信小程序的页面/应用的开发模式 + vue的组件模式App.vue 随程序启动运行

2021-11-05 15:31:30 387

原创 Vite2+Vue3的h5开发模板——开箱即用

h5-vite-vue3-template开箱即用的 h5 开发模板。技术栈：Vite/Vue3/Scss/github仓库地址目录简介├── index.html # index.html 模板├── jsconfig.json # JavaScript 配置├── package.json # package.json├── public # 静态资源目录（不会被处理）│

2021-10-21 10:22:01 1052

原创 JavaScript的数值存储的探析与应用

文章目录JavaScript的数值存储探析学1. 浮点数的存储规则2. Number对象上的特殊值MAX_SAFE_INTEGERMAX_VALUE3. 特殊值的存储学以致用案例分析1.1 精度丢失1.2 大数危机1.3 toFixed()对于小数最后一位为5时进位不正确问题2. 解决方案“修复” 0.1+0.2 == 0.32.2 修复数据展示修复 toFixed()2.4 修复数据运算（+-*/）参考文章：JavaScript的数值存储探析学1. 浮点数的存储规则JavaScript中的所有数字

2021-07-30 16:53:42 341

原创在github上写脚注的方法 markdown

在github上写脚注Writting Footnotes In Github现状目前Github原生的issue和markdown预览不支持标准md格式的脚注（csdn也不支持），像以下这样文章内容[^1][^1]: 脚注1的说明替代方案可以用锚点的特性+上标标签实现相似的功能，参照维基百科的格式，可以这么做：文章内容<sup id="a1">[[1]](#f1)</sup><span id="f1">1. [^](#a1)</span&g

2021-02-26 11:19:11 823

原创 async await 的错误处理方法

1. try/catches6 的初学者必须知道的捕获错误的方法，因为它是相对来说最保险的，既可以捕获同步错误也可以捕获异步错误。捕获异步错误：run();async function run() { try { await Promise.reject(new Error('Oops!')); } catch (error) { error.message; // "Oops!" }}捕获同步错误：run();async function run() {

2020-09-01 12:14:14 7631 2

原创背景图长宽100%，也能显示不全？

前言前两天进行业务开发时，用到一个「券样式」的背景图(background-image)，即下图的「返利￥1.30」：容器的宽度会根据文字内容自适应，代码如下：css:.coupon-like { padding: 8rpx 10rpx; background-size: 100% 100%;}html：（代码是微信小程序的写法）<view class="coupon-like" style="background-image: url('{{commonImgUrl.

2020-07-16 19:07:26 1182

原创奇奇怪怪的npm依赖安装出错之死马当活马医大法

没有更好的包管理工具出现前应该会持续更新~~删除node_modules文件夹换源：npm config set registry https://registry.npm.taobao.orgyarn config set registry https://registry.npm.taobao.orgnode-sass: Command failed 的报错：将 sass-binary-site 添加至 config 中: yarn config set sass-binary-

2020-06-12 17:01:50 259

原创舒服的小程序吸顶动画

前言今天想优化下用户体验：给小程序商品列表页顶部的标签栏增加个吸顶动画。逻辑是检测用户下滑行为时不吸顶，上滑时吸顶，标签栏未滑离视窗时不处理。并对滑动的处理方法增加节流处理，以优化性能。一、处理页面滚动1.1 页面逻辑页面page_name.js：// ...onPageScroll(e){ this.selectComponent('#goods_list').data._handleScroll(e)}// ...因为业务需要，商品列表goods_list被我封装成组件形式，所以

2020-05-15 12:22:14 884

原创页面适配iPhone X系列

背景移动端页面开发时，有时会需要按钮悬浮于屏幕底部。对于iPhone x及以后的系列，因为底部小白条的存在，靠近页面底部的交互会与系统原生小白条的交互冲突，所以需要做些兼容性的处理。先上结论：html:增加viewport-fit属性，设为cover<meta name="viewport" content="width=device-width, viewport-fit=cove...

2020-03-16 19:22:21 266

原创微信小程序ts脚手架

项目地址：miniprogram-ts-demo项目介绍小程序手脚架，除原生小程序技术外，引入了ts、scss、iconfont，集成了webpack，实现一键启动ts、scss监听编译，详见/package.json.script启动准备安装node.js、微信开发者工具启动方式安装依赖：npm install 或 yarn install启动开发监听：npm run start ...

2020-03-09 09:58:56 3758

原创 vscode，ts里require不能跳转到文件

异常表现：按住alt+鼠标点击，无法跳转到a文件原写法：let a = require('./a.js') // 这在ts里是不规范的修改优化： import a = require('./a.js')ts里的模块引入都要用import，第一种require是commonjs的规范；ts的标准导出和导入是export配合import，跟es6一致记录这个坑的原因是vscode没有...

2020-02-25 10:13:51 4184

原创 npm/yarn安装nightware卡在electron node install.js

解决的方法就是在~/.npmrc里做如下设置，electron_mirror=“https://npm.taobao.org/mirrors/electron/”ps: macOS

2020-01-16 17:45:26 721

翻译 HTTP/2 推送比我想象得更加艰难

摸鱼时偶然看到这篇文章，兴起翻译了一下。也是第一次尝试翻译技术文档，写到一半发现已经是17年的文章了，结论的时效性已经不强，但私心又不舍半途而废，因兴致而起的行为总是落地了、有了产出才会更有成就感。原文链接：HTTP/2 push is tougher than I thought分割线以下为译文。说到页面加载性能问题的时候，我经常听到说：“HTTP/2推送会解决那个的。”但我不太了解它，...

2020-01-08 15:13:54 474

原创 pc微信禁止启动小程序

App onLaunch时，通过`wx.getSystemInfo`接口获取设备信息，判定设备异常（不是ios、android、devtools），则触发死循环代码，阻止小程序正常运行。

2019-11-22 16:25:20 5587 3

原创【踩坑】git 报错 POSSIBLE DNS SPOOFING DETECTED

git push 时报错 POSSIBLE DNS SPOOFING DETECTED，大意是现在连接的服务器域名和ip对应的rsa（一种身份标识）与本地的不对应，可能遭遇了dns中间人攻击blabla首次碰到这问题，第一反应自然是翻译完了google，得到答案不外乎删除${USER}/.ssh/konwn_hosts中有问题的那行或是删除整个konwn_hosts文件。但经尝试，以上操...

2019-07-22 17:40:48 958

原创 taro微信小程序云开发-实现用户信息增改查

趁周末空闲时，（没jojo看我要死了）捣鼓了一下taro和小程序的云开发。体验很好，作博一篇抛砖引玉，也给想有些想自己做小程序又不会写后端的人略做引导，以求少走些弯路。文章目录介绍开始—原生小程序云开发开始—`taro`小程序开始云开发实战：用户登录和信息存储（增改查）建立集合云函数-登录云函数-更新用户信息小程序内调用云函数调试准备上线TODO介绍taro是京东凹凸实验室团队开发的一...

2019-05-12 20:44:59 7063 5

原创微信小程序“无埋点”式封装上报

无论什么业务，c端产品的数据统计、埋点上报是很重要的，它可以帮助产品人更好地了解用户行为，以快速响应迭代。所谓“无埋点”式是指不在业务代码里插入上报代码，将业务代码与上报代码分开，提高项目可维护性和可读性。除用户点击等行为外，数据上报最常见的可能是页面跳转pu、pv了。小程序的页面有两种方式实现：1、api，如wx.navigateTo等 2、navigator组件，以下降分别阐述实现方...

2019-04-22 19:57:00 1873

原创小程序动态生成canvas海报

先做出wxml，再根据wxml动态画canvas有很多好处：提升体验（渲染快）、便于升级迭代（后期瓜皮改需求）、方便维护等。文章目录先睹为快canvas海报1、优雅地授权 (Be elegant.)1.1、封装1.2、使用2、动态获取wxml显示信息3、绘制canvas (Be patient.)3.1、获取素材3.2、开始绘制3.3、存入缓存3.4、存入本地先睹为快通过本篇博客你可以...

2019-04-22 15:11:17 5667

原创 Cannot find name 'require'

typescript中，未配置好的情况下直接使用require语法会报提升’Cannot find name ‘require’原因require是node的语法方案1.安装@types/node:npm i @types/node -S -D2.配置tsconfig.json:compilerOptions内加上一项：{ "compilerOptions": { ...

2019-01-10 15:38:22 8696 4

原创微信小程序收集formId

原理form内嵌button，使点击事件皆可触发表单提交动作分析开始预想是页面下包裹一个form和button，达到点哪里都提交的效果。但试验表明，button 的submit 动作会拦住常规的bindtap/catchtap动作。所以方案是：1、Page 根元素位置包裹一 form2、在动作热区（界面上可响应点击事件的区域）内嵌一个button，代码片段是<button for...

2019-01-04 16:59:47 4458 3

原创漫画小程序开发小结

最近基于公司业务需要，做了个漫画小程序，做博一篇，让后人少走弯路，同时也是对自己工作的一点提炼。免得以后人老色衰记忆减退回首往事徒留伤悲。页面：index：漫画列表，可续读直接跳阅读页detail：漫画详情，包含介绍和选集两个tabread：漫画阅读，无限滚动，懒加载，动态设话的标题从需求和bug 谈技术实现主页：无难点详情：话的排序：前端排序，Array.reverse(...

2018-12-16 20:56:50 3356 4

原创一些随笔，随笔写的笔记

TDD 测试驱动开发原理是在开发功能代码之前，先编写单元测试用例代码，测试代码确定需要编写什么产品代码，通过测试用例来规范约束开发者编写出质量更高、bug更少的代码。BDD 行为驱动开发BDD是一种敏捷软件开发的技术。它对TDD的理念进行了扩展，在TDD中侧重点偏向开发，通过测试用例来规范约束开发者编写出质量更高、bug更少的代码。而BDD更加侧重设计，其要求在设计测试用例的时候对系统进行定...

2018-11-22 15:09:23 542

原创 Vue数据响应式核心代码解析

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。整理了一下，要实现mvvm的双向绑定，就必须要实现以下几点：1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器...

2018-11-19 19:26:02 368

原创 webpack笔记

作用模块打包机：分析项目结构，找到js模块以及其他一些浏览器不能直接运行的拓展语言（Scss、TypeScript等），将其转换和打包为合适的样式供浏览器使用。与Grunt、Gulp相比Grunt、Gulp是优化前端开发流程的工具。工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤，工具可以帮你自动完成。Webpack的工作方式是：把项目当做一个整体，通过...

2018-11-14 14:42:02 220

原创 Linux系统初探

系统目录结构含义/etc存放所有系统管理需要的配置文件和子目录/bin 存放常用命令/boot存放启动Linux时使用的一些核心文件，包括一些连接文件以及镜像文件/devDevice的缩写，存放Linux的外部设备，Linux中访问设备和访问文件的方式是相同的/var存放不断扩充的东西，习惯放那些经常修改的目录，包括各种日志文件/home用户的主目录，一般以用户账号命名/lib存放系...

2018-11-13 13:21:57 199

原创 cookie对比storage

相同点：都是保存在浏览器端，且同源。不同点：cookiesession Storagelocale Storage大小限制4k5m或更大5m或更大携带始终在同源的http请求携带仅在本地保存仅在本地保存数据有效期在设置的cookie过期时间前有效仅在关闭当前浏览器窗口前有效始终有效作用域所有同源窗口共享不在不同窗口共享所有同源窗...

2018-10-19 17:00:20 474

原创聊聊前端缓存

基本的网络请求分为3个步骤：请求、处理、响应。后端缓存主要集中在“处理”步骤，通过保持数据库链接，存储处理结果等方式缩短处理时间，尽快进入“响应”步骤。前端缓存则可在剩下的两步：“请求”和“响应”中进行。在“请求”步骤中，浏览器可以通过存储结果的方式直接使用资源，省去了发送请求；而“响应”步骤需要浏览器和服务器共同配合，通过减少响应内容来缩短传输时间。一、按缓存位置分类优先级：Serv...

2018-10-19 09:31:36 447

原创 js this的指向

this要在执行时才能确认值，定义时无法确认demo：var a = { name: 'A', fn: function(){ console.log(this.name) }}a.fn() // this === aa.fn().call({name:'B'}) // this === {name:'B'}var fn1 = a.fnfn1() // this ===...

2018-10-15 15:37:12 175

原创 js-原型和原型链

构造函数function Foo (name, age) { // 构造函数命名：大写字母开头 this.name = name this.age = age this.class = 'class-1' // return this // 默认有这一行}var f = new Foo('David', 18)构造函数-扩展var a = {} 其实是var a = new ...

2018-10-09 18:32:16 251

原创 JSON

JSON是JavaScript的子集，是一个JS对象，也是一种数据格式作为JS对象：JSON.stringify({a:1,b:2}) // '{a:1,b:2}'JSON.parse('{a:1,b:2}') // {a:1,b:2}作为数据格式它仅有以下几种数据类型：number：和JavaScript的number完全一致；boolean：就是JavaScript的tr...

2018-09-30 17:57:01 155

原创 js ===和==

区别===为全等，判断值和值类型==仅判断值，不判断值类型使用场景// 问题：何时用 === 何时用 == ？if (obj.a == null) { // 这里相当于 obj.a === null || obj.a === undefined // 是 jQuery 源码中推荐的写法}...

2018-09-30 17:30:27 169

原创多行文本溢出变省略号

多行文本溢出变省略号：overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;单行溢出变省略号：overflow : hidden;text-overflow: ellipsis;white-space:no...

2018-09-28 20:54:08 259

原创 vue项目获取url参数

假设我们的url是http://www.demo.com/#/?channel=123&amp;user=user #前的内容不影响import Qs from 'qs'const query = Qs.parse(location.hash.substring(3))let channel = query.channellet user = query.user...

2018-09-14 11:16:58 14190 3

原创 js 变量类型

知识点变量类型变量计算变量类型值类型VS引用类型typeof运算符详解值类型Number/String/Booleanvar a = 100var b = aa = 200console.log(b) // 200引用类型Object/Array/Function 指针指向同一个内存，原因是其可以无限制扩展属性，为了防止消耗过大内存。var ...

2018-09-12 11:25:12 2144

原创 mpvue中，用getCurrentPages调用其他页的方法

背景小程序中的getCurrentPages()方法可以取得已打开页面的参数和方法，并能直接调用方法，mpvue中也可以获取，但无法直接调用方法方案解决方法是将方法挂在页面的vue实例下，跟methods同级而不是在methods内，即可...

2018-09-07 16:15:07 5740 4

原创 vue-cli3.0引入px2rem与lib-flexible 移动端适配

关于移动端的适配，我喜欢用px2rem配合lib-flexible，非常方便，vue-cli3.0后，项目配置被大大精简了，这使得原来配置px2rem的文件不复存在，但其实只要掌握了正确的姿势，配置方法比原来更简单~新时代的移动端解决方案：vw（待补充）lib-flexible作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来...

2018-09-05 17:27:50 15444 6

原创 line-hight 安卓字体不居中

在字体容器的css里添加：border: 1px solid transparent; // 解决安卓字体不居中问题box-sizing:border-box;

2018-09-05 17:10:22 915

空空如也

空空如也