大道至简-前端性能优化之uniapp

性能优化自古以来就是重中之重，这里就简单了解下吧：前端性能优化之uniapp - 南之骄阳 - 博客园性能优化自古以来就是重中之重，这里就简单了解下uniapp官方性能优化文档。

1、使用v3编译，跟上官方每一次优化配置和建议

2、减少高频动画和监听，减少对象数量，避免接口调用频繁，善用数据缓存

3、图片请压缩后使用，避免大图，必要时可以考虑雪碧图或svg，简单代码能实现的就不要图片

4、合理使用组件复用减少代码冗余，多学习api用函数式编程解决问题

5、善用封装以减少代码量（比如scss常量和方法封装、接口请求封装）

6、项目pages过多后请采取分包处理（app也可）https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization

7、必要时可以使用nvue来编写，但nvue语法比较严格请自行看文档

8、关于用户体验，巧用渐变动画，注重页面细节，图片可用懒加载，更多可看uview-ui

9、请不要滥用本地存储，局部页面之间的传参用url，如果用本地存储传递数据要命名规范和按需销毁

10、有官方API的就不要额外引用js插件增加项目体积，比如url传参加密直接用encodeURIComponent() 和decodeURIComponent()

11、减少组件深层嵌套，减少页面目录层级，合理利用相对路径

13、css方面，要知道哪些属性是有继承效果的，像字体、字体颜色、文字大小都是继承的，不要写那些没有意义的重复代码

图片压缩网站推荐:https://tinypng.com/

再提供几个时间相关工具类

function formatTime(date) {
    var date = new Date(date*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

//输入时间戳==》07月02日 9：29
function formatMonth(date) {
    var date = new Date(date*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var year = date.getFullYear()
    var month = date.getMonth() + 1 +'月'
    var day = date.getDate() +'日'
    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()
    return [month, day].map(formatNumber).join('') + ' ' + [hour, minute].map(formatNumber).join(':')
}

function formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
}
function formatTimeTwo(number, format) {
    var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
    var returnArr = [];
    var date = new Date(number * 1000);
    returnArr.push(date.getFullYear());
    returnArr.push(formatNumber(date.getMonth() + 1));
    returnArr.push(formatNumber(date.getDate()));
    returnArr.push(formatNumber(date.getHours()));
    returnArr.push(formatNumber(date.getMinutes()));
    returnArr.push(formatNumber(date.getSeconds()));
    for (var i in returnArr) {
        format = format.replace(formateArr[i], returnArr[i]);
    }
    return format;
}

const getWeekByDate = dates => {
    let show_day = new Array('周七', '周一', '周二', '周三', '周四', '周五', '周六');
    let date = new Date(dates);
    date.setDate(date.getDate());
    let day = date.getDay();
    return show_day[day];
}


// 方法一
/**
 * 生成唯一文件名
 * @param {Number} len 生成的文件名长度
 * @param {Number} radix 指定基数
 */
function getuuid(len, radix) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
    var uuid = []
    var i = 0
    radix = radix || chars.length

    if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
    } else {
        var r

        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
        uuid[14] = '4'

        for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
                r = 0 | Math.random() * 16
                uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]
            }
        }
    }

    return uuid.join('')
}

// 方法二
/**
 * 生成唯一文件名 时间戳 + 随机数
 * @param {Number} len 生成的文件名长度
 * @param {Number} radix 指定基数
 */
function getTimeId(len, radix) {
    if (len) {
        const time = new Date().getTime()
        const uuid = getuuid(len, radix)
        return `${time}${uuid}`
    } else {
        console.log('请输入长度')
    }
}

module.exports = {
    formatTime: formatTime,
    formatMonth: formatMonth,
    formatTimeTwo: formatTimeTwo,
    getWeekByDate: getWeekByDate,
    getTimeId: getTimeId,
}

function formatTime(date) {
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()

    var hour = date.getHours()
    var minute = date.getMinutes()
    var second = date.getSeconds()

    //return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
}

module.exports = {
    formatTime: formatTime
}