【鸿蒙应用ArkTS开发系列】- Web组件使用讲解

news/2024/7/21 9:27:01 标签: harmonyos, 前端, ArkUI, ArkTS, 鸿蒙开发

目录

ArkTS开发系列】Web组件使用-Web组件介绍-toc" style="margin-left:0px;">一、Web组件介绍

ArkTS开发系列】Web组件使用-创建组件-toc" style="margin-left:0px;">二、创建组件

ArkTS开发系列】Web组件使用-权限列表-toc" style="margin-left:40px;">权限列表

ArkTS开发系列】Web组件使用-设置样式和属性-toc" style="margin-left:0px;">三、设置样式和属性

ArkTS开发系列】Web组件使用-添加事件和方法-toc" style="margin-left:0px;">四、添加事件和方法

ArkTS开发系列】Web组件使用-访问本地Html-toc" style="margin-left:0px;">五、访问本地Html

ArkTS开发系列】Web组件使用-1、本地html文件创建-toc" style="margin-left:40px;">1、本地html文件创建

ArkTS开发系列】Web组件使用-2、本地html文件加载-toc" style="margin-left:40px;">2、本地html文件加载

ArkTS开发系列】Web组件使用-2、JS对象注入,Html使用JS对象调用客户端方法-toc" style="margin-left:40px;">2、JS对象注入,Html使用JS对象调用客户端方法

ArkTS开发系列】Web组件使用-3、客户端调用本地Html网页中的JS方法-toc" style="margin-left:40px;">3、客户端调用本地Html网页中的JS方法


使用鸿蒙的ArkUI框架开发鸿蒙应用的时候,官方为我们提供了一个web组件,提供给开发者使用,通过本文学习,我们将了解并学会如何使用Web组件进行如下操作:

  • 在线网页加载
  • 本地离线网页加载
  • Web组件常用属性设置
  • 客户端与网页之间的双向通信交互

下面我们先来看下Web组件的介绍。

ArkTS开发系列】Web组件使用-Web组件介绍">一、Web组件介绍

Web是提供网页显示能力的组件,具体用法请参考 Web API。

ArkTS开发系列】Web组件使用-创建组件">二、创建组件

在pages目录下创建WebComponent .ets的Page页面,  页面上放一个Web组件。在Web组件中通过src指定引用的网页路径,controller为组件的控制器,通过controller绑定Web组件,用于调用Web组件的方法。

​

@Entry

@Component

struct WebComponent {

  controller: WebController = new WebController();

  build() {

    Column() {

      Web({ src: 'https://www.douban.com/', controller: this.controller })

    }

  }

}

​

使用Web组件,访问在线网页,需要给应用配置网络权限,

ArkTS开发系列】Web组件使用-权限列表">权限列表

访问在线网页时需添加网络权限:ohos.permission.INTERNET

ArkTS开发系列】Web组件使用-设置样式和属性">三、设置样式和属性

Web组件的使用需要添加丰富的页面样式和功能属性。设置height、padding样式可为Web组件添加高和内边距,设置fileAccess属性可为Web组件添加文件访问权限,设置javaScriptAccess属性为true使Web组件具有执行JavaScript代码的能力。

​

@Entry

@Component

struct WebComponent {

  fileAccess: boolean = true;

  controller: WebController = new WebController();

  build() {

    Column() {

      Text('Hello world!')

        .fontSize(20)

      Web({ src: 'https://www.douban.com/', controller: this.controller })

        // 设置高和内边距

        .height(500)

        .padding(20)

        // 设置文件访问权限和脚本执行权限

        .fileAccess(this.fileAccess)

        .javaScriptAccess(true)

      Text('End')

        .fontSize(20)

    }

  }

}

​

ArkTS开发系列】Web组件使用-添加事件和方法">四、添加事件和方法

为Web组件添加onProgressChange事件,该事件回调Web引擎加载页面的进度值。将该进度值赋值给Progress组件的value,控制Progress组件的状态。当进度为100%时隐藏Progress组件,Web页面加载完成。

​
import web_view from '@ohos.web.webview';

@Entry

@Component

struct RemoteWebPage {

  @State progress: number = 0

  @State hideProgress: boolean = true

  controller: web_view.WebviewController = new web_view.WebviewController()

