学习总结
文章平均质量分 50
火辣辣-
这个作者很懒,什么都没留下…
展开
-
vue3+vite+jest配置 单元测试总结
vue3+vite+jest配置的说明以及单元测试总结原创 2022-08-22 15:31:29 · 3748 阅读 · 0 评论 -
uniapp发布微信小程序包太大
直接说总结 分包处理建议项目前期如果可以评估大小就开始做分包开发,以防到后期打包发布的时候发现超了,这时候做分包处理,其实改动蛮大的,会涉及到项目架构的调整,还有页面内导航的跳转链接修改参考链接 压缩vendor.js文件打包之后,这个文件里面会很大,里面是各种项目依赖文件,我有5MB ,就一个这个文件就直接超了小程序上限了。。。。。。分包之后还有3MB,所以需要压缩处理参考链接 图片不要放在本地,全部改为链接加载stattic里图片等静态资源可以.原创 2021-12-31 16:43:42 · 1374 阅读 · 2 评论 -
前端压缩打包 Vue+vite配合nginx实现gzip压缩
vue前端项目发布的时候,打包可配合nginx实现gzip格式的压缩,这样会减少网络带宽,nginx有两种压缩方式,一个是动态压缩,一个是静态压缩。1.在 nginx 中实时用 gzip 压缩文件输出,利用 nginx 中的模块 ngx_http_gzip_module, 消耗 CPU 来做压缩,nginx配置如下:官方配置文档说明http{ gzip on; gzip_min_length 1k; gzip_buffers 4 16k;原创 2021-12-02 14:01:21 · 1297 阅读 · 0 评论 -
vue3+vite+axios,处理跨域cookies问题
方法一:一般vite是可以配置跨域代理的,这个时候就不需要后端配合设置跨域了在.env.development 文件配置# vite 本地跨域代理VITE_PROXY=[["/basic-api","http://localhost:3000"]]# 接口地址VITE_GLOB_API_URL=/basic-api由于 /basic-api 匹配到了设置的 VITE_PROXY,所以上方实际是请求 http://localhost:3000/login,这样同时也解决了跨域问题。(3100为项原创 2021-09-06 16:00:00 · 5461 阅读 · 0 评论 -
前端对接海康威视监控
参考文章vue对接官方插件WebControl:https://blog.csdn.net/qq_41732963/article/details/115670910vue无海康官方插件对接:https://blog.csdn.net/qq_41732963/article/details/115655739海康监控流有多种协议实时串流协议(Real Time Streaming Protocol,RTSP)是一种网络应用协议,专为娱乐和通信系统的使用,以控制流媒体 服务器。该协议用于建立和控制终原创 2021-07-01 11:08:17 · 3680 阅读 · 0 评论 -
微信小程序实现长按拖动排序
在微信中经常会有拖动排序的功能,主要是基于catchtouchmove,计算top距离,图片我也上传了,下载修改一下图片路径就可以运行看到效果了,直接git下载就可007-微信小程序拖拽排序参考文章:微信小程序长按拖拽https://mp.weixin.qq.com/s/xgPKY6_7ze-1nbPjurom8Ahttps://blog.csdn.net/haicome/article/details/82664344?utm_medium=distribute.pc.原创 2021-07-01 11:05:57 · 1898 阅读 · 0 评论 -
移动端前端开发bug总结-持续更新
2019年9月11日 火辣辣%1 $ S1 关于微信jssdk分享这块的问题可以看上篇文章2 关于translate3D动画在iphone上闪屏的问题我是做一个transform:rotate(20deg)的旋转的时候,出现的这个问题,每次旋转屏幕会一闪动,我是通过position:fixed解决的webkit在绘制页面时会将结构分为各种层,当层足够大时就会变成很大的平铺层。这样一来webkit在每次页面结构发生变化时不需要都渲染整个页面而是渲染对应层了,这对渲染速度来说相当的重要。参考...原创 2021-06-02 10:06:09 · 179 阅读 · 0 评论 -
h5-ios和Android手机输入键盘总结-android软键盘弹出
2019年10月10日 火辣辣%1 $ S原因:ios当输入框聚焦弹出键盘的时候,页面高度没有变化,是分层的,软键盘是盖在网页上的Android的软键盘弹出的时候,软键盘是占据页面的高度的,这时候你的页面高度发生变化,页面上滑让给软键盘,你fixed底部的东西都会弹上去,页面高度为 页面+软键盘解决办法:iOS:这时候页面会出现滑动,想让页面不滑动,需要设置页面滑动到顶端 scrollTop(){ // ios页面滚动到最顶层 window.scrollTo(0,0);原创 2021-06-02 10:01:44 · 646 阅读 · 0 评论 -
css3-帧动画实现和优化
2019年10月10日 火辣辣%1 $ S实现帧动画好多种方式,如css3,gif动图,视频,js帧动画,很多做实验比较这几种方式的优劣,最终还是推荐了css3动画我就直接说实现方式把1 css3代码html:<div class="loadingMask"><div class="loadingMask-img"></div></div>css: .loadingMask{ position: absolute; width:原创 2021-06-01 18:07:22 · 171 阅读 · 0 评论 -
webpack打包时自动给js添加后缀名
2019年11月15日 火辣辣%1 $ S为了清楚浏览器缓存,可以在webpack打包的时候自动添加时间戳或者版本号,这样浏览器就可以加载新资源,清楚万恶的缓存~在vue中,利用vue-cli打包,会将vue.config.js中的configureWebpack配置合并到最终的webpack中,配置如下:// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;// vue.co原创 2021-06-01 18:05:18 · 1361 阅读 · 0 评论 -
svg的简介-svg转png的坑
2020年3月27日 火辣辣%1 $ S我是不是消失很久了。。。。大概3个月没有记录过博客了,很多次打开之后懒得记录又关闭了。。。懒惰是魔鬼,大家不要像我学习????????????最近项目一直遇到一个问题,就是和svg有关的,svg虽然出来很久了但是坑还是很多的,我把我遇到的问题记录一下和大家分享~一. svg简介在 2003 年一月,SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有:Sun公司(已被Oracle公司收购)、Adobe、苹果公司、IBM 以及柯达。与其他图像原创 2021-06-01 18:03:33 · 1437 阅读 · 0 评论 -
前端开发兼容问题汇总
2020年5月13日 火辣辣%1 $ S一、高度计算问题-100vh不同浏览器处理机制不同pc端的浏览器就很简单,因为浏览器的内容区域是不包含上方导航栏的,此时的html的100vh=100%;但是移动端浏览器会包含顶部地址栏和底部按钮栏,不同的浏览器厂家处理的逻辑是不同的,现在测试的为:Safari,安卓和iOS手机的chrome,华为浏览器的100vh都是全屏,包括上下手机浏览器自己的bar,也是页面会被bar覆盖,此时内容区域=100vh-导航栏-按钮栏,但是导航栏和按钮栏高度不一致也不易获取,原创 2021-06-01 18:00:07 · 511 阅读 · 0 评论 -
svg文字路径textPath的问题
2020年8月23日 火辣辣%1 $ S如图所示:中间的一个表图是svg代码,可以动态输入内容按照指定格式排列的svg文字路径输入框输入的文字,让按照指定路径自动居中排列也可以采用css3方式:采用rotate,transform等属性操作,建议插件:arctext.jssvg方式:svg是有文字路径textPath属性的,可以让文字按照指定路径自动排列,建议svg插件snap.svg官网:http://snapsvg.io/国内比较好的一个中文网址案例:https://www.zhangx原创 2021-06-01 17:59:06 · 1161 阅读 · 0 评论 -
移动端最小字体设置失效问题
2020年10月10日 火辣辣%1 $ S直接说总结:移动端最小字体为12px(仅chrome有此限制),建议最小使用12px;如果设计稿中有小于12px的字体,按实际字号写css样式,如果超出最小字体,可以用scale进行缩放展示;iphone类移动设备不受最小字号限制;其它设备可能会受8px限制;说明:对于不同的手机和浏览器,支持的最小字体大小是不一样的,因此指定了小于手机的最小字体就会失效无法执行。需要注意的是,在html5文本中可能会更加明显,但是在svg中,由于svg是可以无损无限缩放原创 2021-06-01 17:56:14 · 2075 阅读 · 0 评论 -
js输入框字符宽度判断-已知字符串宽度/未知字符串宽度
2020年12月23日 火辣辣%1 $ S一、需求说明一串字符长度很好判断,this.text.length就拿到了,但是对于一个固定宽度的文本框,要求不能超过宽度,那么就要计算这行文本的宽度。汉字是等宽字符,但是数字和英文则宽度不一致,这里的建议是,以数字为单位,比如1,那么一行最多输入20的汉子,长度则为20,字母则要按照最宽的字符w去计算,数字则以5为单位去计算。二、解决方案情形一:已知的字符串宽度,根据要求截取固定宽度的字符串,比如我已经知道了一串字符串了,去截取固定的宽度方法一:Str原创 2021-06-01 17:54:19 · 916 阅读 · 0 评论 -
js截屏以及three.js场景截屏
参考:火辣辣前端博客做这个功能都是半个月之前的事情了,没想到一直耽误却一直都没有写下总结,尴尬。。。。。来来来,说正事在手机端截屏完全不需要前端动什么脑子,但是在网页上截屏就很头疼了,我这里介绍两种情形,针对普遍和某一特殊功能需求1、js截屏插件html2canvas.js这个插件真的很好用,而且GitHub上的小星星也特别多,html2canvas官网 也给了详细的例子,最简单的就这...原创 2019-04-02 17:42:37 · 2206 阅读 · 0 评论 -
JavaScript前端实用小函数
参考:火辣辣前端博客1、判断是手机还是pc端function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod" ]; var flag = true; for(var ...原创 2019-04-02 17:47:58 · 148 阅读 · 0 评论 -
three.js性能优化
参考:火辣辣前端博客three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。在使用的时候,虽然three.js 做了优化,但是在使用不恰当的代码,也会产生性能损耗。帧率越低,给人感觉就越卡。这是我在开发中自己百度总结的,有不对的可以联系我啊1、预加载在加载页面之前可以给个加载页面的缓冲,因为场景模型没有加载的时候会黑屏,加载一瞬间可能会出现闪屏等性能问题,...原创 2019-04-02 17:56:01 · 3104 阅读 · 0 评论 -
vue router的总结--$router和$route
文章参考:http://huolalaweb.com/2019/06/19/vue-router/1 this.router和this.router和this.router和this.route的区别this.router是VueRouter的实例方法,当导航到不同url,可以使用this.router是VueRouter的实例方法,当导航到不同url,可以使用this.router是Vue...原创 2019-06-19 14:21:06 · 180 阅读 · 0 评论 -
vue安卓移动端,微信点击img被放大问题
参考文章:http://huolalaweb.com/2019/06/16/vue-android-img/在公众号里面嵌套的h5页面,我给img添加了点击事件,例如<img class="close-btn" src="./icons/close.png" @click="open">但是当我再安卓机微信上测试的时候,会先放大图片至全屏,然后再执行我的点击事件,iOS没有问...原创 2019-06-19 14:23:31 · 533 阅读 · 0 评论 -
微信jssdk自定义分享问题总结
参考文章:火辣辣前端博客1 分享功能前提条件必须保证通过config接口注入权限验证配置成功需要将必备的数据配置成功,并且需要将你用到的签名注入在jsApiList数据里参考文章wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。...原创 2019-08-29 20:32:17 · 1625 阅读 · 0 评论 -
three.js场景中看不到模型/看不到阴影
参考:火辣辣前端博客一、three.js渲染的场景中看不到模型的几种可能:1、未渲染你可能并未加载渲染函数,或者未将场景渲染出来,虽然这个可能性很小很小,但初期我真的犯过……function animate() { requestAnimationFrame(animate); renderer.render(scene, camera);}2、场景中未加灯光未加...原创 2019-04-02 17:36:33 · 4751 阅读 · 0 评论