抽取重復樣式

樣式復用

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

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

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

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

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

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

屬性復用

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

page {--color:#F8D300
}

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

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

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

抽取重復方法

做過小程序開發(fā)的同學應該都知道都知道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:["你好嗎？","加油鴨！","早點睡！","奧利給！","別熬夜！"]}
})

頁面使用方法：

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

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

安裝第三方包

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

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

1. 直接復制原來到自己的項目中
2. 使用 npm 包進行遠程引用

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

總結

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

?