WeCOS——微信小程序 COS 瘦身解決方案
通過WeCOS，你的小程序項目中的圖片資源會自動上傳到你的騰訊云對象存儲服務（COS），且WeCOS自動替換代碼中圖片資源地址的引用為線上地址，移除項目目錄中的圖片資源，從而減小小程序包大小，為你解決包大小超過限制的煩惱。
為什么你需要 WeCOS
為了提升小程序體驗流暢度，編譯后的代碼包大小需小于 1MB ，大于 1MB 的代碼包將上傳失敗。
在開發小程序的過程中，圖片資源通常會占用較大空間，很容易超出官方的1MB限制。這時候，使用WeCOS，可以讓你在開發過程中不需要關心圖片資源占用多少空間的問題，專注于自己的邏輯開發。
準備工作
- 進入騰訊云官網，注冊帳號
- 登錄云對象存儲服務（COS）控制臺，開通COS服務，創建Bucket
- 安裝Node.js環境
安裝
npm install -g wecos
基本配置
在你的小程序目錄同級下創建wecos.config.json文件
wecos.config.json配置項例子：
{
"appDir": "./app",
"cos": {
"appid": "1234567890",
"bucketname": "wxapp",
"folder": "/", //資源存放在bucket的哪個目錄下
"region": "wx", //創建bucket時選擇的地域簡稱
"secret_key": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"secret_id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
}
| 配置項 | 類型 | 說明 |
|---|---|---|
| appDir | [String] | 默認 ./app，小程序項目目錄 |
| cos | [Object] | 必填，填寫需要上傳到COS對應的配置信息，部分信息可在COS控制臺查看 |
使用
在配置文件同級目錄下命令行執行
wecos
注意，執行前需要在該目錄下創建wecos.config.json文件
高級配置
| 配置項 | 類型 | 說明 |
|---|---|---|
| backupDir | [String] | 默認 ./wecos_backup，備份目錄 |
| uploadFileSuffix | [Array] | 默認 [".jpg", ".png", ".gif"]，圖片上傳后綴名配置 |
| uploadFileBlackList | [Array] | 默認 []，圖片資源黑名單 |
| replaceHost | [String] | 默認 ''，把指定域名替換成 targetHost |
| targetHost | [String] | 默認 ''，使用自定義域名 |
| compress | [Boolean] | 默認 false，是否開啟壓縮圖片 |
| watch | [Boolean] | 默認 true，是否開啟實時監聽項目目錄 |
設置備份目錄
由于WeCOS在運行時會自動將項目下的圖片上傳至COS然后刪除，這樣可能存在丟失源文件的風險，因此我們也提供了備份源文件的功能，每上傳一張圖片，會在項目同級的某個目錄下備份該文件
為了方便使用，可以通過以下配置來修改備份目錄名，如果不需要使用該功能，可以設置為空值
"backupDir": "./wecos_backup"
設置圖片后綴
有些時候，我們需要限制上傳圖片的格式，例如只允許jpg格式，可以通過WeCOS提供的圖片后綴配置項來定義
WeCOS默認支持jpg,png,gif三種格式，假如你還需要添加其他格式，例如webp，可以在該配置項中添加
"uploadFileSuffix": [".jpg",".png",".gif",".webp"]
設置圖片黑名單
開發過程中，某些特定的圖片我們不希望被上傳，可以通過WeCOS的黑名單配置來解決這個問題，配置后上傳程序會自動忽略掉這些圖片
黑名單配置支持目錄或具體到文件名的寫法
"uploadFileBlackList": ["./images/logo.png","./logo/"]
自定義域名
如果希望 COS 文件鏈接使用自定義的域名，可以配置 targetHost 代替默認域名，可以省略：http://：
"targetHost": "http://example.com"
如果代碼中的圖片鏈接想換一個域名，可以配置 replaceHost targetHost 來實現。
"replaceHost": "http://wx-12345678.myqcloud.com", "targetHost": "https://example.com"
設置圖片黑名單
開發過程中，某些特定的圖片我們不希望被上傳，可以通過WeCOS的黑名單配置來解決這個問題，配置后上傳程序會自動忽略掉這些圖片
黑名單配置支持目錄或具體到文件名的寫法
"uploadFileBlackList": ["./images/logo.png","./logo/"]
開啟圖片壓縮
圖片上傳到COS之后雖然大大減輕了程序包的大小，但如果圖片自身體積過大，訪問速度也會影響到用戶體驗
令人激動的是，WeCOS在圖片上云的基礎功能上還額外提供了基于騰訊云萬象優圖的圖片壓縮功能。
首先，你需要在萬象優圖控制臺創建 COS的同名bucket
然后，開啟該選項，資源將被壓縮后上傳（注：如果圖片已經小到一定程度，壓縮后大小可能不會變化）
"compress": true
設置實時監聽
WeCOS默認實時監聽項目目錄變化，自動處理圖片資源，在開發過程中，如果覺得實時監聽不方便，或者只需要一次性處理就停止，可以修改該配置，程序將只會執行一次后退出
"watch": false
高級用法
如果你除了上述使用命令行來執行的方式外，還想使用其他的方式，例如定制化成自己的模塊，我們也提供了直接引用的使用方法滿足你個性化的需求
var wecos = require('wecos'</span>);/**</span> * option 可選 [String|Object] * 傳入 String，指定配置文件路徑 * 傳入 Object，指定配置項 */</span> wecos([option]);
//指定配置文件路徑</span> wecos('./wecos-config.js'</span>);
//指定配置項</span> wecos({ appDir: './xxx'</span>, cos: { ... } }); </pre>
相關
WeCOS-UGC-DEMO——小程序用戶資源上傳COS DEMO
COS-AUTH——COS鑒權服務器DEMO