FE转鸿蒙app开发必须补齐哪些知识点?

前言

在当今的移动互联网时代,鸿蒙作为后起之秀正在快速吸引各家公司为其开发应用。鸿蒙系统由于其独特的优势,已经成为了FE和客户端开发人员进行学习的热门选择。许多前端开发人员也考虑转行做鸿蒙客户端app开发。而FE转行做鸿蒙有着天然的优势!

本文将详细介绍前端开发人员转行做鸿蒙客户端app开发所需要掌握的技术和知识。

H5开发在和客户端开发在过程中有一些相同点 可以使得跨行变得比较容易,但也有些差异点需要及时的掌握和理解。

本文通过介绍FE转鸿蒙开发的优势,差异以及客户端开发中必要掌握的知识点。

优势

语言

鸿蒙的开发模式经过这几年不停的迭代,目前最新的API 9下,开发语言采用华为自研的ArkTs. 让我们看下官方对ArkTs的介绍:

ArkTS 语言

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript(简称TS)基本语法风格的基础上,对TS的动态类型特性施加更严格的约束,引入静态类型。同时,提供了声明式UI、状态管理等相应的能力,让开发者可以以更简洁、更自然的方式开发高性能应用。

来看这几个关键词: TypeScript, 声明式UI, 状态管理

你想到了什么? 这不就跟VUE一样吗,是不是真的一样呢,我们来看看细节:

  • 基本语法:ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力,再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
  • 状态管理:ArkTS提供了多维度的状态管理机制。在UI开发框架中,与UI相关联的数据可以在组件内使用,也可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,还可以在应用全局范围内传递或跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
  • 渲染控制:ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。

作为做过一点VUE开发的我来说,就是非常熟悉的感觉。实际上手你就会发现真的是差不多。其实不仅像VUE,现在的安卓ComposeUI, iOS的 SwiftUI,跨平台的Flutter。 声明式UI开发方式总体趋同,对大前端开发者的技术栈切换也是更有利的。

这里的@State就是你理解的意思:表示组件中的状态变量,状态变量变化会触发UI刷新。

再来看两个:

@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。

@Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变,可以使用@Watch为状态变量设置回调函数。

怎么样,你有没有这种熟悉的感觉? 与此同时在样式控制上还是有差异的,ArkTs开发UI时并不使用CSS。而是在组件上通过样式方法来直接控制。比如上图样例中的.height(50).width(100)等方法。

UI交互

同样在手机上的交互展示,客户端和H5其实大体上是很相近的。许多厂商推出的App和小程序在UI上就是尽可能做成完全一致。也就是说,H5和客户端交互理论上可以做成一致,并且使用上没有差异。

鸿蒙SDK提供了非常丰富易用的前端组件库,在功能开发时,需要我们先对组件库中的各种类别的组件有个大体的概念,方便在详设的时候进行组件选型确定。非常建议大家直接使用官方组件库来实现UI功能,因为官方对其组件库的维护支持力度很高,稳定性和性能会有较好的保障。

常见的页面结构

布局元素的组成

常用布局

常用基础组件

讲起来很像,但还是和Vue在写法上有差异的。不过一点都不用担心,鸿蒙官网提供的demo非常丰富,下载下来跑一跑改一改就熟悉了。 官方demo

差异

开发环境

鸿蒙开发使用的IDE是DevEco Studio

DevEco Studio 3.1配套支持HarmonyOS 3.1版本及以上的应用及服务开发,提供了代码智能编辑、低代码开发、双向预览等功能,以及轻量构建工具DevEco Hvigor 、本地模拟器,持续提升应用及服务开发效率。

由于是基于IntelliJ IDEA开发, 使用起来非常顺滑。 虽然VS是地球上最好用的IDE,但是DevEco Studio在你习惯以后也毫不逊色!

具体好在哪呢?

作为一款开发工具,除了具有基本的代码开发、编译构建及调测等功能外,DevEco Studio还具有如下特点:

  • 高效智能代码编辑:支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能,提升代码编写效率。更多详细信息,请参考编辑器使用技巧
  • 低代码可视化开发:丰富的UI界面编辑能力,支持自由拖拽组件和可视化数据绑定,可快速预览效果,所见即所得;同时支持卡片的零代码开发,降低开发门槛和提升界面开发效率。更多详细信息,请参考使用低代码开发应用/服务
  • 多端双向实时预览:支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览,便于快速查看代码运行效果。更多详细信息,请参考使用预览器预览应用/服务界面效果
  • 多端设备模拟仿真:提供HarmonyOS本地模拟器,支持手机等设备的模拟仿真,便捷获取调试环境。更多详细信息,请参考使用模拟器运行应用/服务

