微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài)
前言
手機(jī)連接到互聯(lián)網(wǎng)有幾種方式:Wifi、2G、3G、4G,包括很快到來的5G,每種方式的上傳速度和下載速度差異很大,它們的計(jì)費(fèi)方式的差異也導(dǎo)致用戶在使用互聯(lián)網(wǎng)服務(wù)的時(shí)候有不同的使用習(xí)慣。
Wifi相對于其他幾種網(wǎng)絡(luò)連接方式,其速度會更快。Wifi一般都是免費(fèi)供用戶使用,通過移動數(shù)據(jù)網(wǎng)絡(luò)是需要根據(jù)使用流量進(jìn)行計(jì)費(fèi)的。我們考慮這樣一個(gè)場景,小程序需要下載一些文檔,然后通過小程序的能力去預(yù)覽這個(gè)文檔,這些文檔可能文件體積比較大,對于某些用戶來說,他們并不想耗費(fèi)太多的數(shù)據(jù)流量去預(yù)覽文檔??紤]到這樣的情況,我們可以通過小程序提供的獲取網(wǎng)絡(luò)狀態(tài)的能力,做一些更友好的體驗(yàn)提示。
代碼利用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) {
// 下載成功之后進(jìn)行預(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) {
// 下載成功之后進(jìn)行預(yù)覽文檔
wx.openDocument({
filePath: res.tempFilePath
})
}
})
} else if (res.cancel) {
console.log('取消操作')
wx.showToast({
title:'取消成功'
})
}
}
})
}
}
})
}
某些情況下,我們的手機(jī)連接到網(wǎng)絡(luò)的方式會動態(tài)變化,例如手機(jī)設(shè)備連接到一個(gè)信號不穩(wěn)定的Wifi熱點(diǎn),導(dǎo)致手機(jī)會經(jīng)常從Wifi切換到移動數(shù)據(jù)網(wǎng)絡(luò)。小程序宿主環(huán)境也提供了一個(gè)可以動態(tài)監(jiān)聽網(wǎng)絡(luò)狀態(tài)變化的接口wx.onNetworkStatusChange,讓開發(fā)者可以及時(shí)根據(jù)網(wǎng)絡(luò)狀況去調(diào)整小程序的體驗(yàn),wx.onNetworkStatusChange這個(gè)接口的使用場景留給讀者來思考。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
webpack5新特性Asset?Modules資源模塊詳解
這篇文章主要為大家介紹了webpack5新特性Asset?Modules資源模塊詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
前端實(shí)現(xiàn)HTML網(wǎng)頁轉(zhuǎn)PDF并導(dǎo)出
這篇文章主要為大家詳細(xì)介紹了前端如何通過html2canvas和jsPDF實(shí)現(xiàn)HTML網(wǎng)頁轉(zhuǎn)PDF并導(dǎo)出,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2025-01-01
javascript Array.sort() 跨瀏覽器下需要考慮的問題
最近組里項(xiàng)目需要一個(gè)簡單的Table排序的功能,這個(gè)功能實(shí)現(xiàn)起來很簡單,并且網(wǎng)上也有很多現(xiàn)成的代碼,因此任務(wù)很快完成。2009-12-12
setTimeout內(nèi)不支持jquery的選擇器的解決方案
在JS中無論是setTimeout還是setInterval,在使用函數(shù)名作為調(diào)用句柄時(shí)都不能帶參數(shù),而在許多場合必須要帶參數(shù),這就需要想方法解決。2015-04-04
JavaScript人臉識別技術(shù)及臉部識別JavaScript類庫Tracking.js
人臉識別的JavaScript程序包是Face Detection,它是由Jay Salvat和Liu Liu開發(fā)的。它是一個(gè)標(biāo)準(zhǔn)的jQuery插件,通過對提供的圖片進(jìn)行分析,返回所有找到的臉部圖像的坐標(biāo),感興趣的朋友跟著小編一起學(xué)習(xí)js人臉識別技術(shù)及臉部識別JavaScript類庫Tracking.js吧2015-09-09
淺談JavaScript中面向?qū)ο蠹夹g(shù)的模擬
淺談JavaScript中面向?qū)ο蠹夹g(shù)的模擬...2006-09-09
微信小程序picker組件下拉框選擇input輸入框的實(shí)例
這篇文章主要介紹了微信小程序picker組件下拉框選擇input輸入框的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09
Javascript與vbscript數(shù)據(jù)共享
Javascript與vbscript數(shù)據(jù)共享...2007-01-01

