四川网站建设多少钱,邢台网站开发公司,手机下载软件,竞价广告是怎么推广的前言
在真实的项目中#xff0c;我们为了良好的用户体验#xff0c;会根据用户当前的网络状态提供最优的资源#xff0c;例如图片或视频等比较大的资源#xff0c;当网络较差时#xff0c;可以提供分辨率更低的资源#xff0c;能够让用户尽可能快的看到有效信息#xf…前言
在真实的项目中我们为了良好的用户体验会根据用户当前的网络状态提供最优的资源例如图片或视频等比较大的资源当网络较差时可以提供分辨率更低的资源能够让用户尽可能快的看到有效信息而不是一直白屏等待。
那如何设计一个生产环境可用的小程序当前网络状态监测系统。主要考虑以下几个方面
首先我们可以粗略的用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端产品针对弱网的优化是必不可少的。用户体验问题要一直放在最重要的位置作为开发人员要时刻关注这些点以免给用户造成不好的体验。
如果有更好的意见辛苦评论区指出共同学习共同提高。
