小程序發(fā)布后，很多小伙伴已經(jīng)迫不及待躍躍欲試了。騰訊云***時(shí)間推出了一站式小程序解決方案，其中針對(duì)微信官方對(duì)于小程序存儲(chǔ)限制要求，還特別量身打造了小程序瘦身方案WeCOS。

同時(shí)，騰訊云所有新用戶都可享有50G的免費(fèi)存儲(chǔ)空間和10G免費(fèi)流量。這也意味著，大部分的小程序開發(fā)者都可以享受到免費(fèi)的騰訊云COS服務(wù)。

為什么我們需要 WeCOS ?

為了提升小程序體驗(yàn)流暢度，編譯后的代碼包大小需小于1MB，大于1MB的代碼包將上傳失敗。

上面這段話是在小程序官方文檔里給出的，每個(gè)項(xiàng)目不能超過(guò) 1MB，超過(guò)1MB會(huì)導(dǎo)致項(xiàng)目文件在上傳的時(shí)候上傳失敗，如圖1。在我們平時(shí)的開發(fā)中，通常會(huì)引用大量本地圖片資源。而大家都知道，圖片就是資源占用的元兇，它隨時(shí)能讓包的大小超過(guò)10MB、100MB。

▲圖1.開發(fā)者工具在上傳時(shí)不允許代碼包超過(guò)1MB

常見(jiàn)的解決方法是：把圖片傳到圖床進(jìn)行存儲(chǔ)，刪掉本地圖片，然后替換圖片引用的地址。但是目前小程序開發(fā)者工具的功能還比較單一，無(wú)法批量替換。用戶要么需要使用其他編輯器替換項(xiàng)目文件中圖片的引用地址為線上地址，要么手動(dòng)去替換。但這兩種方式對(duì)于開發(fā)者而言都比較繁瑣，在修改引用的同時(shí)還需要小心翼翼，因?yàn)樵诖罅坎僮鞯倪^(guò)程中難免會(huì)引入其他問(wèn)題。

為此，騰訊云推出了針對(duì)該問(wèn)題的解決方案：WeCOS。

什么是 WeCOS 呢?

WeCOS 是一個(gè)本地命令行工具(也提供 npm 包)，主要用于幫助開發(fā)者解決小程序包超過(guò)大小限制的問(wèn)題。WeCOS 不僅支持自動(dòng)將小程序項(xiàng)目的圖片資源上傳到配置好的騰訊云對(duì)象存儲(chǔ)服務(wù)(COS)上存儲(chǔ)，同時(shí)，還可以自動(dòng)替換項(xiàng)目代碼中本地資源引用地址為線上 URL，并移除項(xiàng)目目錄中的圖片資源。為小程序項(xiàng)目包瘦身，一鍵解決項(xiàng)目包超過(guò) 1MB 的煩惱。

開始使用

我們有一個(gè)開發(fā)好的小程序開發(fā)目錄「app」，目錄大小為 10M。目錄下有大量圖片且代碼中有對(duì)圖片資源的引用。為了能夠上傳并正常運(yùn)行項(xiàng)目代碼，下面來(lái)示范如何使用騰訊云 WeCOS 來(lái)解決項(xiàng)目***大的問(wèn)題。項(xiàng)目目錄如圖 2。

▲圖2. 待處理的開發(fā)目錄

根據(jù) WeCOS 的使用指引，只需三步，使用十分簡(jiǎn)單。

***步，前期準(zhǔn)備

• 注冊(cè)騰訊云賬號(hào)，開通COS并創(chuàng)建 Bucket。
• 在本機(jī)上安裝 Node.js 的環(huán)境。

第二步，安裝 WeCOS 并修改配置文件

在命令行中使用 node.js 自帶的 npm 工具，輸入`npm install wecos -g`，等待完成安裝。-g 表示全局安裝，這樣才能全局調(diào)用 wecos 命令，安裝如圖3。

▲圖3. 命令行輸入安裝wecos

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

▲圖4.同目錄下創(chuàng)建wecos.config.json文件

wecos.config.json 里填寫了最基本的配置項(xiàng)，如圖 5。

其中，

• 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)上獲取。

以上信息指定了開發(fā)目錄以及圖片要上傳到的 COS 的地址，完成這些配置，基本上已經(jīng)完工。

▲圖5. wecos.config.json的配置

第三步，運(yùn)行程序

***，我們?cè)诿钚兄袌?zhí)行 wecos 命令，如圖6。

▲圖6.執(zhí)行wecos命令

可以看到，命令行顯示項(xiàng)目中的三個(gè)圖片上傳成功。翻看項(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)聽模式，這是為了讓開發(fā)過(guò)程中無(wú)感知，當(dāng)我們不再進(jìn)行項(xiàng)目開發(fā)，停止運(yùn)行 WeCOS 即可。目錄如圖 7。

▲圖7. WeCOS處理后的項(xiàng)目

被處理后的整個(gè)項(xiàng)目目錄只剩下不到 5KB，用微信小程序開發(fā)者工具預(yù)覽我們的小程序發(fā)現(xiàn)除了圖片部分的更改，其他部分跟處理之前沒(méi)有什么差別。此時(shí)，我們可以重新上傳我們的小程序代碼，代碼很順利的上傳成功了，1MB 的限制什么的不再是問(wèn)題。如圖8。

▲圖8.處理后的代碼包被上傳成功

除了基礎(chǔ)配置之外，WeCOS 還提供一些個(gè)性化的高級(jí)配置(說(shuō)是高級(jí)配置，使用起來(lái)其實(shí)也是十分簡(jiǎn)便)。如自定義域名替換，匹配的圖片文件后綴，是否開啟圖片壓縮等等。如果有需要可以直接參考https://github.com/tencentyun/wecos上的使用介紹。

以上為大家介紹了一遍 WeCOS 的基本用法。相信如此方便實(shí)用、短小精悍的工具一定能幫助大家更方便的創(chuàng)建微信小程序。