導語

最近很長一段時(shí)間沒有更新博客，一方面是(shì)自己最近參與了(le／liǎo)小程序的(de)開發，另一方面也(yě)是(shì)自己略有些怠惰，給自己記個(gè)過~那麽現在(zài)既然回到(dào)學校那麽還是(shì)要(yào / yāo)分享一些知識的(de)。

前一陣子(zǐ)參與微信小程序開發時(shí)遇到(dào)了(le／liǎo)一個(gè)小問題，就(jiù)是(shì)圖片的(de)加載速度不(bù)理想。即使我們對于(yú)圖像的(de)大(dà)小一縮再縮，但後台服務器中200-300KB的(de)圖片在(zài)小程序裏往往需要(yào / yāo)等待數十秒才能加載完畢（僅在(zài)安卓機上(shàng)測試過，蘋果應該優化得好一些），這(zhè)個(gè)圖片加載的(de)速度導緻我們的(de)小程序體驗比較糟糕。我經過搜索發現webp這(zhè)種圖片格式可能可以(yǐ)爲(wéi / wèi)我們提供一個(gè)可行的(de)替代方案。

知識補充

WebP（發音：weppy）是(shì)一種同時(shí)提供了(le／liǎo)有損壓縮與無損壓縮（可逆壓縮）的(de)圖片文件格式，派生自影像編碼格式VP8，被認爲(wéi / wèi)是(shì)WebM多媒體格式的(de)姊妹項目，是(shì)由Google在(zài)購買On2 Technologies後發展出(chū)來(lái)，以(yǐ)BSD授權條款發布。
WebP最初在(zài)2010年發布，目标是(shì)減少文件大(dà)小，但達到(dào)和(hé / huò)JPEG格式相同的(de)圖片質量，希望能夠減少圖片檔在(zài)網絡上(shàng)的(de)發送時(shí)間。根據Google較早的(de)測試，WebP的(de)無損壓縮比網絡上(shàng)找到(dào)的(de)PNG檔少了(le／liǎo)45％的(de)文件大(dà)小，即使這(zhè)些PNG檔在(zài)使用pngcrush和(hé / huò)PNGOUT處理過，WebP還是(shì)可以(yǐ)減少28％的(de)文件大(dà)小。

維基百科

說(shuō)人(rén)話？好。webp就(jiù)是(shì)谷歌發布的(de)一款可以(yǐ)在(zài)保證圖片質量較爲(wéi / wèi)完整的(de)情況下壓縮率較高的(de)網絡圖片格式。

這(zhè)麽一看，webp豈不(bù)是(shì)無敵？實際上(shàng)對于(yú)我們的(de)項目它目前還是(shì)有局限性的(de)：iOS端的(de)微信小程序是(shì)不(bù)支持webp的(de)。

但是(shì)方法總是(shì)有的(de)，既然iOS有它自己的(de)優化方法，那麽我就(jiù)不(bù)讓它搭上(shàng)webp這(zhè)班車了(le／liǎo)，我們可以(yǐ)判斷設備的(de)類型，然後針對安卓的(de)手機進行優化。

教程

作案工具

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

手段

首先我們需要(yào / yāo)定義一個(gè)全局變量作爲(wéi / wèi)判斷是(shì)否爲(wéi / wèi)蘋果設備的(de)依據。所有的(de)全局變量均在(zài)app.js裏定義，在(zài)app.js中加入全局變量iOS，并用wx.getSystemInfo獲取設備信息進行判斷：

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

到(dào)這(zhè)裏我們做好了(le／liǎo)設備類型的(de)判斷，接下來(lái)我們就(jiù)要(yào / yāo)在(zài)獨立的(de)頁面中進行鏈接替換。打個(gè)比方，如果這(zhè)台設備是(shì)蘋果，那麽圖片鏈接就(jiù)使用 …/a.png ；如果是(shì)安卓，那麽鏈接就(jiù)換成 …/a.webp 。

給出(chū)一個(gè)示例頁面：

html:

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

javascript:

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

這(zhè)時(shí)我們在(zài)js中加入鏈接替換的(de)内容：

const app = getApp();                               //這(zhè)行代碼很重要(yào / yāo)，用來(lái)從app.js中獲取全局變量

Page({
  data: {
    img1:"../a.png",
  },
  //事件處理函數，onLoad指在(zài)頁面加載中的(de)操作
 >: function () {
    if (!app.globalData.iOS) {                      //app.globalData.iOS即爲(wéi / wèi)上(shàng)面定義的(de)全局變量，如果iOS爲(wéi / wèi)假，則替換鏈接
      this.setData({
        img1:"../a.webp",
      });
    }
  },
})

這(zhè)樣就(jiù)完成了(le／liǎo)webp的(de)替換，還是(shì)挺容易的(de)，沒有想象中的(de)那麽複雜。唯一的(de)問題是(shì)頁面多了(le／liǎo)以(yǐ)後替換起來(lái)會比較麻煩，不(bù)過如果都把圖片的(de)數據寫在(zài)js裏的(de)話，替換起來(lái)會快很多。