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

〇、前言

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

一、优化菜单交互

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

也同样是在前面的内容中，我已经利用 @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 的部分，基于该部分，可以扩展地探索开发浏览器的实现方案。