学习笔记

爱被打了一巴掌 2021-07-25 23:46 1049阅读 0赞

## 1、js如何将136分钟转化为几小时，几分钟 ##

return (Math.floor(minutes/60) + "小时" + (minutes%60) + "分" );

## 2、js如何根据index值删除数组中的指定对象 ##

deleteLabel(index){ 
    	//labelBox 为数组
    	this.labelBox.splice(index,1);//从数组中移除要删除的标签
    	  },

## 3、JSON字符串转换为JSON对象 ##

var str = '{ "name": "cxh", "sex": "man" }';
    var obj = str.parseJSON(); //由JSON字符串转换为JSON对象 或
    var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
    
    obj.toJSONString(); //将JSON对象转化为JSON字符 或
    JSON.stringify(obj); //将JSON对象转化为JSON字符
    
    //去掉数组最外层的引号
    eval(res.data)/

## 4、forEach添加循环（修改） ##

## 5、消息提示 ##

//这个是个人封装 不适用所有人
      this.$message.info('修改失败了,稍候再试试吧');

## 6、延时器 ##

setTimeout(() => { 
              console.log（'延期一秒执行'）；
            }, 1000);

## 7、如何控制uniapp底部导航栏的显示隐藏 ##

uni.hideTabBar(); //隐藏tab
     uni.showTabBar(); //显示tab

## 8、Promise.all ##

Promise.all 可以将多个 Promise 实例包装成一个新的 Promise 实例。所有的 Promise 对象都成功时返回的是一个结果数组，一旦有任何一个 Promise 对象失败则立即返回失败。

let ps1 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve('success-1')
        }, 6000)
    })
    
    let ps2 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve('success-2')
        }, 3000)
    })
    
    let pf1 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            reject('fail-1')
        }, 4000)
    })
    
    let pf2 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            reject('fail-2')
        }, 2000)
    })
    
    Promise.all([ps1, ps2]).then(arr => { 
        console.log(arr) // 执行成功，输出：['success-1', 'success-2']
    }).catch(error => { 
        console.log(error)
    })
    
    Promise.all([ps1, pf1, ps2, pf2]).then(arr => { 
        console.log(arr)
    }).catch(error => { 
        console.log(error) // 执行失败，输出：fail-2
    })

Promise.all 可用于类似一个页面有多个请求，需要 loading 等待多个请求都执行完再渲染数据，有一个请求异常时，跳转错误页面。  
**注意：Promise.all 的正确返回结果数组 arr 与请求的 Promise 数组顺序一致，与异步请求响应返回的顺序无关。**

## 9、Promise.race ##

Promise.race 是赛跑的意思，Promise.race 中的 Promise 数组中谁先返回成功或失败的结果，整体就返回那个结果。

let ps1 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve('success-1')
        }, 6000)
    })
    
    let ps2 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve('success-2')
        }, 3000)
    })
    
    let pf1 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            reject('fail-1')
        }, 4000)
    })
    
    let pf2 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            reject('fail-2')
        }, 2000)
    })
    
    Promise.race([ps1, ps2]).then(result => { 
        console.log(result) // 执行成功，输出：success-2
    }).catch(error => { 
        console.log(error)
    })
    
    Promise.race([ps1, ps2, pf1, pf2]).then(result => { 
        console.log(result)
    }).catch(error => { 
        console.log(error) // 执行失败，输出：fail-2
    })

Promise.race 中的各 Promise 的执行顺序是无序的。可用于对某些不支持设置 timeout 的请求模拟请求超时和中止请求。

## 10、Promise.allSettled ##

Promise.allSettled 中的 Promise 数组全部执行完才会返回一个对象数组，其中包含了每个 Promise 的执行结果，且都有一个 status 字段，fulfilled 表示成功，rejected 表示失败。

let ps1 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve('success-1')
        }, 6000)
    })
    
    let ps2 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve('success-2')
        }, 3000)
    })
    
    let pf1 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            reject('fail-1')
        }, 4000)
    })
    
    let pf2 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            reject('fail-2')
        }, 2000)
    })
    
    Promise.allSettled([ps1, ps2, pf1, pf2]).then(arr => { 
        console.log(arr) // 输出：[{status: "fulfilled", value: "success-1"}, {status: "fulfilled", value: "success-2"}, {status: "rejected", reason: "fail-1"}, {status: "rejected", reason: "fail-2"}]
    })

Promise.allSettled 返回结果数组 arr 与请求的 Promise 数组顺序一致，与异步请求响应返回的顺序无关。Promise.allSettled 可通过返回的数组中的 status 字段，用于判断成功和失败的数量，如上传图片成功几张、失败几张。  
**注意：如果提示“Promise.allSettled is not a function”，请安装“promise.allsettled”。**

## 11、判断手机号码是否正确 ##

panphone(){ 
    			if(this.phone!=''){ 
    				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
    				
    				        if (strTemp.test(this.phone)) { 
    				
    				        }else{ 
    								this.$message.info('请输入正确的手机号');
    								this.phone='';
    						}
    			}
    		},

## 12、判断邮箱是否正确 ##

panemail(){ 
    			if(this.email!=''){ 
    				Var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
    				   　　var obj = this.email; //要验证的对象
    				  　　 if(!reg.test(obj)){  //正则验证不通过，格式不对
    				  　　　　this.$message.info('邮箱格式不正确');
    				  　　　　this.email='';
    				  　　}	
    				
    			}
    			
    		}

