![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
H5移动端
文章平均质量分 50
基于vue的俗称套壳APP
毛发苍苍
尽量只更新一些比较花调研时间的东西。具体技术就算啦
展开
-
高性能动画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 评论 -
阿里云ARMS渲染速度指标
前言大家都知道,首屏性能对点击率、转换率等有很大影响,以下是我们统计的淘宝旺铺点击率和首屏时间的关系,随着首屏时间从1秒增大到8秒,点击率逐步从85%降低到了82%【来自阿里云ARMS前端监控团队】指标和标准指标说明ARMS提供了两个图来反应性能指标:页面加载时间详情图、页面加载瀑布图具体指标说明:【第一步】首屏渲染(白屏时间):从请求开始到浏览器开始解析第一批HTML文档字节的时间差。【第二步】首次可交互时间:浏览器完成所有HTML解析并且完成DOM构建,此时浏览器开始加载资源。【第三原创 2022-04-11 22:18:30 · 586 阅读 · 0 评论 -
理解+上手正则表达式【附官方常用正则表达式】
啥是正则正则可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。对应string.test()、string.replace()、string.match()方法组成:/ 表达式 /修饰符修饰符是用在整个正则的后面的 eg: /…/i 、/…/gi 相当于全局配置吧。不设置就是只找一次,区分大小匹配规则/模式我理解为查找规则,按某个规则来找比如:\d 只查找数字每个子表达式只能下面10选一特殊字符用法介绍1.”^”可以表示否(取反),原创 2021-09-23 21:01:38 · 161 阅读 · 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 评论 -
前端视觉优化(四)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 评论 -
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 评论 -
前端视觉优化(三)css动画过渡,transition过渡属性
视频主总结的太好了。直接截图了四要素介绍过渡属性啥是过渡属性,color:xxxx,font-size:xxx,transform:xxxxcolor,font-size,transform就是你要过渡的属性,你指定他们,过渡时候他们就遵循你的规则过渡时间可以设置秒s,或者毫秒ms过渡函数可能会有兼容问题,注意下浏览器前缀的使用ease:默认,慢-快-慢的过渡效果liner:匀速ease-in:加速ease-out:减速ease-in-out:慢-加速-减速-慢。和ease差不原创 2020-12-23 19:12:11 · 303 阅读 · 0 评论 -
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 评论 -
css——给多张图片设置一个背景图:上下固定尺寸+中间拉伸,里面放内容
UI图:头尾是特殊的边框。中间也有边框无限拉升,里面要放图片原创 2021-04-28 16:14:59 · 2450 阅读 · 0 评论 -
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 评论 -
函数节流、防抖函数,面试/优秀代码必备
函数节流、防抖函数是两个不同的出发点,但是方法论都是一样的。函数节流:节流,就是减少没必要的输出,就是防止一个函数没执行完,同个函数又开始执行了,性能的浪费。防抖函数:短时间执行多次函数,等他们都执行完了就会一起刷新展示出来,导致页面抖动。常用场景:重复点击查询列表、关键词搜索、屏幕大小改变监听函数等。eg:屏幕大小改变是个拖动过程,函数会执行超多次的,实际你只想要有意义的那么几次,怎么才算有意义呢,这个场景的话,一般是行为结束后0.几秒时候才是有意义的。那么就可以设置一个定时器。解决办法都是原创 2021-03-22 12:06:17 · 99 阅读 · 3 评论 -
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视觉优化2.1(JQanimate动画),点赞弹起消失
先看看万恶的产品原型图先看animate的参数:$(selector).animate(styles,speed,easing,callback)styles:必需参数,需要产生动画的css样式(使用驼峰式命名,即:marginLeft)speed: 规定动画的速度easing:动画速度(swing先慢后快,linear匀速)callback:函数执行完之后的回调函数实现思路:1.写两个点赞的html和样式,一个隐藏2.点击时,一个取消隐藏,另一个设置absolute定位,top起来并原创 2021-02-07 22:20:04 · 217 阅读 · 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 评论 -
记一次前端《性能优化》,首屏优化
首先要知道,性能优化无非两点:更快的请求、更轻的体态更快的请求DNS缓存了解一下,内容不多,一搜就有cdn,现在各种云的都能提供这个,看谁做的更好了(命中率,回源率),核心原理是负载均衡:你请求后给你找到一个最佳的服务器节点。其实大概知道就好了,实际上你都碰不到这些代码,都是七牛、腾讯阿里云都给你做好的了,你花钱部署上去,直接请求地址就好了。浏览器缓存,两点:强缓存,协商缓存。简单说就是前者直接使用首次请求的内容。后者每次会问后端内容有变吗?再做决定。资源合并、域名分片。前者代表就是雪碧图,小小原创 2020-12-14 18:33:49 · 260 阅读 · 2 评论 -
各种刷新的区别,和缓存304/200
先说下缓存tip:想了解缓存更多,可以去看强缓存、协商缓存为切入口的内容在使用强缓存时候,会有个过期时间的,这段时间内请求都是用的缓存文件文件过期后请求,请求头会多一个If-Modified-Since Mon, 04 Jul 2011 10:12:40 GMT这时间是服务器端之前就告诉你的,是该文件最后的修改时间。现在后端收到该请求会看看文件最新修改时间。如果时间一致,说明文件没改过,返回304,内容为空。如果有改动,返回200,和新内容。浏览器会更新缓存.缓存和刷新、强制刷新、原创 2020-12-14 17:09:29 · 282 阅读 · 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 评论 -
vue-cli3和4 引入scss,scss常用语法
搜了好多。基本没用的。记录下一个有用的装载的用这个scss,主要还是用他的嵌套语法。还有下面这几个语法。就没什么特别的了。规范层面的意义更多吧。补充~所谓的嵌套写法,对应html的嵌套 .s2 { font-size: 20px; .s3 { color:red } }...原创 2020-12-01 19:15:56 · 265 阅读 · 0 评论 -
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 评论 -
src图片使用base64格式,免请求/上传使用图片
效果图代码(红色区域就是超长的base64编码)这种方法仅仅限于 图片超小情况使用图片转base64地址原创 2020-11-11 16:49:39 · 518 阅读 · 0 评论 -
职场新人之git必懂
一、初始化本地仓库在放项目的文件夹,右键git bash here,敲命令:git init二、克隆代码下来git clone 项目链接三、修改你推送代码时候的名称(让组长拉你进线上仓库成员先)1.查看用户名和地址git config user.namegit config user.email2.修改用户名和地址git config --global user.name 'your new name'git config --global user.email 'your new原创 2020-07-23 18:16:19 · 166 阅读 · 0 评论 -
npm install xx -g -D -S 大白话科普
三者都会安装到项目文件夹下的node_modules文件夹下npm install xx不会配置到package.json,你需要自己require,之后运行npm install命令时,不会自动安装xxnpm install xx -D即写入devDependencies对象(里面的插件只用于开发环境,不用于生产环境)npm install xx -S即写入dependencies对象(生产环境)devDependencies对象、dependencies对象可以在package.jso原创 2020-07-15 21:54:31 · 412 阅读 · 0 评论 -
图片自适应等比宽高,防加载过程闪烁
有个痛点:轮播图加载过程中,他的高度是慢慢增加的。慢的时候会看到其他元素错位,快的时候会有闪烁感觉。怎么办?首先写死高度是不实际的,肯定要宽度拉满的,那么高度是要根据图片比例来设置。我们可以用padding-bottom来解决。<a> <b> <img src=""> </b></a>我们给b元素设置下面的样式,66.66%=高/宽。可以理解为初始高度为0,高度慢慢填满直至达到比例。width:100%;height:原创 2020-07-08 14:38:28 · 344 阅读 · 0 评论 -
地址栏 / js 获取鼠标位置,实现图片域
先上代码和效果图<a href="#"> <img src="~assets/img/index/map2.png" usemap="#map" ismap="ismap" @touchstart="move" class="photo1" @touchmove="move2" ></a> 点击图片后,地址栏出现坐标img标签使用usemap ,ismap属性用<a 标签> 套住标签想要通过js获取数值原创 2020-07-03 15:37:42 · 227 阅读 · 0 评论 -
web前端与移动端区别
持续更新~获取鼠标位置到标签边距离pc端:event.clientX移动端:event.changedTouches[0].clientX鼠标/触摸交互pc端:mousemove,这是鼠标事件移动端:touchmove,这是触摸事件浏览器的滚动条到顶部距离pc端:document.documentElement.scrollTop移动端:document.body.scrollToppc端:可以用两种模式移动端:不支持history模式,否则路由跳转会有问题vue原创 2020-06-30 23:23:35 · 557 阅读 · 1 评论