1. 打开官网,找到WebView的文档(模拟器不支持)

    鸿蒙webview的开发指南(原始链接,方便大家识别并点击):https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-webview-0000001092715158



2. 创建一个Page Ability,把基本布局弄好

下面是代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="vertical">
  7.     <DirectionalLayout
  8.         ohos:height="30vp"
  9.         ohos:width="match_parent"
  10.         ohos:orientation="horizontal">
  11.         <TextField
  12.             ohos:id="$+id:text_webView_Url"
  13.             ohos:height="match_content"
  14.             ohos:width="match_parent"
  15.             ohos:background_element="$graphic:background_ability_simple_web_view"
  16.             ohos:focus_border_enable="true"
  17.             ohos:hint="请输入网址"
  18.             ohos:max_text_lines="1"
  19.             ohos:multiple_lines="false"
  20.             ohos:scrollable="true"
  21.             ohos:text="www.harmonyos.com"
  22.             ohos:text_size="50"
  23.             ohos:weight="1"
  24.             />
  25.         <Button
  26.             ohos:id="$+id:button_webview_surf"
  27.             ohos:height="match_content"
  28.             ohos:width="60vp"
  29.             ohos:background_element="$graphic:button_element"
  30.             ohos:text="跳转"
  31.             ohos:text_size="50"/>
  32.     </DirectionalLayout>
  33.     <ProgressBar
  34.         ohos:id="$+id:other_webView_progressBar"
  35.         ohos:height="10vp"
  36.         ohos:width="match_parent"
  37.         ohos:visibility="hide">
  38.     </ProgressBar>
  39.     <ohos.agp.components.webengine.WebView
  40.         ohos:id="$+id:webview_webview_webview"
  41.         ohos:height="match_parent"
  42.         ohos:width="match_parent"
  43.         ohos:weight="1">
  44.     </ohos.agp.components.webengine.WebView>
  45.     <DirectionalLayout
  46.         ohos:height="30vp"
  47.         ohos:width="match_parent"
  48.         ohos:orientation="horizontal">
  49.         <DirectionalLayout
  50.             ohos:height="match_content"
  51.             ohos:width="match_parent"
  52.             ohos:orientation="horizontal"
  53.             ohos:weight="1">
  54.             <Button
  55.                 ohos:id="$+id:button_webview_back"
  56.                 ohos:height="match_content"
  57.                 ohos:width="match_parent"
  58.                 ohos:background_element="$graphic:button_element"
  59.                 ohos:layout_alignment="horizontal_center"
  60.                 ohos:text="向后"
  61.                 ohos:text_size="50"
  62.                 >
  63.             </Button>
  64.         </DirectionalLayout>
  65.         <DirectionalLayout
  66.             ohos:height="match_content"
  67.             ohos:width="match_parent"
  68.             ohos:orientation="horizontal"
  69.             ohos:weight="1">
  70.             <Button
  71.                 ohos:id="$+id:button_webview_refresh"
  72.                 ohos:height="match_content"
  73.                 ohos:width="match_parent"
  74.                 ohos:background_element="$graphic:button_element"
  75.                 ohos:layout_alignment="horizontal_center"
  76.                 ohos:text="刷新"
  77.                 ohos:text_size="50">
  78.             </Button>
  79.         </DirectionalLayout>
  80.         <DirectionalLayout
  81.             ohos:height="match_content"
  82.             ohos:width="match_parent"
  83.             ohos:orientation="horizontal"
  84.             ohos:weight="1">
  85.             <Button
  86.                 ohos:id="$+id:button_webview_forward"
  87.                 ohos:height="match_content"
  88.                 ohos:width="match_parent"
  89.                 ohos:background_element="$graphic:button_element"
  90.                 ohos:layout_alignment="horizontal_center"
  91.                 ohos:text="向前"
  92.                 ohos:text_size="50">
  93.             </Button>
  94.         </DirectionalLayout>
  95.     </DirectionalLayout>
  96. </DirectionalLayout>

  1. 把基本的按钮事件弄好

    序号 按钮 功能
    1 跳转 把文本框中的网址打开
    2 后退 在webview中点了新链接后,想回去看一看
    3 刷新 以前的人在网络不好,美女图片出不来的时候用,现在一般是发了一篇帖子后,作者会没事点一下,看看有没有人点赞
    4 前进 跟后退是关联用的,就是点了新链接,回去看了看后,还是觉得新链接更好看,就又要前进.

    代码

    1.     Component.ClickedListener clickedListener = new Component.ClickedListener() {
    2.         @Override
    3.         public void onClick(Component component) {
    4.             int componentId = component.getId();
    5.             switch (componentId) {
    6.                 case ResourceTable.Id_button_webview_surf: {
    7.                     urlAddress = textWebViewUrl.getText();
    8.                     if (urlAddress.isEmpty()) {
    9.                         return;
    10.                     }
    11.                     if (!urlAddress.startsWith(FinalValue.URL_HTTPS)) {
    12.                         urlAddress = FinalValue.URL_HTTPS + urlAddress;
    13.                     }
    14.                     webView.load(urlAddress);
    16.                 }
    17.                 break;
    18.                 case ResourceTable.Id_button_webview_back: {
    19.                     if (webView.getNavigator().canGoBack()) {
    20.                         webView.getNavigator().goBack();
    21.                     }
    22.                 }
    23.                 break;
    24.                 case ResourceTable.Id_button_webview_refresh: {
    25.                     webView.reload();
    26.                 }
    27.                 break;
    28.                 case ResourceTable.Id_button_webview_forward: {
    29.                     if (webView.getNavigator().canGoForward()) {
    30.                         webView.getNavigator().goForward();
    31.                     }
    32.                 }
    33.                 break;
    34.                 default: {
    35.                     System.out.println("没有选择任何的页面");
    36.                 }
    37.                 break;
    38.             }
    39.         }
    40.     };
    43. - config.json
    45.    ``` json
    46.    {
    47.      "app": {
    48.        "bundleName": "com.javaaier.family.huawei",
    49.        "vendor": "javaaier",
    50.        "version": {
    51.          "code": 1,
    52.          "name": "1.0"
    53.        },
    54.        "apiVersion": {
    55.          "compatible": 5,
    56.          "target": 5,
    57.          "releaseType": "Beta1"
    58.        }
    59.      },
    60.      "deviceConfig": {
    62.      },
    63.      "module": {
    64.        "package": "com.javaaier.family.huawei",
    65.        "name": ".MyApplication",
    66.        "deviceType": [
    67.          "phone"
    68.        ],
    69.        "distro": {
    70.          "deliveryWithInstall": true,
    71.          "moduleName": "entry",
    72.          "moduleType": "entry"
    73.        },
    74.        "abilities": [
    75.          {
    76.            "skills": [
    77.              {
    78.                "entities": [
    79.                  "entity.system.home"
    80.                ],
    81.                "actions": [
    82.                  "action.system.home"
    83.                ]
    84.              }
    85.            ],
    86.            "orientation": "unspecified",
    87.            "name": "com.javaaier.family.huawei.MainAbility",
    88.            "icon": "$media:icon",
    89.            "description": "$string:mainability_description",
    90.            "label": "$string:app_name",
    91.            "type": "page",
    92.            "launchType": "standard"
    93.          },
    94.          {
    95.            "orientation": "unspecified",
    96.            "name": "com.javaaier.family.huawei.SimpleWebViewAbility",
    97.            "icon": "$media:icon",
    98.            "description": "$string:simplewebviewability_description",
    99.            "label": "$string:app_name",
    100.            "type": "page",
    101.            "launchType": "standard"
    102.          }
    103.        ],
    104.        "reqPermissions": [
    105.          {
    106.            "name": "ohos.permission.INTERNET"
    107.          }
    108.        ]
    109.      }
    110.    }

  • 把WebView照文档上面的要求弄好

    没啥好说的,就是规定.我加在了调用load方法打开网址那行代码后面,我还弄了一个跟进度条关联的功能

    1.   //允许javascript交互
    3.                     WebConfig webConfig = webView.getWebConfig();
    4.                     webConfig.setDataAbilityPermit(true);
    5.                     webConfig.setJavaScriptPermit(true);
    6.                     webConfig.setLoadsImagesPermit(true);
    7.                     webConfig.setMediaAutoReplay(true);
    8.                     webConfig.setLocationPermit(true);
    9.                     webConfig.setSecurityMode(WebConfig.SECURITY_SELF_ADAPTIVE);
    11.                     webView.setWebAgent(new WebAgent() {
    12.                         @Override
    13.                         public void onLoadingPage(WebView webView, String url, PixelMap favicon) {
    14.                             super.onLoadingPage(webView, url, favicon);
    15.                             // 这儿我加了一个更新网址文本框中新页面url的功能
    16.                             if (url != urlAddress) {
    17.                                textWebViewUrl.setText(url);
    18.                             }
    20.                         }
    22.                         @Override
    23.                         public void onPageLoaded(WebView webView, String url) {
    24.                             super.onPageLoaded(webView, url);
    25.                             // 页面加载结束后自定义处理
    26.                         }
    28.                         @Override
    29.                         public void onLoadingContent(WebView webView, String url) {
    30.                             super.onLoadingContent(webView, url);
    31.                             // 加载资源时自定义处理
    32.                         }
    34.                         @Override
    35.                         public void onError(WebView webView, ResourceRequest request, ResourceError error) {
    36.                             super.onError(webView, request, error);
    37.                             // 发生错误时自定义处理
    38.                         }
    39.                     });
    40.                     webView.setBrowserAgent(new BrowserAgent(SimpleWebViewAbilitySlice.this) {
    41.                         @Override
    42.                         public void onTitleUpdated(WebView webView, String title) {
    43.                             super.onTitleUpdated(webView, title);
    44.                             // 标题变更时自定义处理
    45.                         }
    47.                         @Override
    48.                         public void onProgressUpdated(WebView webView, int newProgress) {
    49.                             super.onProgressUpdated(webView, newProgress);
    50.                             if (newProgress < FinalValue.PROGRESS_BAR_FINISHED) {
    51.                                 otherWebViewProgressBar.setVisibility(Component.VISIBLE);
    52.                                 otherWebViewProgressBar.setProgressValue(newProgress);
    53.                             } else if (newProgress == FinalValue.PROGRESS_BAR_FINISHED) {
    54.                                 otherWebViewProgressBar.setVisibility(Component.HIDE);
    55.                             }
    56.                             // 加载进度变更时自定义处理
    57.                         }
    58.                     });

  • 完事?or完了还有事?

    从上面拷代码的话,估计完事了.但是,我是用的回忆,但是代码却没有回退,所以我还是有必要在这儿把步骤中的问题说一说,方便不拷代码的同学也能跑出一个界面.主要体现如下:

    1. 权限配置,不多说

      1.  "reqPermissions": [
      2.       {
      3.         "name": "ohos.permission.INTERNET"
      4.       }
      5.     ]

  • xml中的WebView要带包名

    1.   <ohos.agp.components.webengine.WebView
    2.         ohos:id="$+id:webview_webview_webview"
    3.         ohos:height="match_parent"
    4.         ohos:width="match_parent"
    5.         ohos:weight="1">
    6.     </ohos.agp.components.webengine.WebView>

    1. 不按上面包名写的话:

      • 真机运行后没有WebView的界面.哪怕weight=1,也不行
      • 点击跳转按钮后,PageAbility会闪退,回到首屏(调用它的页面)

    完事效果:https://www.bilibili.com/video/BV1tK4y1o7Hz/

  • 完整代码

    • 布局

      序号为2的步骤中贴全了

    • 按钮背景

      1. <?xml version="1.0" encoding="UTF-8" ?>
      2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
      3.        ohos:shape="rectangle">
      4.     <corners
      5.         ohos:radius="20"/>
      6.     <solid
      7.         ohos:color="#70dbdb"/>
      8. </shape>

  • java代码

    1. package com.javaaier.family.huawei.slice;
    3. import com.javaaier.family.huawei.ResourceTable;
    4. import com.javaaier.family.huawei.common.FinalValue;
    5. import ohos.aafwk.ability.AbilitySlice;
    6. import ohos.aafwk.content.Intent;
    7. import ohos.agp.components.*;
    8. import ohos.agp.components.webengine.*;
    9. import ohos.media.image.PixelMap;
    11. /**
    12.  * @Author JavaAIer
    13.  * @Description : webview控件例子1:用于简单的测试webview的用法 <br/>
    14.  * 001 简单webview示例
    15.  * @Date: 2021/4/16
    16.  */
    17. public class SimpleWebViewAbilitySlice extends AbilitySlice {
    18.     String urlAddress;
    20.     ProgressBar otherWebViewProgressBar;
    21.     TextField textWebViewUrl;
    22.     Button buttonWebViewSurf, buttonWebViewBack, buttonWebViewRefresh, buttonWebViewForward;
    23.     WebView webView;
    25.     Component.ClickedListener clickedListener = new Component.ClickedListener() {
    26.         @Override
    27.         public void onClick(Component component) {
    28.             int componentId = component.getId();
    29.             switch (componentId) {
    30.                 case ResourceTable.Id_button_webview_surf: {
    31.                     urlAddress = textWebViewUrl.getText();
    32.                     if (urlAddress.isEmpty()) {
    33.                         return;
    34.                     }
    35.                     if (!urlAddress.startsWith(FinalValue.URL_HTTPS)) {
    36.                         urlAddress = FinalValue.URL_HTTPS + urlAddress;
    37.                     }
    38.                     webView.load(urlAddress);
    40.                     //允许javascript交互
    42.                     WebConfig webConfig = webView.getWebConfig();
    43.                     webConfig.setDataAbilityPermit(true);
    44.                     webConfig.setJavaScriptPermit(true);
    45.                     webConfig.setLoadsImagesPermit(true);
    46.                     webConfig.setMediaAutoReplay(true);
    47.                     webConfig.setLocationPermit(true);
    48.                     webConfig.setSecurityMode(WebConfig.SECURITY_SELF_ADAPTIVE);
    50.                     webView.setWebAgent(new WebAgent() {
    51.                         @Override
    52.                         public void onLoadingPage(WebView webView, String url, PixelMap favicon) {
    53.                             super.onLoadingPage(webView, url, favicon);
    54.                             // 页面开始加载时自定义处理
    55.                             if (url != urlAddress) {
    56.                                textWebViewUrl.setText(url);
    57.                             }
    59.                         }
    61.                         @Override
    62.                         public void onPageLoaded(WebView webView, String url) {
    63.                             super.onPageLoaded(webView, url);
    64.                             // 页面加载结束后自定义处理
    65.                         }
    67.                         @Override
    68.                         public void onLoadingContent(WebView webView, String url) {
    69.                             super.onLoadingContent(webView, url);
    70.                             // 加载资源时自定义处理
    71.                         }
    73.                         @Override
    74.                         public void onError(WebView webView, ResourceRequest request, ResourceError error) {
    75.                             super.onError(webView, request, error);
    76.                             // 发生错误时自定义处理
    77.                         }
    78.                     });
    79.                     webView.setBrowserAgent(new BrowserAgent(SimpleWebViewAbilitySlice.this) {
    80.                         @Override
    81.                         public void onTitleUpdated(WebView webView, String title) {
    82.                             super.onTitleUpdated(webView, title);
    83.                             // 标题变更时自定义处理
    84.                         }
    86.                         @Override
    87.                         public void onProgressUpdated(WebView webView, int newProgress) {
    88.                             super.onProgressUpdated(webView, newProgress);
    89.                             if (newProgress < FinalValue.PROGRESS_BAR_FINISHED) {
    90.                                 otherWebViewProgressBar.setVisibility(Component.VISIBLE);
    91.                                 otherWebViewProgressBar.setProgressValue(newProgress);
    92.                             } else if (newProgress == FinalValue.PROGRESS_BAR_FINISHED) {
    93.                                 otherWebViewProgressBar.setVisibility(Component.HIDE);
    94.                             }
    95.                             // 加载进度变更时自定义处理
    96.                         }
    97.                     });
    98.                 }
    99.                 break;
    100.                 case ResourceTable.Id_button_webview_back: {
    101.                     if (webView.getNavigator().canGoBack()) {
    102.                         webView.getNavigator().goBack();
    103.                     }
    104.                 }
    105.                 break;
    106.                 case ResourceTable.Id_button_webview_refresh: {
    107.                     webView.reload();
    108.                 }
    109.                 break;
    110.                 case ResourceTable.Id_button_webview_forward: {
    111.                     if (webView.getNavigator().canGoForward()) {
    112.                         webView.getNavigator().goForward();
    113.                     }
    114.                 }
    115.                 break;
    116.                 default: {
    117.                     System.out.println("没有选择任何的页面");
    118.                 }
    119.                 break;
    120.             }
    121.         }
    122.     };
    124.     /**
    125.      * @Author JavaAIer
    126.      * @Description :
    127.      * @Date: 2021/4/16 14:46
    128.      * * @param intent
    129.      */
    130.     @Override
    132.     public void onStart(Intent intent) {
    133.         super.onStart(intent);
    134.         super.setUIContent(ResourceTable.Layout_ability_simple_web_view);
    135.         otherWebViewProgressBar = (ProgressBar) findComponentById(ResourceTable.Id_other_webView_progressBar);
    136.         textWebViewUrl = (TextField) findComponentById(ResourceTable.Id_text_webView_Url);
    137.         buttonWebViewSurf = (Button) findComponentById(ResourceTable.Id_button_webview_surf);
    138.         buttonWebViewSurf.setClickedListener(clickedListener);
    139.         buttonWebViewBack = (Button) findComponentById(ResourceTable.Id_button_webview_back);
    140.         buttonWebViewBack.setClickedListener(clickedListener);
    141.         buttonWebViewRefresh = (Button) findComponentById(ResourceTable.Id_button_webview_refresh);
    142.         buttonWebViewRefresh.setClickedListener(clickedListener);
    143.         buttonWebViewForward = (Button) findComponentById(ResourceTable.Id_button_webview_forward);
    144.         buttonWebViewForward.setClickedListener(clickedListener);
    145.         webView = (WebView) findComponentById(ResourceTable.Id_webview_webview_webview);
    147.     }
    149.     @Override
    150.     public void onActive() {
    151.         super.onActive();
    152.     }
    154.     @Override
    155.     public void onForeground(Intent intent) {
    156.         super.onForeground(intent);
    157.     }
    158. }
    159. /*
    160. * 这一截卡哇伊大喵在config.json用了,我发现用不用没啥区别啊
    161. * https://blog.csdn.net/qq_33259323/article/details/115596296
    162. *  "default": {
    163.       "network": {
    164.         "cleartextTraffic": true,
    165.         "securityConfig": {
    166.           "domainSettings": {
    167.             "cleartextPermitted": true,
    168.             "domains": [
    169.               {
    170.                 "subdomains": true,
    171.                 "name": "www.harmonyos.com"
    172.               }
    173.             ]
    174.           }
    175.         }
    176.       }
    177.     }
    178. *
    179. * */

    作者：人工智能姬

    想了解更多内容，请访问51CTO和华为合作共建的鸿蒙社区：https://harmonyos.51cto.com

001 - 使用鸿蒙WebView创建简单浏览器 step 1的更多相关文章

  1. Web Service 的创建简单编码、发布和部署

    最近,老大准备将已有的C/S架构项目中的通信部分做成通用,需要将其支持WebService为以后项目向着B/S架构升级做好铺垫,为此身为屌丝的我去各种百度WebService是个什么卵玩意,然后逐渐搭 ...

  2. 创建简单的响应式HTML5模版

    创建简单的响应式HTML5模版 HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持.许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页.与此 ...

  3. django初探-创建简单的博客系统

    django第一步 1. django安装 pip install django print(django.get_version()) 查看django版本 2. 创建项目 打开cmd,进入指定目录 ...

  4. simulink创建简单模型

    创建简单模型 您可以使用 Simulink® 对系统建模,然后仿真该系统的动态行为.Simulink 允许您创建模块图,图中的各个连接模块代表系统的各个部分,信号代表这些模块之间的输入/输出关系.Si ...

  5. 基于Gecko内核的简单浏览器实现

    分享一个基于Gecko内核的简单浏览器实现过程. 项目需要需要开发一个简单浏览器,由于被访问的网页中有大量Apng做的动画,使用IE内核的webbrowser不能播放,使用基于WebKit和Cefsh ...

  6. Intellij创建简单Springboot项目

    Intellij创建简单Springboot项目 第一步:选择创建新项目——file-new-project 第二步:选择项目类型——Spring Initializr-next 第三步:输入项目信息 ...

  7. django初探-创建简单的博客系统(一)

    django第一步 1. django安装 pip install django print(django.get_version()) 查看django版本 2. 创建项目 打开cmd,进入指定目录 ...

  8. mininet+floodlight搭建sdn环境并创建简单topo

    第一步:安装git sudo apt-get update sudo apt-get install git 测试git是否安装成功: git 第二步:安装mininet 1.获取mininet最新源 ...

  9. python创建简单网站

    前言 本方法基于web2py框架,使用web2py的完整网站数据包创建简单网站. web2py 是一个为Python语言提供的全功能Web应用框架,旨在敏捷快速的开发Web应用,具有快速.安全以及可移 ...

随机推荐

  1. 微信小程序：条件渲染wx：if和hidden

    一.条件渲染:wx:if,wx:elif,wx:else 花括号中的true或false可以改成变量从而来动态显示. 二.hidden 只显示hidden2 当标签不是频繁切换显示(控制是否渲染到页面 ...

  2. Dyno-queues 分布式延迟队列 之 辅助功能

    Dyno-queues 分布式延迟队列 之 辅助功能 目录 Dyno-queues 分布式延迟队列 之 辅助功能 0x00 摘要 0x01 前文回顾 0x2 Ack机制 2.1 加入Un-ack集合 ...

  3. vs调试qt代码，无法单步调试

    在使用vs调试qt代码时,可以编译但无法单步调试QT源码.报错缺少qmain_win.cpp或者其他q******.cpp文件. 1.因为安装qt时没有安装qt源码库,重新下载一个src源码就可以了. ...

  4. Linux磁盘分区格式化和扩容

    Note:根据各系统上磁盘的类型不同,磁盘命名规则也会不同:例如/dev/xvd,/dev/sd,/dev/vd,/dev/hd 目录 磁盘格式化 MBR格式 GPT分区 磁盘扩容 MBR格式扩容 G ...

  5. POJ-2387(原始dijkstra求最短路)

    Til the Cows Come Home POJ-2387 这题是最简单的最短路求解题,主要就是使用dijkstra算法,时间复杂度是\(O(n^2)\). 需要注意的是,一定要看清楚题目的输入要 ...

  6. 基于Hi3559AV100 RFCN实现细节解析-（3)系统输入VI分析一 :

    下面随笔系列将对Hi3559AV100 RFCN实现细节进行解析,整个过程涉及到VI.VDEC.VPSS.VGS.VO.NNIE,其中涉及的内容,大家可以参考之前我写的博客: Hi3559AV100的 ...

  7. mock 请求分发

    首发于 语雀文档 背景是这样的 我们公司的后管项目走的不是 resful 风格的 api,而是走后管网关,后管网关会将请求进行分发,具体怎么分发,有这么以下几点: 请求全部走 POST 请求 URL ...

  8. dubbo实战之四：管理控制台dubbo-admin

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  9. slickgrid ( nsunleo-slickgrid ) 2 修正区域选择不能跨冻结列的问题

    slickgrid( nsunleo-slickgrid )  2 修正区域选择不能跨冻结列的问题 周六的时候,留了个小小的尾巴,区域选择的问题进做到了定位: 问题原因,在slickgrid启动冻结之 ...

  10. C语言入门-mingw64安装+配置

    OK,大家好,结合上期所说,本期让我们来配置编译器吧! 首先先下载mingw64离线包,官网下载慢,可以去群里下载,*.7z格式(有些同学可能没有解压软件,为了照顾这部分同学,笔者提供*.exe格式的 ...