  build() {

    Column() {

      Progress({ total: 100, value: this.progress })

        .color('#ff5cea20')

        .visibility(this.hideProgress ? Visibility.None : Visibility.Visible)

      Web({ src: 'https://www.douban.com/', controller: this.controller })

        .height('100%')

        // 添加onProgressChange事件

        .onProgressChange(e => {

          this.progress = e.newProgress

         // 当进度100%时,进度条消失

          if (this.progress == 100) {

            this.hideProgress = true

          } else {

            this.hideProgress = false

          }

        })

    }.backgroundColor('0xFFFFFF')

  }

}

​

效果如下:

上面讲的是使用Web组件访问一个在线网页,那怎么加载本地网页文件呢?

ArkTS开发系列】Web组件使用-访问本地Html">五、访问本地Html

先看效果图

实现了一个加载本地网页文件,然后Html网页中调用客户端的方法,进行了一个关闭页面和拉起系统相册的功能,下面开始讲下代码实现。

ArkTS开发系列】Web组件使用-1、本地html文件创建">1、本地html文件创建

在entry/src/main/resources/rawfile目录下,我们创建一个index.html文件

<!-- index.html -->

<!DOCTYPE html>

<html>

<body>

<p>Hello World</p>

<p>这个是来自本地的html文件</p>



<button type="button" onclick="window.jsBridge.closePage()">点击调用原生关闭页面</button>

<button type="button" onclick="window.jsBridge.jumpSystemPicture()">点击拉起原生系统相册</button>

</body>

</html>

ArkTS开发系列】Web组件使用-2、本地html文件加载">2、本地html文件加载

创建一个LocalWebPage页面,加载index.html 文件

import web_view from '@ohos.web.webview';



@Entry

@Component

struct LocalWebPage {

  controller: web_view.WebviewController = new web_view.WebviewController()



  build() {

    Column() {

      Web({ src: $rawfile("index.html"), controller: this.controller })

        .height('100%')

    }

  }

}

这里我们使用$rawfile("index.html")进行本地html文件获取。

ArkTS开发系列】Web组件使用-2、JS对象注入,Html使用JS对象调用客户端方法">2、JS对象注入,Html使用JS对象调用客户端方法

如果需要进行网页跟客户端进行交互,我们需要设置往Html中注入一个JS对象,具体如下:

import web_view from '@ohos.web.webview';

import common from '@ohos.app.ability.common';

import router from '@ohos.router';



@Entry

@Component

struct LocalWebPage {

  controller: web_view.WebviewController = new web_view.WebviewController()



  jsBridge = {



    jumpSystemPicture() {



      let context = getContext(this) as common.UIAbilityContext;



      let want  = {

          "deviceId": "",

          "bundleName": "",

          "abilityName": "",

          "uri": "",

          "type": "image/*",

          "action": "android.intent.action.GET_CONTENT",

          "parameters":{},

          "entities":[]



      };

      context.startAbility(want);

    },



    closePage() {

      router.back()

    }

  }



  build() {

    Column() {

      Web({ src: $rawfile("index.html"), controller: this.controller })

        .javaScriptAccess(true)

        .javaScriptProxy({

          object: this.jsBridge,

          name: "jsBridge",

          methodList: ["closePage","jumpSystemPicture"],

          controller: this.controller

        })

        .height('100%')

    }

  }

}

这里我们定义了一个JS对象jsBridge ,定义了两个方法,jumpSystemPicture 和closePage,分别用于html 拉起系统相册和关闭客户端页面,然后使用Web的 javaScriptProxy方法进行JS对象注入设置,具体的配置如上述代码,需要配置对象名称,注入方法。

看下上文中Html 调用JS的代码,比如调用客户端的关闭页面方法,使用

window.jsBridge.closePage() 进行触发。

ArkTS开发系列】Web组件使用-3、客户端调用本地Html网页中的JS方法">3、客户端调用本地Html网页中的JS方法

在onPageEnd事件中添加runJavaScript方法。onPageEnd事件是网页加载完成时的回调,runJavaScript方法可以执行HTML中的JavaScript脚本。当页面加载完成时,触发onPageEnd事件,调用HTML文件中的test方法,在控制台打印信息。

