前端小知识点

1. 获取某个时间的三个月前的时间（年月日）

var time=new Date(this.date).setMonth((new Date().getMonth()-3))
var time2=new Date(time).toJSON().substr(0,10)
//这里会差8个小时
function getFormatData(sdtime){
	var date = new Date(sdtime.replace(/-/g, '/'));
	var YY = date.getFullYear() + '-';
	var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
	var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
	var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
	var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
	var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
	return YY+MM+DD
}

去掉时分秒

即2020-12-12 08:12:50 变成 2020-12-12 00:00:00

data=this.$moment(data).startOf('day')

uni-app兼容oss系统

原因为IOS系统只识别 " / " 不识别 " - "，
获取后台时间戳new Date(item.stopDate)无法获取数据，需要做处理
new Date(item.stopDate.replace(/-/g, '/'))后即可获取正常数据

2. 循环对象

	for(let key in obj){
		console.log('key:'+key+'value:'+obj[key])
	}

3. uni-app跳转页面（navigate，redirect，switchTab）

				<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                    <button type="default">跳转到新页面</button>
                </navigator>
                <navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
                    <button type="default">在当前页打开</button>
                </navigator>
                <navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
                    <button type="default">跳转tab页面</button>
                </navigator>

值				说明									平台差异说明
navigate		对应 uni.navigateTo 的功能	
redirect		对应 uni.redirectTo 的功能	
switchTab		对应 uni.switchTab 的功能	
reLaunch		对应 uni.reLaunch 的功能					字节跳动小程序不支持
navigateBack	对应 uni.navigateBack 的功能	
exit			退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

4.获取焦点位置，改变焦点位置

        var elInput = document.getElementById('expression'); //根据id选择器选中对象
        var startPos = elInput.selectionStart;// input 第0个字符到选中的字符
        var endPos = elInput.selectionEnd;// 选中的字符到最后的字符
         if (startPos === undefined || endPos === undefined) return
         var txt = elInput.value;
         var result = txt.substring(0, startPos) + "规则" + txt.substring(endPos)
         elInput.value = result;// 赋值给input的value
         // 重新定义光标位置
        elInput.focus();
        elInput.selectionStart = startPos + 2;
        elInput.selectionEnd = startPos + 2;
         this.expression = result// 赋值给表单中的的字段

5.jeectboot不执行jeecg默认的created事件

//不执行jeecg默认的created事件
 this.disableMixinCreated=true;

6.如何判断当前代码是运行在浏览器还是node环境中

注意是网页不是vue

​​​​​​​<script>
    this === window ? console.log('browser') : console.log('node');
</script>

7.debugger用来调试js代码

直接点数的位置加断点，但是一刷新页面就没了

前端使用uuid

//报错的话重新安装一下
import uuidv1 from 'uuid/v1'
......
var key = uuidv1();
······
 let uid = require('rand-token').uid;
  uid(23);  // return token

vue watch immediate

默认false，即第一次不执行
为true时，第一次改变也执行

watch: {
    value: {
      handler(newVal) {
        this.recordBadcase = newVal;
      },
      immediate: true
    },

写vue时注意必须写相对路径，不然部署后找不到

oss pdf默认是打开，但是想要下载

在保存的时候加上
HTTP头, 设置Content-Disposition为 attachment 就可以了

我设置了一次，后来删掉也变成下载了

适配移动设备

   <meta name="viewport" content="width=device-width,initial-scale=0.8, maximum-scale=0.8, minimum-scale=0.8, user-scalable=no, minimal-ui">

width - viewport的宽bai度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

动态设置

 window.mobileUtil = (function(win,doc) {
           var UA = navigator.userAgent,isAndroid = /android|adr/gi.test(UA),isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid,// 据说某些国产机的UA会同时包含 android iphone 字符
               isMobile = isAndroid || isIos;  // 粗略的判断
           return {
               isAndroid: isAndroid,isIos: isIos,isMobile: isMobile,isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),isWeixin: /MicroMessenger/gi.test(UA),isQQ: /QQ\/\d/gi.test(UA),isYixin: /YiXin/gi.test(UA),isWeibo: /Weibo/gi.test(UA),isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),tapEvent: isMobile ? 'tap' : 'click',/**
                * 缩放页面
                */
               fixScreen: function() {
                   var metaEl = doc.querySelector('meta[name="viewport"]'),metaCtt = metaEl ? metaEl.content : '',matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),matchWidth = metaCtt.match(/width=([^,\s]+)/);
                   if ( !metaEl ) { // REM
                       var docEl = doc.documentElement,maxwidth = docEl.dataset.mw || 750,// 每 dpr 最大页面宽度
                           dpr = isIos ? Math.min(win.devicePixelRatio,3) : 1,scale = 1 / dpr,tid;
                       docEl.removeAttribute('data-mw');
                       docEl.dataset.dpr = dpr;
                       metaEl = doc.createElement('meta');
                       metaEl.name = 'viewport';
                       metaEl.content = fillScale(scale);
                       docEl.firstElementChild.appendChild(metaEl);
                       var refreshRem = function() {
                           var width = docEl.getBoundingClientRect().width;
                           if (width / dpr > maxwidth) {
                               width = maxwidth * dpr;
                           }
                           var rem = width / 16;
                           docEl.style.fontSize = rem + 'px';
                       };
                       win.addEventListener('resize',function() {
                           clearTimeout(tid);
                           tid = setTimeout(refreshRem,300);
                       },false);
                       win.addEventListener('pageshow',function(e) {
                           if (e.persisted) {
                               clearTimeout(tid);
                               tid = setTimeout(refreshRem,300);
                           }
                       },false);
                       refreshRem();
                   } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定宽
                       var    width = parseInt(matchWidth[1]),iw = win.innerWidth || width,ow = win.outerWidth || iw,sw = win.screen.width || iw,saw = win.screen.availWidth || iw,ih = win.innerHeight || width,oh = win.outerHeight || ih,ish = win.screen.height || ih,sah = win.screen.availHeight || ih,w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),scale = w / width;
                       if ( scale < 1 ) {
                           metaEl.content = metaCtt + ',' + fillScale(scale);
                       }
                   }
                   function fillScale(scale) {
                       return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
                   }
               },/**
                * 转href参数成键值对
                * @param href {string} 指定的href，默认为当前页href
                * @returns {object} 键值对
                */
               getSearch: function(href) {
                   href = href || win.location.search;
                   var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?","g" );
                   href && href.replace(reg,function( $0,$1,$2,$3 ){
                       data[ $1 ] = $3;
                   });
                   return data;
               }
           };
       })(window,document);
       // 默认直接适配页面

        mobileUtil.fixScreen();

