抽取重復(fù)樣式
樣式復(fù)用
我們會(huì)發(fā)現(xiàn)很多時(shí)候在開(kāi)發(fā)的過(guò)程中會(huì)存在多個(gè)頁(yè)面中都用到了同樣的樣式，那么其實(shí)之前有提到過(guò)，公用樣式可以放在app.wxss里面這樣就可以直接復(fù)用。
如：flex布局的縱向排列，定義在app.wxss里面
.flex-col{
display: flex;
flex-direction: column;
}
然后其他頁(yè)面可以直接使用組合樣式：
通用的寫(xiě)在app.wxss里面，個(gè)性化的在具體頁(yè)面編寫(xiě)。
以上是樣式的復(fù)用，還有一種是樣式中常用的具體屬性值設(shè)置成變量，便于復(fù)用。
屬性復(fù)用
使用CSS自定義屬性（變量）
聲明一個(gè)自定義屬性，屬性名需要以兩個(gè)減號(hào)（–）開(kāi)始，屬性值則可以是任何有效的CSS值。
page {
--color:#F8D300
}
注意：需要在app.wxss定義，這樣所有頁(yè)面的wxss才能使用。
使用一個(gè)局部變量時(shí)用 var() 函數(shù)包裹以表示一個(gè)合法的屬性值：
.content-btn {
background: var(--color);
}
同樣的除了顏色，還有一些統(tǒng)一的邊距、大小、等等屬性都可以。
抽取重復(fù)方法
做過(guò)小程序開(kāi)發(fā)的同學(xué)應(yīng)該都知道都知道app.js是可以全局共享的。那么這個(gè)時(shí)候如果有多個(gè)頁(yè)面都需要用到的方法和屬性就可以全部寫(xiě)在app.js里面。
如下所示：
// app.js
App({
randomMsg(){
let msgs = this.globalData.msgs
let msg = msgs[Math.floor(Math.random() * msgs.length)];
return msg
},
globalData: {
msgs:["你好嗎？","加油鴨！","早點(diǎn)睡！","奧利給！","別熬夜！"]
}
})
頁(yè)面使用方法：
const app = getApp()
Page({
onLoad: function (options) {
console.log(app.globalData)
console.log(app.randomMsg())
},
})
適用場(chǎng)景：在小程序里面共享都是一次應(yīng)用生命周期中會(huì)有多個(gè)頁(yè)面使用到的數(shù)據(jù)，小程序重啟后將全局變量會(huì)重新初始化。
安裝第三方包
除了可以提取方法到utils里面達(dá)到了便于復(fù)用。有時(shí)候我們維護(hù)常用工具類成本很高，而且我們要去深入去了解里面的API，這個(gè)時(shí)候我們用別人維護(hù)的工具類。
這個(gè)時(shí)候我們就會(huì)去github查找相關(guān)的開(kāi)源庫(kù)，找到合適的就需要進(jìn)行使用。使用通常有兩種方式：
- 直接復(fù)制原來(lái)到自己的項(xiàng)目中
- 使用 npm 包進(jìn)行遠(yuǎn)程引用
具體引用可以查看我之前寫(xiě)過(guò)的文章：《微信小程序如何引入npm包？》
總結(jié)
- 無(wú)論是 css 樣式還是 js 方法都要盡可能的抽象復(fù)用，這樣才能提升整體效率。
- 在優(yōu)化的過(guò)程中先局部再整體，沒(méi)有最好只有更好，基于業(yè)務(wù)場(chǎng)景來(lái)做優(yōu)化。
- 常用的工具類就不需要重復(fù)發(fā)明輪子，學(xué)會(huì)使用已有第三方開(kāi)源庫(kù)可提升效率。
