HarmonyOS - JavaUI 框架之使用WebView加載本地H5頁面
??51CTO OpenHarmony技術(shù)社區(qū)??
前言
現(xiàn)在應(yīng)用開發(fā)中都不可避免的需要加載一些H5頁面。HarmonyOS應(yīng)用通過 WebView 來提供應(yīng)用中集成H5頁面的能力。在HarmonyOS應(yīng)用中，出于安全考慮，WebView不支持直接通過File協(xié)議加載資源文件或本地文件，所以不能直接通過文件的存放路徑，加載本地H5頁面，下面介紹一下在HarmonyOS應(yīng)用中，如何實現(xiàn)加載本地H5頁面。
WebView使用介紹
WebView 是一個基于 webkit 引擎、展現(xiàn) web 頁面的控件，可以顯示和渲染web頁面，相當(dāng)于應(yīng)用中的瀏覽器，可以加載網(wǎng)絡(luò)上或應(yīng)用本地的HTML文件。
WebView的能力：
- 顯示和渲染 Web 頁面。
- 直接使用 HTML文件(網(wǎng)絡(luò)上或本地 resources 中)作布局。
- 可和 JavaScript 交互調(diào)用。
效果展示：
實現(xiàn)步驟：
1. 首先在resources目錄下創(chuàng)建rawfile文件夾，該目錄下的資源會打包進應(yīng)用內(nèi)。
2.將H5頁面放到entry/src/main/resources/rawfile文件夾下。
3.WebView 要訪問本地 Web 文件，需要通過DataAbility 的方式進行訪問，這里創(chuàng)建一個 WebAbility.java 文件。
在WebAbility中進行本地資源文件的解析，重寫 RawFileDescriptor()，獲取到我們解析到的RawFileDescriptor對象，RawFileDescriptor可以看作是我們訪問HarmonyOS應(yīng)用本地資源文件的入口，通過該入口可以將我們的H5頁面加載到WebView控件上。
注意：private static final String ENTRY_PATH_PREFIX = “entry/resources” 這里將 “entry” 替換成自己對應(yīng)modul的路徑。
public class WebAbility extends Ability {
private static final String PLACEHOLDER_RAW_FILE = "/rawfile/";
private static final String PLACEHOLDER_LOCAL_FILE = "/local/";
private static final String ENTRY_PATH_PREFIX = "entry/resources";
@Override
public RawFileDescriptor openRawFile(Uri uri, String mode) throws FileNotFoundException {
final int splitChar = '/';
if (uri == null) {
throw new FileNotFoundException("Invalid Uri");
}
// 獲取uri對應(yīng)的資源路徑 例如：com.example.dataability/entry/resources/rawfile/
String path = uri.getEncodedPath();
final int splitIndex = path.indexOf(splitChar, 1);
if (splitIndex < 0) {
throw new FileNotFoundException("Invalid Uri " + uri);
}
// 處理不同路徑下的資源文件
String targetPath = path.substring(splitIndex);
if (targetPath.startsWith(PLACEHOLDER_RAW_FILE)) {
// 打開entry/resources/rawfile目錄下的資源
try {
return getResourceManager().getRawFileEntry(ENTRY_PATH_PREFIX + targetPath).openRawFileDescriptor();
} catch (IOException e) {
throw new FileNotFoundException("Not found support raw file at " + uri);
}
} else if (targetPath.startsWith(PLACEHOLDER_LOCAL_FILE)) {
// 打開手機本地存儲目錄下的資源
File file = new File(getContext().getFilesDir(), targetPath.replace(PLACEHOLDER_LOCAL_FILE, ""));
if (!file.exists()) {
throw new FileNotFoundException("Not found support local file at " + uri);
}
return getRawFileDescriptor(file, uri);
} else {
throw new FileNotFoundException("Not found support file at " + uri);
}
}
//獲取手機本地存儲目錄下文件資源的訪問入口
private RawFileDescriptor getRawFileDescriptor(File file, Uri uri) throws FileNotFoundException {
try {
final FileDescriptor fileDescriptor = new FileInputStream(file).getFD();
return new RawFileDescriptor() {
@Override
public FileDescriptor getFileDescriptor() {
return fileDescriptor;
}
@Override
public long getFileSize() {
return -1;
}
@Override
public long getStartPosition() {
return 0;
}
@Override
public void close() throws IOException {
}
};
} catch (IOException e) {
throw new FileNotFoundException("Not found support local file at " + uri);
}
}
4.然后在 “entry/src/main/config.json” 中完成 WebAbility 的聲明，代碼如下：
{
"name": "com.example.webdemo.WebAbility",
"type": "data",
"uri": "dataability://com.example.webdemo.dataability"
},找到config.json的對應(yīng)的module，在abilities節(jié)點中添加以上代碼，具體位置如下：
"abilities": [
{
"name": "com.example.webdemo.WebAbility",
"type": "data",
"uri": "dataability://com.example.webdemo.dataability"
},
{
"visible": true,
"name": "com.example.webdemo.MainAbility",
"icon": "$media:icon",
"description": "$string:mainability_description",
"formsEnabled": true,
"label": "$string:entry_MainAbility",
"type": "page",
}
],
在abilities中聲明的 uri 的值便是webview加載的路徑，在WebAbility里面進行了資源文件的解析，當(dāng)路徑指向WebAbility時，H5頁面就可以在WebAbility上顯示了。
5.創(chuàng)建 WebView 并加載本地頁面。
在MainAbility的onStart()中創(chuàng)建WebView,并配置支持訪問Data Ability資源，支持JavaScript，通過webView.load()加載本地H5頁面，加載地址為：“dataability://com.example.webdemo.dataability/rawfile/help-center/index.html#/”，“dataability://com.example.webdemo.dataability”是指向解析本地資源文件的Ability，后面拼接加載頁面的路徑，具體代碼如下：
DirectionalLayout dLayout = new DirectionalLayout(this);
dLayout.setLayoutConfig(new ComponentContainer.LayoutConfig(
ComponentContainer.LayoutConfig.MATCH_PARENT,
ComponentContainer.LayoutConfig.MATCH_PARENT
));
super.setUIContent(dLayout);
WebView webView = new WebView(this);
webView.getWebConfig().setJavaScriptPermit(true);
webView.getWebConfig().setDataAbilityPermit(true);
webView.load("dataability://com.example.webdemo.dataability/rawfile/help-center/index.html#/");
dLayout.addComponent(webView);
總結(jié)
實際項目中APP中的H5頁面一般都是通過網(wǎng)絡(luò)獲取的，并不需要本地解析資源文件。但是手機斷網(wǎng)或者網(wǎng)絡(luò)不穩(wěn)定時，可以下載H5頁面到本地，通過以上方式使用webview加載本地H5頁面，避免出現(xiàn)手機斷網(wǎng)或者網(wǎng)絡(luò)不穩(wěn)定時頁面加載不了的情況。
??51CTO OpenHarmony技術(shù)社區(qū)??
