快捷導(dǎo)航

詳解基于Wepy開發(fā)小程序插件(推薦)

更新時(shí)間：2019年08月01日 09:39:40 作者：炸雞超人

這篇文章主要介紹了詳解基于Wepy開發(fā)小程序插件(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

開發(fā)

使用 wepy 開發(fā)項(xiàng)目時(shí)不需要手動(dòng)配置 app.wpy 下的 config.pages，autopages 插件會(huì)自動(dòng)監(jiān)控 pages 目錄下文件的變化，自動(dòng)生成更新對(duì)應(yīng) app.json 下的 pages。

注意：該插件只會(huì)對(duì)編譯文件dist里配置添加，源文件是不會(huì)改動(dòng)的。
注意：我還發(fā)現(xiàn)有個(gè)問(wèn)題是他是按命名順序添加的，所以開發(fā)階段可以用客戶端指定路徑，但是發(fā)布的話還是乖乖手動(dòng)添加吧

這插件看情況使用吧，如果是個(gè)人項(xiàng)目的話我覺(jué)得還是值得用的，畢竟每次新增頁(yè)面都要手動(dòng)添加很繁瑣，但是如果是合作項(xiàng)目開發(fā)到某個(gè)階段的時(shí)候還是手動(dòng)填上去吧，因?yàn)楸阌谄渌丝梢灾滥沩?xiàng)目的所有跳轉(zhuǎn)路徑有哪些。

plugins: [
 autopages: {}
]

wepy-plugin-px2units

將 px 單位轉(zhuǎn)換為 rpx 單位，或者其他單位的 PostCSS插件。

plugins: {
 px2units: {
  filter: /.wxss$/
 }
},

注意：根據(jù)實(shí)驗(yàn)所得只對(duì)wxss文件起作用，在wxml的行內(nèi)樣式不改變。

//輸入
.userinfo-nickname {
 width: 200px;
 height: 200px;/*no*/
 margin: 200rpx;
}

//輸出
.userinfo-nickname {
 width: 200rpx;
 height: 200px;
 margin: 200rpx;
}

略微有點(diǎn)雞肋，雖然會(huì)節(jié)省一點(diǎn)微不足道的代碼量，但是它本身還是有些可能需要用到的配置項(xiàng)的。

配置項(xiàng)	作用
divisor(Number): 除數(shù)	轉(zhuǎn)換后的值等于 pixel / divisor
multiple(Number): 倍數(shù)	轉(zhuǎn)換后的值等于 pixel * multiple
decimalPlaces(Number)	小數(shù)點(diǎn)后保留的位數(shù)
comment(String)	不轉(zhuǎn)換px單位的注釋，默認(rèn)為 /no/
targetUnits(String)	轉(zhuǎn)換單位，默認(rèn)值為 rpx

wepy-plugin-replace

文本替換,為 plugins 添加 replace 對(duì)象，支持單個(gè)或者多個(gè)規(guī)則，多個(gè)規(guī)則可以以 Array 或者 Object 實(shí)現(xiàn)，filter 的對(duì)象為生成后文件的路徑，例如'dist/app.js'，每個(gè)規(guī)則也同時(shí)支持多個(gè)替換條目，同樣是以 Array 或者 Object 實(shí)現(xiàn)。

module.exports.plugins = {
 'replace': {
  filter: /moment\.js$/,
  config: {
   find: /([\w\[\]a-d\.]+)\s*instanceof Function/g,
   replace: function (matchs, word) {
    return ' typeof ' + word + " ==='function' ";
   }
  }
 }
};

用法很簡(jiǎn)單，指定后綴文件匹配規(guī)則替換函數(shù)。

生產(chǎn)

就以我的一個(gè)項(xiàng)目為例，在不用插件的情況下打包體積是6.04M。

然后看看怎么一步步將其體積減少。

wepy-plugin-uglifyjs

JS壓縮插件

module.exports.plugins = {
 'uglifyjs': {
  filter: /\.js$/,
  config: {
  }
 },
};

