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"}],...}}

方式一：
- 在 layout 目录下的 xml 文件中创建 WebView：

 <ohos.agp.components.webengine.WebViewohos:id="$+id:webview"ohos:height="match_parent"ohos:width="match_parent"></ohos.agp.components.webengine.WebView>

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

方式二：
- 在 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);

加载 Web 页面：

 final String url = EXAMPLE_URL; // EXAMPLE_URL由开发者自定义webView.load(url);

三、浏览网页历史记录

通过 getNavigator 方法获取 Navigator 对象：

 Navigator navigator = webView.getNavigator();

使用 canGoBack() 或 canGoForward() 检查是否可以向后或向前浏览，使用 goBack() 或 goForward() 向后或向前浏览：

 if (navigator.canGoBack()) {navigator.goBack();}if (navigator.canGoForward()) {navigator.goForward();}

四、使用 JavaScript

通过 WebConfig 启用 JavaScript：

 webView.getWebConfig().setJavaScriptPermit(true);

根据实际需要选择调用方式：
- 注入回调对象到页面内容，并在页面中调用该对象：

 final String jsName = "JsCallbackToApp";webView.addJsCallback(jsName, new JsCallback() {@Overridepublic String onCallback(String msg) {// 增加自定义处理return "jsResult";}});

在页面内通过 JavaScript 代码调用注入对象：

 function callToApp() {if (window.JsCallbackToApp && window.JsCallbackToApp.call) {var result = JsCallbackToApp.call("message from web");}}

在应用内调用页面内的 JavaScript 方法：

 webView.executeJs("javascript:callFuncInWeb()", new AsyncCallback<String>() {@Overridepublic void onReceive(String msg) {// 在此确认返回结果}});

五、观测 Web 状态

通过 setWebAgent 方法设置自定义 WebAgent 对象，以观测页面状态变更等事件：

 webView.setWebAgent(new WebAgent() {@Overridepublic void onLoadingPage(WebView webview, String url, PixelMap favicon) {super.onLoadingPage(webview, url, favicon);// 页面开始加载时自定义处理}@Overridepublic void onPageLoaded(WebView webview, String url) {super.onPageLoaded(webview, url);// 页面加载结束后自定义处理}@Overridepublic void onLoadingContent(WebView webview, String url) {super.onLoadingContent(webview, url);// 加载资源时自定义处理}@Overridepublic void onError(WebView webview, ResourceRequest request, ResourceError error) {super.onError(webview, request, error);// 发生错误时自定义处理}});

六、观测浏览事件

通过 setBrowserAgent 方法设置自定义 BrowserAgent 对象，以观测 JavaScript 事件及通知等：

 webView.setBrowserAgent(new BrowserAgent(this) {@Overridepublic void onTitleUpdated(WebView webview, String title) {super.onTitleUpdated(webview, title);// 标题变更时自定义处理}@Overridepublic void onProgressUpdated(WebView webview, int newProgress) {super.onProgressUpdated(webview, newProgress);// 加载进度变更时自定义处理}});

七、定制网址加载行为

当 Web 页面进行链接跳转时，WebView 默认会打开目标网址，通过以下方式可以定制该行为。
自定义 WebAgent 对象：

 private class ExampleWebAgent extends WebAgent {public static final String EXAMPLE_URL = "...";@Overridepublic 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);}}}

设置自定义 WebAgent 至 WebView：

 webView.setWebAgent(new ExampleWebAgent());

八、加载资源文件或本地文件

出于安全考虑，WebView 不支持直接通过 File 协议加载资源文件或本地文件。
如应用需实现相关业务，可参考如下方式实现。

① 通过 processResourceRequest 方法访问文件

通过 setWebAgent 方法设置自定义 WebAgent 对象，覆写 processResourceRequest 方法。

 webView.setWebAgent(new WebAgent() {@Overridepublic 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);}});

在 resources 目录下的 rawfile 路径下创建"example.html"资源文件，以及在本机设备内创建"example.html"本地文件。
加载资源文件或本地文件：

 // 加载资源文件 resources/rawfile/example.htmlwebView.load("https://example.com/rawfile/example.html");// 加载本地文件 /data/data/com.example.dataability/files/example.htmlwebView.load("https://example.com/local/example.html");

② 通过 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";@Overridepublic 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.htmlString 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() {@Overridepublic FileDescriptor getFileDescriptor() {return fileDescriptor;}@Overridepublic long getFileSize() {return -1;}@Overridepublic long getStartPosition() {return 0;}@Overridepublic void close() throws IOException {}};} catch (IOException e) {throw new FileNotFoundException("Not found support local file at " + uri);}}}

在 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"}]}}

 <paths><root-path name="root" path="/" /></paths>

在 resources 目录下的 rawfile 路径下创建"example.html"资源文件，以及在本机设备内创建"example.html"本地文件。
配置支持访问 Data Ability 资源：

 webConfig.setDataAbilityPermit(true);

通过 dataability 协议加载资源文件或本地文件：

 // 加载资源文件 resources/rawfile/example.htmlwebView.load("dataability://com.example.dataability/rawfile/example.html");// 加载本地文件 /data/data/com.example.dataability/files/example.htmlwebView.load("dataability://com.example.dataability/local/example.html");

HarmonyOS之常用组件WebView的使用相关推荐

HarmonyOS之常用组件RoundProgressBar的功能和使用
RoundProgressBar 继承自 ProgressBar,拥有 ProgressBar 的属性,在设置同样的属性时用法和 ProgressBar 一致,用于显示环形进度. RoundProgr ...
HarmonyOS之常用组件TabList与Tab的功能和使用
一.什么是 Tablist 与 Tab ? Tablist 可以实现多个页签栏的切换,Tab 为某个页签. 子页签通常放在内容区上方,展示不同的分类. 页签名称应该简洁明了,清晰描述分类的内容. 二. ...
HarmonyOS之常用组件ScrollView的功能和使用
一.ScrollView 功能 ScrollView 是一种带滚动功能的组件,它采用滑动的方式在有限的区域内显示更多的内容. 二.支持的 XML 属性 ScrollView 的共有 XML 属性继承自 ...
HarmonyOS之常用组件TextField的功能和使用
一.支持的 XML 属性 TextField 的共有 XML 属性继承自:Text. Text 的自有 XML 属性,请参考我之前的博客:HarmonyOS之深入分析常用组件Text的功能和使用. T ...
HarmonyOS之常用组件Button的功能和使用
一.Button 组件 Button 是一种常见的组件,点击可以触发对应的操作,通常由文本或图标组成,也可以由图标和文本共同组成. 文本按钮,如下所示: 图标按钮,如下所示: 图标和文本共同组成的按钮 ...
HarmonyOS之常用组件Text的功能和使用
一.支持的 XML 属性 Text 是用来显示字符串的组件,在界面上显示为一块文本区域.Text 作为一个基本组件,有很多扩展,常见的有按钮组件 Button,文本编辑组件 TextField. Te ...
HarmonyOS之常用组件ListContainer的功能和使用
一.ListContainer 简介 ListContainer 是用来呈现连续.多行数据的组件,包含一系列相同类型的列表项. 二.支持的 XML 属性 ListContainer 的共有 XML 属 ...
HarmonyOS之常用组件ProgressBar的功能和使用
一.简介 ProgressBar 用于显示内容或操作的进度. ProgressBar 的共有 XML 属性继承自 Component,详情请参考我的博客:HarmonyOS之组件通用的XML属性总览. ...
HarmonyOS之常用组件Image的功能和使用
一.支持的 XML 属性 Image 的共有 XML 属性继承自 Component,详情请参考我的博客:HarmonyOS之组件通用的XML属性总览. Image 的自有 XML 属性见下表: 属性 ...

HarmonyOS之常用组件WebView的使用

一、WebView 功能

二、WebView 的使用方法

三、浏览网页历史记录

四、使用 JavaScript

五、观测 Web 状态

六、观测浏览事件

七、定制网址加载行为

八、加载资源文件或本地文件

① 通过 processResourceRequest 方法访问文件

② 通过 Data Ability 访问文件

HarmonyOS之常用组件WebView的使用相关推荐

最新文章

热门文章