鸿蒙版的wanAndroid，你不了解一下_wanandroid 鸿蒙版

前言

鸿蒙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`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

实际例子

了解完整体的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%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

显示效果：

简单来说就是一个垂直布局里面从上到下写了个Text、Button.

WanAndroid介绍

架构介绍

言归正传，上面大概介绍鸿蒙开发的一些基础事项，现在来介绍一下，本文的重点，一个开源的鸿蒙版WanAndroid App。
首先要感谢一下，WanAndroid Api支持。
本App主要包括：首页、广场、体系、公众号、我的五大模块
主要技术栈：PageLoading页面成功失败状态切换+PullToRefresh上拉刷新、下拉加载列表模块+原生router页面跳转+带cookie封转网络请求API+基础webview页面浏览模块

项目截图

项目地址

完整项目Github地址，如有帮助，感谢fork，给个赞和小❤️❤️。