content.json

{"meta":{"title":"AnChunLi's Bolg","subtitle":null,"description":"记录自己技术的成长，总结过去，展望未来！","author":"lianchun","url":"https://AnChunLi.github.io","root":"/"},"pages":[],"posts":[{"title":"前端实习或校招常见考点（精简版）","slug":"前端实习或校招常见考点（精简版）","date":"2020-03-10T09:36:36.000Z","updated":"2020-03-10T09:37:30.702Z","comments":true,"path":"2020/03/10/前端实习或校招常见考点（精简版）/","link":"","permalink":"https://AnChunLi.github.io/2020/03/10/前端实习或校招常见考点（精简版）/","excerpt":"","text":"前端实习常见考点（精简版）一、HTML1.HTML5语义化及语义化的优点2.HTML5新特性（知道多少说多少）Canvas VS SVG、本地存储能力、地理位置、web Works等3.meta标签中设置页面自适应 二、CSS1.浏览器盒模型：border-box和content-box, CSS属性设置方法2.CSS定位方式，各种方式定位原则3.css选择器及其优先级4.css实现垂直居中方式5.css动画及动画js监听6.伪类和伪元素7.@import和两种加载CSS方式的区别8.CSS预处理器less和Sass9.CSS弹性盒模型10.float布局 三、JS1.js变量类型有哪些？它们在内存中存在形式？2.JS事件机制3.事件代理原理和实现4.js中异步方案有哪些？js单线程相关5.js对象继承实现的方式有哪些？6.js原型与原型链7.js词法作用域和闭包8.js获取盒子尺寸的方法9.ES6相关（知道多少说多少）let、const解构赋值箭头函数类promise等等 10.js事件循环，宏任务和微任务11.js获取DOM元素方法有哪些？12.模块化规范及其区别：ES6、commonJS、AMD、CMD13.事件节流和防抖14.Object.create 和 new 方式创建对象的区别15.this指向16.类型转换 四、浏览器相关1.浏览器网页渲染原理2.从URL输入到网页呈现的过程中，发生了什么3.浏览器本地存储方案的比较4.跨域及解决方案5.浏览器缓存（强缓存和协商缓存）6.浏览器请求数限制 五.数据结构和算法1.栈、队列、链表等常见数据结构的JS实现2.树的深度和广度优先遍历实现3.常见排序算法4.数组去重5.数组扁平化6.URL获取参数7.js深拷贝和浅拷贝 六、计算机网络1.TCP和UDP2.http和https3.SSL握手原理4.TCP三次握手5.常见http状态码（301 302、304这几个必问）6.七层模型7.常见网络协议（DNS、TCP、IP等），他们在网络模型的哪一层8.http2.0的特点9.常见攻击方式：XSS、CSRF、SQL注入等 七、Vue1.数据双向绑定原理2.路由实现原理（history和hash模式）3.虚拟DOM4.Vue生命周期5.组件传值6.状态管理7.对比Vue和react，或者和普通页面的区别 八、性能优化网上找一下，内容比较多，一般说好几点就可以、 九、工程化1.webpack打包原理2.js语法编译插件，及编译大致过程3.js模块化机制4.CSS预处理器 十、新技术(本部分为加分点，不是必须)1.了解typescript2.webApp、Hybird APP、 Native APP 以及JSbridge3.Electron4.serverless5.wasm6.PWA 原理7.服务端渲染方案…","categories":[],"tags":[]},{"title":"口罩头像生成器开发","slug":"口罩头像生成器开发","date":"2020-02-12T08:26:53.000Z","updated":"2020-02-12T08:27:30.364Z","comments":true,"path":"2020/02/12/口罩头像生成器开发/","link":"","permalink":"https://AnChunLi.github.io/2020/02/12/口罩头像生成器开发/","excerpt":"","text":"小程序canvas 口罩头像生成器开发一、预览 代码 https://github.com/AnChunLi/small_code/tree/master/kouzhao 二、代码细节1.canvas事件绑定和业务实现在canvas画布中，图像是实时绘制的，和SVG的区别是没有结构化，因此在给canva中绑定事件时，需要对整个canvas元素绑定对应事件，在小程序中支持touchstart、touchmove、touchend、touchcancel、longtap、error这几个事件。 在本demo中，口罩头像生成过程中需要对口罩进行拖动，放大、缩小、旋转等操作，就需要对口罩进行事件绑定，在canvas中对canvas元素绑定touchstart、touchmove、touchend等事件，然后根据事件返回坐标参数来判定是否作用于对应元素或者区域。1234567891011121314151617181920212223move(e) { let x = e.touches[0].x, y = e.touches[0].y, dis = 30; if (x < this.data.x + rectW -20 && x >= this.data.x+20 && y < this.data.y + rectW-20&& y >= this.data.y+20){ if (disX == 0) { disX = x - this.data.x } if (disY == 0) { disY = y - this.data.y } console.log('move'); this.setData({ x: x - disX, y: y - disY }) // ctx.requestAnimationFrame(this.drawMove); this.drawMove(); } else if (x < this.data.x + rectW + dis && x >= this.data.x + rectW - dis && y < this.data.y + rectH + dis && y >= this.data.y + rectH - dis){ console.log(\"scale\"); this.drawScale(x - this.data.x, y - this.data.y); } }, 移动监听touchmove事件，取得触控坐标与矩形区域原点的坐标差，然后实时计算得到矩形原点坐标，并进行绘制。 放大、缩小传入手指触控坐标与矩形原点的坐标差this.drawScale(x - this.data.x, y - this.data.y);改变矩形长和宽，并实时绘制12345drawScale(W, H) { rectW = W; rectH = H; this.drawMove(); }, 旋转这是处理的最不优雅的部分，由于一开始的事件监听依赖矩形原点坐标，这就导致在旋转过程中，不能很好的绑定旋转控件，因此采用了一个笨办法，在canvas画布右上角设置了旋转控件，由于它是固定的对于绑定事件非常方便，没点击一次就会按顺时针方向整体旋转，对应旋转角度也会记录。123456789101112131415drawRotate(){ rotate = rotate + 0.08; ctx.drawImage(this.data.headImg, 0, 0, this.data.windowW * 0.9, this.data.windowW * 0.9); ctx.drawImage('img/rotate.png', this.data.windowW * 0.9 - 40, 0, 40, 40); ctx.translate(this.data.x + rectW / 2, this.data.y + rectH / 2); ctx.rotate(rotate); ctx.drawImage(this.data.kouzhaoImg, - rectW / 2 + rectW * 0.25 / 2, - rectH / 2 + rectH / 6 / 2, rectW * 0.75, rectH * 5 / 6); ctx.setLineDash([5, 5]); ctx.setStrokeStyle('#fff'); ctx.setLineWidth(3); ctx.strokeRect(- rectW / 2, - rectH / 2, rectW, rectH); ctx.drawImage('img/cancel.png', - rectW / 2 - 20, - rectH / 2 - 20, 40, 40); ctx.drawImage('img/move.png', - rectW / 2 + rectW - 20, - rectH / 2 + rectH - 20, 40, 40); ctx.draw(); }, 2.canvas图片圆角实现在css中，实现图片圆角极其简单，但在canvas中实现起来并不是一行代码所能解决的问题，因此在这里也说下其实现。123456789101112131415161718// 绘制圆角 shareCtx.beginPath(); shareCtx.arc(x+dis, y + dis, radius, Math.PI, 1.5* Math.PI); shareCtx.moveTo(x + dis, y); shareCtx.lineTo(x + a - dis, y); shareCtx.arc(x + a - dis, y + dis, radius, 1.5*Math.PI, 2 * Math.PI,); shareCtx.lineTo(x + a, y + dis); shareCtx.lineTo(x + a, y + a - dis); shareCtx.arc(x + a - dis, y + a - dis, radius, 0, 0.5 * Math.PI, false); shareCtx.lineTo(x + a - dis, y + a); shareCtx.lineTo(x + dis, y + a); shareCtx.arc(x + dis, y + a - dis, radius, 0.5 * Math.PI, 1 * Math.PI); shareCtx.lineTo(x, y + a - dis); shareCtx.lineTo(x, y + dis); shareCtx.closePath(); shareCtx.clip(); shareCtx.drawImage(headImg, x, y, a, a); shareCtx.draw(); 首先在小程序中通过Context.beginPath()接口创建一个绘制路径，然后需要绘制一个圆角矩形，一个圆角矩形由上下左右四条边和四个角的四个圆角组成，所以在绘制的时候需要精确计算出每个圆角的坐标和边的坐标。由于在绘制图片的时候，图片的定位是根据图片左上角的坐标，因此通过其坐标和矩形长宽和圆角半径可得到四个圆角对应圆心的坐标和四条线段起始坐标，通过Context.arc()接口绘制圆弧，对应参数可在微信小程序官方文档查到。通过Context.moveTo(x0,y0)(起始坐标)和Context.lineTo(x1,y1) 绘制一条线，注意：在整个封闭图形的绘制中，只需要一次moveTo，经过的顶点都可通过lineTo进行绘制。在封闭图形绘制完成之后，需要通过Context.closePath()来结束路径。然后使用裁剪方法Context.clip()就可以开始绘制圆角图片了。总结：本次开发由于一开始设计的问题，导致没有对事件绑定依赖坐标进行设定，因此在体验上存在诸多不足，我将开发过程中遇到的认为需要注意的细节罗列了一下，对于canvas基础的使用和其他小程序相关API没有做陈述。希望能够得到大家的优化建议和大家一起成长。","categories":[],"tags":[]},{"title":"Docker小试","slug":"Docker小试","date":"2020-02-10T15:41:20.000Z","updated":"2020-02-13T08:06:47.983Z","comments":true,"path":"2020/02/10/Docker小试/","link":"","permalink":"https://AnChunLi.github.io/2020/02/10/Docker小试/","excerpt":"","text":"由于本人比较懒，博客好久没更新了，反观上一条博客，当时是真的惨呀，不过功夫不负有心人，暑期实习拿到了金山WPS的offer，最终在秋招去了互联网大厂。 一、Docker基本命令构建镜像：docker build -t <镜像> .查看镜像：docker images / docker image ls删除镜像: docker rmi <镜像ID>创建容器：docker run -itd -p <映射端口> –link <容器连接> <镜像> bashdocker run -itd -p 8080:8080 --link 9fjkn4544vf:localhost test-app bash 查看容器: docker ps (运行中) docker ps -a(全部)停止容器: docker stop <容器ID>启动容器：docker start <容器ID>重启容器：docker restart <容器ID>删除容器：docker rm <容器ID>拉取镜像: docker pull <镜像>tag镜像: docker tag <镜像> <镜像：tag>docker tag ubuntu:18.04 username/ubuntu:18.04 仓库登录 docker login <仓库地址>仓库登出 docker logout推送镜像 docker push <镜像> 二、DockerfileDockerfile 是一个用来构建镜像的文本文件，文本内容包含了一条条构建镜像所需的指令和说明 这里贴一下菜鸟教程上的Dockerfile，就不写了，我贴一下我使用的Dockerfile123456789101112FROM java:8EXPOSE 8080#定义时区参数ENV TZ=Asia/Shanghai#设置时区RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo '$TZ' > /etc/timezoneVOLUME /tmpADD ./zs_api_jar/* app/RUN bash -c 'touch app/'ENTRYPOINT [\"java\",\"-jar\",\"app/zs-api.jar\"] 三、Docker私有仓库搭建Docker官方提供了一个公共仓库-hub.docker.com,你可以在上面注册账号，然后使用docker login 进行登录，进本地构建好的镜像push到公共仓库中，像一般的开源项目都可以在上面找到镜像，直接pull下来使用，不用像以前传统方式一样安装，如nginx、redis等常用软件。 但在公司实际的开发中，不可能将项目镜像push到公共仓库中去，所以企业一般是搭建自己的私有Docker仓库，以满足使用。Docker官方将docker仓库项目开源了，你可以使用它进行搭建。还有一个开源项目更好用——harbor,它除了集成docker仓库以外，还提供了镜像管理系统，搭建后可以对用户设置不同权限，更好的进行线上版本管理。搭建1.前置条件 安装docker并运行 123yum install docker # 安装docker...systemctl start docker # 运行docker服务 安装docker-composeyum install docker-compose 2.下载安装包如果访问github速度还可以，建议直接wget https://github.com/goharbor/harbor/releases/download/v1.9.4/harbor-offline-installer-v1.9.4.tgz 如果访问速度不行，可以找国内源进行下载http://harbor.orientsoft.cn/,不过版本没有最新的解压安装包：tar -zxvf harbor-offline-installer-v1.7.1.tgz 3.编辑配置器文件在项目目录下，有一个harbor.cfg的文件，就是配置文件 里面需要改的有hostname， 改成服务器域名或公网IP， 如果没有https相关配置，还需要改customize_crt=false，支持http访问。注：如果是http访问，需要对于docker编辑/etc/docker/daemon.json123{ \"insecure-registries\":[\"hub.docker.*.com:3333\"]} 然后重启Docker4.启动harbor修改完配置文件后，运行 ./prepare运行 ./install.sh 启动后，可以在浏览器中访问host，可以看到harbor管理页面，则说明启动成功。同时在docker ps中也可以看到右多个关于harbor的容器正在运行。 然后可以通过docker login 命令 去登录自己的账户，如果登录成功则说明没问题。5.管理命令启动：docker-compose up -d 或者 docker-compose start停止：docker-compose down -v 或者 docker-compose stop使用登录私有仓库：docker login拉取镜像:docker pull <镜像>tag镜像:docker tag <镜像> <镜像:tag>push镜像:docker push <镜像>还可以通过GUI管理后台，对用户、仓库、项目等进行管理。 值得注意的是，建议大家在进行docker仓库搭建的时候，使用一台新服务器进行搭建，尽量不要在有多个项目在跑的服务器上搭建，因为如果harbor使用的不是80端口，还需要通过nginx做转发，会导致管理页面路径出现错误；再者镜像在push的时候占用带宽是比较大的，建议搞一个服务器专做私有仓库，还有镜像多了本身也很占服务器存储空间。","categories":[],"tags":[]},{"title":"实习面试失败经历","slug":"实习面试失败经历","date":"2019-06-04T15:29:45.000Z","updated":"2019-06-04T15:30:34.601Z","comments":true,"path":"2019/06/04/实习面试失败经历/","link":"","permalink":"https://AnChunLi.github.io/2019/06/04/实习面试失败经历/","excerpt":"","text":"2019实习面试失败一览本来就预料到实习不好找，但没想到这么不好找，在此记录下失败的几次面试，成功还在未来~ 4月中旬华为面试后，我感觉良好，就一直刚在华为上，没有过多投其他公司。最终全是大厂，面试难度真的感受到了，很惨。最好的二面后就凉了，最差的笔试关都没过，甚是悲惨。 华为是自认为面试比较好的一个，技术面和综面都过了，一直等待消息，差不多等了1个月，最准预料到无果，这时候慌了，想想自己还没有offer，就又开始了投递，也就是现在的状况。先说说之前几次的失败吧，由于好久了，细节大多不记得了，有些问的问题因为各种事也没有很好地记录下来。 华为笔试第一次很惨，但给了面试机会，面试基本ok，之后又补了笔试，600分的笔试只得了100分，问题很明显，就是笔试成绩比较低，然后录用排序，最终无果。需要加强算法。 腾讯提前批3月份那时候，第一次面试就不乐观，当时很多细节不清楚，就协商缓存这种问题都能致命。之后的笔试想想也能知道结果…正式批的时候，笔试还是一如既往的难，笔试失败。到5月中旬，腾讯又给了一次机会，但自己还达不到那种技术水平，就彻底凉凉。 阿里阿里内推的时候，第一面电话面试，答得都还可以，顺利过了一面。到第二面时，首先就是自己手机信号不好的问题，给面试官造成了不好的影响，之后问了一些项目相关的问题，我就回答了自己做的小程序项目，然后面试官问了一些在项目中遇到的问题，以及自己如何解决的，我说了消息服务性能的问题，说自己做的聊天服务性能不够好，就用了腾讯云的解决方案，之前也做了基于websocket的单人聊天室和多人聊天室，说了下大概是的实现原理，然后说了列表加载相关的以及性能优化。之后面试官问了，自己如何学习前端的，以及自己自己对前端这块的理解，说下自己印象比较深的，当时我说了JS原型与原型链，作用域与闭包，异步等知识，然后面试问了自己对于V8引擎相关的理解，我直接有点懵，然后差不多久1个小时过去了，最终回绝了我。在自主投递的时候，笔试后就一直没有收到面试通知，然后到5月下旬有面试官来捞我，最准还是没能捞起我… 百度百度真的很奇怪，我笔试过后，一直就没消息了..。按理笔试不应该挂…然后无后话。 头条头条笔试遇到了问题，然后就差不多凉了，之后又在实习僧投了，但都没过一面，感觉难度基本上和二面差不多。 网易网易（网易游戏）投的时候简历都是随便写的，然后第一志愿简历都没有筛选通过，第二志愿简历通过了，当时是华为面完后的第二天面的网易，自己也没多加准备，结果CSS相关有个问题自己记得有点模糊了，然后问了http无状态怎么解决，我说了cookie、本地存储，以及JWT，然后他就顺着问题JWT细节，问到后面我就不会了，但总体不是很差，最终面试没有通过。 京东问题出在笔试了，后面有次机会，放弃了。 斗鱼当时除了华为，我觉得最有信心的就是斗鱼了。笔试顺利通过，没有考算法。面试之前没有复习，然后一开始就慌了，首先问了基础，之后问项目，问代码架构，问自己对新的前端技术的了解。最终无果。 上面全部是在实习生招聘高峰期从官网投的，以下是在第三方网站投的。 滴滴当时投了滴滴前端，然后hr打电话，要我考虑PHP岗位，我说可以。之后面试的确实前端岗。认真准备了，可能是自己准备的还不够全面，就成了惨案。 总结：基础掌握还不够全面，算法需要加强。 期待后续，期待拿offer！","categories":[],"tags":[]},{"title":"滴滴面试惨案","slug":"滴滴面试惨案","date":"2019-06-04T14:17:22.000Z","updated":"2019-06-04T14:23:16.400Z","comments":true,"path":"2019/06/04/滴滴面试惨案/","link":"","permalink":"https://AnChunLi.github.io/2019/06/04/滴滴面试惨案/","excerpt":"","text":"滴滴面试惨案今天是悲惨的一天，精心准备了面试，结果在面试官前输的一败涂地。 首先不得不吐槽校园网，大创的校园网差的要命，面试官从面试软件离开加了我微信，又换了电话面试。 第一题先说面试吧，一上来问了比较基础的问题，考察JS异步，结果我的回答我自己都觉得蠢，那么简单的问题居然能够想错。不过想起来后纠正了，反正印象不太好。123456for(var i=0;i<5;i++){ setTimeout(()=>{ console.log(i); },i*1000)}//说出以上代码的执行结果 看到这个我知道这个考察JS的异步，定时器是异步执行的，但最终会输出5个5，但一开始输出啥，隔几秒钟输出啥，问到这感觉自己懵逼了，不确定自己回答是否正确。最终自己试了知道他会以1S的频率输出5个5。 接着面试官问了，如果保证1,2,3,4,5依次顺次输出，应该怎么写，当时想了半天，想出来用闭包。123456789(function test(){ for(var i=0;i<5;i++){ return function(){ setTimeout(()=>{ console.log(i); },1000*i) } }})() 这是当时写的傻逼代码。打开控制台后运行有问题。其实之后发现只要用let就可以完美解决。12345for(let i=0;i<5;i++){ setTimeout(()=>{ console.log(i); },1000*i)} 第二题问了下JS事件环，宏任务与微任务，之前听过相应概念，但自己当时不够重视，没有深入了解，造成失误。Js的事件执行分为宏仁务和微任务 宏仁务主要是由script（全局任务），setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering微任务主要是process.nextTick, Promise.then, Object.observer, MutationObserver.贴段代码，理清楚就行：1234567891011121314151617console.log('main1'); process.nextTick(function() { console.log('process.nextTick1'); }); setTimeout(function() { console.log('setTimeout'); process.nextTick(function() { console.log('process.nextTick2'); }); }, 0); new Promise(function(resolve, reject) { console.log('promise'); resolve(); }).then(function() { console.log('promise then'); }); console.log('main2'); JS代码开始从上往下单线程执行：1.console.log(‘main1’);进入执行栈执行；2.遇到process.nextTick将它的回调函数先放入MicroTask(微任务)；3.遇到setTimeout将它的回调函数放入MacroTask(宏任务队列)；4.在执行栈中new Promise并将.then中注册的回调放入MicroTask(微任务)；5.最后一行代码console.log(‘main2’);会放入主执行栈执行.综上所述，这段代码的结果就是先输出main1，然后第二步第三步我们不用管它，它不是在主执行栈中，所以直接到第四步输出promise，然后主执行栈继续执行第五步输出main2。此时主执行栈执行完毕，开始事件循环，发现在MicroTask中还有任务，开始清空微任务，第二步中我们在微任务中放入了process.nextTick所以输出process.nextTick1，在第四步中将.then的回调放入了微任务，那么微任务队列继续执行输出promise then，此时微任务队列已经清空开始事件循环宏任务队列，也就是输出第三步中的setTimeout，在输出之后发现setTimeout这个回调中还有一个process.nextTick，那么这个回调继续放入微任务队列，此时事件循环发现主执行栈中已经没有任务，那么开始执行MicroTask输出：process.nextTick2 浏览器事件环简单直接：当前栈执行完成（同步代码主线程上执行完成）->清空微任务->宏任务队列中的第一项推到栈中执行（如果有微任务，将微任务放入微任务队列）->清空微任务队列->宏任务第二项任务执行，依此循环，直到结束。 第三题问了CSS选择器及优先级，当时说了基本的ID选择器、类选择器、元素选择器、属性选择器、子类选择器等等。优先级是：内联 > ID选择器 > 类选择器 > 标签选择器。然后这篇详细讲了优先级的细节，自己也看了下。链接：深入理解CSS选择器优先级 第四题问了盒模型，这个不难，基本答出来了，但问到border-box的使用场景，自己有点不知所措。 content-box缺点当你想让两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，一切想的挺美好，然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width就不能50%了，只能是50%再减去padding的像素值 order-box的优势border-box的诞生，主要就是解决content-box的最大缺点。border-box意味着子容器的padding和border的厚度都算在50%之内，这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆。 因此border-box使用场景如下:子元素有padding和border，或者至少有其一，并且需要给子元素设定100%宽度（或者50%宽度等等），这时候显然需要border-box。设为border-box之后，padding和border的厚度可以随意调，并不会溢出父元素。如果是content-box，那么，宽度必然会溢出，而且，为了不溢出，你设定子元素的宽度就只能是一个定值，或者是一个计算值（比如calc(100% - 20px)。 第五题问了http相关的，主要问了301和302，301永久重定向，302暂时重定向。304协商缓存，然后说了下协商缓存的原理。解决减少资源请求方式还有强缓存，如果资源更新了，可以在开始时通过改变Url来重新请求服务器资源，而不是从强缓存中取出，达到了版本更新的目的。另外我回答了PWA等资源本地存储的解决方案。 大概问的问题差不多这几个，还有些回答的ok就没写。总之自己没有对相关知识点进行深入的理解学习，最终酿成这次惨案，想想这么几次面试都挺惨的感觉，总之，加油，早日提高技术吧。","categories":[],"tags":[]},{"title":"js函数节流与防抖","slug":"js函数节流与防抖","date":"2019-06-04T04:55:04.000Z","updated":"2019-06-04T05:04:35.839Z","comments":true,"path":"2019/06/04/js函数节流与防抖/","link":"","permalink":"https://AnChunLi.github.io/2019/06/04/js函数节流与防抖/","excerpt":"","text":"JS函数节流与防抖节流在浏览器resize。scrool等高频率事件，可通过函数节流进行性能优化节流是保证间隔时间内函数只执行一次 代码实现1234567891011121314151617// 节流function throttle(fn,wait){ let timeout; return function(){ let that=this; let args=arguments; if(!timeout){ timeout=setTimeout(()=>{ timeout=null; fn.apply(that,args); },wait); } }}document.querySelector('body').onmousemove=throttle(function(){ console.log(\"test\");},1000); ####防抖所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 #####代码实现1234567891011121314151617//防抖function debounce(fn,wait){ let timeout; return function(){ let that=this; let args=arguments; if(timeout){ clearTimeout(timeout); } timeout=setTimeout(()=>{ fn.apply(that,args); },wait); }}document.querySelector('body').onmousemove=debounce(function(){ console.log(\"test\");},1000);","categories":[],"tags":[]},{"title":"微信小程序canvas总结","slug":"微信小程序canvas总结","date":"2019-05-25T06:52:53.000Z","updated":"2019-05-25T06:56:17.629Z","comments":true,"path":"2019/05/25/微信小程序canvas总结/","link":"","permalink":"https://AnChunLi.github.io/2019/05/25/微信小程序canvas总结/","excerpt":"","text":"微信小程序开发经验总结1.canvas中绘制buffer图片的问题有时候需要动态生成微信小程序码并携带参数，这时候就需要了解微信小程序的API，请求后会给你一张buffer图片；经检验，wx.wx.arrayBufferToBase64此接口失效，得不到数据，几十可以转换成base64图片，模拟器可以绘制，真机依然失效。我经过百度和尝试，有以下解决方案：1.服务端传回base64格式图片，然后前端以这样的方式去掉空格：showImgData = showImgData.replace(/\\ +/g, “”); //去掉空格方法showImgData = showImgData.replace(/[\\r\\n]/g, “”);//showImgData是base64数据然后使用wx.base64ToArrayBuffer这个接口转换为buffer，不需要加base64头部2.使用小程序文件管理APIconst fsm = wx.getFileSystemManager();var showImgData = this.data.qrcode;showImgData = showImgData.replace(/\\ +/g, “”); //去掉空格方法showImgData = showImgData.replace(/[\\r\\n]/g, “”);const buffer = wx.base64ToArrayBuffer(showImgData);const fileName = wx.env.USER_DATA_PATH + ‘/share_img.png’fsm.writeFileSync(fileName, buffer, ‘binary’); 最终以filename去绘制，就OK了","categories":[],"tags":[]},{"title":"Hello World","slug":"hello-world","date":"2019-05-25T06:18:15.329Z","updated":"2019-05-25T06:18:15.329Z","comments":true,"path":"2019/05/25/hello-world/","link":"","permalink":"https://AnChunLi.github.io/2019/05/25/hello-world/","excerpt":"","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment","categories":[],"tags":[]}]}