HarmonyOS NEXT - 项目底子框架的搭建

demo 所在: https://github.com/iotjin/JhHarmonyDemo
代码不定时更新，请前往github查看最新代码
  
  
序

   项目基于鸿蒙 OpenHarmony SDK 5.0 ，API12实现
主模块是entry模块，组件和工具类在JhCommon模块 ，通用图片资源放在了AppScope内，三方库在oh-package.json5管理。
项目标入口文件index.ets通过本地存储的用户信息判断是切换到登录页面还是主页面。
    达到项目最低限度的要求要把项目结构定好，要可以网络哀求，有一些必要组件和工具类，有登录页面和主页面，可以进行路由跳转
  前置工作

   

• 在demo中这些组件和工具类都通过module实现了，具体可以参考HarmonyOS NEXT - 通过 module 模块化引用公共组件和utils
  
• HarmonyOS NEXT - 三方库axios的使用和封装
  
• HarmonyOS NEXT - Navigation组件封装BaseNavigation
  
• HarmonyOS NEXT - 数据长期化存储(key,value进行AES加密处理)
  

  项目标目录结构

主界面实现

   App的主页面是由三部门构成：Navigation+ 主体内容 + tabbar。所以必要创建Navigation组件和tabbar组件，然后通过路由连通单个页面
demo这里是使用BaseTabBar页面放置tabbar和4个子页面，子页面内部再实现Navigation+ 主体内容

  

BaseTabBar代码实现

1. import { OnePage } from './one/OnePage';
2. import { TwoPage } from './two/TwoPage';
3. import { ThreePage } from './three/ThreePage';
4. import { FourPage } from './four/FourPage';
6. export interface TabType {
7.   text: string,
8.   imgPath: string,
9. }
11. @Preview
12. @Entry
13. @Component
14. export struct BaseTabBar {
15.   @State currentIndex: number = 0
16.   tabsController: TabsController = new TabsController()
17.   tabList: TabType[] = [{
18.     imgPath: 'tab/nav_tab_1',
19.     text: '微信',
20.   }, {
21.     text: '通讯录',
22.     imgPath: 'tab/nav_tab_2',
23.   }, {
24.     text: '发现',
25.     imgPath: 'tab/nav_tab_3',
26.   }, {
27.     text: '我的',
28.     imgPath: 'tab/nav_tab_4',
29.   }]
31.   build() {
32.     Column() {
33.       Tabs({ barPosition: BarPosition.End }) {
34.         ForEach(this.tabList, (item: TabType, index: number) => {
35.           TabContent() {
36.             if (index == 0) {
37.               OnePage()
38.             } else if (index == 1) {
39.               TwoPage()
40.             } else if (index == 2) {
41.               ThreePage()
42.             } else {
43.               FourPage()
44.             }
45.           }
46.           .tabBar(this.TabBarBuilder(item.text, index, $rawfile(`${item.imgPath}.png`),
47.             $rawfile(`${item.imgPath}_on.png`)))
48.         })
49.       }
50.       .scrollable(false) //去掉左右滑动的效果
51.       .animationDuration(0) //去掉左右滑动的动画
52.       // .barHeight(156)
53.       .onChange((index: number) => {
54.         this.currentIndex = index
55.         this.tabsController.changeIndex(this.currentIndex)
56.       })
57.     }
58.     .backgroundColor("#eeeeee")
59.     .width('100%')
60.     .height('100%')
61.   }
63.   @Builder
64.   TabBarBuilder(title: string, index: number, normalImg: Resource, selectedImg: Resource) {
65.     Column() {
66.       Image(this.currentIndex == index ? selectedImg : normalImg)
67.         .width(24)
68.         .height(24)
70.       Text(title)
71.         .fontSize(14)
72.         .margin({ top: 4 })
73.         .fontColor(this.currentIndex == index ? '#45C461' : '#999999')
74.     }
75.     .backgroundColor(Color.White)
76.     .width('100%')
77.     .height(50)
78.     .padding({ top: 6, bottom: 6 })
79.     .justifyContent(FlexAlign.Center)
80.     .alignItems(HorizontalAlign.Center)
81.     .id(`tabBar${index}`)
82.   }
83. }

复制代码

子页面实现

   这里只举列第一个页面,

1. import { router } from '@kit.ArkUI';
2. import { BaseNavigation } from 'JhCommon';
4. @Entry
5. @Component
6. export struct OnePage {
7.   @State message: string = 'One'
9.   build() {
10.     Column() {
11.       BaseNavigation({ title: "One", leftItem: {} })
12.       Button('DemoList').onClick(() => {
13.         router.pushUrl({ url: 'pages/demos/DemoListPage' })
14.       })
15.       RelativeContainer() {
16.         Text(this.message)
17.           .id('OnePage')
18.           .fontSize(50)
19.           .fontWeight(FontWeight.Bold)
20.           .alignRules({
21.             center: { anchor: '__container__', align: VerticalAlign.Center },
22.             middle: { anchor: '__container__', align: HorizontalAlign.Center }
23.           })
24.       }
25.       .height('100%')
26.       .width('100%')
27.     }
28.   }
29. }

复制代码

路由跳转

demo中都是通过@ohos.router实现的跳转，因为Router必要Navigation 包着页面的内容，多一层嵌套
页面路由 (@ohos.router)(不推荐)
Router切换Navigation

