# wanandroid_flutter

**Repository Path**: caojingCode/wanandroid_flutter

## Basic Information

- **Project Name**: wanandroid_flutter
- **Description**: flutter版玩android
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-04-16
- **Last Updated**: 2025-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wanandroid_flutter

这是一个基于 ArkUI 开发的鸿蒙 OS 应用，调用了开放 API [玩 Android](https://www.wanandroid.com/)，实现了简单的页面导航、登录、登录状态保存、数据展示和 H5 页面加载等功能。

## 功能特性

- **页面导航**：使用 `Tabs` 实现底部和顶部导航栏，轻松切换不同页面。
- **登录功能**：用户可以登录并保持登录状态。
- **数据展示**：通过调用 WanAndroid API 展示文章列表、项目和体系内容。
- **下拉刷新与上拉加载**：支持下拉刷新和上拉加载更多数据。
- **H5 页面加载**：支持加载 H5 页面内容。

## 主要组件

### 首页底部导航栏

使用 `Tabs` 实现底部导航，包含首页、体系、项目和我的四个页面。

```ts
Tabs({ barPosition: BarPosition.End }) {
  TabContent() {
    HomeComponent()
  }.tabBar(this.tabBuilder("首页", 0, $r("app.media.main_index_select_icon"), $r("app.media.main_index_icon")))

  TabContent() {
    SystemComponent()
  }.tabBar(this.tabBuilder("体系", 1, $r("app.media.main_house_select_icon"), $r("app.media.main_house_icon")))

  TabContent() {
    ProjectComponent()
  }.tabBar(this.tabBuilder("项目", 2, $r("app.media.main_message_select_icon"), $r("app.media.main_message_icon")))

  TabContent() {
    MyComponent()
  }.tabBar(this.tabBuilder("我的", 3, $r("app.media.main_me_select_icon"), $r("app.media.main_me_icon")))
}.onChange((index) => {
  this.currentIndex = index
})
```

### 主页自定义组件（HomeComponent）

主页由轮播图和文章列表组成，支持下拉刷新和上拉加载。

```ts
PullToRefresh({
  data: this.articleList,
  scroller: this.scroller,
  onRefresh: () => {
    // 刷新执行回调
  },
  onLoadMore: () => {
    // 加载更多执行回调
  },
  customList: () => {
    Scroll(this.scroller) {
      Column() {
        Swiper() {
          // 轮播图内容
        }
        ForEach(this.articleList, (item: ArticleData) => {
          ArticleListItem({ article: item })
        })
      }
    }
  }
})
```

### 体系自定义组件（SystemComponent）

体系页面由顶部 Tabs 嵌套 Grid 和下拉刷新列表组成。

```ts
Tabs({ barPosition: BarPosition.Start }) {
  TabContent() {
    Column() {
      Grid() {
        // 宫格内容
      }
      PullToRefresh({
        customList: () => {
          Scroll() {
            Column() {
              ArticleListItem()
            }
          }
        }
      })
    }
  }
}
```

### 项目自定义组件（ProjectComponent）

项目页面由 Tabs 直接嵌套下拉刷新组件和 Grid 宫格组成。

```ts
Tabs({ barPosition: BarPosition.Start }) {
  TabContent() {
    PullToRefresh({
      customList: () => {
        Grid(this.scroller) {
          ForEach(this.projectList, (item: ArticleData) => {
            GridItem() {
              // 宫格 item 样式
            }
          })
        }
        .columnsTemplate("1fr 1fr")
        .columnsGap(10)
      }
    })
  }
}
```

### 网络请求

使用 `@ohos/axios` 进行网络请求，并进行了简单的封装。

```ts
export class HttpUtils {
  private static instance: HttpUtils = new HttpUtils()
  private axiosInstance: AxiosInstance

  private constructor() {
    this.axiosInstance = axios.create({
      baseURL: 'https://www.wanandroid.com/',
      timeout: 10 * 1000,
      headers: { "Content-Type": "application/x-www-form-urlencoded" }
    });

    this.axiosInstance.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
      if (config.url != WanAndroidUrl.Login) {
        const cookies = await PFUtils.get<string>("cookies").then()
        config.headers["Cookie"] = cookies
      }
      return config;
    });

    this.axiosInstance.interceptors.response.use((response: AxiosResponse) => {
      if (response.config.url == WanAndroidUrl.Login) {
        const cookies = response.headers["set-cookie"] as string[]
        PFUtils.put<string>("cookies", cookies.toString())
        PFUtils.put<boolean>("LoginState", true)
        emitter.emit({ eventId: Constant.USER_LOGIN })
      }
      return response;
    }, (error: AxiosError) => {
      console.log("请求错误数据：", JSON.stringify(error))
    });
  }
}
```

## 截图

![Screenshot_2024-04-28T095223.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed15382e894c4924b8b2dea9437dd522~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=944&h=2038&s=554827&e=png&b=fcfcfc)

![Screenshot_2024-04-28T095315.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1c8403fb3a74ee1a66bb17fda579524~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=944&h=2038&s=340960&e=png&b=fbfbfb)

![Screenshot_2024-04-28T095326.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4ca24f5c138479086dcdcecc4929061~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=944&h=2038&s=698040&e=png&b=fcfcfc)

![Screenshot_2024-04-28T095337.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fbc15436b91a4d26b31f999e5324c1f8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=944&h=2038&s=246824&e=png&b=ffffff)

## 贡献

欢迎贡献代码和报告问题！请遵循以下步骤：

1. Fork 仓库
2. 创建新分支 (`git checkout -b feature/fooBar`)
3. 提交更改 (`git commit -am 'Add some fooBar'`)
4. 推送分支 (`git push origin feature/fooBar`)
5. 创建新的 Pull Request

## 许可证

本项目使用 MIT 许可证。详情请查看 [LICENSE](LICENSE) 文件。