在大家HarmonyOS開發中,Webview元件上新增元件可能是很常見的功能了,HarmonyOS的webview和Android的webwiew存在一點點區別,今天來實現這個功能
-
使用專案佈局顯示webview搭建和webview載入連結的基本功能
-
解決webview覆蓋層不顯示問題
-
檢視執行效果
基礎的webview學習,大家參考如下連結 :
第一步 使用DependentLayout 簡單大家一個layout佈局介面
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:alignment="bottom">
<ohos.agp.components.webengine.WebView
ohos:id="$+id:webview"
ohos:height="match_parent"
ohos:width="match_parent">
</ohos.agp.components.webengine.WebView>
<Image
ohos:id="$+id:myImage"
ohos:height="100vp"
ohos:width="100vp"
ohos:image_src="$media:icon"/>
</DependentLayout>
Java程式碼如下:
package com.harmony.alliance.mydemo.slice;
import com.harmony.alliance.mydemo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.webengine.*;
import ohos.media.image.ImagePacker;
import ohos.media.image.PixelMap;
import ohos.media.image.common.PixelFormat;
import ohos.media.image.common.Size;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
public class MainAbilitySlice extends AbilitySlice {
private static final String EXAMPLE_URL = "https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-distributed-migration-0000001050024965";
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
// dl_bottom.requestForceForwardTouchEvent()
WebView webView = (WebView) findComponentById(ResourceTable.Id_webview);
webView.getWebConfig().setJavaScriptPermit(true); // 如果網頁需要使用JavaScript,增加此行;如何使用JavaScript下文有詳細介紹
webView.getWebConfig().setWebStoragePermit(true);
webView.getWebConfig().setDataAbilityPermit(true);
webView.getWebConfig().setLoadsImagesPermit(true);
webView.getWebConfig().setMediaAutoReplay(true);
webView.getWebConfig().setLocationPermit(true);
webView.getWebConfig().setSecurityMode(WebConfig.SECURITY_SELF_ADAPTIVE);
webView.load(EXAMPLE_URL);
// HiLogUtils.PrintLog("webView.load======>>>"+EXAMPLE_URL);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
執行效果如下
第二步解決Webview覆蓋層不顯示的問題
這時候我們發現沒有達到我想實現的效果,我們應該怎麼解決呢?
2.1我們需要新增如下程式碼
private void setWindowBgToAdaptWebView() {
final String backgroundFileName = "_bg.jpg";
File file = new File(getContext().getFilesDir(), backgroundFileName);
if (file.exists()) {
getWindow().setBackground(file.getPath());
return;
}
PixelMap pixelMap = createBgPixelMap();
if (pixelMap == null) {
return;
}
ImagePacker imagePacker = ImagePacker.create();
try (OutputStream outputStream = new FileOutputStream(file)) {
ImagePacker.PackingOptions options = new ImagePacker.PackingOptions();
if (!imagePacker.initializePacking(outputStream, options)) {
return;
}
if (!imagePacker.addImage(pixelMap)) {
return;
}
if (imagePacker.finalizePacking() < 0) {
return;
}
} catch (IOException e) {
e.printStackTrace();
} finally {
imagePacker.release();
}
getWindow().setBackground(file.getPath());
}
private PixelMap createBgPixelMap() {
final int length = 10;
PixelMap.InitializationOptions initializationOptions = new PixelMap.InitializationOptions();
initializationOptions.size = new Size(length, length);
initializationOptions.pixelFormat = PixelFormat.ARGB_8888;
initializationOptions.editable = true;
int[] defaultColors = new int[length * length];
return PixelMap.create(defaultColors, initializationOptions);
}
2.2我們要在OnStart的方法新增如下程式碼
全部程式碼如下
package com.harmony.alliance.mydemo.slice;
import com.harmony.alliance.mydemo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.webengine.*;
import ohos.media.image.ImagePacker;
import ohos.media.image.PixelMap;
import ohos.media.image.common.PixelFormat;
import ohos.media.image.common.Size;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
public class MainAbilitySlice extends AbilitySlice {
private static final String EXAMPLE_URL = "https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-distributed-migration-0000001050024965";
@Override
public void onStart(Intent intent) {
setWindowBgToAdaptWebView();
super.setUIContent(ResourceTable.Layout_ability_main);
// dl_bottom.requestForceForwardTouchEvent()
WebView webView = (WebView) findComponentById(ResourceTable.Id_webview);
webView.getWebConfig().setJavaScriptPermit(true); // 如果網頁需要使用JavaScript,增加此行;如何使用JavaScript下文有詳細介紹
webView.getWebConfig().setWebStoragePermit(true);
webView.getWebConfig().setDataAbilityPermit(true);
webView.getWebConfig().setLoadsImagesPermit(true);
webView.getWebConfig().setMediaAutoReplay(true);
webView.getWebConfig().setLocationPermit(true);
webView.getWebConfig().setSecurityMode(WebConfig.SECURITY_SELF_ADAPTIVE);
webView.load(EXAMPLE_URL);
// HiLogUtils.PrintLog("webView.load======>>>"+EXAMPLE_URL);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
private void setWindowBgToAdaptWebView() {
final String backgroundFileName = "_bg.jpg";
File file = new File(getContext().getFilesDir(), backgroundFileName);
if (file.exists()) {
getWindow().setBackground(file.getPath());
return;
}
PixelMap pixelMap = createBgPixelMap();
if (pixelMap == null) {
return;
}
ImagePacker imagePacker = ImagePacker.create();
try (OutputStream outputStream = new FileOutputStream(file)) {
ImagePacker.PackingOptions options = new ImagePacker.PackingOptions();
if (!imagePacker.initializePacking(outputStream, options)) {
return;
}
if (!imagePacker.addImage(pixelMap)) {
return;
}
if (imagePacker.finalizePacking() < 0) {
return;
}
} catch (IOException e) {
e.printStackTrace();
} finally {
imagePacker.release();
}
getWindow().setBackground(file.getPath());
}
private PixelMap createBgPixelMap() {
final int length = 10;
PixelMap.InitializationOptions initializationOptions = new PixelMap.InitializationOptions();
initializationOptions.size = new Size(length, length);
initializationOptions.pixelFormat = PixelFormat.ARGB_8888;
initializationOptions.editable = true;
int[] defaultColors = new int[length * length];
return PixelMap.create(defaultColors, initializationOptions);
}
}
第三步檢視執行效果
這時候我們在看一下執行效果
更多精彩內容,請見華為開發者官方論壇→https://developer.huawei.com/consumer/cn/forum/home?ha_source=sanfang