微信小程序弱网监控

这篇具有很好参考价值的文章主要介绍了微信小程序弱网监控。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

在真实的项目中,我们为了良好的用户体验,会根据用户当前的网络状态提供最优的资源,例如图片或视频等比较大的资源,当网络较差时,可以提供分辨率更低的资源,能够让用户尽可能快的看到有效信息,而不是一直白屏等待。

那如何设计一个生产环境可用的小程序当前网络状态监测系统。主要考虑以下几个方面:

  • 首先我们可以粗略的用getNetworkType来获取当前的网络连接类型,当获取到2g或3g等类型时,可以判定当前处于弱网状态。
  • 当处于4g,5g或wifi下,我们的网络也是会有波动的,这个时候就需要我们根据真实的网络下载情况来判断网络状态,
  • 当判断处于弱网时,这个时候我们要持续的来获取当前网络状况,当网络状况好转或设置一个最长检测的时间,当规定时间内,网络依然没有好转,则停止获取网络状况。
  • 通过全局的eventBus系统,将网络状态发射出去,供业务功能处使用。

实现

细节步骤

  • 划定网络的判定标准,也就是什么情况处于弱网,什么时候处于好的网络。

    • 网络类型上2g和3g直接判定为弱网
    • 通过真实请求一张图片,来实际获取当前的网络请求状况,可以有两种方式:
      • 一种是通过耗时,这里选择一个阈值范围1000, 1500,低于1000的为极好网,中间的为好网,超过1500则为
      • 一种是通过,request/download接口回调中提供的profile信息,其中throughputKbps表示当前网络的实际下载kbps。
  • 判断弱网后的处理。判断弱网后,我们不能就直接让我们的资源加载都处于一种弱网的情况,而是判断弱网后,我们要递归的去持续判断网络状态,直至网络状况好转,或有一个最大的重试次数,很长一段时间网络状态都不好,就不用在尝试去判断了,用户也不可能一直在这等待网络好转。

  • 持续监控。也就是判断网络的时机:

    • 一种是监听网络类型的切换,通过wx.onNetworkStatusChange。网络类型切换时,进行网络判断
    • 每一次接口请求的时候,都进行一次网络状态判断,因此,这里我们要封装一个自己的request方法,将通用的逻辑都封装在一处。

代码展示

js

// import eventBus from './eventBus';
const NETWORK_STATUS = {
    OFFLINE: 'offline',
    POOR: 'poor',
    GOOD: 'good',
    WONDERFUL: 'wonderful'
}
// 小于1000表示网络极好,1000至1500则表示good 超过1500表明是弱网。
const DOWNLOAD_TIME = [1000, 1500];
const MAX_COUNT = 10;
let count = 0;
function getNetworkType() {
    return new Promise((resolve) => {
        wx.getNetworkType({
            success(res) {
                resolve(res);
            },
            fail(err) {
                resolve(err);
            }
        })
    })
}
const getNetworkStatus =  (opt) => {
    return new Promise((resolve) => {
        try {
            let networkType = opt && opt.networkType;
            let networkStatus = NETWORK_STATUS.WONDERFUL;
            if (!networkType) {
                networkType = getNetworkType().then(({networkType}) => {
                    if (['unknown', 'none'].includes(networkType)) {
                        emitNetworkStatus(NETWORK_STATUS.OFFLINE);
                        return resolve(NETWORK_STATUS.OFFLINE);
                    }
                    if (['2g', '3g'].includes(networkType)) {
                        emitNetworkStatus(NETWORK_STATUS.POOR);
                        return resolve(NETWORK_STATUS);
                    }
                    const startTime = +new Date();
                    requestImage().then((result) => {
                        const requestTime = +new Date() - startTime;
                        
                        if (requestTime < DOWNLOAD_TIME[0]) {
                            networkStatus = NETWORK_STATUS.WONDERFUL;
                        } else if (requestTime > DOWNLOAD_TIME[1]) {
                            networkStatus = NETWORK_STATUS.POOR;
                        } else {
                            networkStatus = NETWORK_STATUS.GOOD;
                        }
                        emitNetworkStatus(networkStatus);
                        return resolve(networkStatus);
                    })
                   
                });
            }
        } catch (error) {
            resolve(NETWORK_STATUS.WONDERFUL);
        }
    })
   
}

function run() {
    if (count >= MAX_COUNT) {
        return;
    }
    const timer = setTimeout( () => {
        getNetworkStatus().then(networkStatus => {
            count += 1;
            if ([NETWORK_STATUS.POOR, NETWORK_STATUS.GOOD].includes(networkStatus)){
                run();
            }
        })
        clearTimeout(timer);
    }, 5000)
}
function start(opt) {
    const timer = setTimeout( () => {
        getNetworkStatus(opt).then(networkStatus => {
            if ([NETWORK_STATUS.POOR, NETWORK_STATUS.GOOD].includes(networkStatus)) {
                run();
            }
        })
        
        clearTimeout(timer);
    }, 1000)
}
function requestImage() {
    return new Promise((resolve) => {
        wx.request({
            url: 'https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/-146383143_-1016538910_80_80.png',
            data: {
                time: +new Date(),
            },
            success(res) {
                resolve(res);
            },
            fail() {
                resolve()
            }
        })
    })
}
function emitNetworkStatus(networkStatus) {
    const app = getApp();
    const oldNetwordStatus  = app.globalData.networkStatus;
    // 只有本次状态与上一次存储的不一致才会对外发送。
    if (oldNetwordStatus !== networkStatus) {
        app.globalData.networkStatus = networkStatus;
        // 通过全局的事件系统,将结果发送出去
        // eventBus.emit('networkChange', networkStatus, oldNetwordStatus);    
    }
}

