【HarmonyOS】【Demo】【JAVA UI】鸿蒙怎么在Webview上添加组件_鸿蒙webview加载链接

作者：不正经 | 2024-03-25 04:39:41

踩

鸿蒙webview加载链接

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

使用项目布局显示webview搭建和webview加载链接的基本功能
解决webview覆盖层不显示问题
查看运行效果

基础的webview学习，大家参考如下链接：

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

第一步使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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

    }



}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

运行效果如下

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

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

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

    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174

第三步查看运行效果

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

更多精彩内容，请见华为开发者官方论坛→https://developer.huawei.com/consumer/cn/forum/home?ha_source=sanfang

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/307020

【HarmonyOS】【Demo】【JAVA UI】 鸿蒙怎么在Webview上添加组件_鸿蒙webview加载链接

【HarmonyOS】【Demo】【JAVA UI】鸿蒙怎么在Webview上添加组件_鸿蒙webview加载链接