001 - 使用鸿蒙WebView创建简单浏览器 step 1
打开官网,找到WebView的文档(模拟器不支持)
鸿蒙webview的开发指南(原始链接,方便大家识别并点击):https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-webview-0000001092715158
2. 创建一个Page Ability,把基本布局弄好
下面是代码
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<DirectionalLayout
ohos:height="30vp"
ohos:width="match_parent"
ohos:orientation="horizontal">
<TextField
ohos:id="$+id:text_webView_Url"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:background_ability_simple_web_view"
ohos:focus_border_enable="true"
ohos:hint="请输入网址"
ohos:max_text_lines="1"
ohos:multiple_lines="false"
ohos:scrollable="true"
ohos:text="www.harmonyos.com"
ohos:text_size="50"
ohos:weight="1"
/>
<Button
ohos:id="$+id:button_webview_surf"
ohos:height="match_content"
ohos:width="60vp"
ohos:background_element="$graphic:button_element"
ohos:text="跳转"
ohos:text_size="50"/>
</DirectionalLayout>
<ProgressBar
ohos:id="$+id:other_webView_progressBar"
ohos:height="10vp"
ohos:width="match_parent"
ohos:visibility="hide">
</ProgressBar>
<ohos.agp.components.webengine.WebView
ohos:id="$+id:webview_webview_webview"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1">
</ohos.agp.components.webengine.WebView>
<DirectionalLayout
ohos:height="30vp"
ohos:width="match_parent"
ohos:orientation="horizontal">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:weight="1">
<Button
ohos:id="$+id:button_webview_back"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_element"
ohos:layout_alignment="horizontal_center"
ohos:text="向后"
ohos:text_size="50"
>
</Button>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:weight="1">
<Button
ohos:id="$+id:button_webview_refresh"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_element"
ohos:layout_alignment="horizontal_center"
ohos:text="刷新"
ohos:text_size="50">
</Button>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:weight="1">
<Button
ohos:id="$+id:button_webview_forward"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:button_element"
ohos:layout_alignment="horizontal_center"
ohos:text="向前"
ohos:text_size="50">
</Button>
</DirectionalLayout>
</DirectionalLayout>
</DirectionalLayout>
把基本的按钮事件弄好
序号 按钮 功能 1 跳转 把文本框中的网址打开 2 后退 在webview中点了新链接后,想回去看一看 3 刷新 以前的人在网络不好,美女图片出不来的时候用,现在一般是发了一篇帖子后,作者会没事点一下,看看有没有人点赞 4 前进 跟后退是关联用的,就是点了新链接,回去看了看后,还是觉得新链接更好看,就又要前进. 代码
Component.ClickedListener clickedListener = new Component.ClickedListener() {
@Override
public void onClick(Component component) {
int componentId = component.getId();
switch (componentId) {
case ResourceTable.Id_button_webview_surf: {
urlAddress = textWebViewUrl.getText();
if (urlAddress.isEmpty()) {
return;
}
if (!urlAddress.startsWith(FinalValue.URL_HTTPS)) {
urlAddress = FinalValue.URL_HTTPS + urlAddress;
}
webView.load(urlAddress); }
break;
case ResourceTable.Id_button_webview_back: {
if (webView.getNavigator().canGoBack()) {
webView.getNavigator().goBack();
}
}
break;
case ResourceTable.Id_button_webview_refresh: {
webView.reload();
}
break;
case ResourceTable.Id_button_webview_forward: {
if (webView.getNavigator().canGoForward()) {
webView.getNavigator().goForward();
}
}
break;
default: {
System.out.println("没有选择任何的页面");
}
break;
}
}
};
- config.json ``` json
{
"app": {
"bundleName": "com.javaaier.family.huawei",
"vendor": "javaaier",
"version": {
"code": 1,
"name": "1.0"
},
"apiVersion": {
"compatible": 5,
"target": 5,
"releaseType": "Beta1"
}
},
"deviceConfig": { },
"module": {
"package": "com.javaaier.family.huawei",
"name": ".MyApplication",
"deviceType": [
"phone"
],
"distro": {
"deliveryWithInstall": true,
"moduleName": "entry",
"moduleType": "entry"
},
"abilities": [
{
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
],
"orientation": "unspecified",
"name": "com.javaaier.family.huawei.MainAbility",
"icon": "$media:icon",
"description": "$string:mainability_description",
"label": "$string:app_name",
"type": "page",
"launchType": "standard"
},
{
"orientation": "unspecified",
"name": "com.javaaier.family.huawei.SimpleWebViewAbility",
"icon": "$media:icon",
"description": "$string:simplewebviewability_description",
"label": "$string:app_name",
"type": "page",
"launchType": "standard"
}
],
"reqPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
}
}
把WebView照文档上面的要求弄好
没啥好说的,就是规定.我加在了调用load方法打开网址那行代码后面,我还弄了一个跟进度条关联的功能
//允许javascript交互 WebConfig webConfig = webView.getWebConfig();
webConfig.setDataAbilityPermit(true);
webConfig.setJavaScriptPermit(true);
webConfig.setLoadsImagesPermit(true);
webConfig.setMediaAutoReplay(true);
webConfig.setLocationPermit(true);
webConfig.setSecurityMode(WebConfig.SECURITY_SELF_ADAPTIVE); webView.setWebAgent(new WebAgent() {
@Override
public void onLoadingPage(WebView webView, String url, PixelMap favicon) {
super.onLoadingPage(webView, url, favicon);
// 这儿我加了一个更新网址文本框中新页面url的功能
if (url != urlAddress) {
textWebViewUrl.setText(url);
} } @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);
// 发生错误时自定义处理
}
});
webView.setBrowserAgent(new BrowserAgent(SimpleWebViewAbilitySlice.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);
if (newProgress < FinalValue.PROGRESS_BAR_FINISHED) {
otherWebViewProgressBar.setVisibility(Component.VISIBLE);
otherWebViewProgressBar.setProgressValue(newProgress);
} else if (newProgress == FinalValue.PROGRESS_BAR_FINISHED) {
otherWebViewProgressBar.setVisibility(Component.HIDE);
}
// 加载进度变更时自定义处理
}
});
完事?or完了还有事?
从上面拷代码的话,估计完事了.但是,我是用的回忆,但是代码却没有回退,所以我还是有必要在这儿把步骤中的问题说一说,方便不拷代码的同学也能跑出一个界面.主要体现如下:
权限配置,不多说
"reqPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
xml中的WebView要带包名
<ohos.agp.components.webengine.WebView
ohos:id="$+id:webview_webview_webview"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1">
</ohos.agp.components.webengine.WebView>
不按上面包名写的话:
- 真机运行后没有WebView的界面.哪怕weight=1,也不行
- 点击跳转按钮后,PageAbility会闪退,回到首屏(调用它的页面)
完整代码
布局
序号为2的步骤中贴全了
按钮背景
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="20"/>
<solid
ohos:color="#70dbdb"/>
</shape>
java代码
package com.javaaier.family.huawei.slice; import com.javaaier.family.huawei.ResourceTable;
import com.javaaier.family.huawei.common.FinalValue;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.components.webengine.*;
import ohos.media.image.PixelMap; /**
* @Author JavaAIer
* @Description : webview控件例子1:用于简单的测试webview的用法 <br/>
* 001 简单webview示例
* @Date: 2021/4/16
*/
public class SimpleWebViewAbilitySlice extends AbilitySlice {
String urlAddress; ProgressBar otherWebViewProgressBar;
TextField textWebViewUrl;
Button buttonWebViewSurf, buttonWebViewBack, buttonWebViewRefresh, buttonWebViewForward;
WebView webView; Component.ClickedListener clickedListener = new Component.ClickedListener() {
@Override
public void onClick(Component component) {
int componentId = component.getId();
switch (componentId) {
case ResourceTable.Id_button_webview_surf: {
urlAddress = textWebViewUrl.getText();
if (urlAddress.isEmpty()) {
return;
}
if (!urlAddress.startsWith(FinalValue.URL_HTTPS)) {
urlAddress = FinalValue.URL_HTTPS + urlAddress;
}
webView.load(urlAddress); //允许javascript交互 WebConfig webConfig = webView.getWebConfig();
webConfig.setDataAbilityPermit(true);
webConfig.setJavaScriptPermit(true);
webConfig.setLoadsImagesPermit(true);
webConfig.setMediaAutoReplay(true);
webConfig.setLocationPermit(true);
webConfig.setSecurityMode(WebConfig.SECURITY_SELF_ADAPTIVE); webView.setWebAgent(new WebAgent() {
@Override
public void onLoadingPage(WebView webView, String url, PixelMap favicon) {
super.onLoadingPage(webView, url, favicon);
// 页面开始加载时自定义处理
if (url != urlAddress) {
textWebViewUrl.setText(url);
} } @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);
// 发生错误时自定义处理
}
});
webView.setBrowserAgent(new BrowserAgent(SimpleWebViewAbilitySlice.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);
if (newProgress < FinalValue.PROGRESS_BAR_FINISHED) {
otherWebViewProgressBar.setVisibility(Component.VISIBLE);
otherWebViewProgressBar.setProgressValue(newProgress);
} else if (newProgress == FinalValue.PROGRESS_BAR_FINISHED) {
otherWebViewProgressBar.setVisibility(Component.HIDE);
}
// 加载进度变更时自定义处理
}
});
}
break;
case ResourceTable.Id_button_webview_back: {
if (webView.getNavigator().canGoBack()) {
webView.getNavigator().goBack();
}
}
break;
case ResourceTable.Id_button_webview_refresh: {
webView.reload();
}
break;
case ResourceTable.Id_button_webview_forward: {
if (webView.getNavigator().canGoForward()) {
webView.getNavigator().goForward();
}
}
break;
default: {
System.out.println("没有选择任何的页面");
}
break;
}
}
}; /**
* @Author JavaAIer
* @Description :
* @Date: 2021/4/16 14:46
* * @param intent
*/
@Override public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_simple_web_view);
otherWebViewProgressBar = (ProgressBar) findComponentById(ResourceTable.Id_other_webView_progressBar);
textWebViewUrl = (TextField) findComponentById(ResourceTable.Id_text_webView_Url);
buttonWebViewSurf = (Button) findComponentById(ResourceTable.Id_button_webview_surf);
buttonWebViewSurf.setClickedListener(clickedListener);
buttonWebViewBack = (Button) findComponentById(ResourceTable.Id_button_webview_back);
buttonWebViewBack.setClickedListener(clickedListener);
buttonWebViewRefresh = (Button) findComponentById(ResourceTable.Id_button_webview_refresh);
buttonWebViewRefresh.setClickedListener(clickedListener);
buttonWebViewForward = (Button) findComponentById(ResourceTable.Id_button_webview_forward);
buttonWebViewForward.setClickedListener(clickedListener);
webView = (WebView) findComponentById(ResourceTable.Id_webview_webview_webview); } @Override
public void onActive() {
super.onActive();
} @Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
/*
* 这一截卡哇伊大喵在config.json用了,我发现用不用没啥区别啊
* https://blog.csdn.net/qq_33259323/article/details/115596296
* "default": {
"network": {
"cleartextTraffic": true,
"securityConfig": {
"domainSettings": {
"cleartextPermitted": true,
"domains": [
{
"subdomains": true,
"name": "www.harmonyos.com"
}
]
}
}
}
}
*
* */
作者：人工智能姬
想了解更多内容，请访问51CTO和华为合作共建的鸿蒙社区：https://harmonyos.51cto.com
001 - 使用鸿蒙WebView创建简单浏览器 step 1的更多相关文章
- Web Service 的创建简单编码、发布和部署
最近,老大准备将已有的C/S架构项目中的通信部分做成通用,需要将其支持WebService为以后项目向着B/S架构升级做好铺垫,为此身为屌丝的我去各种百度WebService是个什么卵玩意,然后逐渐搭 ...
- 创建简单的响应式HTML5模版
创建简单的响应式HTML5模版 HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持.许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页.与此 ...
- django初探-创建简单的博客系统
django第一步 1. django安装 pip install django print(django.get_version()) 查看django版本 2. 创建项目 打开cmd,进入指定目录 ...
- simulink创建简单模型
创建简单模型 您可以使用 Simulink® 对系统建模,然后仿真该系统的动态行为.Simulink 允许您创建模块图,图中的各个连接模块代表系统的各个部分,信号代表这些模块之间的输入/输出关系.Si ...
- 基于Gecko内核的简单浏览器实现
分享一个基于Gecko内核的简单浏览器实现过程. 项目需要需要开发一个简单浏览器,由于被访问的网页中有大量Apng做的动画,使用IE内核的webbrowser不能播放,使用基于WebKit和Cefsh ...
- Intellij创建简单Springboot项目
Intellij创建简单Springboot项目 第一步:选择创建新项目——file-new-project 第二步:选择项目类型——Spring Initializr-next 第三步:输入项目信息 ...
- django初探-创建简单的博客系统(一)
django第一步 1. django安装 pip install django print(django.get_version()) 查看django版本 2. 创建项目 打开cmd,进入指定目录 ...
- mininet+floodlight搭建sdn环境并创建简单topo
第一步:安装git sudo apt-get update sudo apt-get install git 测试git是否安装成功: git 第二步:安装mininet 1.获取mininet最新源 ...
- python创建简单网站
前言 本方法基于web2py框架,使用web2py的完整网站数据包创建简单网站. web2py 是一个为Python语言提供的全功能Web应用框架,旨在敏捷快速的开发Web应用,具有快速.安全以及可移 ...
随机推荐
- Java基本概念：面向对象
一.简介 面向过程的思维模式是简单的线性思维,思考问题首先陷入第一步做什么.第二步做什么的细节中. 面向对象的思维模式说白了就是分类思维模式.思考问题首先会解决问题需要哪些分类,然后对这些分类进行单独 ...
- MySQL如何搭建主库从库(Docker)
目录 MySQL主从搭建 一.主从配置原理 二.操作步骤 1.创建主库和从库容器 2.启动主从库容器 3.远程连接并操作主从库 4.测试主从同步 MySQL主从搭建 一.主从配置原理 mysql主从配 ...
- Svelte v2 已经过时了！
带你走马观花,细看新版变化. 注意:原文发表于2018-04-18,随着框架不断演进,部分内容可能已不适用. 大约是一年之前,我们首次在 Svelte 的 issue 跟踪器上讨论过 v2 版本,现在 ...
- JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
- 看完我的笔记不懂也会懂----ECMAscript 567
目录 ECMAscript 567 严格模式 字符串扩展 数值的扩展 Object对象方法扩展 数组的扩展 数组方法的扩展 bind.call.apply用法详解 let const 变量的解构赋值 ...
- 一个基于 Vue3 的开源项目，3个月时间 star 终于破千！
本文主要是对如何做开源项目的一些思考. 前文回顾: <Vue3 来了,Vue3 开源商城项目重构计划正式启动!> <一个基于 Vue 3 + Vant 3 的开源商城项目> 关 ...
- 2.5w字 + 36 张图爆肝操作系统面试题，太牛逼了！
欢迎各位大佬访问我的 github ,跪求 star bestJavaer 大家好,我是 cxuan,我之前汇总了一下关于操作系统的面试题,最近又重新翻阅了一下发现不是很全,现在也到了面试季了,所以我 ...
- solr 远程代码执行(CVE-2019-12409)
Apache Solr 远程代码执行漏洞(CVE-2019-12409) 简介 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.是apache的顶级开源项 ...
- 医学图像配准 | Voxelmorph 微分同胚 | MICCAI2019
文章转载:微信公众号「机器学习炼丹术」 作者:炼丹兄(已授权) 联系方式:微信cyx645016617(欢迎交流) 论文题目:'Unsupervised Learning for Fast Proba ...
- 最权威的html 标签属性大全
<p>---恢复内容开始---</p>1.html标签 <marquee>...</marquee>普通卷动 <marquee behavior= ...