关闭当前窗口

var userAgent = navigator.userAgent;
              if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") != -1) {
              //只对open打开的方式有效
                  window.location.href = "about:blank";
                  window.close();
              } else {
                  window.opener = null;
                  window.open("", "_self");
                  window.close();
              }

判断是否是移动端

this.ispad=/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)

vue项目有时候一直加载不出来

 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.js"></script>
 //改成下面这个，是国内的
  <script src="https://cdnjs.loli.net/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js"></script>

uni-app中加上index.html

只有打包后才能访问到

浏览器扫码不让下载，自定义一个页面引导浏览器打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iTrial</title>
    <style type="text/css">
        .wxtip {
            background: rgba(0, 0, 0, 0.8);
            text-align: center;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 998;
            display: none;
        }
        .wxtip-icon {
            width: 200px;
            position: absolute;
            right: 50px;
            top: 10px;
        }
        .wxtip-text {
            font-size: 13px;
            line-height: 2.5;
        }
        .content{
            margin: 0 auto;
            text-align: center;
            margin-top: 30%;
        }
        .icon img{
            width: 70px;
            height: 70px;
        }
        .buttonDiv{
            margin-top:20%;
        }
        .button{
            background-color: #29C973;
            border: 1px solid #29C973;
            color: #fff;
            width: 200px;
            height: 40px;
            outline:none;
            font-size: 16px;
            color: #fff;
        }
        a{
            text-decoration:none;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="icon">
        <img src="img/logo.png" alt="">
    </div>
    <div>iTrial</div>
    <div class="buttonDiv">
        <a href="---.apk" id="JdownApp"><button  class="button">点击下载</button></a>
        <div class="wxtip-text">仅支持安卓平板</div>
    </div>
</div>
<div class="wxtip" id="JweixinTip">
    <div  class="wxtip-icon">
        <img width="100%" height="100%" src="img/jiantou.png" alt="">
    </div>
</div>
</body>
<script>
    function weixinTip(ele) {
        var ua = navigator.userAgent;
        var isWeixin = !!/MicroMessenger/i.test(ua);
        //var isWeixin = true
        if (isWeixin) {
            ele.onclick = function (e) {
                window.event ? window.event.returnValue = false : e.preventDefault();
                document.getElementById('JweixinTip').style.display = 'block';
            }
            document.getElementById('JweixinTip').onclick = function () {
                this.style.display = 'none';
            }
        }
    }
    var btn1 = document.getElementById('JdownApp');//下载一
    weixinTip(btn1);
    // var btn2 = document.getElementById('JdownApp2'); //下载二
    // weixinTip(btn2);
</script>
</html>

login就是你APP的图标
下面这个是箭头调试就可以看见这个图片

获取扫描二维码穿过来的参数

onLoad(options) {
			var that = this
			console.log(options)
			console.log(options.scene);
			if (options.scene != undefined) {   //微信直接扫码
				//有中文/之类的要转译
			    // var scan_url = decodeURIComponent(options.scene);
				this.qruuid=options.scene;
			} else {    //微信内部扫一扫
			    this.qruuid=options.scene;
			}
				
		},

时间戳的理解

格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数
如果你是北京时间，你就是跟北京时间1970比较
所以不管什么时区，时间戳是一样的
所以时间戳和标准时间意思相同

正则表达式判断是否是数字

/^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$/

判断是否是正整数 /^(0|[1-9]\d*)$/