0
点赞
收藏
分享

微信扫一扫

【HarmonyOS】【Demo】【JAVA UI】 鸿蒙怎么在Webview上添加组件

英乐 2022-02-14 阅读 59

在大家HarmonyOS开发中,Webview组件上添加组件可能是很常见的功能了,HarmonyOS的webview和Android的webwiew存在一点点区别,今天来实现这个功能

1.    使用项目布局显示webview搭建和webview加载链接的基本功能

2.    解决webview覆盖层不显示问题

3.    查看运行效果

基础的webview学习,大家参考如下链接 :

​​https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-webview-0000001092715158​​

【HarmonyOS】【Demo】【JAVA UI】 鸿蒙怎么在Webview上添加组件_ide

第一步 使用DependentLayout 简单大家一个layout布局界面

【HarmonyOS】【Demo】【JAVA UI】 鸿蒙怎么在Webview上添加组件_java_02

XML代码如下:

<?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);

}



}

运行效果如下

【HarmonyOS】【Demo】【JAVA UI】 鸿蒙怎么在Webview上添加组件_webview_03

第二步解决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的方法添加如下代码

【HarmonyOS】【Demo】【JAVA UI】 鸿蒙怎么在Webview上添加组件_ide_04

全部代码如下

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);

}

}

第三步查看运行效果

这时候我们在看一下运行效果

【HarmonyOS】【Demo】【JAVA UI】 鸿蒙怎么在Webview上添加组件_ide_05

举报

相关推荐

0 条评论