v1.0

底部导航框架

.gitignore

@@ -0,0 +1,11 @@
+/node_modules
+/oh_modules
+/local.properties
+/.idea
+**/build
+/.hvigor
+.cxx
+/.clangd
+/.clang-format
+/.clang-tidy
+**/.test

AppScope/app.json5

@@ -0,0 +1,10 @@
+{
+  "app": {
+    "bundleName": "com.pgzxc.wanandroidhm",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name"
+  }
+}

AppScope/resources/base/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "WanAndroidHM"
+    }
+  ]
+}

README.md

@@ -1,2 +1,19 @@
-# WanAndroidHM
-玩安卓鸿蒙版本
+## 一 开发环境
+
+* 操作系统：Windows 11 专业版 22H2
+* 开发工具：DevEco Studio 3.1.1 Release版本
+* 开发语言：ArkTS
+* node.js：v16.19.1
+
+## 二 基础知识
+
+* ArkTS语法(基本语法、状态管理、渲染控制)
+* UI(ArkTS声明式开发)及预览
+* HTTP数据请求
+
+## 三 开发进度
+
+### 3.1 v1.0
+
+* 启动页+底部导航框架
+* 底部导航框架使用：Tabs+tabBar

build-profile.json5

@@ -0,0 +1,27 @@
+{
+  "app": {
+    "signingConfigs": [],
+    "compileSdkVersion": 9,
+    "compatibleSdkVersion": 9,
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "entry",
+      "srcPath": "./entry",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
+}

entry/.gitignore

@@ -0,0 +1,6 @@
+/node_modules
+/oh_modules
+/.preview
+/build
+/.cxx
+/.test

entry/build-profile.json5

@@ -0,0 +1,14 @@
+{
+  "apiType": 'stageMode',
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default",
+      "runtimeOS": "HarmonyOS"
+    },
+    {
+      "name": "ohosTest",
+    }
+  ]
+}

entry/hvigorfile.ts

@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+export { hapTasks } from '@ohos/hvigor-ohos-plugin';

entry/oh-package.json5

@@ -0,0 +1,10 @@
+{
+  "name": "entry",
+  "version": "1.0.0",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "author": "",
+  "license": "",
+  "dependencies": {}
+}
+

entry/src/main/ets/common/bean/BottomTabsItem.ets

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Interface of bottom tab item.
+ */
+export interface BottomTabsItem {
+  icon: Resource;
+  iconSelected: Resource;
+  text: Resource;
+}

entry/src/main/ets/common/constants/Constants.ets

@@ -0,0 +1,48 @@
+/**
+ * @desc：定义常量
+ */
+export default class Constants {
+
+  /**
+   * Component size.
+   */
+  static readonly ICON_SIZE: string = '40%';
+  static readonly FULL_PERCENT: string = '100%';
+  static readonly BAR_HEIGHT: string = '10%';
+  static readonly FULL_SIZE: string = '100%';
+
+
+  /**
+   * Component location.
+   */
+  static readonly PERCENTAGE_15: string = '15%';
+  static readonly PERCENTAGE_25: string = '25%';
+  /**
+   * Component constants.
+   */
+  static readonly OPACITY: number = 0.6;
+  static readonly BORDER_WIDTH: number = 0.5;
+
+  /**
+   * BottomTabIndex
+   */
+  static readonly HOME_TAB_INDEX = 0;
+  static readonly NAV_TAB_INDEX = 1;
+  static readonly PROJECT_TAB_INDEX = 2;
+  static readonly MSG_TAB_INDEX = 3;
+  static readonly MINE_TAB_INDEX = 4;
+
+  /**
+   * The width or height of the component is spread across the parent component.
+   */
+  static readonly FULL_PARENT = '100%';
+
+  /**
+   * Shared transition duration.
+   */
+  static readonly SHARED_DURATION: number = 800;
+  /**
+   * Page transition exit delay.
+   */
+  static readonly EXIT_DELAY: number = 100;
+}

entry/src/main/ets/entryability/EntryAbility.ts

@@ -0,0 +1,41 @@
+import UIAbility from '@ohos.app.ability.UIAbility';
+import hilog from '@ohos.hilog';
+import window from '@ohos.window';
+
+export default class EntryAbility extends UIAbility {
+  onCreate(want, launchParam) {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy() {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+  }
+
+  onWindowStageCreate(windowStage: window.WindowStage) {
+    // Main window is created, set main page for this ability
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+
+    windowStage.loadContent('pages/Splash', (err, data) => {
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        return;
+      }
+      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    });
+  }
+
+  onWindowStageDestroy() {
+    // Main window is destroyed, release UI related resources
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground() {
+    // Ability has brought to foreground
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground() {
+    // Ability has back to background
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+};

entry/src/main/ets/pages/HomePage.ets

@@ -0,0 +1,21 @@
+// 导入页面路由模块
+import router from '@ohos.router';
+
+/**
+ * @desc:首页
+ */
+
+@Component
+export default struct HomePage {
+  build() {
+    Row() {
+      Column() {
+        Text("首页")
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}

entry/src/main/ets/pages/MainPage.ets

@@ -0,0 +1,90 @@
+// 导入页面路由模块
+import router from '@ohos.router';
+import Constants from '../common/constants/Constants';
+import { BottomTabsList } from '../viewmodel/BottomTabsModel';
+import HomePage from './HomePage';
+import MePage from './MePage';
+import MsgPage from './MsgPage';
+import NavPage from './NavPage';
+import ProjectPage from './ProjectPage';
+
+/**
+ * @desc：主项目框架
+ */
+@Entry
+@Component
+struct MainPage {
+  @State bottomTabIndex: number = 0;
+  private tabsController: TabsController = new TabsController();
+
+  @Builder TabBuilder(index: number, _name: string) {
+    Column() {
+      Image(this.bottomTabIndex === index ? BottomTabsList[index].iconSelected : BottomTabsList[index].icon)
+        .width(Constants.ICON_SIZE)
+        .height(Constants.ICON_SIZE)
+        .objectFit(ImageFit.Contain)
+
+      Text(BottomTabsList[index].text)
+        .fontSize($r('app.float.bottom_font_size'))
+        .opacity(Constants.OPACITY)
+        .fontColor(this.bottomTabIndex === index ?
+        $r('app.color.bottom_tabs_font_color_selected') : $r('app.color.bottom_tabs_font_color'))
+    }
+    .width(Constants.FULL_PERCENT)
+    .height(Constants.FULL_PERCENT)
+    .justifyContent(FlexAlign.Center)
+    .border({ width: { top: Constants.BORDER_WIDTH }, color: $r('app.color.color_border') })
+    .backgroundColor($r('app.color.bottom_tabs_background_color'))
+  }
+
+  /**
+   * In low-code mode, do not add anything to the build function, as it will be
+   * overwritten by the content generated by the .visual file in the build phase.
+   */
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.End, justifyContent: FlexAlign.End }) {
+      Tabs({ barPosition: BarPosition.End, index: 0, controller: this.tabsController }) {
+        TabContent() {
+          HomePage()
+        }.tabBar(this.TabBuilder(0, 'Home'))
+
+        TabContent() {
+          NavPage()
+        }.tabBar(this.TabBuilder(1, 'Nav'))
+
+        TabContent() {
+          ProjectPage()
+        }.tabBar(this.TabBuilder(2, 'Project'))
+
+        TabContent() {
+          MsgPage()
+        }.tabBar(this.TabBuilder(3, 'Msg'))
+
+        TabContent() {
+          MePage()
+        }.tabBar(this.TabBuilder(4, 'Me'))
+
+      }
+      .width(Constants.FULL_PERCENT)
+      .height(Constants.FULL_PERCENT)
+      .vertical(false)
+      .scrollable(false)
+      .barHeight(Constants.BAR_HEIGHT)
+      .onChange((index: number) => {
+        this.bottomTabIndex = index;
+      })
+    }
+    .width(Constants.FULL_PERCENT)
+  }
+
+  onIndexChange() {
+    this.tabsController.changeIndex(this.bottomTabIndex);
+  }
+
+  pageTransition() {
+    PageTransitionEnter({ duration: Constants.SHARED_DURATION })
+      .slide(SlideEffect.Top)
+    PageTransitionExit({ delay: Constants.EXIT_DELAY })
+      .opacity(0)
+  }
+}

entry/src/main/ets/pages/MePage.ets

@@ -0,0 +1,21 @@
+// 导入页面路由模块
+import router from '@ohos.router';
+
+/**
+ * @desc:我的
+ */
+
+@Component
+export default struct MePage {
+  build() {
+    Row() {
+      Column() {
+        Text("我的")
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}

entry/src/main/ets/pages/MsgPage.ets

@@ -0,0 +1,21 @@
+// 导入页面路由模块
+import router from '@ohos.router';
+
+/**
+ * @desc:消息
+ */
+
+@Component
+export default struct MsgPage {
+  build() {
+    Row() {
+      Column() {
+        Text("消息")
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}