導(dǎo)語

最近很長(zhǎng)一段時(shí)間沒有更新博客，一方面是自己最近參與了小程序的開發(fā)，另一方面也是自己略有些怠惰，給自己記個(gè)過~那么現(xiàn)在既然回到學(xué)校那么還是要分享一些知識(shí)的。

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

知識(shí)補(bǔ)充

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

維基百科

說人話？好。webp就是谷歌發(fā)布的一款可以在保證圖片質(zhì)量較為完整的情況下壓縮率較高的網(wǎng)絡(luò)圖片格式。

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

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

教程

作案工具

• vscode
• 微信小程序開發(fā)工具

手段

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

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

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

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

html:

<!--簡(jiǎn)單的頁面，一個(gè)view標(biāo)簽，一張圖，圖片鏈接用js傳入數(shù)據(jù)-->
<view class="container">
    <image src = '{{img1}}' />
</view>

javascript:

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

這時(shí)我們?cè)趈s中加入鏈接替換的內(nèi)容：

const app = getApp();                               //這行代碼很重要，用來從app.js中獲取全局變量

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

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