網(wǎng)絡(luò)是當(dāng)今信息時(shí)代的重要基石。無(wú)論是在移動(dòng)設(shè)備上還是在臺(tái)式電腦上，任何應(yīng)用程序的任何業(yè)務(wù)邏輯都需要依賴(lài)網(wǎng)絡(luò)進(jìn)行通信。對(duì)于移動(dòng)設(shè)備尤其如此。由于網(wǎng)絡(luò)環(huán)境的多變性，經(jīng)常會(huì)發(fā)現(xiàn)在網(wǎng)絡(luò)條件較差的情況下，某些業(yè)務(wù)邏輯無(wú)法正常工作。

因此，實(shí)時(shí)監(jiān)控小程序中的網(wǎng)絡(luò)狀態(tài)變化，成為解析者優(yōu)化或解決小程序中各種網(wǎng)絡(luò)問(wèn)題的必要手段。所以在小程序的開(kāi)發(fā)中，如何監(jiān)控網(wǎng)絡(luò)狀態(tài)的變化就成為了需要解決的核心問(wèn)題。

在接下來(lái)的內(nèi)容中，筆者將從以下問(wèn)題出發(fā)，為開(kāi)發(fā)者提供一些監(jiān)控網(wǎng)絡(luò)狀態(tài)變化的技術(shù)方案和實(shí)踐經(jīng)驗(yàn)：

1、小程序中如何獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)？

2. 監(jiān)控網(wǎng)絡(luò)狀態(tài)變化的方法有哪些？

3、小程序中如何監(jiān)控網(wǎng)絡(luò)狀態(tài)變化？

4. 如何應(yīng)用網(wǎng)絡(luò)狀態(tài)變化信息？

1、小程序中如何獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)？

在介紹獲取網(wǎng)絡(luò)狀態(tài)的方法之前，我們首先需要了解一下當(dāng)前可用的網(wǎng)絡(luò)分類(lèi)。他們是：

-無(wú)線上網(wǎng)

-4G(LTE)

-3G

-2G

- 蜂窩移動(dòng)電話(huà)

-沒(méi)有網(wǎng)絡(luò)

一般情況下，小程序需要判斷的網(wǎng)絡(luò)狀態(tài)只有兩種，即“有網(wǎng)絡(luò)”和“無(wú)網(wǎng)絡(luò)”。

在小程序中獲取當(dāng)前的網(wǎng)絡(luò)狀態(tài)，我們可以使用小程序官方提供的wx.getNetworkType() API接口。通過(guò)該接口返回的實(shí)時(shí)上網(wǎng)類(lèi)型可以判斷當(dāng)前的網(wǎng)絡(luò)情況。

wx.getNetworkType({

成功：函數(shù)（res）{

console.log(res.networkType)//返回網(wǎng)絡(luò)類(lèi)型，如wifi、2g、3g、4g、unknown、none

}

})

另外，在wx.getNetworkType()中，我們還可以根據(jù)當(dāng)前實(shí)時(shí)上網(wǎng)類(lèi)型來(lái)確認(rèn)當(dāng)前網(wǎng)絡(luò)的具體數(shù)據(jù)：（單位為kb/s）

- 無(wú)線網(wǎng)絡(luò)：971、45.5、22.5

-4克：418、10.8、3.2

-3克：1.4、0.45、0.15

-2克：0.23、0.05

2. 監(jiān)控網(wǎng)絡(luò)狀態(tài)變化的方法有哪些？

接下來(lái)我們需要進(jìn)一步說(shuō)明一下小程序中如何監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化，以及監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化的方法有哪些？

在小程序中監(jiān)控網(wǎng)絡(luò)狀態(tài)變化，我們通常使用wx.onNetworkStatusChange()接口。該接口的作用是當(dāng)網(wǎng)絡(luò)狀態(tài)發(fā)生變化時(shí)，小程序會(huì)推送相應(yīng)的事件信息。

基于該方法的監(jiān)控，我們可以監(jiān)控網(wǎng)絡(luò)狀態(tài)變化、進(jìn)行相關(guān)操作、在小程序頁(yè)面做出人性化的提示等。

wx.onNetworkStatusChange(函數(shù)(res){

console.log(res.isConnected)//返回一個(gè)布爾值。如果有網(wǎng)絡(luò)連接則為true，否則為false。

console.log(res.networkType)//返回網(wǎng)絡(luò)類(lèi)型，如wifi、2g、3g、4g、unknown、none

})

但需要注意的是，該方法僅適用于小程序在前臺(tái)運(yùn)行時(shí)。如果小程序無(wú)法成功獲取網(wǎng)絡(luò)狀態(tài)信息，建議考慮更改數(shù)據(jù)API，嘗試重連操作，或者引導(dǎo)用戶(hù)檢查網(wǎng)絡(luò)設(shè)置獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)。

除了上述方法之外，還可以創(chuàng)建一個(gè)網(wǎng)絡(luò)請(qǐng)求封裝類(lèi)來(lái)監(jiān)控每個(gè)網(wǎng)絡(luò)請(qǐng)求的成功與失敗、錯(cuò)誤碼等，根據(jù)網(wǎng)絡(luò)請(qǐng)求情況監(jiān)控網(wǎng)絡(luò)狀態(tài)。

3、小程序中如何監(jiān)控網(wǎng)絡(luò)狀態(tài)變化？

