更新升级 专属应用 系统故障 硬件故障 电脑汽车 鸿蒙刷机 鸿蒙开发Linux教程 鸿蒙开发Linux命令
当前位置:HMXT之家 > 应用开发 > 鸿蒙怎么在Webview上添加组件(HarmonyOS Demo JAVA UI)

鸿蒙怎么在Webview上添加组件(HarmonyOS Demo JAVA UI)

更新时间:2022-01-10 10:17:55浏览次数:961+次

以下为你带来鸿蒙怎么在Webview上添加组件(HarmonyOS Demo JAVA UI)的文章,总共三个步骤。

\

前言

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

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

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

3.查看运行效果。

实现的步骤

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

\

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

    }

}

运行效果如下:

\

第二步:解决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);

    }

}

第三步:查看运行效果

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

\

相关参考:鸿蒙开发环境下webview中java如何调用js方法