WordPress移动站,wordpress按钮切换内容,app管理系统,接入备案和增加网站从零开始开发纯血鸿蒙应用 〇、前言一、优化菜单交互1、BuilderFunction.ets2、改造 PageTitleBar 二、网址打开1、方式选择1、使用浏览器打开2、内部打开2.1、声明权限2.2、封装 WebViewPage2.2.1、组件字段2.2.2、aboutToAppear2.2.3、onBackPress2.2.4、标题栏2.2.4、网页内… 从零开始开发纯血鸿蒙应用 〇、前言一、优化菜单交互1、BuilderFunction.ets2、改造 PageTitleBar 二、网址打开1、方式选择1、使用浏览器打开2、内部打开2.1、声明权限2.2、封装 WebViewPage2.2.1、组件字段2.2.2、aboutToAppear2.2.3、onBackPress2.2.4、标题栏2.2.4、网页内容展示 2.3、实现效果 三、总结 〇、前言
一直以来桌面应用也好手机应用也罢对于网址的访问无非两种形式用浏览器打开和自身内部打开那么这两种方式在鸿蒙应用开发框架中又当如何实现呢且看下文。
一、优化菜单交互
如果你没有跳过前面的几篇那么应该知道在文件内容编辑和查看界面的右上角菜单我一直没有确定应该提供什么样的功能现在是时候替换其中一个了。
也同样是在前面的内容中我已经利用 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 一共声明定义了四个字段 1ctx关联UI上下文的字段 2root定义页面根组件 Column 样式的字段 3webController获取控制Web组件的控制器实例的字段 4url保存拉起当前页面传入的网址的字段
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 使用时有几个组件属性必须设置好 1JavaScriptAccess 属性 现在的网页大部分在实现时都会用到大量的 Javascript 代码所以开启支持才能保证大部分网页可以被正常显示出来。 2domStorageAccess 属性 不同于 JavaScriptAccess 属性的默认开启domStorageAccess 属性是默认关闭的然而鉴于许多网页会用到 DOM Storage API所以设置为开启比较好。
3onGeolocationShow Web 组件有一个 geolocationAccess(geolocationAccess: boolean) 属性设置是否开启获取地理位置权限并且默认是开启的然而由于定位权限是用户授权的因此鸿蒙应用市场审核要求规定使用Web组件且用到定位能力时必须向用户弹窗申请定位权限而这个申请弹窗就可以放在 onGeolocationShow 中进行实现
2.3、实现效果
最终上述代码运作时的实现效果如下
三、总结
本篇围绕如何在纯血鸿蒙应用中实现网址打开操作先后介绍了带参数的自定义构建函数的使用调用系统浏览器的实现以及如何封装 WebViewPage。值得重点学习的理当首推封装 webViewPage 的部分基于该部分可以扩展地探索开发浏览器的实现方案。
