个人代码
阿之阿佐
小小的一枚努力型前端
展开
-
mocha+typescript+es6 module
一、需求:测试用例使用ts,并且支持es6 module二、需要安装的包:@types/expect、@types/mocha、babel-register、expect、mocha、ts-node、npm-env三、script脚本添加:"test": "npm-env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha test/**/**.test.ts -r ts-node/register"四、tsconfig.testi原创 2021-11-17 17:58:35 · 344 阅读 · 0 评论 -
ubuntu docker搭建sentry服务
Docker 19.03.6+ Docker-Compose 1.28.0+ 4 CPU Cores 8 GB RAM 20 GB Free Disk Space一、安装docker,docker-compose教程:https://www.runoob.com/docker/ubuntu-docker-install.htmlcurl -sSL https://get.daocloud.io/docker | sh // 国内 daocloud 一键安装命令 docker -v..原创 2021-09-06 18:40:22 · 603 阅读 · 0 评论 -
css 按钮呼吸动画效果
<src src="get-btn,png" alt="立即领取" class="animated infinite pulse slow" />@-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transfor.原创 2021-08-10 14:35:34 · 1567 阅读 · 0 评论 -
nuxt 引入全局scss文件,mixins,function或变量等
https://www.npmjs.com/package/@nuxtjs/style-resourcesexport default { buildModules: [ '@nuxtjs/style-resources', ], styleResources: { // your settings here sass: [], scss: [], less: [], stylus: [], hoistUseStatements: true原创 2021-07-08 16:11:28 · 1247 阅读 · 0 评论 -
node 提取html中相同的内联style到class
const fs = require('fs');let txt = fs.readFileSync('./test.html','utf8');// console.log(txt);const reg=/style\s*?=\s*?(['"])[\s\S]*?\1/g;const regResult = txt.match(reg)const regSet = new Set(regResult)// console.log(regSet)let index = 0let result.原创 2021-07-05 19:36:40 · 256 阅读 · 0 评论 -
session通讯,前端活动页使用了临时域名,无法与主域名通讯问题
可以结合JWT方案,跳转到临时域名的时候,把生成的token添加到url上,然后前端读取其token,作为临时域名的token。注意跳转到临时域名之后,要马上去掉url上的token(使用window.history.replaceState),否则用户可能通过复制分享等操作泄漏出去...原创 2021-05-01 01:49:24 · 125 阅读 · 1 评论 -
h5短信验证码复制/自动填充等问题
1、复制验证码出现2个重复验证码以及ios不自动填充验证码(安卓不支持自动填充?)问题: 根据验证码长度限制输入框长度2、验证码输入区域由4个input[maxlength=1]组成,ios无法自动填充问题 可以在视窗外增加一个隐藏的1px大小的input[maxlength=4],监听其值变化,回填以上4个input框3、粘贴验证码,无法立刻填满4个input框问题: 思路:监听粘贴事件,将粘贴板上的数字赋值给以上一个隐藏的1px大小的input[maxl...原创 2021-05-01 01:44:50 · 3653 阅读 · 3 评论 -
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 · 380 阅读 · 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 · 448 阅读 · 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 · 597 阅读 · 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 · 344 阅读 · 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 · 1178 阅读 · 0 评论 -
移动端吸底输入框踩坑总结
任务需要实现一个吸底输入框,具体需求为:- 未点击时有一个单行输入框固定在页面底部- 点击该输入框后,弹起键盘,该输入框隐藏,切换一个多行输入框- 多行输入框紧贴键盘顶部,有遮罩,有“取消”和“发布”两个功能键- 点击功能键后,切换到未点击时的初始状态行动难点&方案 切换输入框时被键盘遮挡,或页面可以滚动导致输入框被滚动到键盘后方 解决方案:设置body高度为100%,并设置overflow为hidden IOS端切换输入框无法正常聚焦唤起键盘 解决方案:IO原创 2021-04-21 15:59:35 · 347 阅读 · 0 评论 -
腾讯云<trtc-room>小程序组件踩坑记
前言<trtc-room>是基于 <live-pusher> 和 <live-player> 实现的用于 TRTC 互通的自定义组件,集成该组件后的小程序可拥有实时音视频和直播互动等功能。最近盘古项目有需要小程序完成音视频咨询通话的需求,故先简单尝新了一下。然而这个组件刚面世不久,文档的内容比较欠缺、不太完善,就连疑难解答也是少得可怜,甚至基本上看不到有比较完整的官方解答...下面将简单介绍本人在此次开发过程中所踩过的坑,版本基于TRTC SDK 7.3.原创 2021-04-21 15:59:02 · 1543 阅读 · 2 评论 -
微信支付及支付宝支付问题总结
1. 微信端支付,时间戳需要修改成字符串,不能为整型,IOS端会出现不兼容情况,一直提示支付失败,强制转换成string类型既可。2. 微信端支付,建议不要直接使用后台的数据,要根据微信给的规范格式排序进行赋值调用,不然会造成支付调用不起来。3. 微信端支付,支付一次后或者支付失败亦或者支付取消,再次支付,提示code值不存在或者过期,原因是后台获取该值后就失效,解决方法是后台再次赋值。4. 微信支付,订单已生成,但支付时提示“支付失败”或者提示“当前页面的URL未注册”,解决...原创 2021-04-21 15:58:30 · 886 阅读 · 0 评论 -
阿里播放器在微信上使用的坑
一、被劫持的video在微信上同层播放问题现象:项目中要实现类似淘宝直播的功能,在直播视频上显示弹幕点赞动效等互动DOM,但是使用aliplayer加上playsinline=true,x5-type=h5属性后,安卓下video会被劫持到另一个图层置顶播放,导致在video上无法放置任何DOM结构,而ios在playsinline=true时正常同层播放。思路:尝试在阿里云web播放器文档中寻找答案无果(属性排列组合始终不能同时满足不同版本微信及不同设备的同层播放需求) 放弃了阿里.原创 2021-04-21 15:57:04 · 1929 阅读 · 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 · 375 阅读 · 0 评论 -
远程真机网站集合
vivo:https://vcl.vivo.com.cn/华为:https://deveco.huawei.com/console/testservice/cloud/compatibility腾讯:https://wetest.qq.com/阿里:https://www.aliyun.com/product/mqc原创 2020-06-28 11:26:42 · 445 阅读 · 0 评论 -
vue 骨架屏组件
注意:如果同学们不使用page-skeleton-webpack-plugin和vue-server-renderer,并且,你希望生成的骨架屏可以和页面相匹配,可以往下看!!!1、实现原理:给需要的dom标签设置特定类名,使用getBoundingClientRect来获取dom标签的大小和位置信息,并以此来生成一个占位符,最终生成一份“骨架屏”,当页面加载完毕,移除该“骨架屏”组件即可。因为这是在mounted周期获取元素信息,故如果元素信息不满意,需要先默认一些初始数据2、代码..原创 2020-06-20 01:18:42 · 1690 阅读 · 0 评论 -
前端JWT token维护方案
一、需求描述:前端登录后,后端返回acToken和acToken有效时间以及refreshToken,然后在request.headers带上acToken,当acToken过期时要用refreshToken去获取新的acToken,当refreshToken过期前端跳转到登录页,获取新的acToken时要做到用户无感知。二、分析当用户发起一个请求时,判断acToken是否已过期,若已过期则先调refreshToken接口,拿到新的acToken后再继续执行之前的请求。这个问题的难点在于:.原创 2020-06-17 23:56:40 · 1165 阅读 · 0 评论 -
vue 本地动态src 404的一种解决方法
利用计算属性<img :src="imgURL"/>computed: { imgURL(){ return this.arrowImgShow?require("images/expert/icon-down.png"):require("images/expert/icon-up.png"); }},原创 2018-06-11 18:32:19 · 1636 阅读 · 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 · 401 阅读 · 0 评论 -
es6实用方法
1、去重let newArr=Array.from(new Set([1,2,3,4,4]));2、对象合并 a、Object.assign(); let obj=Object.assign({},{name:1},{a:2}); b、扩展运算符 let obj={...obj1,...obj2};如果有相同属性,obj2会覆盖obj1的3.数组合并 ...原创 2018-05-26 18:21:01 · 339 阅读 · 0 评论 -
js数组按大小切片
function sliceArr(arr,size){ var d=0; var resultArr=[]; if(arr.length%size===0){ d=arr.length/size; }else{ d=Math.ceil(arr.length/size) } var last=0; for(var a=0;a<d;a++){ if(size*a+...原创 2018-05-15 10:25:01 · 2246 阅读 · 0 评论 -
判断当前页面是否修改内容,并在离开页面的时候给出提示
let _this=this;window.onbeforeunload = function() { let nowOrderVo=JSON.stringify(_this.orderVo); if (_this.copyOrderVo!==nowOrderVo) { try { return "当前修改尚未保存,是否离开?"; } catch (err) ...原创 2018-04-20 18:49:52 · 6098 阅读 · 0 评论 -
es6的一些笔记(数值的扩展)
Number.isFinite(), Number.isNaN()Number.isFinite()用来检查一个数值是否为有限的(finite)。Number.isFinite(15); // trueNumber.isFinite(0.8); // trueNumber.isFinite(NaN); // falseNumber.isFinite(Infinity); // falseNumbe...原创 2018-04-18 13:40:47 · 175 阅读 · 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 · 352 阅读 · 0 评论 -
vue 高亮搜索关键字
filterKeyLight(text){ if (!this.filterKey) return text; const result=text.replace(new RegExp(this.filterKey, 'g'), `<span class="primary_title">${this.filterKey}</span>`); return re...原创 2018-07-27 14:27:10 · 4576 阅读 · 0 评论 -
js打印,设置页面边距
@page{margin:0}原创 2018-07-28 12:29:49 · 17073 阅读 · 4 评论 -
jq 拖拽上传文件
<div id="drop_area"> <div>将文件拖到此处,或<span class="upload-txt">点击上传</span></div> </div> <input type="file" id="fileInp原创 2018-12-06 18:00:10 · 2174 阅读 · 1 评论 -
vue-cli3 使用postcss-px2rem和lib-flexible
1、cnpm install lib-flexible --save 2、cnpm install postcss-px2rem --save3、main.js 引入import "lib-flexible";4、vue.config.jsmodule.exports = { lintOnSave: false,//关闭eslint css: { ...原创 2018-12-05 18:58:08 · 1653 阅读 · 2 评论 -
Date.parse ie有兼容问题
将日期格式 'yyyy-mm-dd' 改成 'yyyy/mm/dd' 即可解决原创 2018-10-25 13:57:48 · 749 阅读 · 0 评论 -
js 根据url 下载图片
downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { let canvas = document.cr...原创 2018-10-19 10:17:11 · 17556 阅读 · 8 评论 -
https支持百度地图
在链接加入&s=1,http改为https原创 2018-09-19 14:05:21 · 1512 阅读 · 0 评论 -
设置cookie
_setCookie(c_name, value, expiredays = "2018-09-22") { let exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays) document.cookie = c_name + "=" + escape(value) + ((expiredays =...原创 2018-09-12 19:49:48 · 219 阅读 · 0 评论 -
collapse.js,折叠效果
const elTransition = "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";const Transition = { "before-enter"(el) { el.style.transition = elTransition; ...转载 2018-09-09 15:54:33 · 3041 阅读 · 0 评论 -
js实现连缀
function I(){ this.a=function(){ console.log("a"); return this; }; this.b=function () { console.log("b"); return this; }}new I().a().b();返回this原创 2018-07-28 12:38:55 · 293 阅读 · 0 评论 -
es6的一些笔记(数组的扩展)
Array.from()Array.from将它转为真正的数组。let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};// ES5的写法var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']// ES6的写法let arr2 = Array.from(ar...原创 2018-04-18 13:39:48 · 198 阅读 · 0 评论 -
es6的一些笔记(数组去重,new Set())
new Set(),用来去重数组。let arr = [1, 2, 2, 3];let set = new Set(arr);let newArr = Array.from(set);console.log(newArr); // [1, 2, 3]Set类似于数组,区别在于它所有的成员都是唯一的,不能有重复的值...原创 2018-04-18 13:38:15 · 51454 阅读 · 2 评论 -
vue+element-ui,树形表格,可以做权限管理模块,可折叠,全选,部分全选
html部分:class="role-table col-xs-offset-2 col-md-offset-1 col-sm-offset-2"> class="header"> class="left">菜单列表 class="right">功能权限 class="vertical-line"> v-for="(item原创 2017-07-13 18:04:25 · 41622 阅读 · 13 评论