因?yàn)樾〕绦蚧綣S代碼為主，所以這個(gè)效果非常可觀，文檔只寫了這個(gè)用法，還有很多自定義選項(xiàng)需要自己去研究，文檔給出的參數(shù)說(shuō)明鏈接是UglifyJS2，即使如此，單單JS一項(xiàng)都好厲害。

使用前	使用后	壓縮率
6.04M	2.76M	45.69%

wepy-plugin-filemin

文件壓縮插件支持css，xml，json

module.exports.plugins = {
 'filemin': {
  filter: /\.(json|wxml|xml)$/
 }
};

使用前	使用后	壓縮率
2.76M	2.72M	98.55%

唔。。。

有點(diǎn)尷尬，那點(diǎn)體積真的微不足道，一來(lái)樣式本來(lái)就不多，二來(lái)css本身壓縮空間有限，不可能把樣式屬性簡(jiǎn)化吧，聊勝于無(wú)。

wepy-plugin-imagemin

圖片壓縮插件

module.exports.plugins = {
 'imagemin': {
  filter: /\.(jpg|png|jpeg)$/,
  config: {
   'jpg': {
    quality: 80
   },
   'png': {
    quality: 80
   }
  }
 }
};

參數(shù)說(shuō)明請(qǐng)看imagemin

使用前	使用后	壓縮率
2.72M	2.24M	82.35%

不得不說(shuō)還是可以的，基本用法大家用過(guò)打包器都不陌生就不說(shuō)了,直到某一天騰訊出了一款重量大殺器，請(qǐng)看看下面——

WeCOS

騰訊推出的小程序瘦身工具，通過(guò) WeCOS，小程序項(xiàng)目中的圖片資源會(huì)自動(dòng)上傳到 COS 上，且 WeCOS 自動(dòng)替換代碼中圖片資源地址的引用為線上地址，移除項(xiàng)目目錄中的圖片資源，從而減小代碼包大小，解決包大小超過(guò)限制的問(wèn)題。

前期準(zhǔn)備工作：

進(jìn)入騰訊云官網(wǎng)，注冊(cè)騰訊云賬戶，指引參考注冊(cè)騰訊云。
登錄對(duì)象存儲(chǔ)控制臺(tái)，開通對(duì)象存儲(chǔ)服務(wù)，創(chuàng)建存儲(chǔ)桶，指引參考創(chuàng)建存儲(chǔ)桶
通過(guò) GitHub 地址下載 WeCOS 工具。
在 Node.js 官網(wǎng)下載環(huán)境并安裝。

我就默認(rèn)你們都搞好了前期，然后我們先安裝插件

npm install wecos -g

在與開發(fā)目錄app同目錄下創(chuàng)建一個(gè) wecos.config.json 配置文件，在配置里填寫基本的配置信息。

appDir 指定了小程序開發(fā)目錄。
appid 為騰訊云賬號(hào)的appid。
bucketname 是為存儲(chǔ)圖片創(chuàng)建的 bucket 的名稱，這里是名為 weixintest 的 bucket。
folder 可以指定到 bucket 下的某個(gè)目錄，本文指定到 /wxtest 目錄下。
region 是指定上傳到 COS 的指定地區(qū)，這里指定為 tj ，即天津。目前COS 支持天津、上海、廣州。
secret_key、secret_id是賬戶密鑰，用戶可以自行到騰訊云 COS 控制臺(tái)上獲取。

之后直接運(yùn)行命令

wecos

命令行顯示項(xiàng)目中的圖片上傳成功。翻看項(xiàng)目目錄，發(fā)現(xiàn)圖片已經(jīng)被刪除，代碼中的圖片引用也被換成了線上的地址，項(xiàng)目包一下子小了。同時(shí)，WeCOS 很貼心的在開發(fā)項(xiàng)目外生成了個(gè) wecos_backup 目錄，來(lái)保存原來(lái)的圖片作為備份。除此之外，WeCOS 默認(rèn)啟用監(jiān)聽(tīng)模式，這是為了讓開發(fā)過(guò)程中無(wú)感知，當(dāng)我們不再進(jìn)行項(xiàng)目開發(fā)，停止運(yùn)行 WeCOS 即可。

和wepy-plugin-imagemin相比。