三步瘦身,騰訊云教你做名副其實「小程序」
小程序發布后,很多小伙伴已經迫不及待躍躍欲試了。騰訊云***時間推出了一站式小程序解決方案,其中針對微信官方對于小程序存儲限制要求,還特別量身打造了小程序瘦身方案WeCOS。
同時,騰訊云所有新用戶都可享有50G的免費存儲空間和10G免費流量。這也意味著,大部分的小程序開發者都可以享受到免費的騰訊云COS服務。
為什么我們需要 WeCOS ?
為了提升小程序體驗流暢度,編譯后的代碼包大小需小于1MB,大于1MB的代碼包將上傳失敗。
上面這段話是在小程序官方文檔里給出的,每個項目不能超過 1MB,超過1MB會導致項目文件在上傳的時候上傳失敗,如圖1。在我們平時的開發中,通常會引用大量本地圖片資源。而大家都知道,圖片就是資源占用的元兇,它隨時能讓包的大小超過10MB、100MB。
▲圖1.開發者工具在上傳時不允許代碼包超過1MB
常見的解決方法是:把圖片傳到圖床進行存儲,刪掉本地圖片,然后替換圖片引用的地址。但是目前小程序開發者工具的功能還比較單一,無法批量替換。用戶要么需要使用其他編輯器替換項目文件中圖片的引用地址為線上地址,要么手動去替換。但這兩種方式對于開發者而言都比較繁瑣,在修改引用的同時還需要小心翼翼,因為在大量操作的過程中難免會引入其他問題。
為此,騰訊云推出了針對該問題的解決方案:WeCOS。
什么是 WeCOS 呢?
WeCOS 是一個本地命令行工具(也提供 npm 包),主要用于幫助開發者解決小程序包超過大小限制的問題。WeCOS 不僅支持自動將小程序項目的圖片資源上傳到配置好的騰訊云對象存儲服務(COS)上存儲,同時,還可以自動替換項目代碼中本地資源引用地址為線上 URL,并移除項目目錄中的圖片資源。為小程序項目包瘦身,一鍵解決項目包超過 1MB 的煩惱。
開始使用
我們有一個開發好的小程序開發目錄「app」,目錄大小為 10M。目錄下有大量圖片且代碼中有對圖片資源的引用。為了能夠上傳并正常運行項目代碼,下面來示范如何使用騰訊云 WeCOS 來解決項目***大的問題。項目目錄如圖 2。
▲圖2. 待處理的開發目錄
根據 WeCOS 的使用指引,只需三步,使用十分簡單。
***步,前期準備
- 注冊騰訊云賬號,開通COS并創建 Bucket。
- 在本機上安裝 Node.js 的環境。
第二步,安裝 WeCOS 并修改配置文件
在命令行中使用 node.js 自帶的 npm 工具,輸入`npm install wecos -g`,等待完成安裝。-g 表示全局安裝,這樣才能全局調用 wecos 命令,安裝如圖3。
▲圖3. 命令行輸入安裝wecos
根據指引,在與開發目錄 app 同目錄下創建一個 wecos.config.json配置文件,在配置里填寫基本的配置信息。配置文件如圖4。
▲圖4.同目錄下創建wecos.config.json文件
wecos.config.json 里填寫了最基本的配置項,如圖 5。
其中,
- appDir 指定了小程序開發目錄。
- appid 為騰訊云賬號的 appid。
- bucketname 是為存儲圖片創建的 bucket 的名稱,這里是名為「weixintest」的bucket。
- folder 可以指定到 bucket 下的某個目錄,本文指定到「/wxtest」目錄下。
- region 是指定上傳到COS的指定地區,這里指定為「tj」,即天津。目前COS支持天津、上海、廣州。
- secret_key、secret_id 是賬戶密鑰,用戶可以自行到騰訊云COS控制臺上獲取。
以上信息指定了開發目錄以及圖片要上傳到的 COS 的地址,完成這些配置,基本上已經完工。
▲圖5. wecos.config.json的配置
第三步,運行程序
***,我們在命令行中執行 wecos 命令,如圖6。
▲圖6.執行wecos命令
可以看到,命令行顯示項目中的三個圖片上傳成功。翻看項目目錄,發現圖片已經被刪除,代碼中的圖片引用也被換成了線上的地址,項目包一下子小了。同時,WeCOS 很貼心的在開發項目外生成了個 wecos_backup 目錄,來保存原來的圖片作為備份。除此之外,WeCOS 默認啟用監聽模式,這是為了讓開發過程中無感知,當我們不再進行項目開發,停止運行 WeCOS 即可。目錄如圖 7。
▲圖7. WeCOS處理后的項目
被處理后的整個項目目錄只剩下不到 5KB,用微信小程序開發者工具預覽我們的小程序發現除了圖片部分的更改,其他部分跟處理之前沒有什么差別。此時,我們可以重新上傳我們的小程序代碼,代碼很順利的上傳成功了,1MB 的限制什么的不再是問題。如圖8。
▲圖8.處理后的代碼包被上傳成功
除了基礎配置之外,WeCOS 還提供一些個性化的高級配置(說是高級配置,使用起來其實也是十分簡便)。如自定義域名替換,匹配的圖片文件后綴,是否開啟圖片壓縮等等。如果有需要可以直接參考https://github.com/tencentyun/wecos上的使用介紹。
以上為大家介紹了一遍 WeCOS 的基本用法。相信如此方便實用、短小精悍的工具一定能幫助大家更方便的創建微信小程序。