小程序 监听网络、网速

大致搜索了一下,js监控网速都是通过下载来算出网络速度,所以基于网上的一些js案例,简单写了一个小程序版的网络监控

需要添加download域名哦

还有记得关闭setTimeout哦

// 下载事件
var downloadTask
// 下载开始时间
var start
// 下载结束时间 
var end
// 重复下载
var networkTimeOut
// 当前是否有网络连接
var networkConnected

var networkSpeed = {
  // 开始
  startNetwork: function(options) {
    this.network();
    wx.getNetworkType({
      success: function (res) {
        // 返回网络类型, 有效值:
        // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
        console.log('返回网络类型, 有效值:', res)
        if (res.networkType != 'none'){
          // 当前是否有网络连接
          networkConnected = true;
        }
      }
    })
    wx.onNetworkStatusChange(function (res) {
      console.log('当前是否有网络连接',res.isConnected)
      console.log(res.networkType)
      // 当前是否有网络连接
      networkConnected = res.isConnected;
    })
  },

  // 下载
  network: function(options) {
    console.log('开始下载')
    var self = this;
    start = new Date().getTime()
    if (!networkConnected){
      self.networkCallback({
        networkType: 3,
        networkContent: '没有网络,请检查网络连接'
      })
      networkTimeOut = setTimeout(() => {
        self.network();
      }, 1000);
      return;
    }
    downloadTask = wx.downloadFile({
      url: "下载地址",
      success: function(res) {
        end = new Date().getTime()
        // 根据下载文件大小来确定数值,我下载的内容大概700B
        if ((end - start) > 200) {
          console.log('网络差');
          self.networkCallback({
            networkType: 0,
            networkContent: '网络较差'
          })
        } else if (end - start > 100) {
          console.log('网络一般');
          self.networkCallback({
            networkType: 1,
            networkContent: '网络一般'
          })
        } else {
          console.log('网络好');
          self.networkCallback({
            networkType: 2,
            networkContent: '网络良好'
          })
        }
        networkTimeOut = setTimeout(() => {
          self.network();
        }, 1000);
      },
      fail: function(res) {
        console.log('网络差');
        self.networkCallback({
          networkType: 0,
          networkContent: '网络较差'
        })

        networkTimeOut = setTimeout(() => {
          self.network();
        }, 1000);
      }
    })
    // 监听downloadFile进度
    downloadTask.onProgressUpdate(function(res) {
      // console.log('下载进度', res.progress)
      // console.log('已经下载的数据长度', res.totalBytesWritten)
      // console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)

      if (res.progress < 100) {
        end = new Date().getTime()
        if ((end - start) > 200) {
          console.log('网络差');
          self.networkCallback({
            networkType: 0,
            networkContent: '网络较差'
          })
        }
      }
    })
  },

  // 关闭
  stopNetwork: function(options) {
    console.log('关闭网络测速');
    clearTimeout(networkTimeOut)
    downloadTask.abort()
  },

  /**
   * 网络状态回调
   * @param {options} 
   *   networkType	Number	是 0:网络较差 网络一般 2:网络良好 3:网络断开
   *   networkContent  String  是 网络状态文案
   */
  networkCallback: function(options) {
    
  },

};

module.exports = networkSpeed;

以下是使用方法

// 网络监测
const networkSpeed = require('../../utils/networkSpeed.js');

  onLoad: function(options) {
    // 开始网络监测
    networkSpeed.startNetwork();
    // 网络监测回调
    networkSpeed.networkCallback = this.networkCallback;
  },

  // 网络监测回调
  networkCallback: function(options) {

    });
  },

  onUnload: function() {
    // 停止网络监测
    networkSpeed.stopNetwork();
  },

 

微信小程序是一种基于微信平台的应用程序,而Vuex是Vue.js框架中用于管理应用程序状态的插件。要在微信小程序监听Vuex的状态变化,可以按照以下步骤进行操作: 1. 在微信小程序的根目录下创建一个`store`文件夹,并在该文件夹下创建一个`index.js`文件。 2. 在`index.js`中引入Vuex和相关的模块文件,同时创建一个Vuex的 Store 实例,例如: ```javascript import Vuex from 'vuex' import moduleA from './moduleA' const store = new Vuex.Store({ modules: { a: moduleA, // 其他模块 }, // 其他配置项 }) export default store ``` 3. 在微信小程序的`app.js`文件中引入刚才创建的`store/index.js`: ```javascript import store from './store/index' App({ store, // 将store注入到app实例中 // 其他配置项 }) ``` 4. 在需要监听Vuex状态变化的页面或组件中,通过`this.$store`可以访问到Vuex的 Store 实例。在`onLoad`生命周期函数中使用`watch`函数监听状态变化: ```javascript Page({ onLoad() { this.watchState() // 监听状态变化 }, watchState() { this.$store.watch( (state) => state.a, // 监听的状态,这里假设我们要监听模块a的变化 (newVal, oldVal) => { console.log('状态变化:', newVal) } ) }, // 其他函数 }) ``` 通过以上步骤,就可以在微信小程序监听Vuex的状态变化了。当状态发生变化时,会触发相应的回调函数,你可以在回调函数中进行相应的操作。注意,这里需要保证引入的Vuex和相关模块文件路径正确,并且需要确保在小程序的`app.js`中将`store`注入到`App`实例中。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值