## 13、微信小程序分享（button）按钮页面布局问题 ##

html

css 此处用的 scss

.share-img-box { 
              width: 38upx;
              height: 38upx;
              position: relative; .openChat{ 
                top: 0;
                left: 0;
              	position: absolute;
              	width: 100%;
              	height: 100%;
              	opacity: 0;
              	z-index: 999;
              }
            }

这样布局可以自定义button按钮样式，解决button按钮有边框的问题。

## 14、uniapp 在微信小程序当中跳转微信小程序 ##

go(){ 
     		uni.navigateToMiniProgram({ 
                    appId:'wx30821321432afd24',//这个是要跳转的小程序appid 值为示例
                    path: 'page/index/index?code='+this.code,//可以传参 如果多个参如下
                    path: 'page/index/index?code='+this.code+'&code2='+this.code2+'&code3='+this.code3,//传多个参数示例 & 是拼接的不是参数名称，不可以省略
                    success: res => { 
                      // 打开成功
                      console.log("打开成功", res);
                    },
                    fail: err => { 
                      console.log(err);
                    }
                  });
    }

## 15、uniapp 微信小程序分享 给好友 ##

首先需要有一个分享button  
html

//和onlond 在同一级
     onShareAppMessage(res) { 
          return { 
            title: '欢迎浏览',
            path: '/pagesA/home/article-details?type='+ this.type + '&id='+this.id+ '&source='+ this.source,
            imageUrl: this.particulars.coverUrl
          }
        },

## 16、uniapp 微信小程序分享到朋友圈 ##

需要点击右上角的三个点进行微信朋友圈分享  
js

//和onlond 在同一级
      onShareTimeline() { 
          return { 
            title: '欢迎浏览',
            path: '/pagesA/home/article-details?type='+ this.type + '&id='+this.id+ '&source='+ this.source,
            imageUrl: this.particulars.coverUrl
          }
        },

## 17、window10 如何切换桌面 ##

1、创建新的虚拟桌面：“Win"+"Ctrl"+"D"
    2、关闭当前虚拟桌面：“Win"+"Ctrl"+"F4"
    3、切换虚拟桌面：“Win"+"Ctrl"+"左/右" 切换界面组合键  左右为上下左右键的 左右

## 18、三元运算符多条件判断 ##

:note2="item.status == 0 ? '备料中' : item.status == 1 ? '部分入库' : '全部入库'"

## 19、鼠标样式 ##

cursor:pointer;//变小手
    cursor:auto;//标准光标
    cursor:default;//标准箭头
    cursor:hand;//手形光标
    cursor:wait ;//等待光标
    cursor:text;//I形光标
    cursor:vertical-text;//水平I形光标
    cursor:no-drop;//不可拖动光标
    cursor:not-allowed;//无效光标
    cursor:help;//帮助光标
    cursor:all-scroll;//三角方向标
    cursor:move;//移动标
    cursor:crosshair;//十字标

## 20、css 常用样式 ##

//只让背景颜色透明
    background-color:rgba(245,187,0,0.1);
    //弹性和垂直布局
    flex-direction:column;
    align-items:center; //让最后一个数组边框不显示 .xxx:nth-last-child(1){ 
    .xian{ 
    border:none;
    margin:0 auto;
    }
    }
    //a标签去掉下划线 a{ 
    text-decoration:none;
    }
    //首行缩进两个字符
    text-indent:2em;
    
    //单行文本超出显示点点点
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    //多行文本超出显示点点点
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    
    //vue超出隐藏方法
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all; //input框number类型下右侧加减号去除 input::-webkit-inner-spin-button { 
    	-webkit-appearance: none !important;
    	margin: 0;
    }

## 21、element ui 配置 ##

//输入框icon 在前面
     prefix-icon="el-icon-search"
     //输入框icon 在后面
     suffix-icon="el-icon-date"
     //如何使用穿透修改样式
     ::v-deep .el-progress-bar__outer{ 
      background-color: #81C042 !important;
    }

## 22、打印文件强制分页 ##

//强制分页
    <div style="page-break-after: always;"></div>
    //关联性较强的内容必须在一页展示
     <div style="page-break-inside: avoid;">C</div>

## 23、Echarts 文档 ##

//曲线折线
     series: [{ 
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              smooth: true
            }]

## 24、循环对象添加key值 ##

xun() { 
          let _this = this;
          var obj = { };
          this.city.forEach(function(v, index) { 
            obj[v.city] = v;
          });
          console.log(JSON.stringify(obj));
        }

## 25、常用数字方法 ##

//数字绝对值
    Math.abs(-1)//1

## 26、split()同时筛选多条件 ##

his.labelBox = str.split(/[,，]/); //同时筛选 中文, 和英文,

## 27、uniapp退出应用 ##

//退出应用
          refundApplication(){ 
            if (plus.os.name.toLowerCase() === 'android') { 
            		 plus.runtime.quit();
            	 }
            	 else{ 
            		 const threadClass = plus.ios.importClass("NSThread");
            		 const mainThread = plus.ios.invoke(threadClass, "mainThread");
            		 plus.ios.invoke(mainThread, "exit");
            	 }
          },

## 27、uniapp隐藏显示tabBar ##

uni.hideTabBar()//隐藏
    uni.showTabBar()//显示