从零开始开发纯血鸿蒙应用
- 〇、前言
- 一、优化菜单交互
-
- 1、BuilderFunction.ets
- [2、改造 PageTitleBar](#2、改造 PageTitleBar)
- 二、网址打开
- 三、总结
〇、前言
一直以来，桌面应用也好，手机应用也罢，对于网址的访问，无非两种形式：用浏览器打开和自身内部打开，那么这两种方式，在鸿蒙应用开发框架中，又当如何实现呢？且看下文。
一、优化菜单交互
如果你没有跳过前面的几篇，那么应该知道，在文件内容编辑和查看界面的右上角菜单，我一直没有确定应该提供什么样的功能，现在，是时候替换其中一个了。
也同样是在前面的内容中，我已经利用 @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 的部分，基于该部分，可以扩展地探索开发浏览器的实现方案。