【小程序】爆肝 3 天总结的微信小程序优化指南（收藏夹吃灰吧！）🔥🔥（下）

// app.json
"subpackages": [
    {
        "root": "index_addons",
        "pages": []
    }
]
复制代码

{
    "componentPlaceholder": {
        "stopwatch": "view" // 欲用作占位组件
    }
}
复制代码

const { default: getNavList } = await require.async("../../../index_addons/compopnents/get_nav_list.js")
复制代码

<view wx:for="{{textList}}" wx:key="*this"></view>
复制代码

<view wx:for="{{swipers}}" wx:key="index"></view>
复制代码

<view wx:for="{{customerList}}" wx:key="{{index}}"></view>
复制代码

<view class="submit-btn" catchbind="onViewDetail" data-index="index">view detail</view>
复制代码

function throttle(method, wait = 50) {
    let previous = 0
    return function(...agrs) {
        let context = this
        let now = new Date().getTime()
        if(now - previouts > wait) {
            method.apply(context, args)
            previous = now
        } else {
            console.log("节流少许")
        }
    }
}
复制代码

function debounce(func, wait = 50) {
    let timer = null
    return function (...args) {
        const contest = this
        if(timer) {
            clearTimeout(timer)
            console.log("防抖少许")
        }
        timer = setTimeout(() => {
            func.call(context, ...args)
        }, wait)
    }
}
复制代码

const {default:debounce} = require(../../../library/optimus/debounce.js)
const {default:throttle} = require(../../../library/optimus/throttle.js)
onScrolllToLower: throttle(function(e) {
    ...
})
onTapCustomerItem: debounce(function(e) {
    ..
})
复制代码

-webkit-overflow-scrolling: touch;;
复制代码

<button class="submit-btn" hover-class="submit-btn__hover"></button>
复制代码

.submit-btn {
    ...
}
.submit-btn__hover {
    ...
}
复制代码

npm install gulp -g
npm install --save-dev gulp gulp-cleanwxss
复制代码

const gulp = require("gulp")
const cleanwxss = require("gulp-cleanwxss")
// 处理父目录下的样式文件，输出到当前目录下的dist
gulp.task("default", (done) => {
    group.src("../minniprogram/index/pages/*/*.wxss")
        .pipe(cleanwxss({ log: true }))
        .pipe(gulp.dest("./dist"))
     done()
})
// 处理分包下的样式文件
gulp.task("goods", (done) => {
    group.src("../minniprogram/goods/pages/*/*.wxss")
        .pipe(cleanwxss({ log: true }))
        .pipe(gulp.dest("./dist"))
     done()
})
复制代码

gulp default
gulp goods
复制代码

.submit-btn {
    ...
    padding: 10px;
}
复制代码

.submit-btn {
    position: relative;
    ...
}
.submit-btn::after {
    content: '',
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
}
复制代码

clearTimeout(timer1)
复制代码

// 及时释放本页范围内添加的全局监听器
onLoad() {
    wx.onThemeChange(this.themeChangeHandler)
}
onUnload() {
    wx.offThemeChange(this.themeChangeHandler)
}
复制代码

"darkMode": "true"
复制代码

// bad
if(this.data.gender === '1') {
    this.setData({
        genderName: '男'
    })
} else if(this.data.gender === '0') {
    this.setData({
        genderName: '女'
    })
} else {
    this.setData({
        genderName: '未知'
    })
}
// good
let genderName = '未知'
if(this.data.gender === '1') genderName = '男'
if(this.data.gender === '0') genderName = '女'
this.setData({
    genderName,
})
复制代码

Page({
    allList: [],
    pageNum: 1,
    pageSize: 10,
    data: {
        list: []
    }
})
复制代码

this.setData({
    [this.data.customerList[index].title]: item.title+='---'
})
复制代码

enableCache: true,
enableHttp2: true,
enableQuic: true
复制代码

npm i priority-async-queue
复制代码

const PriorityAsyncQueue = require('priority-async-queue')
const queue = new PriorityAsyncQueue(10) // default 10
const low = "low", normal = "normal", mid = "mid", high = "high", "urgent" = "urgent"
export const priority = { low, normal, mid, high, urgent }
....
return new Promise((resolve, reject) => {
    queue.addTask({ priority }. () => {
        wx.request(Object.assgin(args,{
            success: resolve,
            fail: reject
        })
    })
})
复制代码