export const networkController = {
    start,
};

eventBus功能可以根据自己的项目自行封装,这里不再多述。

调用时机

  • app.js中的onLaunch钩子中,监听wx.onNetworkStatusChange。在其中调用我们的方法

js

 wx.onNetworkStatusChange((res) => {
      networkController.start(res);
    })
  • 另一种就是在我们封装的request函数内,每次请求接口时调用一次。这样能够保证我们可以不那么频繁但有效的去判断是否去判断当前网络状态

总结

作为一个c端产品,针对弱网的优化是必不可少的。用户体验问题要一直放在最重要的位置,作为开发人员要时刻关注这些点,以免给用户造成不好的体验。

如果有更好的意见,辛苦评论区指出,共同学习,共同提高。文章来源地址https://www.toymoban.com/news/detail-606766.html

到了这里,关于微信小程序弱网监控的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序请求本地服务器测试成功

    在测试阶段,微信小程序是可以请求本地服务器的,这里有如下好处: 1.测试不需要经过网络,暂时可以不配置域名等,服务器也不用上线 2.可以看到小程序和服务器的打印,方便调试和找出问题 3.服务器不用频繁修改上架,更改非常方便 1.勾选上不检测域名: 2.修改请求网

    2024年02月10日
    浏览(72)
  • 13、微信小程序:上传图片到服务器

    1、上传图片到服务器,有两个步骤:     1.1  拿到可上传的图片 wx.chooseImage     1.2  将图片上传到服务器  wx.uploadFile 2、代码实现 button bindtap=\\\"upload\\\"点击上传/button image src=\\\"{{imgPath}}\\\" mode=\\\"\\\"/

    2024年02月12日
    浏览(53)
  • 微信小程序怎么从服务器中获取数据

    要从服务器中获取数据,可以使用微信小程序提供的wx.request()方法。以下是一个简单的示例代码: 在上面的代码中,我们使用wx.request()方法发起一个GET请求,并指定了请求的URL。当请求成功后,会调用success回调函数,并在控制台中输出从服务器返回的数据。如果请求失败,

    2024年04月16日
    浏览(42)
  • 解决微信小程序无法访问后台服务器问题

    小程序可以调用我们后台的接口前提就是我们要配置一个合法域名。且开头为https形式。 扫码登陆微信公众平台-开发-开发管理-开发设置  如果没有域名要么就买一个,或者通过内网穿透,获取一个https域名。内网穿透工具有很多,我这里以花生壳为例。 只需要注册完毕进入

    2024年02月12日
    浏览(48)
  • 微信小程序获取头像昵称 保存头像到服务器

    微信官方推荐的替代做法: 头像昵称填写 | 微信开放文档 (qq.com)  wxml js wxss

    2024年02月16日
    浏览(51)
  • 微信小程序搭载node.js服务器(简)

    此文章用到的是用node.js搭载的服务器! 检测电脑是否安装node.js,可以用【 cmd/Power shell 】命令检测,也可以用【git-bash】,这里就用git-bash进行演示,没有git-bash可以安装一下。 如果有对应的版本号即为已经安装完成! 未安装的附上链接了: node.js安装 : Download | Node.js Gi

    2023年04月08日
    浏览(53)
  • 如何查看微信小程序服务器域名并且修改

    前提需要登录微信开发者平台:微信公众平台 一、进入开发者管理。 二、选择开发者设置    三、下方就可以看到服务器域名。 特别注意,这里绑定的域名是必须备案的域名,并且拥有SSL证书。 备案必须是ICP可以查询到:https://beian.miit.gov.cn/ SSL证书必须符合的ATS安全的检测

    2024年02月11日
    浏览(49)
  • 微信小程序之本地网络服务器配置

    我们开发小程序的时候一般都会用到后台服务,为了调试方便都希望可以使用本地服务器来进行网络通讯,本篇就介绍一下该如何配置,其实非常简单: 1. 去你的小程序管理平台-开发管理-开发设置,添加网络中真实可用的https域名 ,比如https://www.baidu.com(但是不推荐用百度

    2024年02月11日
    浏览(57)
  • 服务器更换SSL证书,微信小程序报600001

    某政府单位项目的SSL证书一直使用免费华为SSL证书,一年到期,需要重新申请。因此,服务器需要更换SSL证书。 在nginx组件中成功替换到最新证书并重启,测试使用浏览器访问系统一切正常,成功使用了最新证书进行TLS握手协议。但是,存在部分用户在使用小程序时会出现问

    2023年04月21日
    浏览(50)
  • 微信小程序连接本地服务器(在本地服务器上进行真机测试-微信开发者工具)

    最近做小程序,一直用的是本地服务器接口,在用真机测试的时候,发现动态数据并不能同步,研究了一下发现操作很简单 1.首先打开微信开发者工具,打开右上角的详情,点击本地设置,勾选下面的不校验合法域名 2.打开手机的热点,用电脑连接手机热点(保证在同一网络

    2024年02月11日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包