*注:本文章是在工作过程中所接触的知识点的整理,涉及的东西比价杂乱,如有错误之处,欢迎纠错与指导

一:iframe session丢失

image.png

二:vue超过数字部分用省略号显示

1,使用vue中的过滤器filter
显示效果
123456···123456
HTML代码

<span>{{hashName | ellipsis}}</span>

JS代码

filters: {
    ellipsis (value) {
        let len=value.length;
        if (!value) return ''
        if (value.length > 12) {
            return value.substring(0,6) + '···' +value.substring(len-6,len)
        }
        return value
    }
}

2,tool.js里面写工具
显示效果
···123456123456
js代码

// 名字超过12位的显示后12位,前面是省略号
const ellipsis = (value) => {
   if(!value) return ''
   let len = value.length;
   if(value.length > 12) {
     return '...'+value.substring(len-12)
   }
   return value
}
export {
   ellipsis
}

三:Vue Router的params传参的注意点

使用vue,需求要求路由跳转然后路由上面不显示具体的参数,所有我就用params和path一起用,结果页面跳转过去之后,this.$route.params获取不到。
需要注意的点:
1,如果使用了path,则params会被忽略
2,params一般和name搭配使用,而不是和Path一起使用
3,当使用params传递值的时候,没有使用/test/:id在路由上面显示,用户刷新的时候,params的值会丢失。所有需要对这个值作缓存保存处理

四:布尔值作为(缓存+路由参数)传值的问题

当把布尔值存入缓存或者路由的参数(在地址栏传值)的时候,再次获取的时候,都会变成字符串,使用的时候,需要进行处理,将字符串转换成布尔值
解决办法是1、判断这个字符串==='true'就为布尔值true否则为布尔值false  2、直接用JSON.parse()
2,当使用判断这个字符串==='true'就为布尔值true否则为布尔值false 这种方法的时候,是相当不方便的,每一个值都需要进行一次判断,代码很不智能而且很冗余。
JS中有六种情况是false
分别是: 0, ”, null, undefined, NaN 和 false, 其他(包括{}, [], Infinity)为true
我想到数字0的布尔值是false,所以利用0和1来存储,这样操作取出的数据也比较的方便 。我们存进去数字0和1,取出来的时候是‘0’和‘1’ ,把它们转换成数值型, Number() 强制类型转换,是可以的

this.home = Number(this.$store.state.home)
this.inventory = Number(this.$store.state.inventory)

五:HTTP协议网络请求状态码

HTTP协议网络请求状态码

六:js区别不同的浏览器和设备

1,判断当前页面是不是在微信浏览器中打开
方法一:

var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if (isWeixin) {
    return true;
}else{
    return false;
}

方法二:

function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

判断浏览器。包括判断IE浏览器,Opera浏览器,苹果浏览器,谷歌浏览器,火狐浏览器等。