在DevEco Studio中,可以对UI进行预览Preview。 一边改代码一边就能在IDE中看到预览图。

IDE自带模拟器, 没有手机的情况下也能进行代码调试和功能预览。

IDE自带SDK管理功能,可以下载并更新鸿蒙SDK

另外还有编译打包,日志输出,性能监控,单步调试等功能也非常完备。

日志和调试

DevEco Studio的日志系统包括HiLog日志和FaultLog日志系统,其中:

  • HiLog日志系统:让应用/服务可以按照指定类型、指定级别、指定格式字符串打印日志内容,帮助开发者了解应用/服务的运行状态,更好地调试程序。
  • FaultLog日志系统:FaultLog是为了满足HarmonyOS应用/服务开发者基本的故障定位需求而设计,能够帮助应用开发者快速查询、定位、导出应用故障信息。

为了方便日志分类过滤,HiLog支持多种级别的日志输出。 以输出一条INFO级别的信息为例,示例代码:

ts 复制代码
hilog.info(0xFF00, "testTag", "%{public}s World %{public}d", "hello", 3);

该行代码表示输出一个普通信息,格式字符串为:"%{public}s World %{public}d"。其中变参"%{public}s"为公共的字符串;%{public}d为公共的整型数。

查看日志信息

DevEco Studio提供了"Log > HiLog"窗口查看日志信息,开发者可通过设置设备、进程、日志级别和搜索关键词来筛选日志信息。搜索功能支持使用正则表达式,开发者可通过搜索自定义的业务领域值和TAG来筛选日志信息。

根据实际情况选择了设备和进程后,搜索标签"testTag"进行筛选,得到对应的日志信息。

关于代码调试: 通过DevEco Studio可以在真机或者模拟器上进行代码调试。

首先在工具栏启动调试

在代码中打上断点

启动调试后,开发者可以通过调试器进行代码调试。调试器的功能说明如下表所示:

通过DevEco Studio能够非常高效的实现日志输出和代码调试。也不是说console.log()不好用,但显然在DevEco Studio中进行问题排查会有更好的体验。

客户端概念

更新和发布

更新和发布H5项目相对于客户端来说会显得更轻。H5项目在编译产出后可以进行线上版本的直接替换。这种特性是客户端所不具备或者说不易于操作的。

所以在进行客户端开发时,我们需要格外小心,因为如果把bug带上客户端某个版本中并且上了市场。改问题可没那么容易。即使修复后也需要再次提交应用市场进行发版,而版本的更新速度也不易掌控。所以需要在测试发版时进行完备的功能检测后才能进行发版操作。

发版前期准备:

  1. 在应用市场注册账号
  2. 提供ICP备案和APP备案材料
  3. 提供软件著作权证明材料
  4. 提供隐私政策文件网页
  5. 提供应用相关的图标,宣传文案,宣传图片,权限使用情况解释等。
  6. 等待账号审批生效

整个前期过程需要一段时间,所以如果是新产品需要发版的话需要有一个提前时间量,预计1个月。准备过程应该在立项后就开始操作。

获取应用市场账号后才可进行后续发版操作

典型的发版过程是这样的:

  1. 由客户端开发通过IDE打包,或者通过公司的打包机,打包平台进行打包。
  2. 登录应用市场,进入版本管理。进行安装包替换,同时更新发版文案。
  3. 等待市场审核
  4. 审核不通过则需要整改,通过后可以立即更新市场中的版本。或者由运营同学在指定时间进行市场版本更新。

登录信息校验

与H5的登录后由登录页或者登录SDK进行cookie种植登录信息不同,客户端需要在登录SDK返回登录成功回调或者后端返回登录成功信息后。按照后端服务对账号验证信息传输要求来处理登录信息,往往需要客户端在后续请求的header中加入登录校验信息。这就需要客户端对登录信息,登录信息超时,登录失败等情况作出处理。

