随笔分类 - 编程是碉堡的阶梯
记录个人的开发心得
摘要：1.二维码组件 基于qrcode和element-ui开发的二维码组件，qrcode负责渲染，element-ui负责弹窗预览展示 代码已上传gitee, 地址 基本使用 <el-qrcode value='123456'></el-qrcode> 参数 参数 类型 说明 value String
阅读全文
摘要：1.由来 宏观角度：大屏看板要刚好占满屏幕，不能留有空白区域，也不能出现内容溢出，或者出现滚动条的情形 微观角度：内容必须跟着屏幕分辨率的变化而变化，分辨率大的内容跟着大，分辨率小的内容跟着小 2.CSS自适应单位 CSS中的自适应单位有2种：vw/wh 和 rem vw/wh：100vw当前视口宽
阅读全文
摘要：1.何为跨域 AJAX跨域问题是指浏览器出于安全考虑，限制了一个源（域名、协议、端口）的脚本与另一个源的资源进行交互。通俗的说，当前页面的域名、协议、端口必须与ajax访问地址一致，才能正常通信，否则会造成跨域 2.解决方案 浏览器开放限制：浏览器下载插件（Access-Control-Allow-
阅读全文
摘要：1.输入URL到页面呈现发生了什么 dns解析：将域名解析成对应的IP（浏览器缓存->系统缓存->路由器缓存->DNS服务器） 浏览器与目标服务器建立TCP连接，TCP3次握手连接：浏览器所在的客户机向服务器发出连接请求报文（SYN标志为1）；服务器接收报文后，同意建立连接，向客户机发出确认报文（S
阅读全文
摘要：###1.前言 H5可以获取视频流，并通过video元素进行播放 可以canvas对视频进行定时截图，然后使用插件对图片进行二维码解析 也可以直接对视频进行二维码解析（推荐） 解析二维码的插件为qr-scanner ###2.注意事项 网站只有https协议才能开启视频流 http协议的页面（局域网
阅读全文
摘要：1.字符串占位宽度 计算占位宽度：字符串的占位宽度除了涉及到具体的字符串内容，还与字体大小有关，可以将其放入Dom中来获取实际占位宽度 //计算字符串的占位宽度 function getTextWidth(str = '',font_size=12) { const dom = document.c
阅读全文
摘要：1.获取URL的query参数 作用：根据传入的属性名输出对应的值，没有则输出null 注意：url传参中包含中文时，默认的获取结果会乱码，需要进行解码 //解析query传参 url参数中含有中文时将decode设为true getQueryVal(key,decode = false) { va
阅读全文
摘要：##前言 前面2个章节已经封装好了摇杆和NES虚拟按键，现在配合jsnes这个包来完成一个移动端版的NES模拟器。 这是插件的github地址：bfirsh/jsnes 这个包可以直接拿来用，但是没有适配移动端。他通过事件监听，判断evt.keyCode属性来判断用户的输入信息。在移动端只要进行事件
阅读全文
摘要：##前言 前面的章节已经封装了一个NES的虚拟按钮，这个章节来封装他的方向键。 在一些NES网页网页模拟器中，方向键要么使用按钮模式，要么使用摇杆模式，各有不足。例如按钮模式无法滑动，用户点了半天才知道点空了。而且无法很难做出 '左上' '右上' 这种操作。而用摇杆模式的不多，依旧没有8键模式，而且
阅读全文
摘要：##前言 移动端浏览器是没有实体键盘的，想要操作游戏就必须为其设置虚拟按键，通过虚拟按键（按钮）的标识与实体键盘的keyCode进行绑定，来达到想要的效果。 这个随笔只封装NES游戏手柄右边的按键，不包含方向键。方向键的封装在另一个章节。 ###1.按键UI NES游戏手柄分为6个键，如图： 连发按
阅读全文
摘要：###1.后端代码 Node.js Express 框架 var express = require('express'); var app = express(); //引入中间件 var formidable = require('formidable') //监听路由 app.post('/f
阅读全文
摘要：###1.原理及说明 九宫格图片就是将一张图片分成9份，再拼成一个完整的图片，如图： 原理：创建9个正方形容器，利用背景图定位，每个容器只显示其中的一部分，最终拼接成一张完整的图片 实现思路： (1)使用flex布局，让9个子元素以 3*3 的形式摆放 (2)因为图片有纵向和横向两种可能，所以要对图
阅读全文
摘要：1.数据代理 含义：数据代理字面意思的意思就是通过间接的方式管理某个数据，例如要访问vue中data的数据应该是vm.data.msg，访问vue中的方法应该是vm.methods.getMsg()，但是实际上我们直接使用vm.msg来访问vm.data.msg，使用vm.getMsg()来访问vm
阅读全文
摘要：1.原理分析和效果图 先上效果图： 屏幕适配上使用rem适配，假设用户的手机屏幕最下宽度是375px，而谷歌浏览器最小的字体大小为12px，所以我以375px为标准尺寸进行rem适配，即375px的屏幕设置html标签字体大小为12px，随着屏幕宽度增大，1rem也随之增大 表盘使用的是圆角，使之展
阅读全文
