快捷導(dǎo)航

微信小程序如何獲取網(wǎng)絡(luò)狀態(tài)

更新時間：2019年07月26日 16:54:16 作者：劍仙6

這篇文章主要介紹了微信小程序如何獲取網(wǎng)絡(luò)狀態(tài),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

前言

手機連接到互聯(lián)網(wǎng)有幾種方式：Wifi、2G、3G、4G，包括很快到來的5G，每種方式的上傳速度和下載速度差異很大，它們的計費方式的差異也導(dǎo)致用戶在使用互聯(lián)網(wǎng)服務(wù)的時候有不同的使用習(xí)慣。

Wifi相對于其他幾種網(wǎng)絡(luò)連接方式，其速度會更快。Wifi一般都是免費供用戶使用，通過移動數(shù)據(jù)網(wǎng)絡(luò)是需要根據(jù)使用流量進行計費的。我們考慮這樣一個場景，小程序需要下載一些文檔，然后通過小程序的能力去預(yù)覽這個文檔，這些文檔可能文件體積比較大，對于某些用戶來說，他們并不想耗費太多的數(shù)據(jù)流量去預(yù)覽文檔?？紤]到這樣的情況，我們可以通過小程序提供的獲取網(wǎng)絡(luò)狀態(tài)的能力，做一些更友好的體驗提示。

代碼利用wx.getNetworkType獲取網(wǎng)絡(luò)狀態(tài)

代碼：

// 預(yù)覽文檔
 lookFile(){
  wx.getNetworkType({
   success: function (res) {
    // networkType字段的有效值：
    // wifi/2g/3g/4g/unknown(Android下不常見的網(wǎng)絡(luò)類型)/none(無網(wǎng)絡(luò))
    if (res.networkType == 'wifi') {
     // 從網(wǎng)絡(luò)上下載pdf文檔
     wx.downloadFile({
      url: 'https://pic25.nipic.com/20121205/10197997_003647426000_2.jpg',
      success: function (res) {
       // 下載成功之后進行預(yù)覽文檔
       wx.openDocument({
        filePath: res.tempFilePath
       })
      }
     })
    } else {
     wx.showModal({
      title: '提示',
      content: '當(dāng)前為非Wifi環(huán)境，確定下載嗎？',
      confirmText: '確定',
      cancelText: '取消',
      success: function (res) {
       if (res.confirm) {
        console.log('確定操作')
        wx.downloadFile({
         url: 'https://pic25.nipic.com/20121205/10197997_003647426000_2.jpg',
         success: function (res) {
          // 下載成功之后進行預(yù)覽文檔
          wx.openDocument({
           filePath: res.tempFilePath
          })
         }
        })
       } else if (res.cancel) {
        console.log('取消操作')
        wx.showToast({
         title:'取消成功'
        })
       }
      }
     })
    }
   }
  })
 }

某些情況下，我們的手機連接到網(wǎng)絡(luò)的方式會動態(tài)變化，例如手機設(shè)備連接到一個信號不穩(wěn)定的Wifi熱點，導(dǎo)致手機會經(jīng)常從Wifi切換到移動數(shù)據(jù)網(wǎng)絡(luò)。小程序宿主環(huán)境也提供了一個可以動態(tài)監(jiān)聽網(wǎng)絡(luò)狀態(tài)變化的接口wx.onNetworkStatusChange，讓開發(fā)者可以及時根據(jù)網(wǎng)絡(luò)狀況去調(diào)整小程序的體驗，wx.onNetworkStatusChange這個接口的使用場景留給讀者來思考。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: