1. 图形验证码的申请形式

    this.loginCodeSrc = `${BASE_API}/code/loginCode?uid=${this.timeStamp}`;
  1. 倒计时60s

    countdown() {                let timeL = 60;                let that = this;                this.codeDisable = true;                this.timer = setInterval(() => {                    timeL--;                    if (timeL == 0) {                        clearInterval(that.timer);                        that.codeDisable = false;                        that.codeTips = `获取验证码`;                    } else {                        that.time = timeL;                        that.codeTips = `倒计时${timeL}s`;                    }                }, 1000)            },
  2. switch-case的优化写法

    statusTitleAdapter(status) {                let statusMap = {                    '1': '已下单',                    '2': '已发货',                    '3': '已揽件',                    '4': '运输中',                    '5': '派送中',                    '6': '已签收',                    '7': ''                };                return statusMap[status+''];            },
  3. 批改uview框架中组件默认款式的形式

    // /deep/.u-button,u-button 为组件名/deep/.u-button {            display: flex;            align-self: center;            background-color: #a65342;            height: 68rpx;            margin: 0 55rpx;            font-size: 30rpx;            border-radius: 6rpx;            color: #FFFFFF;        }
  4. 导航栏的高度

    margin-top: calc(var(--status-bar-height) + 88rpx);
  5. 空格 
  6. 阻止事件透传

    @click.native.stop=""
  7. 返回顶部

    //返回顶部            backToTop() {                uni.pageScrollTo({                    scrollTop: 0,                    duration: 100                });            },
  8. text标签文本只显示两行

                                    //文本只显示两行                                display: -webkit-box;                                -webkit-box-orient: vertical;                                -webkit-line-clamp: 2;                                overflow: hidden;
  1. uniapp 数组数据批改相互影响是浅拷贝导致的,应用深拷贝进行拷贝即可解决。
  2. Git下 查看代码量:git log --author="ningjianwen" --since=2022-04-11 --before=2022-06-07 --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 + $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }' -;
  3. scss模式下 通过以下形式设置带透明度的背景色才失效,less模式下编译报错。

    rgba($color: #ffc663, $alpha: 0.4)
  4. 文本超出显示省略号

    //超出暗藏overflow-x: hidden;//溢出显示text-overflow: ellipsis;//文本一行不换行直到遇到换行符white-space: nowrap;
  5. uniapp 返回上一页的办法:

    goback() {                let canNavBack = getCurrentPages();                if(canNavBack && canNavBack.length>1) {                      uni.navigateBack({                        delta: 1                      });                  } else {                      history.back();                }            },
  6. 格式化日期,计算倒计时的的库 moment,实例办法如下:

    //待付款,计算剩余时间                        if (that.orderDetails.orderStatus == '1') {                                                        if(that.orderDetails.expirationTime){                                let date = that.orderDetails.expirationTime;                                that.orderDetails["remainingTime"] = this.moment(date).diff(new Date().getTime());                            }else{                                that.orderDetails["remainingTime"] = "0";                            }                        }
  7. 数组数据删除的时候,不能一边遍历一边删除,尽管程序不会报错,然而删除后果就是会少删除数据。解决办法:

    1.)倒序遍历删除,即便有数据删除,也不影响后续数据的遍历和删除。

    2.)正序遍历的时候,有数据删除的那次循环,index要减一复原回去,这样才不会导致数据遍历的时候数据有脱漏。

    3.)应用filter进行数据过滤指标数组。

  8. 应用image时图片的填充模式无论是widthFix 还是 heightFix,最好还是设置一下图片的最大宽度或者最大高度,避免用户上传一张异样的图片时,导致页面布局错乱。
  9. 日期格式化函数(把接管到的日期格式化为「HH:mm、昨天 HH:mm、MM-dd HH:mm、yyyy-MM-dd HH:mm」):

    formatTime(value) {                var format = (function() {                    function fix(str) {                        str = '' + (String(str) || '');                        return str.length <= 1 ? '0' + str : str;                    }                    var maps = {                        'yyyy': function(date) {                            return date.getFullYear()                        },                        'MM': function(date) {                            return fix(date.getMonth() + 1);                        },                        'dd': function(date) {                            return fix(date.getDate())                        },                        'HH': function(date) {                            return fix(date.getHours())                        },                        'mm': function(date) {                            return fix(date.getMinutes())                        },                        'ss': function(date) {                            return fix(date.getSeconds())                        }                    }                    var trunk = new RegExp(Object.keys(maps).join('|'), 'g');                    return function(value, format) {                        if (!value) {                            return '--';                        }                        format = format || 'yyyy-MM-dd HH:mm';                        value = Number(value);                        value = new Date(value);                        return format.replace(trunk, function(capture) {                            return maps[capture] ? maps[capture](value) : '';                        });                    }                })                if (value == '' || value == undefined) return '--';                var time = new Date(value),                    now = new Date(),                    _time = new Date(value).setHours(0, 0, 0, 0),                    _now = new Date().setHours(0, 0, 0, 0),                    duration = 24 * 60 * 60 * 1000;                if (_now - _time == 0) {                    return formatDate(time, 'hh:mm');                } else if (_now - _time == duration) {                    return "昨天 " + this.formatDate(time, 'hh:mm');                } else if (Math.abs(_now - _time) >= duration && time.getYear() == now.getYear()) {                    return formatDate(time, 'MM-dd hh:mm');                } else {                    return formatDate(time, 'yyyy-MM-dd hh:mm');                }            },
  10. 页面中部题目向上滑动之后顶部吸顶成果:

    &.scrolltop {                    // position: absolute;                    // top: 0;                    // left: 0;                    position: -webkit-sticky;                    /* Safari */                    position: sticky;                    top: calc(var(--status-bar-height));                    left: 0;                    z-index: 3;                    width: 100%;                    z-index: 999;                    background: #F7F1E8;                }
    1. text文字竖向排布的要害属性:

      word-wrap: break-word;
    21. Uniapp 自带的复制粘贴办法,复制内容时页面跳动的解决方案:
export function copyText(text) {    // h5 copy性能    var textareaC = document.createElement('textarea');    textareaC.setAttribute('readonly', 'readonly'); //设置只读属性避免手机上弹出软键盘    textareaC.value = text; //textarea的value    document.body.appendChild(textareaC); //将textarea增加为body子元素    textareaC.select();        var res = document.execCommand('copy');    document.body.removeChild(textareaC);//移除DOM元素    uni.showToast({        icon: 'success',        title: '复制胜利!'    });        return res}
  1. 在进行字符串转日期的时候,因为零碎的差异性,iOS零碎不能辨认字符串两头的 ‘-’,须要进行替换,能力获取到正确的值。

    let receiptTime = this.orderDetails.receiptTime||'';                    receiptTime = receiptTime.replace(/-/g, "/"); //解决iOS零碎不辨认 日期两头的 - 的问题                    //确认收货后30天内,还能够进行售后申请                    let date1 = new Date(receiptTime).getTime() + 30 * 24 * 60 * 60 * 1000;                    let date2 = new Date().getTime();                    if((date2 - date1) < 0) {                        return true;                    }                    return false;
    1. 两个组件在同一行排布,当产生组件被挤压的状况。能够给被挤压的组件设定一个固定宽度,另外一个组件设置flex:1%; ,让它占据残余的空间。
    2. 当应用u-list组件时,要记得设置height,不然会呈现列表内容呈现在列表内容区域的之外的状况,导致上拉加载事件生效,或者页面高低滑动时呈现跳动
    3. 数据分页:数据分页的外围点在于是否精确的判断数据是否曾经加载结束了。判断的办法有以下几种:A、服务器端返回总的页数,当数据加载的页数大于等于总页数,阐明数据加载完了。B、服务端返回数据的总条数,当获取到的数据条数大于等于总的数据条数时,阐明数据曾经加载完了。C、以后端每次申请的时候,服务端返回固定页面大小的数据,当某次返回的数据条数小于页面的大小时,阐明数据曾经加载完了。以上的三种办法,判断总页数和总的数据条数的办法是靠谱的,判断当次返回数据条数小于页面大小的办法准确性不够(因为当服务器出现异常时,某次返回的数据条数小于页面大小,就会被断定为数据曾经加载完了)。
    4. 经典bug。场景:一个页面顶部有多个tab,点击切换tab的时候,共用同一个页面,只是数据刷新(有分页)。

      当疾速点击tab进行切换的时候,产生了两个tab的数据展现在了同一页的bug(多线程并发)。

bug产生的起因:tab切换的时候,因为接口申请是异步的,item-A的数据还在response中解决,item-B的就收回了申请,item-B正好读取了item-A的this.page += 1的页面,所以在item-B的response中执行了page > 1的数据拼接逻辑,导致了两个item的数据拼接之后当初在了item-B的页面里。
解决办法:1.)把页面加一的操作放在上拉加载更多的办法中。 2.)每个tab-item应用独自的page和list变量。这样就不会呈现现成并发的问题。