从零开始开发纯血鸿蒙应用之网页欣赏

〇、前言

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

如果你没有跳过前面的几篇，那么应该知道，在文件内容编辑和检察界面的右上角菜单，我不停没有确定应该提供什么样的功能，如今，是时候更换此中一个了。
也同样是在前面的内容中，我已经利用 @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 的部分，基于该部分，可以扩展地探索开发欣赏器的实现方案。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。