import web_view from '@ohos.web.webview';

import router from '@ohos.router';



@Entry

@Component

struct LocalWebPage {

  controller: web_view.WebviewController = new web_view.WebviewController()





  build() {

    Column() {

      Web({ src: $rawfile("index.html"), controller: this.controller })

        .javaScriptAccess(true)

      .onPageEnd(e =>{

          // test()在index.html中定义

          this.controller.runJavaScript('test()');

          console.info('url: ', e.url);

        })

        .height('100%')

    }

  }

}
<!-- index.html -->

<!DOCTYPE html>

<html>

<body>

<p>Hello World</p>

<p>这个是来自本地的html文件</p>



<button type="button" onclick="window.jsBridge.closePage()">点击调用原生关闭页面</button>

<button type="button" onclick="window.jsBridge.jumpSystemPicture()">点击拉起原生系统相册</button>

</body>

<script type="text/javascript">

  function test() {

      console.info('Ark Web Component');

  }

</script>

</html>

上面方法只提到了调用网页中的JS方法,如果要异步获取JS方法返回的数据,应该怎么操作呢,感兴趣的评论区留意讨论,有时间我再补充讲解下。

本文到此完结,谢谢阅读!


http://www.niftyadmin.cn/n/221409.html

相关文章

4.12~4.13学习总结

File 相对路径和绝对路径的区别&#xff1a; 相对路径不带盘符&#xff0c;绝对路径带盘符 小知识点&#xff1a;1KB1024字节&#xff0c;1MB1024KB,1GB1024MB; File对象就表示一个路径&#xff0c;可也是文件的路径&#xff0c;也可以是文件夹的路径 这个路径可以是存在的也可…

Vue实现自动化平台(四)--接口管理页面的实现

上一章&#xff1a; Vue实现自动化平台&#xff08;三&#xff09;_做测试的喵酱的博客-CSDN博客 github地址&#xff1a;https://github.com/18713341733/vuemiaotest 这个目前只是用来练手的&#xff0c;项目还没成型。等以后我写完了&#xff0c;再更新一下项目链接。 …

【华为OD机试真题 Python】采样过滤【200分 | 100%通过】

前言:本专栏将持续更新华为OD机试题目,并进行详细的分析与解答,包含完整的代码实现,希望可以帮助到正在努力的你。关于OD机试流程、面经、面试指导等,如有任何疑问,欢迎联系我,wechat:steven_moda;email:nansun0903@163.com;备注:CSDN。 题目描述 在做物理实验时,…

ES6 Symbol的介绍与创建

ES6 Symbol的介绍与创建 ES6 引入了一种新的原始数据类型 Symbol&#xff0c;表示独一无二的值。它是JavaScript语言的第七种数据类型。 u &#xff1a;undefined s &#xff1a;string symbol o &#xff1a;object n &#xff1a;null number b &#xff1a;boolean Symbol…

Active Directory 2016升级到2019部署方案

目录 一、前言 二、准备工作 1.备份Active Directory 2.检查现有环境 3.检查域和林功能级别

每日做题总结——day02

目录 字符串处理函数&#xff0c;strcpy&#xff0c;strcat 数组指针 函数缺省值 初始化列表​编辑 友元函数 new与delete 静态成员变量 new与构造函数 delete与析构函数 拷贝构造函数的特点 常成员函数 初始化列表 编程题 字符串中找出连续最长的数字串 数组中超过…

《我的第一本算法书》读书笔记

《我的第一本算法书》读书笔记作者&#xff1a;宫崎修一 石田保辉 ◆ 1-3 数组 在链表和数组中&#xff0c;数据都是线性地排成一列。在链表中访问数据较为复杂&#xff0c;添加和删除数据较为简单&#xff1b;而在数组中访问数据比较简单&#xff0c;添加和删除数据却比较复杂…

应用信息资源管理(张士玉、董焱)——第一章 总论

第一章 总论 1.1 信息社会 1.1.1 信息社会的形成 信息社会是指以信息技术为基础&#xff0c;信息产业为支撑&#xff0c;信息化为主要特征的社会形态。其形成经历了以下几个阶段&#xff1a; 信息化初期&#xff1a;20世纪60年代至70年代&#xff0c;电子计算机的出现和发展…