uniapp开发的技能点整理

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

科技创造未来
作为一名软件开发中,一定要做3件事。新技术的学习,这样你才能跟上时代的步伐;记录开发过程中踩过的坑...

一名从业多年的软件开发者,做过5年的iOS开发,做过一年的react-native开发,有iOS性能优化经验,IM开发...

178 声望
14 粉丝
0 条评论
推荐阅读
uniapp 开发H5打包微信小程序样式失效的解决之道
使用uniapp开发H5,样式已经按照UI设计稿全部实现。但是在打包微信小程序调试的时候,遇到很多样式失效的问题。问了度娘很久,并没有完全解决样式失效的问题。于是自己按照从度娘上查到的方法去进行组合尝试,最...

蓝光95阅读 409

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan43阅读 3k评论 14

封面图

一名从业多年的软件开发者,做过5年的iOS开发,做过一年的react-native开发,有iOS性能优化经验,IM开发...

178 声望
14 粉丝
宣传栏