设置仅wifi加载图片后，应用加载页面内容之前，建议先通过connection.getNetCapabilities接口判断设备当前网络类型，然后再处理不同场景下的图片加载。
示例代码如下：
import { fileIo as fs } from '@kit.CoreFileKit';
import common from '@ohos.app.ability.common';
import webview from '@ohos.web.webview';
import { connection } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
context = this.getUIContext().getHostContext() as common.UIAbilityContext;
webviewController: webview.WebviewController = new webview.WebviewController();
webResourceResponse: WebResourceResponse = new WebResourceResponse();
fileName: string = 'test.jpg'; // 根据实际情况，换成业务需要的图片，放在rawfile目录下，需要的时候拷贝到沙箱后使用
@State isWifiInUse: boolean = false;
pageUrl: string = 'www.example1.com'; // 根据实际情况，换成业务需要的网页url
imageUrl: string = 'www.example2.jpg'; // 根据实际情况，换成业务需要的图片url
aboutToAppear(): void {
connection.getDefaultNet().then((netHandle: connection.NetHandle) => {
if (netHandle.netId == 0) {
// 当前没有已连接的网络时，netHandle的netId为0，属于异常场景。可根据实际情况添加处理机制。
return;
}
connection.getNetCapabilities(netHandle, (error: BusinessError, data: connection.NetCapabilities) => {
if (error) {
console.error(`Failed to get net capabilities. Code:${error.code}, message:${error.message}`);
return;
}
for (let i = 0; i < data.bearerTypes.length; i++) {
// 判断设备是否连接wifi网络
if (data.bearerTypes[i] == connection.NetBearType.BEARER_WIFI) {
this.isWifiInUse = true;
}
}
});
}).catch((error: BusinessError) => {
console.error(JSON.stringify(error));
});
}
// 将rawfile下的文件读取到沙箱
async saveFileToSandbox(fileName: string) {
const filePath = this.context.filesDir + '/' + fileName;
try {
const file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
const content = this.context.resourceManager.getRawFileContentSync(fileName);
const arrayBuffer = content.buffer.slice(0);
fs.writeSync(file.fd, arrayBuffer);
fs.closeSync(file.fd);
} catch (error) {
console.error(`Code: ${error.code},Message: ${error.message} `);
}
}
async getLocalImage(fileName: string) {
const filePath = this.context.filesDir + '/' + fileName;
try {
this.saveFileToSandbox(fileName);
let file = fs.openSync(filePath, fs.OpenMode.READ_ONLY);
return file.fd;
} catch (error) {
console.error(`Code: ${error.code},Message: ${error.message} `);
return null;
}
}
build() {
Column() {
// 场景一：本地Image组件加载网络图片
Image(this.isWifiInUse ? this.imageUrl : $rawfile(this.fileName))
.width(100);
// 场景二：Web组件加载网络页面
Web({ src: this.pageUrl, controller: this.webviewController })
.fileAccess(true)
.javaScriptAccess(true)
.domStorageAccess(true) // 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。
.overviewModeAccess(true)
.geolocationAccess(false)
.onInterceptRequest((event) => {
if (!this.isWifiInUse) {
const url = event!.request.getRequestUrl();
// 可自行添加常见的图片资源类型的判断
if (!url.includes('jpg') && !url.includes('png') && !url.includes('jpeg') && !url.includes('bmp') &&
!url.includes('gif')) {
return null;
}
try {
this.getLocalImage(this.fileName).then(fd => {
this.webResourceResponse.setResponseData(fd);
this.webResourceResponse.setResponseCode(200);
this.webResourceResponse.setReasonMessage('OK');
this.webResourceResponse.setResponseIsReady(true);
fs.closeSync(fd);
});
this.webResourceResponse.setResponseMimeType('image/*');
this.webResourceResponse.setResponseIsReady(false);
return this.webResourceResponse;
} catch (error) {
console.error(`Code: ${error.code},Message: ${error.message} `);
return null;
}
} else {
return null;
}
});
}
.height('100%');
}
}