1. import { router } from '@kit.ArkUI';
3. router.replaceUrl({ url: 'pages/login/LoginPage' })
4. router.pushUrl({ url: 'pages/demos/DemoListPage' })

复制代码

登录页面和主页面切换

   切换通过在程序的第一个页面内处理，根据登录信息做判断显示登录页还是主页面

1.   build() {
2.     Column() {
3.       if (this.switchRootPage() == 'BaseTabBar') {
4.         BaseTabBar()
5.       } else {
6.         LoginPage()
7.       }
8.     }
9.     .backgroundColor("#eeeeee")
10.     .width('100%')
11.     .height('100%')
12.   }
13.   
14.   switchRootPage(): 'BaseTabBar' | 'LoginPage' {
15.     const userInfo = JhAESPreferencesUtils.getModel(kUserDefault_UserInfo)
16.     if (userInfo) {
17.       console.log('本地取出的 userInfo', JSON.stringify(userInfo))
18.       return 'BaseTabBar'
19.     } else {
20.       return 'LoginPage'
21.     }
22.   }

复制代码

登录实现

1. import { router } from '@kit.ArkUI';
2. import { APIs, HttpUtils, JhAESPreferencesUtils, JhColorUtils, JhProgressHUD, kUserDefault_UserInfo, ResType } from 'JhCommon';
3. import { JhButton } from 'JhCommon/src/main/ets/JhCommon/components/JhButton';
5. @Entry
6. @Component
7. export struct LoginPage {
8.   @State @Watch('onChange') name: string = 'jin'
9.   @State @Watch('onChange') pwd: string = ''
10.   @State disabled: boolean = true
12.   // onChangeName(propName: string) {}
13.   // onChangePwd(propName: string) {}
15.   onChange() {
16.     let isClick = true
17.     if (this.name.length < 3) {
18.       isClick = false
19.     }
20.     if (this.pwd.length < 6) {
21.       isClick = false
22.     }
23.     this.disabled = !isClick
24.   }
26.   build() {
27.     Scroll() {
28.       Column() {
29.         Row() {
30.           Text('注册')
31.             .fontSize(18)
32.         }
33.         .justifyContent(FlexAlign.End)
34.         .width('100%')
36.         Row() {
37.           Text('Logo')
38.             .fontSize(20)
39.             .fontColor(Color.White)
40.         }
41.         .justifyContent(FlexAlign.Center)
42.         .alignItems(VerticalAlign.Center)
43.         .width(100)
44.         .height(100)
45.         .margin({ top: 80, bottom: 30 })
46.         .backgroundColor(JhColorUtils.randomColor())
47.         .borderRadius(50)
49.         TextInput({
50.           text: this.name,
51.           placeholder: '请输入用户名'
52.         })
53.           .height(50)
54.           .margin({ top: 20 })
55.           .onChange((value) => {
56.             this.name = value
57.           })
58.           .onSubmit((EnterKeyType) => {
59.             console.info(EnterKeyType + '输入法回车键的类型值')
60.           })
61.         TextInput({
62.           text: this.pwd,
63.           placeholder: '请输入密码',
64.         })
65.           .height(50)
66.           .type(InputType.Password)
67.           .margin({ top: 20 })
68.           .onChange((value) => {
69.             this.pwd = value
70.           })
71.           .onSubmit((EnterKeyType) => {
72.             console.info(EnterKeyType + '输入法回车键的类型值')
73.           })
74.         // Button('登录')
75.         //   .width('100%')
76.         //   .margin({ top: 50, bottom: 30 })
77.         //   .opacity(this.disabled ? 0.6 : 1)
78.         //   .backgroundColor(KColors.kThemeColor)
79.         //   .onClick(() => this.clickLogin())
80.         JhButton({
81.           text: '登录',
82.           disabled: this.disabled,
83.           onPressed: (): void => this.clickLogin()
84.         })
85.           .margin({ top: 50, bottom: 30 })
86.         Row() {
87.           Text('验证码登录')
88.             .fontSize(18)
89.           Text('忘记密码')
90.             .fontSize(18)
91.         }
92.         .justifyContent(FlexAlign.SpaceBetween)
93.         .width('100%')
94.       }
95.       .alignItems(HorizontalAlign.Center)
96.       .justifyContent(FlexAlign.Start)
97.       .height('100%')
98.       .width('100%')
99.       .padding(15)
100.     }
101.   }
103.   clickLogin() {
104.     const params: object = Object({ 'userName': this.name, 'pwd': this.pwd })
105.     HttpUtils.post(APIs.login, params, '正在登录...').then((res: ResType) => {
106.       console.log('登录返回数据：', JSON.stringify(res))
107.       JhProgressHUD.showSuccess(res.msg)
108.       JhAESPreferencesUtils.saveModel(kUserDefault_UserInfo, res.data)
109.       router.replaceUrl({ url: 'pages/BaseTabBar' })
110.     })
111.   }
112. }

复制代码

退出登录

   退出登录把用户信息清掉，并把路由更换掉即可

1. import { router } from '@kit.ArkUI';
3. exitLogin() {
4.     JhProgressHUD.showLoadingText('正在退出...')
5.     setTimeout(() => {
6.       JhAESPreferencesUtils.delete(kUserDefault_UserInfo)
7.       router.replaceUrl({ url: 'pages/login/LoginPage' })
8.       JhProgressHUD.hide()
9.     }, 1000)
10.   }

复制代码

至此大框架已经出来了

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。