学习笔记

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

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

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

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

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

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

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

4、forEach添加循环（修改）

  1. let _this = this;
  2.   _this.views[1].forEach(function(v, index) { 
  3.           if (v.ishave == false) { 
  4.             let key = 'ishave'
  5.             let value = 3;
  6.             v[key] = value
  7.           } else { 
  8.             v.ishave = 3;
  9.           }
  10.           _this.haveTask.forEach(function(a, i) { 
  11.             if (v.date == a.keyTwo) { 
  12.               v.ishave = a.value;
  13.             }
  14.           })
  15.         })

5、消息提示

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

6、延时器

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

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

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

8、Promise.all

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

  1. let ps1 = new Promise((resolve, reject) => { 
  2.     setTimeout(() => { 
  3.         resolve('success-1')
  4.     }, 6000)
  5. })
  7. let ps2 = new Promise((resolve, reject) => { 
  8.     setTimeout(() => { 
  9.         resolve('success-2')
  10.     }, 3000)
  11. })
  13. let pf1 = new Promise((resolve, reject) => { 
  14.     setTimeout(() => { 
  15.         reject('fail-1')
  16.     }, 4000)
  17. })
  19. let pf2 = new Promise((resolve, reject) => { 
  20.     setTimeout(() => { 
  21.         reject('fail-2')
  22.     }, 2000)
  23. })
  25. Promise.all([ps1, ps2]).then(arr => { 
  26.     console.log(arr) // 执行成功，输出：['success-1', 'success-2']
  27. }).catch(error => { 
  28.     console.log(error)
  29. })
  31. Promise.all([ps1, pf1, ps2, pf2]).then(arr => { 
  32.     console.log(arr)
  33. }).catch(error => { 
  34.     console.log(error) // 执行失败，输出：fail-2
  35. })

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

9、Promise.race

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

  1. let ps1 = new Promise((resolve, reject) => { 
  2.     setTimeout(() => { 
  3.         resolve('success-1')
  4.     }, 6000)
  5. })
  7. let ps2 = new Promise((resolve, reject) => { 
  8.     setTimeout(() => { 
  9.         resolve('success-2')
  10.     }, 3000)
  11. })
  13. let pf1 = new Promise((resolve, reject) => { 
  14.     setTimeout(() => { 
  15.         reject('fail-1')
  16.     }, 4000)
  17. })
  19. let pf2 = new Promise((resolve, reject) => { 
  20.     setTimeout(() => { 
  21.         reject('fail-2')
  22.     }, 2000)
  23. })
  25. Promise.race([ps1, ps2]).then(result => { 
  26.     console.log(result) // 执行成功，输出：success-2
  27. }).catch(error => { 
  28.     console.log(error)
  29. })
  31. Promise.race([ps1, ps2, pf1, pf2]).then(result => { 
  32.     console.log(result)
  33. }).catch(error => { 
  34.     console.log(error) // 执行失败，输出：fail-2
  35. })

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

10、Promise.allSettled

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

  1. let ps1 = new Promise((resolve, reject) => { 
  2.     setTimeout(() => { 
  3.         resolve('success-1')
  4.     }, 6000)
  5. })
  7. let ps2 = new Promise((resolve, reject) => { 
  8.     setTimeout(() => { 
  9.         resolve('success-2')
  10.     }, 3000)
  11. })
  13. let pf1 = new Promise((resolve, reject) => { 
  14.     setTimeout(() => { 
  15.         reject('fail-1')
  16.     }, 4000)
  17. })
  19. let pf2 = new Promise((resolve, reject) => { 
  20.     setTimeout(() => { 
  21.         reject('fail-2')
  22.     }, 2000)
  23. })
  25. Promise.allSettled([ps1, ps2, pf1, pf2]).then(arr => { 
  26.     console.log(arr) // 输出：[{status: "fulfilled", value: "success-1"}, {status: "fulfilled", value: "success-2"}, {status: "rejected", reason: "fail-1"}, {status: "rejected", reason: "fail-2"}]
  27. })

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

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

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

12、判断邮箱是否正确

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

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

html

  1. <view class="share-img-box">
  2.       <image src="../../static/home/share.png" style="width: 38upx;height: 38upx;" mode=""></image>
  3.       <button open-type="share" bindcontact="handleContact" class="openChat"></button>
  4.   </view>

css 此处用的 scss

  1. .share-img-box { 
  2.           width: 38upx;
  3.           height: 38upx;
  4.           position: relative; .openChat{ 
  5.             top: 0;
  6.             left: 0;
  7.               position: absolute;
  8.               width: 100%;
  9.               height: 100%;
  10.               opacity: 0;
  11.               z-index: 999;
  12.           }
  13.         }

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

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

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

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

首先需要有一个分享button
html

  1. <button open-type="share" bindcontact="handleContact" class="openChat"></button>

js

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

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

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

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

17、window10 如何切换桌面

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

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

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

19、鼠标样式

  1. cursor:pointer;//变小手
  2. cursor:auto;//标准光标
  3. cursor:default;//标准箭头
  4. cursor:hand;//手形光标
  5. cursor:wait ;//等待光标
  6. cursor:text;//I形光标
  7. cursor:vertical-text;//水平I形光标
  8. cursor:no-drop;//不可拖动光标
  9. cursor:not-allowed;//无效光标
  10. cursor:help;//帮助光标
  11. cursor:all-scroll;//三角方向标
  12. cursor:move;//移动标
  13. cursor:crosshair;//十字标

20、css 常用样式

  1. //只让背景颜色透明
  2. background-color:rgba(245,187,0,0.1);
  3. //弹性和垂直布局
  4. flex-direction:column;
  5. align-items:center; //让最后一个数组边框不显示 .xxx:nth-last-child(1){ 
  6. .xian{ 
  7. border:none;
  8. margin:0 auto;
  9. }
  10. }
  11. //a标签去掉下划线 a{ 
  12. text-decoration:none;
  13. }
  14. //首行缩进两个字符
  15. text-indent:2em;
  17. //单行文本超出显示点点点
  18. overflow: hidden;
  19. text-overflow: ellipsis;
  20. white-space: nowrap;
  22. //多行文本超出显示点点点
  23. overflow: hidden;
  24. text-overflow: ellipsis;
  25. display: -webkit-box;
  26. -webkit-box-orient: vertical;
  27. -webkit-line-clamp: 2;
  28. word-break: break-all;
  30. //vue超出隐藏方法
  31. display: -webkit-box;
  32. -webkit-box-orient: vertical;
  33. -webkit-line-clamp: 2;
  34. overflow: hidden;
  35. word-break: break-all; //input框number类型下右侧加减号去除 input::-webkit-inner-spin-button { 
  36.     -webkit-appearance: none !important;
  37.     margin: 0;
  38. }

21、element ui 配置

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

22、打印文件强制分页

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

23、Echarts 文档

  1. //曲线折线
  2.  series: [{ 
  3.           data: [820, 932, 901, 934, 1290, 1330, 1320],
  4.           type: 'line',
  5.           smooth: true
  6.         }]

24、循环对象添加key值

  1. xun() { 
  2.       let _this = this;
  3.       var obj = { };
  4.       this.city.forEach(function(v, index) { 
  5.         obj[v.city] = v;
  6.       });
  7.       console.log(JSON.stringify(obj));
  8.     }

25、常用数字方法

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

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

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

27、uniapp退出应用

  1. //退出应用
  2.       refundApplication(){ 
  3.         if (plus.os.name.toLowerCase() === 'android') { 
  4.                  plus.runtime.quit();
  5.              }
  6.              else{ 
  7.                  const threadClass = plus.ios.importClass("NSThread");
  8.                  const mainThread = plus.ios.invoke(threadClass, "mainThread");
  9.                  plus.ios.invoke(mainThread, "exit");
  10.              }
  11.       },

27、uniapp隐藏显示tabBar

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

发表评论

表情：
评论列表 （有 0 条评论，1111人围观）

还没有评论，来说两句吧...

相关阅读

    相关 学习笔记

    \ajax: 1、概念：异步的JavaScript 和 xml 1.1异步和同步：客户端和服务器端相互通信的基础上 \客户端必须等待服务器端的响应。在等待的期间客户

    深藏阁楼爱情的钟深藏阁楼爱情的钟/ 0 赞/ 364 阅读