![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
文章平均质量分 53
毛发苍苍
尽量只更新一些比较花调研时间的东西。具体技术就算啦
展开
-
高性能动画JSON动画
animejs它是一个js动画库,是对transform进行封装,使其受js控制、拥有更高性能和很好的兼容。最重要的是:提供了很多回调、监听方法。eg:每帧回调、每次循环回调、循环开始的回调。提供了一个时间轴概念,赋予其属性继承和控制动画执行顺序的能力。https://www.animejs.cn/documentation/#cssSelectorlottie - web以往实现动画方式有三种(不谈游戏):keyframe、transform、gif。痛点是我们很难实现复杂动画,而js原创 2022-04-26 15:13:02 · 3700 阅读 · 0 评论 -
一图总结。http请求 / 状态码报错 总结
5开头服务器的问题,403禁止访问,后端小伙伴的问题图片来自群聊,非原创原创 2020-02-11 22:14:51 · 209 阅读 · 0 评论 -
小程序性能优化(一)——多线程worker
基本介绍有时候小程序文档真的看的我脑壳疼多线程顾名思义,简单理解成正在执行我们业务代码的线程(主线程)之外,再开一个后台线程worker。一般用来执行一些耗时的任务和定时任务。整体思路1.全局开启worker2.主线程引入对应worker,发送消息给后台线程,并监听返回信息3.监听收到的信息,进行代码处理,发送信息给主线程。具体步骤app.json第一级属性中添加worker: “workers”: “workers”新建worker文件夹,在主线程中,即自己页面代码编写整体思路的原创 2021-10-24 16:14:13 · 1847 阅读 · 0 评论 -
微信小程序 接入 百度统计——事件统计(二)
背景微信小程序也有自带的数据分析,功能还挺多,而且加埋点不需要改代码。但是,数据是在微信那边你懂的,其次是一部分数据在百度统计,一部分在微信统计,就麻烦。具体步骤其实百度经验说的很全了,但是不够清楚。这里做补充:微信小程序的统计不同普通网页,普通网页是根据域名地址来做分类统计的,小程序是划分为app来分类的据上,你需要开通百度统计-移动统计服务。即还需要完善一些信息,才能用开通-新建应用-获取appkey-下载sdk文件添加步骤(百度经验)准备工作搞定后就是新建事件,添加代码,触发事件统计原创 2021-10-17 21:20:19 · 1138 阅读 · 0 评论 -
【小程序】自定义顶部导航栏(左上角返回等)
思路:明白一点,右上角的胶囊按钮是隐藏不了的,是固定在右上角的,也意味着自定义导航栏时候不用考虑它先在需要自定义导航栏的A页面,配置"navigationStyle":“custom”【全屏】,和window属性同级编写一个普通组件做为导航栏,高度X,甚至可以写一个搜索框在上面的。A页面引入该组件,写好位置(在最顶部),对准胶囊按钮的位置【最重要一步】计算高度X实现:【navbar.html】我这个左上角是一个icon,跳往主页<view class='nav' style='he原创 2021-10-14 23:35:06 · 4420 阅读 · 0 评论 -
理解+上手正则表达式【附官方常用正则表达式】
啥是正则正则可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。对应string.test()、string.replace()、string.match()方法组成:/ 表达式 /修饰符修饰符是用在整个正则的后面的 eg: /…/i 、/…/gi 相当于全局配置吧。不设置就是只找一次,区分大小匹配规则/模式我理解为查找规则,按某个规则来找比如:\d 只查找数字每个子表达式只能下面10选一特殊字符用法介绍1.”^”可以表示否(取反),原创 2021-09-23 21:01:38 · 161 阅读 · 0 评论 -
jpg、png、jpeg区别与压缩等知识总结 —— 性能优化篇
jpegjpeg是一个国家专家小组,同事也是一种算法名称,而用JPEG算法压缩出来的静态图片文件称为JPEG文件,扩展名通常为*.jpg、.jpe.jpeg。JPEG文件大体上可以分成两个部分:标记码(Tag)和压缩数据。标记码由两个字节构成的,换而言之他们都是数据来的,是可以进行算法压缩的。本质上就是算法和空间的权衡。.jpe.jpeg是同样的东西,和.htm与.html一样,受限当年DOS时代对扩展名不能超过3个字符的规则。严格来讲后者才是正主。pngpng格式是一种16进制数据,并且是可以无原创 2021-09-08 22:16:06 · 5810 阅读 · 0 评论 -
eslint的使用,和相关配套方案介绍总结
最重要的放前面以下都是配套使用的,最规范的情况就是一起使用,EditorConfig——VScode插件:,是用来定义规则的,比如设置缩进格数。然后覆盖setting里面的设置,达到大家代码统一的效果,然后可以用一个.editorconfig.js文件来配置规则preitter 是一个格式化代码的工具,需要–D安装,他会把你的代码按规则格式化的更漂亮,在根目录写.prettierrc.js配置规则,.prettierignore是配置怎么忽略的(比如:路径/.xx结尾文件的不格式化等等)eslint原创 2021-09-08 10:52:56 · 238 阅读 · 0 评论 -
Charles基本使用、请求响应拦截并修改返回
首先Charles是抓包工具,就不多介绍了。下面是破解版+证书安装教程不赘述。重点是前端怎么入门、怎么用工具poJie版安装证书 不安装的话,就监听不到,全是unknown一、 基本介绍Structure视角:按域名给你分类好接口,我比较常用这个Sequence视角:按时间顺序给你分类接口二、拦截接口(Breakpoints )1.先在左侧找到你想拦截的接口,右键breakPonits(断点2.刷新页面重新请求该接口,就能拦截了3.这里会显示你刚拦截的接口4.可以修改参数、请求原创 2021-08-08 22:59:29 · 2514 阅读 · 0 评论 -
全局注册组件,element-ui封装原理
需求:你想写一个组件,想在全部页面都可以这么使用: <el-newbutton>自己封装的按钮</el-newbutton>做法:新建一个js文件,import你写好的.vue文件。至于这些文件放哪,全看你项目文件怎么规划的了。import newbutton1 from './newbutton1'import newbutton2 from './newbutton2'export default { install (Vue) { Vue.compon原创 2021-07-21 09:18:04 · 768 阅读 · 0 评论 -
前端视觉优化(四)css动画,animation属性
实战展示让这个手指一直在 \ 这个对角线上移动。匀速、一次完整周期1.5s .guide { position: absolute; height: 3.16rem; width: 3.16rem; bottom: -1.5rem; right: -1.5rem; animation: slip 1.5s infinite ease-in-out; //核心代码。 } @key原创 2021-07-13 10:32:32 · 240 阅读 · 0 评论 -
XMLHttpRequest解读,组件封装必懂
XMLHttpRequest的发展历程XMLHttpRequest一开始只是微软浏览器提供的一个接口,后来各大浏览器纷纷效仿也提供了这个接口,再后来W3C对它进行了标准化,提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。XMLHttpRequest Level 1主要存在以下缺点:受同源策略的限制,不能发送跨域请求;不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;在发送和获取数据的过程中,无法实时获取进度信息,只能判断原创 2021-07-13 10:20:21 · 553 阅读 · 3 评论 -
H5接入微信支付、支付宝支付
H5上支付宝支付1 先发起一个请求,把必要信息(订单号、价格)+重定向urlA传给后端2. 后端通过微信那边返回一个urlB(微信的页面),前端跳去B这里付款,结束后3. urlB 会把页面跳回 urlA(支付成功/失败页面)4.H5/JSAPI微信支付必知前提H5微信支付,广义上是指那些html5页面。但是在微信文档中H5支付属于非微信浏览器环境支付,JSAPI支付属于微信环境浏览器支付。前者生成预订单时候,微信返回给后端的是一个预订单id。后者是返回一个url,供前端跳转支付。流程思路:原创 2021-06-29 11:50:15 · 3574 阅读 · 2 评论 -
Jenkins自动打包部署——前端入门,Jenkins解读,Jenkins机器人
codding配置jenkins自动构建原创 2021-06-12 16:24:03 · 3836 阅读 · 1 评论 -
H5——监听页面图片加载完后,放开loading页面
思路:给那些图片设置data-src=‘图片地址’属性 代替 src。然后写个公共文件处理逻辑:获取img标签的dom,把data-src的值赋给src,用onload方法判断图片加载完没。当所有图片都onload了。就可以放开loading了。<template> <div> 页面样式自己写, <slot></slot> //记得带这个 </div></template><script>e原创 2021-05-27 11:59:04 · 1096 阅读 · 0 评论 -
从0 — 1,了解+搭建 H5-微信授权
首先要在html文件中引入微信文件,它会暴露出一个全局的对象:wx<link rel="preload" ,href="//res.wx.qq.com/open/js/jweixin-1.3.2.js" ,as="script" />其次是init基础配置,比如微信好友/朋友圈分享。这个一般写在全局方法中,一开始就调用。从后端获取appid 这些数据,目的是安全。async function weixinConfig() { try { let res = await r原创 2021-05-24 23:54:13 · 176 阅读 · 2 评论 -
H5/前端接入百度统计(企业级方案入门)——事件统计
科普:1.假如你是新的链接页面,进行的统计,那么需要新增网站(正式、测试),获取对应id(代码)代码是这么个样子。2. 查看图表总访客量和访客次数自带区分的3. 添加数据这里就是代码部分了,一般你的项目都是已经接入百度统计了的。这时候你需要添加埋点触发代码,就一句:参数一是写死的。window._hmt.push(['_trackEvent', '作品详情页', '点击','发送给朋友']);4.补充类型,操作,标签这些是产品整理好成一个表格给你,这个百度统计更新有一小时延迟原创 2021-05-10 18:57:23 · 1648 阅读 · 2 评论 -
H5———IOS安卓微信中显示样式不同、IOS点击无反应
样式问题两个系统在微信浏览器中显示不同,主要原因是两者默认样式标准不同,当你没有指定样式的时候,他就会以默认样式呈现。所以一般你在PC浏览器看到的会和手机上看到的不一样。例子:比如color你没指定、font-size没指定,button标签的边框有时候指定了还是会变的,所以用div会比较好。IOS点击无反应IOS那边是需要指定css那个小手样式才能点击的。(但不是全部都无法点击,只是无法点击的部分设置这个就可以正常点击了,我也不懂,希望评论区大佬指教,我当时是div绑定的点击事件)修改鼠标性状原创 2021-04-26 22:24:26 · 1507 阅读 · 0 评论 -
H5——登录后跳回原页面、encodeURIComponent()
window.location.assign('../auth/purple-auth.html' + '?redirect='window.encodeURIComponent(location.href)); window.location.assign(window.decodeURIComponent(search.redirect));http%3A%2F%2Fsit.miaocode.com%2Fk1811%2FcontestSystem%2Fmine.html原创 2021-04-17 00:26:25 · 879 阅读 · 0 评论 -
H5——检测是否是“微信环境”、是否是“全面屏”(企业级代码)
企业级代码,直接用吧// qq浏览器检测 isQQBrowser: function() { // 是则返回版本号,否则返回false let match = window.navigator.userAgent.match( /MicroMessenger\/([0-9.]*)/ ); return match && match[1]; },...原创 2021-04-16 18:16:01 · 274 阅读 · 0 评论 -
H5——移动端JQ实现下拉刷新、上拉加载更多
前言这里用的JQ库里免费插件__dropload,效果图在文末引入去上面链接里面下载内容,可以本地引入<link rel="stylesheet" href="../dist/dropload.css"><script src="../dist/dropload.min.js"></script>最好就放在自己cdn服务器上引入代码html这边就,<div class="main" //插件绑定这层 <div class="原创 2021-04-11 15:54:02 · 1570 阅读 · 3 评论 -
H5——秒杀项目倒计时实现,代码可照搬
先上效果图人美,代码更美,代码不难,看一遍就懂。// time是结束时间和现在的时间差(时间戳)function countdown(time) { if (time) { console.log(time) let timeStr = timeFormat(time), duration = 100; // 渲染到页面 setCountdown(timeStr); if (time &g原创 2021-03-31 13:07:18 · 781 阅读 · 1 评论 -
H5——必备之使用swiper.js、常规且带点好看配置
这是H5项目用的最多的了,最近重新用上有些忘记,还是写出来方便查看基本的,也帮助其他人HTML部分这是pug的语法,不写标签名默认即div了,也很好看懂,主要是看层级关系。需要分页器,就要写上一个<div class=".swiper-pagination ">即可 上下页同理。 .swiper-container //最外层 .swiper-wrapper //主要显示层 .swiper-slide /原创 2021-03-28 22:42:44 · 694 阅读 · 0 评论 -
$attrs、inheritAttrs、$listeners;VUE隔代传值;组件封装原理
前言隔代传值一般不用vuex,大项目vuex咋能用来传一些琐碎的值。孙子获得爷爷的数据,用$attrs就行爷爷获取孙子的数据,用$listeners组件封装原理就是隔代传值,本来隔代传值不想写的,最近看到封装原理才觉得有点东西,会多用到一个inheritAttrs属性。它解决这么个场景:你想封装一个密码类型或明文类型的输入组件,要用到type="password"或者type=’'text"吧。 那就需要把type=“xxx” 继承过去指定位置。(举的例简单,当然还有其他实现方式)怎么去继承的问题。原创 2021-03-25 18:25:32 · 376 阅读 · 0 评论 -
(一分钟搞懂)纯前端导出excel——Vue-json-excel
这个很简单的,很方便。看过很多文章都是偏复杂的,代码量多不易维护,兼容性还未知。安装vue-json-excel插件npm install vue-json-excel --save引入vue-json-excel组件明明就能局部引入,那么多文章带偏新人让人家全局引入(main.js)?import JsonExcel from 'vue-json-excel'components: { 'download-excel': JsonExcel },上代码因为是组件形式,原创 2021-03-17 19:19:35 · 854 阅读 · 0 评论 -
导出excel文件 ——(从接口获取、纯前端导出、解析excel)
前言操作文件流,第一个想到肯定是new FileReader(),这次涉及到一个Blob对象,它是原始数据的类似文件对象。FileReader对象操作的就是Blob对象。从接口获取文件,并下载这里有两种都能实现,左边是更正确的,axios请求的时候就要指定返回的类型是blob类型,是不需要再new一个对象。我们用FileReader处理res,得到一个base64字符串,赋给a标签来实现下载。(当然如果是几乎不带参数、速度很快的接口。可以直接window.open(url) )axios({原创 2021-03-09 15:37:43 · 770 阅读 · 0 评论 -
New FileReader() 的使用——js基础
1:FileReader : 读取文件内容readAsText() 读取文本文件,(可以使用Txt打开的文件)readAsBinaryString(): 读取任意类型的文件,返回二进制字符串readAsDataURL: 方法可以将读取到的文件编码成DataURL ,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件abort: 中断读取2:FileReader 提供一个完整的事件模型,用来捕获读取文件的状态onabort:读取文件断片时触发onerror:读取文件错误时触发onload:原创 2021-03-08 22:31:44 · 27949 阅读 · 0 评论 -
Js-日期时间戳互转,时间比较(不用插件)
小tips:new Date()这个东西的意义,他是用来格式化数据的,然后我们才能用js提供的各种方法,以这个思路去看下面的内容日期转–>时间戳当前时间转时间戳:let a = new Date().getTime()目标时间转时间戳:let a = new Date(‘2021-08-31 13:05:05’).getTime()let a = new Date(‘2021/08/31 13:05:05’).getTime()getTime()是毫秒级别的。Date.parse()是原创 2021-03-08 19:14:53 · 917 阅读 · 0 评论 -
H5——(JQ/原生实现)页面上传图片
关于原生的东西,起码我多少是忘了许多,记录一下。这也是H5比较常用功能了。需求/问题:点击button,选择图片、校验、上传废话不多说,直接上代码吧<!DOCTYPE html><html><head></head><body ><button id="subimg" onclick="ome()">来了老弟</button><input type="file" multiple id='getfi原创 2021-03-08 18:30:48 · 1441 阅读 · 2 评论 -
页面刷新关闭前弹窗、页面关闭前弹窗、IOS(H5)页面返回不刷新
先说本次问题ios在微信上面点开h5,点击a标签后,下方左后退页面不刷新,其实是浏览器读取了缓存,而不进行页面刷新(缓存存了你的整个页面),这货名叫“往返缓存”(back-forward cache,或bfcache)解决方法监听htmlDom事件,监听pageshow事件,触发的时候window.location.reload()页面刷新就好了科普:一、load、unload和pagehide、pageshow的主要应用场景1)一般用于页面的首次加载、刷新、关闭、前进后退、超链接等操作的监听;原创 2021-02-27 17:31:37 · 817 阅读 · 0 评论 -
H5、vue动态复制文本功能,ClipboardJS
先明确一点,vue的话不是vue clipboard因为vue clipboard有个缺陷,就复制动态数据时候,会因为异步问题永远都是获取到上一次复制的内容,截至2个月前我是没看到有修复,如果有动态复制的需求看这里(vue的)H5部分用的clipboardjs :http://www.clipboardjs.cn/先说这个插件大概实现思路把1.给复制按钮绑定了个属性,该属性的值指向了要被复制的元素2.要被复制的元素绑定val=“xxxx”3.js层面实例化并监听复制按钮,复制成功/失败回调。原创 2021-02-08 12:00:27 · 560 阅读 · 0 评论 -
H5页面,JQ操作select语法、下拉框默认显示
<select class=".j_option"> //这里$option 选中的是整个select$option.val(); //获取select选中的值$option.find(‘option:selected’).text(); //获取select选中的文本$option.text() //获取select所有文本$option.val(4) //设置select选中val为4的选项//监听select$option.change(()=>{不只是监原创 2021-02-05 17:41:23 · 860 阅读 · 0 评论 -
vue 前端导入excel解析出Json,xlsx解析excel
今天接到一个需求,导入excel查询看起来不难,文件传后端就行,但是要分页,没法做到点击下一页时候再传一次{ 文件,pageNum,pageSize }的。因为没法缓存的了文件(起码很麻烦)————那么我们解析出来,直接传参数给后端就好了————xlsx.js引入:npm i xlsx import XLSL from 'xlsx'html: <input type="file" @change="readWorkbookFromLocalFile" >js:原创 2021-01-20 16:53:06 · 679 阅读 · 0 评论 -
前端使用html2canvas,生成海报并下载图片
html2canvas插件官网有点铁打弊端,只能截图可视的部分,你可以缩小截图官网的实例,截图后再全屏浏览器,你会发现也是只截了一部分。然后网上各种方法,什么滚动回到顶,复制节点,scale。。。。我是看了很多连续花了五个小时没实现。所以最后方案是:小图在pc端可以搞。大图(大于可视窗口)不行,得让后端合成(后端难点在于文字合成)小程序无视第一条,可以前端搞,但是难度高得多小图pc端用html2canvas截图,有一定兼容问题,用插件就有问题使用: html2canvas(documen原创 2020-12-03 14:55:56 · 966 阅读 · 0 评论 -
js、html前端pc端根据url点击下载图片
直接复制进去就好了(变量只有imgsrc和文件名)当然也有通过通过a标签下载的(有坑,也不适用手机端),还是看下方代码吧uploadPoster(imsrc,name) { let imgsrc='https://res.miaocode.com/adf442a7-1080-4c01-bf3b-f2cewea5f78b6d.png' try{ let image = new Image();原创 2020-12-03 14:18:00 · 1002 阅读 · 0 评论 -
前端上传七牛云服务器(企业级方案)+入门
以往我们所知道的都是前端上传到后端,后端回传地址。后端是指自己服务器,而不是花钱~嫩来的第三方。第三方除了贵没什么别的坏处。为什么用七牛什么是七牛云,自行百度。我只讲几点重要的图片压缩、裁剪,人脸识别,CDN加速,不占后端资源代码为什么和csdn大部分不同?他们是直接一个ajaxj就请求了,没有配置可言这是官方前端上传七牛详细文档首先是声明了好几个变量,都是配置来的。最后qinniu.upload()上传key是上传后的文件名,为什么有个/,是命名规范吧,也是为了防止命名重复原创 2020-11-16 11:20:16 · 390 阅读 · 0 评论 -
七牛云对图片压缩、裁剪、缩小等处理
官方文档文档相对正经,建议先看看这边 <img :src="form.courseBanner+'?imageView2/2/w/400'" @click="showUploadDialog">这是企业级应用的代码。imageView2是七牛云字段名(可以这么理解)。imageView2/2后面的2是指模式2,官方提供了0-5六种模式。格式为:模式数/w/参数一/h/参数二0模式:参数一是长边最多为xxx,参数二是短边最多为yyy。进行等比缩放,不裁剪。如果不写/h/参数二,意原创 2020-11-10 15:03:06 · 3831 阅读 · 1 评论 -
vue/H5点击复制动态内容(手机号)
经过踩坑,如果复制的内容是通过接口来的,不要用vue clipboard(先说结果,用它,有bug,需要点两次才能复制好,网上有攻略是点击之前指向触发一次。但是库里会有两次调取记录,说近的你还需要上cdn搜,吃力不讨好)重点来了,原生调用复制不香吗(插件还要引入,多用原生,日后写H5受益)<el-button size="mini" type="primary" @click="copy(xx)" >复制</el-button>中间要声明copyData变量async原创 2020-11-06 22:15:31 · 920 阅读 · 0 评论 -
js实现,取整、上下取整、四舍五入、绝对值
1.取整// 丢弃小数部分,保留整数部分parseInt(5/2) // 22.向上取整// 向上取整,有小数就整数部分加1Math.ceil(5/2) // 33.向下取整// 向下取整,丢弃小数部分Math.floor(5/2) // 24.四舍五入Math.round(5/2) // 35.绝对值Math.abs(-8) //8点赞F12控制台...原创 2020-08-07 15:02:29 · 1322 阅读 · 0 评论 -
关于NaN、undefined、null——基础必懂
null 与undefined等价(==);在if语句中,undefined和null都会被自动转换为false。undefined表示"缺少值",就是此处应该有一个值,但是还没有定义(1)变量被声明了,但没有赋值时,就等于undefined。(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。(3)对象没有赋值的属性,该属性的值为undefined。(4)函数没有返回值时,默认返回undefinednull表示"没有对象",即该处不应该有值(1) 作为函数的参数原创 2020-08-04 19:06:27 · 2463 阅读 · 0 评论