乐趣区

关于前端:uniapp开发的技能点整理

jiezi

  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 变量。这样就不会呈现现成并发的问题。

退出移动版