導語

最近很長一段時間沒有更新博客，一方面是自己最近參與了小程序的開發，另一方面也是自己略有些怠惰，給自己記個過~那么現在既然回到學校那么還是要分享一些知識的。

前一陣子參與微信小程序開發時遇到了一個小問題，就是圖片的加載速度不理想。即使我們對于圖像的大小一縮再縮，但后臺服務器中200-300KB的圖片在小程序里往往需要等待數十秒才能加載完畢（僅在安卓機上測試過，蘋果應該優化得好一些），這個圖片加載的速度導致我們的小程序體驗比較糟糕。我經過搜索發現webp這種圖片格式可能可以為我們提供一個可行的替代方案。

知識補充

WebP（發音：weppy）是一種同時提供了有損壓縮與無損壓縮（可逆壓縮）的圖片文件格式，派生自影像編碼格式VP8，被認為是WebM多媒體格式的姊妹項目，是由Google在購買On2 Technologies后發展出來，以BSD授權條款發布。
WebP最初在2010年發布，目標是減少文件大小，但達到和JPEG格式相同的圖片質量，希望能夠減少圖片檔在網絡上的發送時間。根據Google較早的測試，WebP的無損壓縮比網絡上找到的PNG檔少了45％的文件大小，即使這些PNG檔在使用pngcrush和PNGOUT處理過，WebP還是可以減少28％的文件大小。

維基百科

說人話？好。webp就是谷歌發布的一款可以在保證圖片質量較為完整的情況下壓縮率較高的網絡圖片格式。

這么一看，webp豈不是無敵？實際上對于我們的項目它目前還是有局限性的：iOS端的微信小程序是不支持webp的。

但是方法總是有的，既然iOS有它自己的優化方法，那么我就不讓它搭上webp這班車了，我們可以判斷設備的類型，然后針對安卓的手機進行優化。

教程

作案工具

• vscode
• 微信小程序開發工具

手段

首先我們需要定義一個全局變量作為判斷是否為蘋果設備的依據。所有的全局變量均在app.js里定義，在app.js中加入全局變量iOS，并用wx.getSystemInfo獲取設備信息進行判斷：

App({onLaunch: function () {var that = this;wx.getSystemInfo({success: (res) => {console.log(res); //res是一個對象，包含設備信息。其中res.system的內容則是設備系統的版本if (res.system.indexOf("iOS") != -1) { //如果系統版本中有iOS三個字母，則判定為蘋果設備that.globalData.iOS = true;}},});globalData: {iOS: false, //默認iOS的值為false}, })

到這里我們做好了設備類型的判斷，接下來我們就要在獨立的頁面中進行鏈接替換。打個比方，如果這臺設備是蘋果，那么圖片鏈接就使用 …/a.png ；如果是安卓，那么鏈接就換成 …/a.webp 。

給出一個示例頁面：

html:

<!--簡單的頁面，一個view標簽，一張圖，圖片鏈接用js傳入數據--> <view class="container"><image src = '{{img1}}' /> </view>

javascript:

Page({ //傳入頁面的數據data: {img1:"../a.png",}, })

這時我們在js中加入鏈接替換的內容：

const app = getApp(); //這行代碼很重要，用來從app.js中獲取全局變量Page({data: {img1:"../a.png",},//事件處理函數，onLoad指在頁面加載中的操作onLoad: function () {if (!app.globalData.iOS) { //app.globalData.iOS即為上面定義的全局變量，如果iOS為假，則替換鏈接this.setData({img1:"../a.webp",});}}, })

這樣就完成了webp的替換，還是挺容易的，沒有想象中的那么復雜。唯一的問題是頁面多了以后替換起來會比較麻煩，不過如果都把圖片的數據寫在js里的話，替換起來會快很多。

總結

以上是生活随笔為你收集整理的如何利用 webp 进行小程序图片加载速度的优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。