抽取重復(fù)樣式

樣式復(fù)用

我們會發(fā)現(xiàn)很多時候在開發(fā)的過程中會存在多個頁面中都用到了同樣的樣式，那么其實(shí)之前有提到過，公用樣式可以放在app.wxss里面這樣就可以直接復(fù)用。

如：flex布局的縱向排列，定義在app.wxss里面

.flex-col{display: flex;flex-direction: column;
}

然后其他頁面可以直接使用組合樣式：

通用的寫在app.wxss里面，個性化的在具體頁面編寫。

以上是樣式的復(fù)用，還有一種是樣式中常用的具體屬性值設(shè)置成變量，便于復(fù)用。

屬性復(fù)用

使用CSS自定義屬性（變量）
聲明一個自定義屬性，屬性名需要以兩個減號（–）開始，屬性值則可以是任何有效的CSS值。

page {--color:#F8D300
}

注意：需要在app.wxss定義，這樣所有頁面的wxss才能使用。
使用一個局部變量時用 var() 函數(shù)包裹以表示一個合法的屬性值：

.content-btn {background: var(--color);
}

同樣的除了顏色，還有一些統(tǒng)一的邊距、大小、等等屬性都可以。

抽取重復(fù)方法

做過小程序開發(fā)的同學(xué)應(yīng)該都知道都知道app.js是可以全局共享的。那么這個時候如果有多個頁面都需要用到的方法和屬性就可以全部寫在app.js里面。
如下所示：

// app.js
App({randomMsg(){let msgs = this.globalData.msgslet msg = msgs[Math.floor(Math.random() * msgs.length)];return msg},globalData: {msgs:["你好嗎？","加油鴨！","早點(diǎn)睡！","奧利給！","別熬夜！"]}
})

頁面使用方法：

const app = getApp()Page({onLoad: function (options) {console.log(app.globalData)console.log(app.randomMsg())},
})

適用場景：在小程序里面共享都是一次應(yīng)用生命周期中會有多個頁面使用到的數(shù)據(jù)，小程序重啟后將全局變量會重新初始化。

安裝第三方包

除了可以提取方法到utils里面達(dá)到了便于復(fù)用。有時候我們維護(hù)常用工具類成本很高，而且我們要去深入去了解里面的API，這個時候我們用別人維護(hù)的工具類。

這個時候我們就會去github查找相關(guān)的開源庫，找到合適的就需要進(jìn)行使用。使用通常有兩種方式：

1. 直接復(fù)制原來到自己的項(xiàng)目中
2. 使用 npm 包進(jìn)行遠(yuǎn)程引用

具體引用可以查看我之前寫過的文章：《微信小程序如何引入npm包？》

總結(jié)

1. 無論是 css 樣式還是 js 方法都要盡可能的抽象復(fù)用，這樣才能提升整體效率。
2. 在優(yōu)化的過程中先局部再整體，沒有最好只有更好，基于業(yè)務(wù)場景來做優(yōu)化。
3. 常用的工具類就不需要重復(fù)發(fā)明輪子，學(xué)會使用已有第三方開源庫可提升效率。

?