supremeJacob-CSDN博客

原创 npm link 提示：error Error: EPERM: operation not permitted；The operation was rejected by your operating

报错信息解决方法从报错信息上看，提示的是权限不足无法操作，网上找到的都是删除npmrc文件，但是没有效果，通过摸索，两种方式可以解决：1、以管理员的身份运行vscode，然后在vscode的终端运行 npm link2、以管理员身份运行cmd(命令提示符)，进去到自己的模块里面运行 npm link大功告成...

2021-12-24 14:34:47 1203

原创 Fiddler 最新版本v5.0 HTTPS配置及IOS访问不到页面的解决方案

版本HTTPS配置step1step2（这里提示的安装，当时犹豫了下，因为文件名称叫DO_NOT_TRUST_FIDDLER_ROOT，还查了下，别人也下了，我才放心下的哈哈哈）step3同理，connections该勾的都勾上step4这个时候PC的可以进行抓包了，若访问不了，则在HTTPS旁的ACTION选项进行重置或信任手机配置（IOS）step1点击配置代理，这里要确认电脑以及手机连的是同个wifi，然后填入电脑的IP地址及端口号（端口号默认为8888，可以在opti

2021-12-04 18:46:04 10712

原创 CSS3动画进阶：tranform与keyframes 组合动画

场景原型链接：https://qiniu-static.moyuvedio.com/video/magicBox.MP4公司最近有个盲盒活动，要求h5链接上需要放个盲盒动画，实际可以使用gif或json代替，但为了想挑战下自己，又想减轻小姐姐的设计任务，这次活动的动画决定全用原生H5支持技术分析此次动画涉及：移动、渐变、漂浮、旋转，基本上都是属于一些常规的动画，并没有涉及到细节动画，所以用原生肯定是没有问题的，唯一的一个难点就在于不同动画间需要衔接，而且要衔接得很自然技术考虑：CSS3之 ani

2021-11-19 18:51:05 819

原创 web性能优化之gif资源优化

场景某天做的活动页，安卓用户吐槽页面加载缓慢，lighthouse工具马上走一波，得到的性能评分如下：看到下面Opportunity的那部分检测信息，发现原来是由于gif体积大的缘故拖慢了页面的加载速度，lighthouse给出的建议是将gif转换为webm（视频格式的文件，官方详细建议可以参考这里：gif官方优化建议）这里官方优化建议会推荐使用FFmpeg工具进行gif文件转换，但是文档有些复杂而且都是英文，在网上另外再搜了一个：gif在线转换工具参考代码需要注意：1、官方推荐是把视频文件放

2021-10-14 17:35:00 801

原创 android 5.1 App内打开vue H5页面为空白

android 5.1 App内打开vue H5页面为空白原因解决方法心得原因低版本的安卓系统浏览器不支持axios，所以打开空白解决方法1、安装 es6-promise 依赖cnpm i es6-promise2、在封装axios的文件中使用该依赖的polyfill()方法（原理应该就是将axios转成低版本可以识别的请求方法）require("es6-promise").polyfill();心得太难啦，一开始还以为是VUE优化没做到位，用谷歌浏览器lighthouse进行了测评，

2021-09-09 20:48:12 2353 1

原创 vue-skeleton-webpack-plugin 骨架屏插件使用

安装插件cnpm i vue-skeleton-webpack-pluginvue.config.js配置添加以下代码// 骨架屏const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");module.exports = { configureWebpack: (config) => { const plugins = []; // 骨架屏 plugins.push( new Skelet

2021-05-10 20:43:15 3077

原创 IOS、Android展示半屏H5页面半屏白色问题

问题背景：产品需要H5以半屏的形式显示在IOS、Android，经过测试发现在IOS端半屏为白色不为透明解决方案：前端这边这么做主要是让父类half高度隐式设为0，能展示客户端内容，加入类shadow主要是为了绑定点击空白处能关闭弹框的事件客户端这边需要加上这两行代码：[webView setBackgroundColor:[UIColorclearColor]];[webView setOpaque:NO]; 这行不设置默认是yes...

2021-04-21 21:08:06 831

原创谷歌浏览器LightHouse性能优化分析神器实践运用

1 基本操作介绍1.1 入口打开最新版本Google Chrome，F12一下弹出开发者页面，在顶部的导航栏选项选择Lighthouse选项（旧版本的浏览器是需要从应用商店下载Lighthouse插件的）1.2 首页基本信息从该页的英文字面意思可以知道，主要是生成一份性能检测报告（PS：奈何本人英语见识短，而且开发者模式并没有中文版的，遇到不懂的只能谷歌翻译下）2 生成报告分析这里以公司官网为例，Desktop模式下的报告2.1 总览2.2 四大指标介绍2.2.1 Performa

2021-04-11 15:29:36 3620

转载前端单页模式与多页模式的区别

前言前端部分的搭建，需要考虑使用哪种模式进行页面之间的跳转交互，而项目内的页面交互，不可避免的需要相互之间的数据共享。这就引出了本篇博客的目的，一起来谈谈：项目前端部分的构建方式以及数据共享方式。正文搭建前端部分所需注意的问题1）方便性结合开发的时间需求和方便性选择适合的前端模式2）性能在项目的体量比较大，或者某个页面需要加载更多文件时，会对加载页面所需时间产生影响3）浏览器缓存在项目发布后如果文件（css/js/image）有更新，需要用户浏览器清理缓存才会从服务器获取更新后的文件，

2021-04-05 16:38:50 1066

原创 Vue使用 html2canvas 进行当前页截屏

进行活动也开发时，客户端(IOS)那边反馈说截屏不能自定义长宽去截取，可能会截取到手机顶部栏、时间，后面经过我的深度研究(ge zhong bai du)，发现H5这边可以用插件并且按需截取图片整体思路step 1: 　安装 html2canvas 依赖cnpm i html2canvasstep 2:　在要使用的组件内引入import html2canvas from 'html2canvas'step 3:　组件内定义方法onSelect(option) { html2c

2021-03-28 20:52:41 368

原创移动端访问Vue项目页面无数据，但是PC访问有数据

结论：手机浏览器不支持localStorage，改用sessionStorage调试过程：晚上正准备关电脑早点溜街时，测试那边提了一个移动端访问H5页面无数据展示的bug，那一刻有些头疼，但是马上进入了调试状态。首先打开了Fiddler抓包工具，把抓到的url复制到PC浏览器进行访问，结果发现PC上访问这个页面是有数据的，那就有些蛋疼了呀，今晚就得要发新版本，没想到最后还出这个幺蛾子，突然之前成为了全村的希望，感觉有些受宠若惊。冷静分析了下，与浏览器抓到的东西进行了比对，发现移动端是没有进行接

2021-03-21 10:40:11 1574

supremeJacob的博客