var browser = {
    versions: function () {
        var u = navigator.userAgent, // 返回由客户机发送服务器的user-agent 头部的值
        app = navigator.appVersion;// 返回浏览器的平台和版本信息
        return {//移动终端浏览器版本信息
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
            phoneApp: u.indexOf('VPiao_App') != -1, //判断是否是app使用
            weixin: u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'//微信浏览器内核
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase() //返回当前的浏览器语言
}

使用:

//document.writeln("语言版本: "+browser.language);
//document.writeln(" 是否为移动终端: "+browser.versions.mobile);

通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开

if (browser.versions.mobile) { //判断是否是移动设备打开。browser代码在下面
        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
                //在微信中打开
        }
        if (ua.match(/WeiBo/i) == "weibo") {
                //在新浪微博客户端打开
        }
        if (ua.match(/QQ/i) == "qq") {
                //在QQ空间打开
        }
} else {
        //否则就是PC浏览器打开
}

七:git相关的一点点操作

1,删除本地分支+删除远程分支

git branch // 查看本地分支列表
git branch -d 分支名称 // 删除本地分支
git branch -a // 查看远程分支列表
git push origin --delete 远程分支名称 //删除远程分支

2,什么时候可能会用到git tag
在开发的一些关键时期,使用标签来记录这些关键时刻, 例如发布版本, 有重大修改, 升级的时候, 会使用标签记录这些时刻, 来永久标记项目中的关键历史时刻。tag会记录版本的commit号,方便后期回溯
打标签

git tag // 列出已有的tag加上-l命令可以使用通配符来过滤tag。例如:git tag -l "v3.3.*"
git tag tagName // git tag v1.0 创建一个名为v1.0的tag
git tag -a tagName -m "my tag" //加上`-a`参数来创建一个带备注的tag,备注信息由`-m`指定。如果你未传入`-m`则创建过程系统会自动为你打开编辑器让你填写备注信息
git tag -a 0.1.3 -m “Release version 0.1.3″ //git tag是命令。-a 0.1.3是增加 名为0.1.3的标签。-m 后面跟着的是标签的注释
git show tagName // 查看tag的详细信息,包括commit等

相关操作

// 提交
git add .
git commit -m “fixed some bugs”
git tag -a 0.1.3 -m “Release version 0.1.3″
// 分享提交标签到远程服务器上
git push origin master
git push origin --tags
git tag --list  // 查看已有tag列表
git checkout [tag/branch/commit]  // 切换到指定tag/branch/commit都是此命令
git tag -d 0.1.3 //删除标签
git push origin :refs/tags/0.1.3 // 删除远端服务器的标签

3,拉取远程分支到本地

git fetch origin dev(dev为远程仓库的分支名) //把远程分支拉到本地。
git checkout -b dev(本地分支名称) origin/dev(远程分支名称) //在本地创建分支dev并切换到该分支 

4,代码回滚

git log -3 //查看前三次提交日志记录 \-3以此类推可以获得任意次的提交日志记录
git reset --hard HEAD^  //回退到上个版本  
git reset --hard HEAD~3 //回退到前3次提交之前,以此类推,回退到n次提交之前
`回退步骤(下面命令)`
git reset --hard commit_id //退到/进到 指定commit的sha码
git reset --hard e377f60e28c8b84158 //e377f60e28c8b84158是commit_id 回退到指定版本,不保留原更改代码
git revert e377f60e28c8b84158 // 回退到指定版本,保留原更改代码,且生成新的提交
git push -f origin master // 强制提交(这个时候已经将代码回退了,你现在的分支状态就处于你上一步指向的版本)

如果你只是误提了代码,想保留代码改动的话,那就在回退步骤的时候使用revert 命令,而不是reset,两者区别如下:
revert是放弃指定提交的修改,但是会生成一次新的提交,需要填写提交注释,以前的历史记录都在;
reset是指将HEAD指针指到指定提交,历史记录中不会出现放弃的提交记录。

八:vue弹出框加上相应的遮罩层组件

九:vue loading组件

十:移动端H5实现图片上传

十一:h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法

十二:H5页面长按复制功能实现

默认情况下禁止了长按复制功能,要此功能需要增加css声明
-webkit-user-select: auto;
让整个页面可以长按复制:
*{-webkit-user-select: auto;}

user-select: none|auto|text|contain|all;
属性值:
none : 元素和子元素的文本将无法被选中
text : 文本可以被选中
auto : 文本将根据浏览器的默认属性进行选择
all : 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素
contain、element : 可以选择文本,但选择范围受元素边界的约束,也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer
兼容性:
firefox浏览器
-moz-user-select: none|text|all;
safari、chrome浏览器
-webkit-user-select: none|text|all; Safari中不支持该属性值,只能使用none或者text,或者是在html的标签属性中使用
ie浏览器
-ms-user-select: none|text|element;


小个头小缘
4 声望1 粉丝

一个苦逼的程序媛,痛并快乐着~