安全和隐私

安全和隐私相关的要求并不仅限于对用户操作和信息的保护。同时由国家信息委,应用市场,公司法务等部门严密管控约束。

最直接的影响是,如果不符合相关隐私权限规定,应用将被下架。需要整改完成并经过测试验证后才可重新提交市场。

应用应该在用户使用前进行隐私协议的告知,并征求用户同意后方可提供服务。

随着移动终端及其相关业务(如移动支付、终端云等)的普及,用户隐私保护的重要性愈发突出。应用开发者在产品设计阶段就需要考虑用户隐私的保护,提高应用的安全性。HarmonyOS应用开发需要遵从隐私保护规则,在应用上架应用市场时,应用市场会根据规则进行校验,如不满足条件则无法上架。

隐私保护的要求

  • 透明可控

应用采集个人数据时,应清晰、明确地告知用户,并确保告知用户的个人信息将被如何使用。

  • 数据最小化

应用个人数据收集应与数据处理目的相关,且是适当、必要的。开发者应尽可能对个人数据进行匿名化或假名化处理,降低数据主体的风险。仅可收集和处理与特定目的相关且必需的个人数据,不能对数据做出与特定目的不相关的处理。

  • 身份保护

使用隐私增强技术,使数据离开端侧时保护用户的身份。

  • 数据安全保障

从技术上保证数据处理活动的安全性,包括个人数据的加密存储、安全传输等安全机制,应默认开启或采取安全保护措施。

  • 数据端侧处理

应用开发的数据优先在本地进行处理,对于本地无法处理的数据上传云服务要满足最小化的原则,不能默认选择上传云服务。

权限管理

ATM (AccessTokenManager) 是HarmonyOS上基于AccessToken构建的统一的应用权限管理能力。

默认情况下,应用只能访问有限的系统资源。但某些情况下,应用为了扩展功能的诉求,需要访问额外的系统或其他应用的数据(包括用户个人数据)、功能。系统或应用也必须以明确的方式对外提供接口来共享其数据或功能。HarmonyOS提供了一种访问控制机制来保证这些数据或功能不会被不当或恶意使用,即应用权限。

应用权限保护的对象可以分为数据和功能:

  • 数据包含了个人数据(如照片、通讯录、日历、位置等)、设备数据(如设备标识、相机、麦克风等)、应用数据。
  • 功能则包括了设备功能(如打电话、发短信、联网等)、应用功能(如弹出悬浮框、创建快捷方式等)等。

应用权限是程序访问操作某种对象的通行证。权限在应用层面要求有明确定义,应用权限使得系统可以规范各类应用程序的行为准则,实现用户隐私的保护机制。当应用访问操作目标对象时,目标对象会对应用进行权限检查,如果没有对应权限,则访问操作将被拒绝。

应用使用权限的工作流程如图所示。

应用使用权限校验的工作流程如图所示。

应用的等级可以分为三个等级,分别是:

APL级别 说明
system_core等级 该等级的应用服务提供操作系统核心能力。
system_basic等级 该等级的应用服务提供系统基础服务。
normal等级 普通应用。

默认情况下,应用的APL等级都为normal等级。

由于权限管理这块内容在鸿蒙客户端开发过程中始终贯穿,并且非常重要。

建议FE开发人员到官网进行完整学习。 访问控制(权限)开发概述

总结

本文通过总结 FE转鸿蒙的一些优势,并罗列了鸿蒙开发与前端开发的一些差异点。同时对客户端开发的一些特殊点也进行了介绍。 通过简单的概念介绍和场景罗列,希望引起FE开发人员对鸿蒙app开发的兴趣。从而推动鸿蒙发展,毕竟不远的未来或许鸿蒙作为我们国家自有的操作系统真的要起来了,如果你想赶上趟。欢迎一起学习鸿蒙搞鸿蒙!

谢谢点赞关注!欢迎留言讨论

后续将继续更新本专栏《动手学鸿蒙App开发 HarmonyOS

相关推荐
鸿蒙自习室2 分钟前
鸿蒙多线程开发——并发模型对比(Actor与内存共享)
华为·harmonyos
栈老师不回家36 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙42 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
JavaPub-rodert1 小时前
鸿蒙生态崛起:开发者的机遇与挑战
华为·harmonyos
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos