devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS之常用组件WebView的使用_harmonyos webview

作者：Monodyee | 2024-03-19 12:43:44

赞

踩

harmonyos webview
一、WebView 功能
  • WebView 提供在应用中集成 Web 页面的能力。
  • 请使用真机或模拟器运行查看 WebView 效果，预览器不支持 WebView 显示。
  • 只有预置 WebView 能力的真机设备才支持 WebView 功能，智能穿戴设备不支持 WebView。
二、WebView 的使用方法
  • WebView 派生于通用组件 Component，可以像普通组件一样进行使用。
  • 在使用 WebView 时需要配置应用的网络权限，打开“entry > src > main > config.json”，并添加如下配置：
	{
	  ...
	  "module": {
	    ...
	    "reqPermissions": [
	      {
	        "name": "ohos.permission.INTERNET"
	      }
	    ],
	    ...
	  }
	}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 方式一：
    • 在 layout 目录下的 xml 文件中创建 WebView：
	<ohos.agp.components.webengine.WebView
	    ohos:id="$+id:webview"
	    ohos:height="match_parent"
	    ohos:width="match_parent">
	</ohos.agp.components.webengine.WebView>

  • 1
  • 2
  • 3
  • 4
  • 5
    • 在 Java 代码中，使用 load 方法加载 Web 页面：
	WebView webView = (WebView) findComponentById(ResourceTable.Id_webview);
	webView.getWebConfig().setJavaScriptPermit(true);  // 如果网页需要使用JavaScript，增加此行；如何使用JavaScript下文有详细介绍  
	final String url = EXAMPLE_URL; // EXAMPLE_URL由开发者自定义
	webView.load(url);

  • 1
  • 2
  • 3
  • 4
  • 方式二：
    • 在 Java 代码中，通过 ComponentContainer 容器创建布局 DirectionalLayout，并在 DirectionalLayout 内添加 WebView：
	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(getContext());
	webView.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
	webView.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);
	webView.getWebConfig().setJavaScriptPermit(true);  // 如果网页需要使用JavaScript，增加此行；如何使用JavaScript下文有详细介绍
	dLayout.addComponent(webView);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
    • 加载 Web 页面：
	final String url = EXAMPLE_URL; // EXAMPLE_URL由开发者自定义
	webView.load(url);

  • 1
  • 2
三、浏览网页历史记录
  • 通过 getNavigator 方法获取 Navigator 对象：
	Navigator navigator = webView.getNavigator();

  • 1
  • 使用 canGoBack() 或 canGoForward() 检查是否可以向后或向前浏览，使用 goBack() 或 goForward() 向后或向前浏览：
	if (navigator.canGoBack()) {
	    navigator.goBack();
	}
	if (navigator.canGoForward()) {
	    navigator.goForward();
	}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
四、使用 JavaScript
  • 通过 WebConfig 启用 JavaScript：
	webView.getWebConfig().setJavaScriptPermit(true);

  • 1
  • 根据实际需要选择调用方式：
    • 注入回调对象到页面内容，并在页面中调用该对象：
	final String jsName = "JsCallbackToApp";
	webView.addJsCallback(jsName, new JsCallback() {
	    @Override
	    public String onCallback(String msg) {
	        // 增加自定义处理
	        return "jsResult";
	    }
	});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
    • 在页面内通过 JavaScript 代码调用注入对象：
	function callToApp() {
	    if (window.JsCallbackToApp && window.JsCallbackToApp.call) {
	       var result = JsCallbackToApp.call("message from web");
	    }
	}

  • 1
  • 2
  • 3
  • 4
  • 5
    • 在应用内调用页面内的 JavaScript 方法：
	webView.executeJs("javascript:callFuncInWeb()", new AsyncCallback<String>() {
	    @Override
	    public void onReceive(String msg) {
	        // 在此确认返回结果
	    }
	});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
五、观测 Web 状态
  • 通过 setWebAgent 方法设置自定义 WebAgent 对象，以观测页面状态变更等事件：
	webView.setWebAgent(new WebAgent() {
	    @Override
	    public void onLoadingPage(WebView webview, String url, PixelMap favicon) {
	        super.onLoadingPage(webview, url, favicon);
	        // 页面开始加载时自定义处理
	    }
	
	    @Override
	    public void onPageLoaded(WebView webview, String url) {
	        super.onPageLoaded(webview, url);
	        // 页面加载结束后自定义处理
	    }
	
	    @Override
	    public void onLoadingContent(WebView webview, String url) {
	        super.onLoadingContent(webview, url);
	        // 加载资源时自定义处理
	    }
	
	    @Override
	    public void onError(WebView webview, ResourceRequest request, ResourceError error) {
	        super.onError(webview, request, error);
	        // 发生错误时自定义处理
	    }
	});

  • 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
六、观测浏览事件
  • 通过 setBrowserAgent 方法设置自定义 BrowserAgent 对象，以观测 JavaScript 事件及通知等：
	webView.setBrowserAgent(new BrowserAgent(this) {
	    @Override
	    public void onTitleUpdated(WebView webview, String title) {
	        super.onTitleUpdated(webview, title);
	        // 标题变更时自定义处理
	    }
	
	    @Override
	    public void onProgressUpdated(WebView webview, int newProgress) {
	        super.onProgressUpdated(webview, newProgress);
	        // 加载进度变更时自定义处理
	    }
	});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
七、定制网址加载行为
  • 当 Web 页面进行链接跳转时，WebView 默认会打开目标网址，通过以下方式可以定制该行为。
  • 自定义 WebAgent 对象：
	private class ExampleWebAgent extends WebAgent {
	    public static final String EXAMPLE_URL = "...";
	    @Override
	    public boolean isNeedLoadUrl(WebView webview, ResourceRequest request) { 
	        if (request == null || request.getRequestUrl() == null) {
	            return false;
	        }
	        Uri uri = request.getRequestUrl();
	        // EXAMPLE_URL由开发者自定义
	        if (uri.getDecodedHost().equals(EXAMPLE_URL)) {
	            // 增加开发者自定义逻辑
	            return false;
	        } else {
	            return super.isNeedLoadUrl(webview, request);
	        }
	    }
	}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 设置自定义 WebAgent 至 WebView：
	webView.setWebAgent(new ExampleWebAgent());

  • 1
八、加载资源文件或本地文件
  • 出于安全考虑，WebView 不支持直接通过 File 协议加载资源文件或本地文件。
  • 如应用需实现相关业务，可参考如下方式实现。
① 通过 processResourceRequest 方法访问文件
  • 通过 setWebAgent 方法设置自定义 WebAgent 对象，覆写 processResourceRequest 方法。
	webView.setWebAgent(new WebAgent() {
	    @Override
	    public ResourceResponse processResourceRequest(WebView webview, ResourceRequest request) {
	        final String authority = "example.com";
	        final String rawFile = "/rawfile/";
	        final String local = "/local/";
	        Uri requestUri = request.getRequestUrl();
	        if (authority.equals(requestUri.getDecodedAuthority())) {
	            String path = requestUri.getDecodedPath();
	            if (TextTool.isNullOrEmpty(path)) {
	                return super.processResourceRequest(webview, request);
	            }
	            if (path.startsWith(rawFile)) {
	                // 根据自定义规则访问资源文件
	                String rawFilePath = "entry/resources/rawfile/" + path.replace(rawFile, "");
	                String mimeType = URLConnection.guessContentTypeFromName(rawFilePath);
	                try {
	                    Resource resource = getResourceManager().getRawFileEntry(rawFilePath).openRawFile();
	                    ResourceResponse response = new ResourceResponse(mimeType, resource, null);
	                    return response;
	                } catch (IOException e) {
	                    HiLog.info(TAG, "open raw file failed");
	                }
	            }
	            if (path.startsWith(local)) {
	                // 根据自定义规则访问本地文件
	                String localFile = getContext().getFilesDir() + path.replace(local, "/");
	                HiLog.info(TAG, "open local file " + localFile);
	                File file = new File(localFile);
	                if (!file.exists()) {
	                    HiLog.info(TAG, "file not exists");
	                    return super.processResourceRequest(webview, request);
	                }
	                String mimeType = URLConnection.guessContentTypeFromName(localFile);
	                try {
	                    InputStream inputStream = new FileInputStream(file);
	                    ResourceResponse response = new ResourceResponse(mimeType, inputStream, null);
	                    return response;
	                } catch (IOException e) {
	                    HiLog.info(TAG, "open local file failed");
	                }
	            }
	        }
	        return super.processResourceRequest(webview, request);
	    }
	});

  • 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
  • 在 resources 目录下的 rawfile 路径下创建"example.html"资源文件，以及在本机设备内创建"example.html"本地文件。
  • 加载资源文件或本地文件：
	// 加载资源文件 resources/rawfile/example.html
	webView.load("https://example.com/rawfile/example.html");
	
	// 加载本地文件 /data/data/com.example.dataability/files/example.html
	webView.load("https://example.com/local/example.html");

  • 1
  • 2
  • 3
  • 4
  • 5
② 通过 Data Ability 访问文件
  • 创建 Java 文件 Data Ability：
	public class ExampleDataAbility 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");
	        }
	
	        // path will be like /com.example.dataability/rawfile/example.html
	        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)) {
	            // 根据自定义规则访问资源文件
	            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);
	        }
	    }
	}

  • 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
  • 在 config.json 中注册 Data Ability，以及在 resources/base/profile 目录新增 path.xml：
	{
	"name": "com.example.webview.ExampleDataAbility",
	"type": "data",
	"uri": "dataability://com.example.dataability",
	"metaData": {
	    "customizeData": [
	    {
	        "name": "com.example.provider",
	        "extra": "$profile:path"
	    }
	    ]
	}
	}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
	<paths>
	    <root-path name="root" path="/" />
	</paths>

  • 1
  • 2
  • 3
  • 在 resources 目录下的 rawfile 路径下创建"example.html"资源文件，以及在本机设备内创建"example.html"本地文件。
  • 配置支持访问 Data Ability 资源：
	webConfig.setDataAbilityPermit(true);

  • 1
  • 通过 dataability 协议加载资源文件或本地文件：
	// 加载资源文件 resources/rawfile/example.html
	webView.load("dataability://com.example.dataability/rawfile/example.html");
	
	// 加载本地文件 /data/data/com.example.dataability/files/example.html
	webView.load("dataability://com.example.dataability/local/example.html");

  • 1
  • 2
  • 3
  • 4
  • 5
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/267757
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号