前言
鸿蒙Next版本即将抛弃Android,让我们简单了解一下鸿蒙开发。
UI框架
鸿蒙支持两套UI开发模型,作为客户端开发的我们,选择声明式开发范式。
UI布局/组件
这是常见的UI布局/组件,跟Android还是挺类似的,我们鸿蒙开发官网,按照demo,实现一下还是挺简单的。
项目架构
了解完了布局和UI框架,这些基本的东西,我们新建一个项目可以看一下,他的整体结构是这样的。
完整目录如下:
├── AppScope // app 默认配置
│ ├── resources // 资源
│ │ └── base
│ │ ├── element // 文案、颜色等资源
│ │ │ └── string.json
│ │ └── media // 图片资源
│ │ └── app_icon.png
│ └── app.json5 // app 配置,包括 名称、图标、bundleName、版本号等
├── entry // entry 文件夹,相当于 Android 项目中的 app module
│ ├── src
│ │ ├── main
│ │ │ ├── ets // 源代码,相当于 Android 项目中的 java 目录
│ │ │ │ ├── entryability
│ │ │ │ │ └── EntryAbility.ts // entry 中的页面,一个 entry 可以有多个 Ability
│ │ │ │ └── pages
│ │ │ │ └── Index.ets
│ │ │ ├── resources
│ │ │ │ ├── base // 和语言无关的通用资源
│ │ │ │ │ ├── element // 文案、颜色等资源
│ │ │ │ │ │ ├── color.json
│ │ │ │ │ │ └── string.json
│ │ │ │ │ ├── media // 图片资源
│ │ │ │ │ │ └── icon.png
│ │ │ │ │ └── profile
│ │ │ │ │ └── main_pages.json // entry 中包含的 pages 路径,相当于前端项目中 app.json 中的 pages
│ │ │ │ ├── en_US // 英文下使用的资源,可以用来配置多语言
│ │ │ │ ├── rawfile // 应该是存放二进制文件的目录,相当于 Android 项目中的 res/raw 目录,暂时还没用到
│ │ │ │ └── zh_CN // 同 en_US
│ │ │ └── module.json5 // entry 内部配置文件,包括名称、包含的 Abilities、pages,默认 Ability 等
│ │ └── ohosTest // 测试代码
│ ├── build-profile.json5 // entry 构建配置,包括应用模型、支持的系统类型等
│ ├── hvigorfile.ts // 暂时不清楚
│ └── oh-package.json5 // entry 对外配置文件,包括名称、版本、许可证、依赖项等
├── hvigor // 暂时不清楚,看着像是 Android 项目中的 grade 目录
│ ├── hvigor-config.json5
│ └── hvigor-wrapper.js
├── oh_modules // 项目依赖的三方库,相当于前端项目中的 node_modules
├── build-profile.json5 // app 构建配置,包括 app 签名、编译 SDK 版本、兼容 SDK 版本,以及包含的 entry 列表
├── hvigorfile.ts // 暂时不清楚
├── hvigorw // 暂时不清楚
├── hvigorw.bat
├── local.properties // 本地配置
├── oh-package.json5 // 项目配置,包括名称、版本、许可证、依赖项等
└── oh-package-lock.json5`
实际例子
了解完整体的UI框架和布局组件,我们来编写第一个HelloWorld
@Entry
@Component
struct HelloWorld {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮,以响应用户点击
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
显示效果:
简单来说就是一个垂直布局里面从上到下写了个Text、Button.
WanAndroid介绍
架构介绍
言归正传,上面大概介绍鸿蒙开发的一些基础事项,现在来介绍一下,本文的重点,一个开源的鸿蒙版WanAndroid App。
首先要感谢一下,WanAndroid Api支持。
本App主要包括:首页、广场、体系、公众号、我的五大模块
主要技术栈:PageLoading页面成功失败状态切换+PullToRefresh上拉刷新、下拉加载列表模块+原生router页面跳转+带cookie封转网络请求API+基础webview页面浏览模块
项目截图
项目地址
完整项目Github地址,如有帮助,感谢fork,给个赞和小❤️❤️。