从零开始开发纯血鸿蒙应用之网页浏览

发布于:2025-02-24 ⋅ 阅读:(20) ⋅ 点赞:(0)

〇、前言

一直以来,桌面应用也好,手机应用也罢,对于网址的访问,无非两种形式:用浏览器打开和自身内部打开,那么这两种方式,在鸿蒙应用开发框架中,又当如何实现呢?且看下文。

一、优化菜单交互

如果你没有跳过前面的几篇,那么应该知道,在文件内容编辑和查看界面的右上角菜单,我一直没有确定应该提供什么样的功能,现在,是时候替换其中一个了。

也同样是在前面的内容中,我已经利用 @BuilderParam@Builder,将菜单从组件外传入,然而,这一组装饰器还有一种带参的使用方式,在进行改造之前,菜单的实现代码长成这样:
在这里插入图片描述
在这里插入图片描述
如果,我想要让“查看”这一菜单项的功能,为打开一个弹窗,仅是将 promptAction.showToast({message: "点击了查看"}) 换成 this.dialog.open(),不仅无法实现预期响应,反而还会带来应用奔溃的问题。

如果想要 this.dialog.oepn() 这种代码正常运行,就必须使用带参版自定义构建函数,下面就跟着我的步骤进行改造。

1、BuilderFunction.ets

考虑到后续丰富 TxtEdit 功能时,可能会大量使用自定义构建函数,所以,不妨新建一个脚本文件,专门来存放这类代码,如此一来,相同的菜单实现内容,也可以很方便的进行多处使用。这个脚本,我本人是将其放在了lib_comps模块,如果屏幕前的你,有其他想法,尽管按照你的想法去按排。

在这里插入图片描述
大部分代码同之前的一样,区别就在于方法名变更,同时还增加了方法参数、一个类型为 MenuOption 的参数。$$ArkTS 语言提供的具有 双向绑定能力的运算符。

2、改造 PageTitleBar

相对应的,PageTitleBar 组件的实现代码也进行相应的变更:
在这里插入图片描述
而使用了 PageTitleBar 的相关页面,需要将具体的菜单功能逻辑,通过 PageTitleBar 的 viewOption 字段传入,例如下面:
在这里插入图片描述

二、网址打开

1、方式选择

既然打开网址有两种方式,那么就需要由用户自己选择对应的方式,所以,就需要一个对话框去询问用户:
在这里插入图片描述
这个对话框的实现效果如下:
在这里插入图片描述

1、使用浏览器打开

首先,看一下使用现成的系统浏览器打开网址,应当怎么样实现?

其实,原理还是调用第三方应用的那一套,也即用 common.UIAbilityContext.startAbility 的方式:
在这里插入图片描述
在拉起系统浏览器之前,先对用户输入的网址进行合法性校验,比如不能为空,以及限定为 http 协议。

2、内部打开

这种方式,想当然的,就需要封装一个专门的页面进行网页内容的展示,核心思想就是利用鸿蒙开发框架现成的 WebView API 和 Web 组件。

2.1、声明权限

打开线上网页,需要使用网络,所以,需要声明 ohos.permission.INTERNET 权限,同时,一些网页的正在运作需要定位权限,因此,可以一并在 Entry 模块的 module.json5 文件中,用 requestPermissions 标签,将所有权限声明好:
在这里插入图片描述
对于由系统授权的权限,可以只写权限名,而对于需要用户授予的权限,除了权限名,使用原因和使用方式都必须写明。

2.2、封装 WebViewPage

整体代码如下:
在这里插入图片描述
按照从上到下的顺序,逐个部分进行讲解。

2.2.1、组件字段

WebViewPage 一共声明定义了四个字段:
1)ctx:关联UI上下文的字段
2)root:定义页面根组件 Column 样式的字段
3)webController:获取控制Web组件的控制器实例的字段
4)url:保存拉起当前页面传入的网址的字段

2.2.2、aboutToAppear

在 WebViewPage 中,声明周期函数 aboutToAppear 需要做的事情有两件,一是将网址从路由参数中解析出来,二是向用户申请定位权限。
在这里插入图片描述

2.2.3、onBackPress

onBackPress 函数,不是声明周期函数,而是页面级的事件函数,对应返回事件,当用户使用返回手势和返回按钮时,就会调用该函数。WebViewPage 之所以不保持 onBackPress 的默认实现,是为了兼容 网页后退和app页面后退

Web 组件,作为呈现网页内容的组件,具备了像浏览器那样记忆网页访问顺序的能力,也即内置了网页栈;当网页栈中不止一个网页,那么就可以进行网页后退,反之就不行;而确定当前 Web 组件能不能进行网页后退,可以利用 WebController 提供的 accessBackward 进行判断:
在这里插入图片描述
所以,onBackPress 就可以使用如下的代码去实现页面返回的兼容处理:
在这里插入图片描述
onBackPress 的返回值,是有特殊含义的;返回 true 时,表示返回事件由当前页面自行处理,返回 false 则表示由系统默认逻辑处理。

2.2.4、标题栏

由于 WebViewPage 需要在标题栏右侧,提供一个触发网页刷新的控件,所以,不适合直接用事先封装好的 PageTitleBar 组件,需要现场设计一个:
在这里插入图片描述
标题栏,理所应当要用行布局,并且是两端对齐、黑色背景。整个标题栏一共有三个控件,最左侧是返回控件,一样是兼容网页回退和app页面回退;中间部分是页面标题,固定显示内容”网页浏览“,并且当用户点击该控件时,会将网页内容滚回顶部位置;最右侧是刷新网页的控件,用户点击它就会触发网页刷新。

标题栏的三个控件中,除了返回控件外,剩下的两个,其交互实现都是基于 WebviewController 的。

2.2.4、网页内容展示

展示网页内容,可以用鸿蒙框架的内置组件 Web
在这里插入图片描述
使用时,有几个组件属性必须设置好:
在这里插入图片描述
1)JavaScriptAccess 属性
在这里插入图片描述
现在的网页,大部分在实现时都会用到大量的 Javascript 代码,所以开启支持才能保证大部分网页可以被正常显示出来。
2)domStorageAccess 属性
在这里插入图片描述
不同于 JavaScriptAccess 属性的默认开启,domStorageAccess 属性是默认关闭的,然而,鉴于许多网页会用到 DOM Storage API,所以,设置为开启比较好。

3)onGeolocationShow
Web 组件有一个 geolocationAccess(geolocationAccess: boolean) 属性,设置是否开启获取地理位置权限,并且默认是开启的,然而,由于定位权限是用户授权的,因此,鸿蒙应用市场审核要求,规定使用Web组件且用到定位能力时,必须向用户弹窗申请定位权限,而这个申请弹窗,就可以放在 onGeolocationShow 中进行实现:
在这里插入图片描述

2.3、实现效果

最终,上述代码运作时的实现效果如下:
在这里插入图片描述

三、总结

本篇围绕如何在纯血鸿蒙应用中,实现网址打开操作,先后介绍了带参数的自定义构建函数的使用,调用系统浏览器的实现,以及如何封装 WebViewPage。值得重点学习的,理当首推封装 webViewPage 的部分,基于该部分,可以扩展地探索开发浏览器的实现方案。


网站公告

今日签到

点亮在社区的每一天
去签到