当前位置: 首页 > 编程笔记 >

微信小程序 如何获取网络状态

郭星文
2023-03-14
本文向大家介绍微信小程序 如何获取网络状态,包括了微信小程序 如何获取网络状态的使用技巧和注意事项,需要的朋友参考一下

前言

手机连接到互联网有几种方式:Wifi、2G、3G、4G,包括很快到来的5G,每种方式的上传速度和下载速度差异很大,它们的计费方式的差异也导致用户在使用互联网服务的时候有不同的使用习惯。

Wifi相对于其他几种网络连接方式,其速度会更快。Wifi一般都是免费供用户使用,通过移动数据网络是需要根据使用流量进行计费的。我们考虑这样一个场景,小程序需要下载一些文档,然后通过小程序的能力去预览这个文档,这些文档可能文件体积比较大,对于某些用户来说,他们并不想耗费太多的数据流量去预览文档。考虑到这样的情况,我们可以通过小程序提供的获取网络状态的能力,做一些更友好的体验提示。

代码利用wx.getNetworkType获取网络状态

代码:

// 预览文档
 lookFile(){
  wx.getNetworkType({
   success: function (res) {
    // networkType字段的有效值:
    // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
    if (res.networkType == 'wifi') {
     // 从网络上下载pdf文档
     wx.downloadFile({
      url: 'https://pic25.nipic.com/20121205/10197997_003647426000_2.jpg',
      success: function (res) {
       // 下载成功之后进行预览文档
       wx.openDocument({
        filePath: res.tempFilePath
       })
      }
     })
    } else {
     wx.showModal({
      title: '提示',
      content: '当前为非Wifi环境,确定下载吗?',
      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) {
          // 下载成功之后进行预览文档
          wx.openDocument({
           filePath: res.tempFilePath
          })
         }
        })
       } else if (res.cancel) {
        console.log('取消操作')
        wx.showToast({
         title:'取消成功'
        })
       }
      }
     })
    }
   }
  })
 }

某些情况下,我们的手机连接到网络的方式会动态变化,例如手机设备连接到一个信号不稳定的Wifi热点,导致手机会经常从Wifi切换到移动数据网络。小程序宿主环境也提供了一个可以动态监听网络状态变化的接口wx.onNetworkStatusChange,让开发者可以及时根据网络状况去调整小程序的体验,wx.onNetworkStatusChange这个接口的使用场景留给读者来思考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍微信小程序获取手机网络状态的方法【附源码下载】,包括了微信小程序获取手机网络状态的方法【附源码下载】的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了微信小程序获取手机网络状态的方法。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 index.wxml布局文件代码 index.js逻辑文件代码 这里使用了wx.getNetworkType函数获取网络连接状态。详细

  • 本文向大家介绍微信小程序(三):网络请求,包括了微信小程序(三):网络请求的使用技巧和注意事项,需要的朋友参考一下 前文讲配置的时候我们说过,开发小程序时可以选择有 APPID 和 无 APPID ,两种方式。 1. 当有APPID的情况下,进行网络通信,只能和指定的域名进行通信。如果没有进行配置,编译时会报如下错误: 配置方法: 设置域名 需要在微信公众平台的小程序中设置域名。在微信小程序的设置

  • 本文向大家介绍微信小程序wx.getImageInfo()如何获取图片信息,包括了微信小程序wx.getImageInfo()如何获取图片信息的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 一.知识点 二.列子 (1).加载时 (2).上传图片时 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊

  • 本文向大家介绍微信小程序获取网络类型的方法示例 原创,包括了微信小程序获取网络类型的方法示例 原创的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了微信小程序获取网络类型的方法。分享给大家供大家参考,具体如下: 这里主要演示通过wx.getNetworkType获取当前网络类型的操作方法。代码如下: index.js: index.wxml: index.wxss: 运行结果: 希望本文所述

  • 本文向大家介绍微信小程序  网络请求API详解,包括了微信小程序  网络请求API详解的使用技巧和注意事项,需要的朋友参考一下 wx.request(OBJECT)发起的是https请求。一个微信小程序,同时只能有5个网络请求连接。 OBJECT参数说明:  效果图:  net.js net.wxml: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 本文向大家介绍微信小程序 如何保持登录状态,包括了微信小程序 如何保持登录状态的使用技巧和注意事项,需要的朋友参考一下 问题 由于wx.request()发起的每次请求对于服务器来说都是不同的会话(wx.request()请求是先经过微信服务器再到达我们的服务器),这样会导致后续请求都相当于未登录的状态。 解决方案 将登陆时后端返回的session保存在本地, 然后将session存放在cooki