Larmy Blog

最近做的h5项目中有一个微信登录功能，将自己遇到的一些坑记录一下 前提： 一个公众号 appid 首先就是在自己的vue项目中引入微信的接口 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> 接着我们就可以在自己的login.vue中调用微信函数WxLogin 在login.vue中的mounted 123456var obj = new WxLogin({ id:"div", //div的id appid: "公众号里的appid", scope: "snsapi_login", redirect_uri: "http%3a%2f%2f96ac7d.natappfree.cc%2f%23%2fjump",//urlencod ...

## vue父组件数据更新子组件相关内容未改变父组件在父组件中，根据后台给的数据（数组），v-for生成子组件 123456<div class="exist"> <existProject :itemprop="item" v-for="(item, index) in getData" :key="index" :index="index" @click="sendIdTogetData(index)" v-show="true"></existProject> </div> 子组件（existProject） 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585 ...

遇到一个问题，在使用element ui的多选框组件el-checkbox-group和el-checkbox的时候出现了无法选中选项的事情 1234<el-checkbox-group v-model="checkList" :min="less" :max="most"> <el-checkbox v-for="(item,index) in listDate.options" :key="index" :label="item"> </el-checkbox></el-checkbox-group> 其中，listDate是通过父组件传递过来的值，因为我要实现的是可以控制多选框组最多和最少的选项，按照el-checkbox-group要求，checkList是数组，如果不绑定min和max是可以选中的，但是反正就会出现复选框选不中的情况。 查看别人的资料和官 ...

最近学了canvas，写个小实例来巩固一下知识点上一下效果图：运用到的函数（具体使用方法可以自行搜索相关文档） moveTo() lineTo() arc() quadraticCurveTo() bezierCurveTo() beginPath() fillStyle stroke() fill() 代码内容：1.绘画头部先利用arc()，画出外部的圆，再利用二次贝塞尔曲线画出面部轮廓效果图：（白色多出的部分没关系，因为还要画项圈）代码： 123456789101112131415161718cxt.beginPath();//起始路径 cxt.lineWidth = 1;//线宽度为1 cxt.strokeStyle = '#000';//笔触的颜色 cxt.arc(200,200,140,Math.PI*0.3,Math.PI*0.7,1); cxt.fillStyle = '#0bb0da'; cxt.fill(); cxt.stroke(); cxt.beginPath ...

前端性能优化：细说浏览器渲染的重排与重绘前端性能优化因为涉及到计算机网络、数据算法、图形图像处理、浏览器渲染等多方面计算机知识，常作为前端工程师乐此不疲的技术讨论话题，也正因如此，它也是面试时容易被问及的面试题之一。 缘起 本篇文章缘起一次偶然的面试问答所引申出的思考整理，着笔于浏览器渲染的角度，探讨前端性能优化的思路和实践建议，当然，浏览器渲染是一个复杂的过程，本文笔者将围绕重排和重绘两个关键词开始行文。 目录结构 文章大致行文思路如下： URL从输入到页面展示的过程 DOM和JavaScript的关系 为什么操作DOM会很“慢” 浏览器解析HTML的过程 重排 重绘 优化方案 URL从输入到页面展示的过程 在探讨浏览器解析html之前，先了解url从输入到最后页面渲染的过程是一个很有必要的步骤，它可以帮助我们把握整体流程，让我们在了解HTML解析细节之前知道它处于整个请求周期中的哪一阶段，这对我们构建完善知识图谱很有帮助。 首先，我们假设输入的url的请求为最简单的Http请求，以GET请求为例，大致分以下几个步骤： 用户在浏览器的地址栏输入访问的URL地址。浏览器会先根 ...

方法一： 打开一篇禁止粘贴的作文 2.打开f12控制台，点击这个小按钮（我这是Google浏览器）3.把鼠标放到这个输入作文的框上，旁边的element或对应到这个textarea文本域4.右键点击这个标签，选Edit as HTML5.在两个标签内放入作文即可方法二：1.还是上面步骤一到步骤三，找到<textarea></textarea>这个标签，看它的id号，这里的id是contents2.在console控制台输入3.就可以复制粘贴了

整理一下有关原型或者原型链上常出的一些方法 1. istancenofa instanceof b用来判断a的原型链上是否有b的存在 1234567891011121314// instanceoffunction Father(){ this.sayFather = 'i am father'}function Son(){ this.saySon = 'i am son'};Son.prototype = new Father();var son = new Son();console.log(son instanceof Son) // trueconsole.log(son instanceof Father) // trueconsole.log(son instanceof Number) // falseconsole.log(son instanceof Object) // trueconsole.log(Father instanceof Object) // true 2 ...

 浏览器存储在开发过程中，有些数据我们需要多次用到，但是如果每一次需要就去和服务器请求，那么无疑会造成一定的资源浪费，所以我们可以根据业务需求，把一些数据在浏览器中存储起来，目前最常见的存储方案是： Cookie web存储(localStorage和sessionStorage) IndexedDB Cookie背景因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，所以Cookie就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。 Cookie的又称是HTTP Cookie，最初是在客户端用于存储会话信息，从底层来看，它作为HTTP协议的一种扩展实现，Cookie数据会自动在web浏览器和web服务器之间传输，因此在服务器端脚本就可以读写存储的cookie的值，因此Cookie通常用于存储一些通用 ...

答辩整理魔方是如何建模的 这里主要使用到是three.js技术，第一步是画外形，虽然外观上看上去是一个大的正方体，但其实是做了26个小正方体拼接而成，期间会记录给一个小正方体的坐标位置，最后加上黑色边框，在浏览器上渲染出来。第二步是操控魔方视角，虽然说魔方已经在浏览器渲染出来了，但是因为无法操控空间视角，只能看到魔方的某一个面，这时候要加上three.js提供的视角控制库，我这里用的是轨道空间库，完成视角空间库的初始化，就可以观察到魔方的每一个面，整体就会出现一个3D的效果。最后一步就是监听鼠标事件，达到转动魔方的效果。 转动魔方是如何实现的 首先确定触摸点，通过监听鼠标事件操作就可以获得一个平面2D的XY坐标，然后就是通过一个平面2D坐标映射成为3D坐标的问题，这时需要引用three.js提供的Raycaster，原理就是在点击的位置和相机的位置发送一条射线，被这根射线射中的物体都被记录下来，这样就可以知道在三维空间中鼠标移过了什么物体。接下来确定转动方向，根据xyz正负轴分为六个方向，根据滑动的两点确定转动向量，然后判断转动向量和这六个方向向量夹角最小的方向即为转动方向，之后根据 ...

浏览器控制台输出图片在浏览b站的时候打开浏览器控制台会出现b站的logo，其实他是通过一下函数玩转了ASSII-Aar ，后续有了解到可以在某些网站上可以将英文转化为ASSII-Aar 但是最近我发现了西瓜影视输出的是一张图片 其实他是输出了一张网络图片（居然还可以这样玩） 出于好奇我也想试一下 输出图片尝试在控制台输出我最爱的哆啦A梦 使用网络图片地址 1console.log("%c ", "background:url(https://inews.gtimg.com/newsapp_bt/0/11616110357/641) no-repeat ;line-height:600px;font-size:600px") 使用base64（base64代码比较大，不美观，而且打包体积会变大） 12console.log("%c ", "font-size:1200px;line-height:600px;background:url(data:image/jpg;base64,UklGRvo2AA ...