uniapp开发的ios的app上架后下载下来,第一次会出现首页异步数据加载不出来
原因分析
出现这个问题,我分析主要原因可能就是:
IOS应用下载第一次打开应用时,会提示是否允许 蜂窝网络或WIFI连接, 但是此时应用页面已经打开了,此时的应用还是未被允许访问网络的, 需要用户点击允许访问就才行, 当用户点允许访问网络后,应用没有恢复可以访问网络的状态,我试过,此时不管是刷新页面,还是请求数据,全部是无法连网的,这种状态相当于把该应用访问网络权限关闭一样。
简单来说,就是:app打开后,首先请求接口数据,然后IOS再弹出是否授权的弹窗,当点击确定授权后,此时以及去尝试请求数据了,但是由于用户授权晚于请求的操作,所以出现了数据获取失败。
这个问题目前好像是官方的一个Bug,只能通过代码逻辑去避免,参考:
https://ask.dcloud.net.cn/question/54839
我仅仅在这里提供一个解决的思路,就是使用定时器(轮循)先去判断网络是否畅通,当畅通后再去请求接口的数据。
判断网络的方法
uni判断网络方法的官网:https://uniapp.dcloud.net.cn/api/system/network.html#getnetworktype
方法一:
uni.getNetworkType({
success: function (res) {
console.log(res.networkType);//网络类型 wifi、2g、3g、4g、ethernet、unknown、none
if(res.networkType === "none"){
console.log("当前无网络");
}else{
console.log("有网络");
}
}
});
方法二:
getNetworkType() {
var types = {};
types[plus.networkinfo.CONNECTION_UNKNOW] = "Unknown";
types[plus.networkinfo.CONNECTION_NONE] = "None";
types[plus.networkinfo.CONNECTION_ETHERNET] = "Ethernet";
types[plus.networkinfo.CONNECTION_WIFI] = "WiFi";
types[plus.networkinfo.CONNECTION_CELL2G] = "2G";
types[plus.networkinfo.CONNECTION_CELL3G] = "3G";
types[plus.networkinfo.CONNECTION_CELL4G] = "4G";
console.log("Network: " + types[plus.networkinfo.getCurrentType()]);
},
方法三:监听网络状态变化
uni.onNetworkStatusChange(function (res) {
console.log(res.isConnected);//当前是否有网络连接
console.log(res.networkType);//网络类型
if(res.isConnected === false){
console.log("当前无网络");
}else{
console.log("有网络");
}
});
取消监听
var CALLBACK = function(res) {
// ...这里写你的业务逻辑
}
uni.offNetworkStatusChange(CALLBACK)
uni.onNetworkStatusChange(CALLBACK);
CALLBACK
必须为调用uni.onNetworkStatusChange
时传入的CALLBACK
我的解决方案
我的解决方案就是使用定时器,每隔0.5s对网络情况进行检测,如果通了那么再获取数据,如果不同则继续检测,直到用户点击同意,但是当10秒后(测试20次后),如果还不通,那么抛出弹窗。
export function getNetworkOk() {
return new Promise((resolve, reject) => {
uni.getNetworkType({
success: function (res) {
if(res.networkType === "none"){
console.log("当前无网络");
resolve(false);
}else{
resolve(true);
}
}
});
});
}
let tryNet = 0; // 记录尝试的次数
const MAX_TRY_NET = 20;
在app.vue文件中的onLaunch生命周期中:
console.log('App Launch');
// 设置App不允许横屏
// #ifdef APP-PLUS
plus.screen.lockOrientation("portrait-primary")
// #endif
// 监听网络变化
let timer = setInterval(async () => {
let netOk = await getNetworkOk();
if(netOk) {
this.appStart(); // 请求所有接口数据
clearInterval(timer);
}
tryNet++;
if(tryNet > MAX_TRY_NET) {
clearInterval(timer);
uni.showModal({
title: '提示',
content: '系统检测到您的网络存在问题,请点击确定重启应用',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
// #ifdef APP-PLUS
plus.runtime.restart();
// #endif
// #ifdef H5
window.location.replace();
// #endif
} else if (res.cancel) {
console.log('用户点击取消');
easyAlert('请尝试重启应用解决此问题');
// 可以添加点击取消退出应用
}
}
});
}
}, 500);
如果需要关闭app:
//安卓退出
// #ifdef APP-PLUS
if (plus.os.name.toLowerCase() === 'android') {
plus.runtime.quit();
}
else{
const threadClass = plus.ios.importClass("NSThread");
const mainThread = plus.ios.invoke(threadClass, "mainThread");
plus.ios.invoke(mainThread, "exit");
}
// #endif