前端技巧
阿之阿佐
小小的一枚努力型前端
展开
-
webstorm,idea 右键菜单管理
File->Settings->Appearance & Behavior->Menus and ToolbarEditor Popup Menu 是修改在文件内部(即代码行处)打开的右键菜单Editor Tab Popup Menu 是修改在打开文件的tab页签上右击时修改的右键菜单Project View Popup Menu 是修改在项目目录里右击文件或文件夹的右键菜单...原创 2022-07-05 14:59:55 · 1138 阅读 · 0 评论 -
sentry sourcemap
1、对于版本号,Sentry.init和sentry-cli(或者@sentry/webpack-plugin)需要对应上。这里可以使用git tag解决;const release = childProcess .execSync('git describe --abbrev=0') .toString() .replace('\n', '');2、sourcemap对应不上问题。一般来说,js问题最后会有sourceMappingURL注释,值为sourcemap文件路径。原创 2022-03-15 16:58:38 · 2327 阅读 · 0 评论 -
husky(7.0.0+)+pretty-quick+eslint+commitlint
payarn add @commitlint/config-conventionalyarn add @commitlint/cliyarn add husky注意:最新版husky配置跟旧版本有差别~~~~~~~~~~~~~https://www.npmjs.com/package/huskyyarn preparenpx husky add .husky/pre-commit "yarn pretty" //每次提交前执行pretty命令git add .husky/pre-原创 2021-07-08 16:26:54 · 1336 阅读 · 0 评论 -
rem 适配 系统文字大小
用户调大了系统/浏览器字体大小,导致布局错乱解决办法: var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1|| u.indexOf('Adr') > -1 // 只有安卓用户反馈,缩小范围降低风险 if(isAndroid) { // 全屏幕宽度10rem var remFull =10 ...原创 2021-04-21 16:08:41 · 400 阅读 · 0 评论 -
前端JWT token维护方案(补充)
一、前言JWT的Token登录认证是目前比较流行的跨域认证解决方案。原理在于将认证信息保存在客户端,下次访问其他页面时,需要从客户端传递认证信息回服务器端具体实现如下:1.登录成功,后端生成带有access_token并返回前端,前端将access_token保存到本地(cookie或者localStorage,cookie遇跨域问题可以设置withCredentials)2.其他请求将使用access_token请求接口资源,后端access_token校验通过则调用接口成功;如果toke原创 2021-04-21 16:07:04 · 451 阅读 · 0 评论 -
微信,QQ放大缩小,html页面布局错乱问题
问题:微信、部分Android内置浏览器等非自己开发的App都支持字体大小的调整解决方法:禁止缩放,缩放无效果注意只针对微信、部分Android内置浏览器等非自己开发的App都支持字体大小的调整H5页面 系统的改变字体并不会影响h5页面的字体大小,和app的字体大小。只会对系统字体大小改变实现方式iOS:只需要加css在body -webkit-text-size-adjust: 100% !important; text-size-adj...原创 2021-04-21 16:05:03 · 619 阅读 · 0 评论 -
捕获阿里云异常日志遇到的问题
在m下,static的js抛出的异常捕获信息不完整,只有script error. https://www.alibabacloud.com/help/zh/doc-detail/88579.htm 跨域了 标签需要添加crossorigin="anonymous" 以及 确认cors是否匹配 SSR需要手动拼接替换模版script标签 SPA(vue-cli)需要配置crossorigin vue spa 前端路由跳转后捕获信息不完整.原创 2021-04-21 16:03:24 · 358 阅读 · 0 评论 -
保利威视插件的坑
官方文档:http://dev.polyv.net注:一些提到的问题可能保利威视已经修复。播放器接入:await loadScript('https://player.polyv.net/script/polyv4player.min.js')window.polyvObject(el).videoPlayer(config)key intro value el 播放器容器 vid 视频id,与封面图等数据关联 ...原创 2021-04-21 16:02:21 · 1204 阅读 · 0 评论 -
移动端吸底输入框踩坑总结
任务需要实现一个吸底输入框,具体需求为:- 未点击时有一个单行输入框固定在页面底部- 点击该输入框后,弹起键盘,该输入框隐藏,切换一个多行输入框- 多行输入框紧贴键盘顶部,有遮罩,有“取消”和“发布”两个功能键- 点击功能键后,切换到未点击时的初始状态行动难点&方案 切换输入框时被键盘遮挡,或页面可以滚动导致输入框被滚动到键盘后方 解决方案:设置body高度为100%,并设置overflow为hidden IOS端切换输入框无法正常聚焦唤起键盘 解决方案:IO原创 2021-04-21 15:59:35 · 361 阅读 · 0 评论 -
微信支付及支付宝支付问题总结
1. 微信端支付,时间戳需要修改成字符串,不能为整型,IOS端会出现不兼容情况,一直提示支付失败,强制转换成string类型既可。2. 微信端支付,建议不要直接使用后台的数据,要根据微信给的规范格式排序进行赋值调用,不然会造成支付调用不起来。3. 微信端支付,支付一次后或者支付失败亦或者支付取消,再次支付,提示code值不存在或者过期,原因是后台获取该值后就失效,解决方法是后台再次赋值。4. 微信支付,订单已生成,但支付时提示“支付失败”或者提示“当前页面的URL未注册”,解决...原创 2021-04-21 15:58:30 · 907 阅读 · 0 评论 -
阿里播放器在微信上使用的坑
一、被劫持的video在微信上同层播放问题现象:项目中要实现类似淘宝直播的功能,在直播视频上显示弹幕点赞动效等互动DOM,但是使用aliplayer加上playsinline=true,x5-type=h5属性后,安卓下video会被劫持到另一个图层置顶播放,导致在video上无法放置任何DOM结构,而ios在playsinline=true时正常同层播放。思路:尝试在阿里云web播放器文档中寻找答案无果(属性排列组合始终不能同时满足不同版本微信及不同设备的同层播放需求) 放弃了阿里.原创 2021-04-21 15:57:04 · 2000 阅读 · 0 评论 -
uni-app经验总结
1.uni-app下tabBar跳转不支持传参(api跳转成功回调方法执行时,新的页面未加载成功),解决方案使用vuex全局传参。2.样式下使用rpx,不使用upx--(rpx支持动态绑定)。3.新建页面页面,需要重新运行小程序程序。4.加载外部样式文件,在script中使用import,忌在style中使用@import(代码效果是一致的,但是修改代码,服务器动态编译代码的时候会出错)。5.小程序开发-建议使用统一的授权弹窗或是授权页面,微信授权使用的按钮回调事件,耦合在业务逻辑中开发,会耗时耗力原创 2021-04-21 15:51:30 · 386 阅读 · 0 评论 -
commitlint+husky,限制git提示信息
一、安装依赖:yarn add @commitlint/config-conventionalyarn add @commitlint/cliyarn add husky二、package.json增加"husky": { "hooks": { "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" }},三、根目录增加文件...原创 2019-09-05 16:41:57 · 2578 阅读 · 0 评论 -
input search
欲实现一个文字搜索的功能,要求输入时,键盘回车按钮提示显示为“搜索”。效果如下:开始~input type=text并不能达到这种效果,google了一下,html5 增加的type=search可以做到(但需要input type=search外面包上一层带action属性的form)。 <div class="search-input-wrap clearfix">...转载 2018-07-05 11:28:08 · 2107 阅读 · 0 评论 -
css 控制表格的表体滚动
#docReqDialog table tbody { display:block; height:200px; overflow-y:scroll; } #docReqDialog table thead, #docReqDialog tbody tr { display:table; width:100%; tab...原创 2019-01-15 23:35:59 · 357 阅读 · 0 评论 -
css 控制表格的表体滚动
#docReqDialog table tbody { display:block; height:200px; overflow-y:scroll; } #docReqDialog table thead, #docReqDialog tbody tr { display:table; width:100%; tab...原创 2018-07-20 23:17:51 · 412 阅读 · 0 评论 -
数组对象根据某个值相同合并分组
var arr = [ {"id":"1001","name":"值1","value":"111"}, {"id":"1001","name":"值1","value":"11111"}, {"id":"1002","name":"值2","value":"25462"}, {"id":"1002","name":"值2","value":原创 2017-12-20 16:34:44 · 9809 阅读 · 0 评论 -
测试某些代码的执行时间
console.time("Timer1");letitems=[];for(leti=0;i10000000;i++){items.push({"index":i})}console.timeEnd("Timer1")原创 2017-12-20 16:30:17 · 259 阅读 · 0 评论