要監(jiān)控小程序的網(wǎng)絡(luò)狀態(tài)變化，最佳實(shí)踐是將網(wǎng)絡(luò)狀態(tài)應(yīng)用注入到小程序的整個(gè)生命周期中。

在小程序的生命周期中，我們可以通過(guò)app.js實(shí)現(xiàn)全局生命周期監(jiān)控，實(shí)時(shí)監(jiān)控網(wǎng)絡(luò)狀態(tài)：

1、在app.js中創(chuàng)建網(wǎng)絡(luò)狀態(tài)函數(shù)作為全局變量，并將網(wǎng)絡(luò)狀態(tài)初始值設(shè)置為false；

2、監(jiān)聽(tīng)wx.onNetworkStatusChange()接口，并在該接口的回調(diào)中更新網(wǎng)絡(luò)狀態(tài)；

3、由于小程序開(kāi)發(fā)中經(jīng)常會(huì)出現(xiàn)tab欄，所以需要為每個(gè)tabbar設(shè)置一個(gè)全局的網(wǎng)絡(luò)狀態(tài)變量來(lái)更新網(wǎng)絡(luò)狀態(tài)；

4、標(biāo)簽頁(yè)顯示時(shí)，監(jiān)聽(tīng)當(dāng)前標(biāo)簽對(duì)應(yīng)的網(wǎng)絡(luò)狀態(tài)變量；

5. 如果網(wǎng)絡(luò)狀態(tài)發(fā)生變化，請(qǐng)更新網(wǎng)絡(luò)狀態(tài)變量并更新圖標(biāo)等提示信息。

以下是小程序全局變量的示例代碼：

應(yīng)用程序（{

全局?jǐn)?shù)據(jù)：{

isConnected:true

}

})

網(wǎng)絡(luò)狀態(tài)變化的示例代碼如下：

wx.onNetworkStatusChange(函數(shù)(res){

this.globalData.isConnected=res.isConnected

})

更新網(wǎng)絡(luò)狀態(tài)變量的代碼如下：

wx.switchTab({

url:'/pages/index/index',

成功：函數(shù)（e）{

varpage=getCurrentPages().pop();

if(頁(yè)==未定義||頁(yè)==null)返回；

頁(yè)面.onLoad();

}

})

4. 如何應(yīng)用網(wǎng)絡(luò)狀態(tài)變化信息？

監(jiān)控到網(wǎng)絡(luò)狀態(tài)變化后，需要對(duì)其進(jìn)行進(jìn)一步的應(yīng)用操作。尤其是在網(wǎng)絡(luò)條件不太理想的情況下，如何在小程序中給用戶(hù)積極的提示是一個(gè)值得思考的問(wèn)題。

在應(yīng)用網(wǎng)絡(luò)狀態(tài)變化時(shí)，我們需要知道一些提示用戶(hù)的方法：

1.屏蔽提示或警告信息：當(dāng)網(wǎng)絡(luò)狀況較差或沒(méi)有網(wǎng)絡(luò)連接時(shí)，我們需要一種獨(dú)特的方式來(lái)提示用戶(hù)。這時(shí)候，屏蔽提示或者警告信息就是一個(gè)不錯(cuò)的選擇。

2、智能適配：當(dāng)網(wǎng)絡(luò)狀態(tài)不同、變化較快時(shí)，我們需要針對(duì)不同的網(wǎng)絡(luò)狀態(tài)做出不同的響應(yīng)攔截，通過(guò)智能適配解決不同網(wǎng)絡(luò)環(huán)境下小程序速度慢的問(wèn)題。

3、移動(dòng)網(wǎng)絡(luò)和WiFi的顯示方法：一般來(lái)說(shuō)，網(wǎng)絡(luò)狀況越好，小程序體驗(yàn)就會(huì)越好。但在不同的網(wǎng)絡(luò)環(huán)境下，不同的用戶(hù)體驗(yàn)是不同的。這時(shí)我們可以通過(guò)一些圖標(biāo)和標(biāo)志來(lái)提示當(dāng)前的網(wǎng)絡(luò)狀態(tài)，這樣可以讓用戶(hù)增加對(duì)不同網(wǎng)絡(luò)狀態(tài)的敏感度，更好的維護(hù)網(wǎng)絡(luò)體驗(yàn)。

總結(jié)

監(jiān)控小程序網(wǎng)絡(luò)狀態(tài)變化是小程序開(kāi)發(fā)中非常重要的一點(diǎn)，也是解決小程序網(wǎng)絡(luò)問(wèn)題的有效手段之一。具體來(lái)說(shuō)，我們可以從四個(gè)問(wèn)題入手：

1、小程序中如何獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)？

2. 監(jiān)控網(wǎng)絡(luò)狀態(tài)變化的方法有哪些？

3、小程序中如何監(jiān)控網(wǎng)絡(luò)狀態(tài)變化？

4. 如何應(yīng)用網(wǎng)絡(luò)狀態(tài)變化信息？

如何使用上述方法，需要結(jié)合具體的小程序業(yè)務(wù)場(chǎng)景進(jìn)行實(shí)際應(yīng)用。如果您還有其他實(shí)踐經(jīng)驗(yàn)，請(qǐng)?jiān)诒疚脑u(píng)論部分與我們分享。