- 博客(89)
- 收藏
- 关注
RSS订阅原创 高性能动画JSON动画
animejs它是一个js动画库，是对transform进行封装，使其受js控制、拥有更高性能和很好的兼容。最重要的是：提供了很多回调、监听方法。eg:每帧回调、每次循环回调、循环开始的回调。提供了一个时间轴概念，赋予其属性继承和控制动画执行顺序的能力。https://www.animejs.cn/documentation/#cssSelectorlottie - web以往实现动画方式有三种（不谈游戏）：keyframe、transform、gif。痛点是我们很难实现复杂动画，而js
2022-04-26 15:13:02
3642
原创 阿里云ARMS渲染速度指标
前言大家都知道，首屏性能对点击率、转换率等有很大影响，以下是我们统计的淘宝旺铺点击率和首屏时间的关系，随着首屏时间从1秒增大到8秒，点击率逐步从85%降低到了82%【来自阿里云ARMS前端监控团队】指标和标准指标说明ARMS提供了两个图来反应性能指标：页面加载时间详情图、页面加载瀑布图具体指标说明：【第一步】首屏渲染（白屏时间）：从请求开始到浏览器开始解析第一批HTML文档字节的时间差。【第二步】首次可交互时间：浏览器完成所有HTML解析并且完成DOM构建，此时浏览器开始加载资源。【第三
2022-04-11 22:18:30
557
原创 可视化工具拖拽、编辑生成JSON，渲染成海报图片——兼容小程序和H5
先看图在pc页面编辑图片小程序中可生成图片，正常展示、保存、分享原小程序画图声明画布，ctx对象画画画，很难受，对于一些居中场景，复杂布局，不能用css，就处理不了的。所以。。。。。。必须找别的办法...
2021-12-09 20:35:23
753
2
原创 使用线上域名访问本地代码调试——whistle代理
本次场景h5开发时候，一些场景是依赖线上合法域名的，比如“h5跳小程序”，“授权（有别的更好解决方案）”。还有一些奇奇怪怪情况把，一下子想不起来。所以利用whiistle，把本该请求线上的html、js文件替换成我们本地的html、js文件，达到一种调试的效果如何使用whistle？安装启动详情请参考官方文档：whistle-安装启动概要版介绍也可以参看这篇文章：一文搞定前端代理骚操作！再也不怕线上bug啦！简要概括下流程:安装启动whistle安装证书浏览器/手机开启代理whi
2021-12-03 15:30:15
3217
原创 小程序性能优化（一）——多线程worker
基本介绍有时候小程序文档真的看的我脑壳疼多线程顾名思义，简单理解成正在执行我们业务代码的线程（主线程）之外，再开一个后台线程worker。一般用来执行一些耗时的任务和定时任务。整体思路1.全局开启worker2.主线程引入对应worker，发送消息给后台线程，并监听返回信息3.监听收到的信息，进行代码处理，发送信息给主线程。具体步骤app.json第一级属性中添加worker： “workers”: “workers”新建worker文件夹，在主线程中，即自己页面代码编写整体思路的
2021-10-24 16:14:13
1711
原创 微信小程序 接入 百度统计——事件统计（二）
背景微信小程序也有自带的数据分析，功能还挺多，而且加埋点不需要改代码。但是，数据是在微信那边你懂的，其次是一部分数据在百度统计，一部分在微信统计，就麻烦。具体步骤其实百度经验说的很全了，但是不够清楚。这里做补充：微信小程序的统计不同普通网页，普通网页是根据域名地址来做分类统计的，小程序是划分为app来分类的据上，你需要开通百度统计-移动统计服务。即还需要完善一些信息，才能用开通-新建应用-获取appkey-下载sdk文件添加步骤（百度经验）准备工作搞定后就是新建事件，添加代码，触发事件统计
2021-10-17 21:20:19
1056
原创 【小程序】自定义顶部导航栏（左上角返回等）
思路：明白一点，右上角的胶囊按钮是隐藏不了的，是固定在右上角的，也意味着自定义导航栏时候不用考虑它先在需要自定义导航栏的A页面，配置"navigationStyle":“custom”【全屏】，和window属性同级编写一个普通组件做为导航栏，高度X，甚至可以写一个搜索框在上面的。A页面引入该组件，写好位置（在最顶部），对准胶囊按钮的位置【最重要一步】计算高度X实现：【navbar.html】我这个左上角是一个icon，跳往主页<view class='nav' style='he
2021-10-14 23:35:06
4221
原创 理解+上手正则表达式【附官方常用正则表达式】
啥是正则正则可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。对应string.test()、string.replace()、string.match()方法组成：/ 表达式 /修饰符修饰符是用在整个正则的后面的 eg: /…/i 、/…/gi 相当于全局配置吧。不设置就是只找一次，区分大小匹配规则/模式我理解为查找规则，按某个规则来找比如：\d 只查找数字每个子表达式只能下面10选一特殊字符用法介绍1.”^”可以表示否（取反），
2021-09-23 21:01:38
145
原创 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
5555
原创 eslint的使用，和相关配套方案介绍总结
最重要的放前面以下都是配套使用的，最规范的情况就是一起使用，EditorConfig——VScode插件：，是用来定义规则的，比如设置缩进格数。然后覆盖setting里面的设置，达到大家代码统一的效果，然后可以用一个.editorconfig.js文件来配置规则preitter 是一个格式化代码的工具，需要–D安装，他会把你的代码按规则格式化的更漂亮，在根目录写.prettierrc.js配置规则，.prettierignore是配置怎么忽略的（比如：路径/.xx结尾文件的不格式化等等）eslint
2021-09-08 10:52:56
226
原创 Charles基本使用、请求响应拦截并修改返回
首先Charles是抓包工具，就不多介绍了。下面是破解版+证书安装教程不赘述。重点是前端怎么入门、怎么用工具poJie版安装证书 不安装的话，就监听不到，全是unknown一、 基本介绍Structure视角：按域名给你分类好接口，我比较常用这个Sequence视角：按时间顺序给你分类接口二、拦截接口（Breakpoints ）1.先在左侧找到你想拦截的接口，右键breakPonits(断点2.刷新页面重新请求该接口，就能拦截了3.这里会显示你刚拦截的接口4.可以修改参数、请求
2021-08-08 22:59:29
2336
原创 全局注册组件，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
751
原创 前端视觉优化（四）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
183
原创 XMLHttpRequest解读，组件封装必懂
XMLHttpRequest的发展历程XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。XMLHttpRequest Level 1主要存在以下缺点：受同源策略的限制，不能发送跨域请求；不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；在发送和获取数据的过程中，无法实时获取进度信息，只能判断
2021-07-13 10:20:21
533
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
3448
2
原创 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
1060
原创 从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
164
2
原创 H5/前端接入百度统计（企业级方案入门）——事件统计
科普：1.假如你是新的链接页面，进行的统计，那么需要新增网站（正式、测试），获取对应id(代码）代码是这么个样子。2. 查看图表总访客量和访客次数自带区分的3. 添加数据这里就是代码部分了，一般你的项目都是已经接入百度统计了的。这时候你需要添加埋点触发代码，就一句：参数一是写死的。window._hmt.push(['_trackEvent', '作品详情页', '点击','发送给朋友']);4.补充类型，操作，标签这些是产品整理好成一个表格给你，这个百度统计更新有一小时延迟
2021-05-10 18:57:23
1573
2
原创 H5———IOS安卓微信中显示样式不同、IOS点击无反应
样式问题两个系统在微信浏览器中显示不同，主要原因是两者默认样式标准不同，当你没有指定样式的时候，他就会以默认样式呈现。所以一般你在PC浏览器看到的会和手机上看到的不一样。例子：比如color你没指定、font-size没指定，button标签的边框有时候指定了还是会变的，所以用div会比较好。IOS点击无反应IOS那边是需要指定css那个小手样式才能点击的。（但不是全部都无法点击，只是无法点击的部分设置这个就可以正常点击了，我也不懂，希望评论区大佬指教，我当时是div绑定的点击事件）修改鼠标性状
2021-04-26 22:24:26
1446
原创 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
834
原创 H5——检测是否是“微信环境”、是否是“全面屏”（企业级代码）
企业级代码，直接用吧// qq浏览器检测 isQQBrowser: function() { // 是则返回版本号，否则返回false let match = window.navigator.userAgent.match( /MicroMessenger\/([0-9.]*)/ ); return match && match[1]; },...
2021-04-16 18:16:01
253
原创 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
1511
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
748
1
原创 H5——必备之使用swiper.js、常规且带点好看配置
这是H5项目用的最多的了，最近重新用上有些忘记，还是写出来方便查看基本的，也帮助其他人HTML部分这是pug的语法，不写标签名默认即div了，也很好看懂，主要是看层级关系。需要分页器，就要写上一个<div class=".swiper-pagination ">即可 上下页同理。 .swiper-container //最外层 .swiper-wrapper //主要显示层 .swiper-slide /
2021-03-28 22:42:44
657
原创 $attrs、inheritAttrs、$listeners；VUE隔代传值；组件封装原理
前言隔代传值一般不用vuex，大项目vuex咋能用来传一些琐碎的值。孙子获得爷爷的数据，用$attrs就行爷爷获取孙子的数据，用$listeners组件封装原理就是隔代传值，本来隔代传值不想写的，最近看到封装原理才觉得有点东西，会多用到一个inheritAttrs属性。它解决这么个场景：你想封装一个密码类型或明文类型的输入组件，要用到type="password"或者type=’'text"吧。 那就需要把type=“xxx” 继承过去指定位置。（举的例简单，当然还有其他实现方式）怎么去继承的问题。
2021-03-25 18:25:32
367
原创 函数节流、防抖函数，面试/优秀代码必备
函数节流、防抖函数是两个不同的出发点，但是方法论都是一样的。函数节流：节流，就是减少没必要的输出，就是防止一个函数没执行完，同个函数又开始执行了，性能的浪费。防抖函数：短时间执行多次函数，等他们都执行完了就会一起刷新展示出来，导致页面抖动。常用场景：重复点击查询列表、关键词搜索、屏幕大小改变监听函数等。eg:屏幕大小改变是个拖动过程，函数会执行超多次的，实际你只想要有意义的那么几次，怎么才算有意义呢，这个场景的话，一般是行为结束后0.几秒时候才是有意义的。那么就可以设置一个定时器。解决办法都是
2021-03-22 12:06:17
95
3
原创 （一分钟搞懂）纯前端导出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
800
原创 导出excel文件 ——（从接口获取、纯前端导出、解析excel）
前言操作文件流，第一个想到肯定是new FileReader()，这次涉及到一个Blob对象，它是原始数据的类似文件对象。FileReader对象操作的就是Blob对象。从接口获取文件，并下载这里有两种都能实现，左边是更正确的，axios请求的时候就要指定返回的类型是blob类型，是不需要再new一个对象。我们用FileReader处理res，得到一个base64字符串，赋给a标签来实现下载。（当然如果是几乎不带参数、速度很快的接口。可以直接window.open(url) ）axios({
2021-03-09 15:37:43
747
原创 New FileReader() 的使用——js基础
1：FileReader : 读取文件内容readAsText() 读取文本文件，(可以使用Txt打开的文件)readAsBinaryString(): 读取任意类型的文件，返回二进制字符串readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件abort: 中断读取2：FileReader 提供一个完整的事件模型，用来捕获读取文件的状态onabort:读取文件断片时触发onerror:读取文件错误时触发onload:
2021-03-08 22:31:44
27762
原创 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
852
原创 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
1401
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
772
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人