当前位置： 首页 > article >正文

HarmonyOS NEXT应用开发： 常用页面模板

article 2024/11/15 14:01:38
正文内容

我只写了几个我认为比较常用的界面 登录 首页 个人中心 然后尽量没有拆分代码，也没有使用公共变量，这样方便大家有需要的，可以快速直接复制使用，然后再根据自己实际项目情况进行拆分提取。

  • 登录页面 运行效果如下 代码我放github 上了 有需要的朋友自己下载。

Login.ets 主要代码如下

import promptAction from '@ohos.promptAction';
import router from '@ohos.router'
@Entry
@Component
struct Login {
  @State verifyButtonText:string="获取验证码";
  @State loading:boolean=false;
  @State phoneNum:string=""; //手机号码
  @State codeNum:string=""; //验证码
  // 执行登录方法
  onSubmit(){
    if(!this.phoneNum){
      promptAction.showToast({
        message: '请输入手机号码',
        duration: 2000
      });
      return
    }
    if(!this.codeNum){
      promptAction.showToast({
        message: '请输入验证码',
        duration: 2000
      });
      return
    }
    console.log('跳转')
    router.pushUrl(
      {
        url:"pages/Index"
      }
    )
  }
  // 发送验证码
  onSendCode(){
    console.log('发送验证码')
    this.loading=true
    let count:number = 60;
    let intervalID = setInterval(() => {
        if (count > 0) {
          count--;
          this.verifyButtonText= count+'s后获取'
        } else {
          this.verifyButtonText = "获取验证码";
          clearInterval(intervalID);
          this.loading=false
        }
    }, 1000);
  }

  build() {
    Column(){
      Column(){
        Row(){
          Image($r('app.media.ic_logo'))
            .width(80)
            .fillColor('rgba(0,0,0,0.7)')
        }.justifyContent(FlexAlign.Center)
      }.padding({
        top:60,
        bottom:60
      })
      Column(){
        Flex({ justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center }) {
          Image($r('app.media.ic_phone'))
            .width(30)
            .fillColor('rgba(0,0,0,0.7)')
          TextInput({ text:this.phoneNum,placeholder: '请输入手机号' })
            .showUnderline(false)
            .backgroundColor('#ffffff')
            .padding({left:10})
            .maxLength(11)
            .height(50)
            .flexGrow(1)
            .type(InputType.Number)
            .onChange((value: string) => {
              this.phoneNum = value
            })

        }.border({ width: 1, color: 'rgba(43,86,112,0.1)', radius: 50, style: BorderStyle.Solid })
        .padding({left:20})
        Flex({ justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center }) {
          Image($r('app.media.ic_code'))
            .width(30)
            .fillColor('rgba(0,0,0,0.7)')
          TextInput({text:this.codeNum, placeholder: '请输入验证码' })
            .showUnderline(false)
            .backgroundColor('#ffffff')
            .padding({left:10})
            .maxLength(6)
            .height(50)
            .width(200)
            .type(InputType.Number)
            .onChange((value: string) => {
              this.codeNum = value
            })
          Text(this.verifyButtonText)
            .width(120)
            .fontSize(16)
            .textAlign(TextAlign.End)
            .fontColor('rgba(0,0,0,0.7)')
            .enabled(this.loading)
            .onClick(()=>{
              this.onSendCode();
            })

        }.border({ width: 1, color: 'rgba(43,86,112,0.1)', radius: 50, style: BorderStyle.Solid })
        .padding({left:20,right:20})
        .margin({top:30})
      }
      Column(){
        Button('登录')
          .width('100%')
          .height(50)
          .borderRadius(50)
          .backgroundColor('rgba(0,0,0,0.7)')
          .margin({top:50})
          .fontColor('#ffffff')
          .fontSize(18)
          .onClick(()=>{
            this.onSubmit()
          })

      }
      // 微信等快捷登录
      Column(){
        Flex({ justifyContent:FlexAlign.SpaceAround,alignItems:ItemAlign.Center }) {
            Image($r('app.media.ic_weixin'))
              .fillColor('rgba(0,0,0,0.7)')
              .width(40)
            Image($r('app.media.ic_qq'))
              .fillColor('rgba(0,0,0,0.7)')
              .width(40)
          Image($r('app.media.ic_weibo'))
            .fillColor('rgba(0,0,0,0.7)')
            .width(40)
        }
      }.padding({top:60,right:60,left:60})
      // 底部链接
      Column(){
         Row(){
           Text('找回密码')
             .fontColor('rgba(0,0,0,0.7)')
             .fontSize(16)
           Text('|')
             .fontColor('rgba(0,0,0,0.7)')
             .fontSize(16)
             .margin({left:5,right:5})
           Text('注册账号')
             .fontSize(16)
             .fontColor('rgba(0,0,0,0.7)')
         }

      }.margin({top:25})


    }
    .backgroundColor('#ffffff')
    .padding(15)
    .width('100%')
    .height('100%')
  }
}
  • 首页页面 运行效果如下 主要采用到了 Tabs 组件 通过onChange实现切换时自定义tabBar和TabContent的联动。 然后用到了 @Builder 构造 自定义底部切换tabbar

Index.ets 主要代码如下


import {TabHome} from  "../view/TabHome"
import {TabUser} from  "../view/TabUser"


@Entry
@Component
struct MinePage {
  @State currentIndex: number = 0

  // 构造类 自定义底部切换按钮
  @Builder TabBuilder(index: number,icon:Resource,selectedIcon:Resource,name:string) {
    Column() {
      Image(this.currentIndex === index ? selectedIcon : icon)
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text(`${name}`)
        .fontColor(this.currentIndex === index ? '#007DFF' : '#000000')
        .fontSize('14vp')
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%').height('100%')
    .padding({top:5})
    .backgroundColor('#ffffff')
  }
  build() {

    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          TabHome(); //首页
        }.tabBar(this.TabBuilder(0,$r('app.media.ic_home'),$r('app.media.ic_home_selected'),'首页'))

        TabContent() {
          TabUser()//个人中心
        }.tabBar(this.TabBuilder(1,$r('app.media.ic_mine'),$r('app.media.ic_mine_selected'),'我的'))
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Fixed)
      .onChange((index: number) => {
        this.currentIndex = index;
      })
      .width('100%')
    }
    .width('100%')
    .height('100%')

    .backgroundColor('#f7f7f7')
  }
}

TabHome.ets 主要代码如下

import router from '@ohos.router';
interface MenuToType{
  title:string;
  url:Resource;
}
@Component
export struct TabHome {
  private swiperController: SwiperController = new SwiperController()
  private scroller: Scroller = new Scroller();
  @State SwiperList :Resource[] =[
    $r('app.media.ic_swiper_1'),
    $r('app.media.ic_swiper_2'),
    $r('app.media.ic_swiper_3'),
  ]
  @State MenuList:MenuToType[] = [
    {
      title:"商品分类",
      url:$r('app.media.ic_men_6')
    },
    {
      title:"优惠券",
      url:$r('app.media.ic_men_7')
    },
    {
      title:"今日爆款",
      url:$r('app.media.ic_men_8')
    },
    {
      title:"秒杀专区",
      url:$r('app.media.ic_men_9')
    }
  ];
  @State dataSource:number[] =[1,2,3,4,5,6]

  build() {
    Scroll(this.scroller) {
      Column() {
        // 轮播
        Swiper(this.swiperController) {
          ForEach(this.SwiperList, (item: string) => {
            Image(item)
              .width('100%')
              .height(200)
              .objectFit(ImageFit.Cover)
              .borderRadius(15)
          })
        }
        .cachedCount(2)
        .index(1)
        .autoPlay(true)
        .interval(4000)
        .indicator(true)
        .loop(true)
        .duration(1000)
        .itemSpace(0)
        .onChange((index: number) => {
          console.info(index.toString())
        })
        // 菜单
        GridRow({
          columns: 4,
          breakpoints: { value: ["400vp", "600vp", "800vp"],
            reference: BreakpointsReference.WindowSize },
          direction: GridRowDirection.Row
        }) {
          ForEach(this.MenuList, (item:MenuToType) => {
            GridCol({ span: 1 }) {
              Column(){
                Image(item.url)
                  .width(40)
                  .height(40)
                  .objectFit(ImageFit.Cover)
                Text(item.title)
                  .fontSize('14vp')
                  .margin({top:10})
              }.onClick(()=>{


              })
            }.padding({top:15})
          })
        }
        .width("100%")
        .backgroundColor('#ffffff')
        .padding({bottom:15})
        .borderRadius(10)
        .margin({top:10})
        // 最新待办
        Column(){
          // 标题
          Row(){
            Text('精品推荐')
            Row(){
              Text('查看更多').fontSize('14vp')
              Image($r('app.media.ic_more'))
                .width(14)
                .height(14)
            }
            .onClick(()=>{
              console.log('----dai')

            })
          }
          .width('100%')
          .margin({top:5})
          .padding({top:15,left:15,right:15})
          .justifyContent(FlexAlign.SpaceBetween)
          .backgroundColor('#ffffff')

          Column(){
            ForEach(this.dataSource, (item:MenuToType) => {
              Flex({justifyContent:FlexAlign.Start,alignItems:ItemAlign.Start}){
                Image('https://imgservice.suning.cn/uimg1/b2c/image/5Peu2kvxNOQrZBIzi91XZA.jpg_800w_800h_4e')
                  .width('40%')
                  .height(100)
                  .borderRadius(5)
                Column(){
                    Text('【新晋销冠】美的10KG全自动洗衣机')
                      .fontSize(14)
                      .width('100%')
                      .textAlign(TextAlign.Start)

                     Text('不锈钢|二级能效')
                       .fontSize(14)
                       .fontColor('#ff7c6969')
                       .width('100%')
                       .textAlign(TextAlign.Start)
                       .margin({top:5})
                      Row(){
                         Text('￥1987.40')
                           .fontSize(14)
                           .fontColor('red')
                         Text('￥2987.40')
                           .fontSize(12)
                           .margin({left:10})
                           .fontColor('#ff695a5a')
                      }
                      .width('100%')
                      .margin({top:5})
                  Row(){
                    Text('1000+条好评')
                      .fontSize(12)
                      .fontColor('#695a5a')
                    Text('98%好评')
                      .fontSize(12)
                      .margin({left:10})
                      .fontColor('#695a5a')
                  }
                  .width('100%')
                  .margin({top:5})



                }.width('60%')
                .padding({left:15})
              }.margin({bottom:15})
            })
          }.backgroundColor('#fff')
          .padding(10)

        }
        .margin({top:5})
      }
      .width('100%')
      .borderRadius(10)
    }
    .height('100%')
    .width('100%')
    .align(Alignment.TopStart)
    .scrollBar(BarState.Off)
    .padding(5)

  }
}
  • 个人中心 运行效果如下

TabUser.ets 主要代码内容 如下

interface MenuToType{
  title:string;
  url:Resource;
}

@Component
export struct TabUser {
  @State nickname: string = '无言的对话';
  @State signature: string = '154787855677';

  @State menuTopList:MenuToType[] = [
    {
      title:"我的钱包",
      url:$r('app.media.ic_menu4')
    },
    {
      title:"我的收藏",
      url:$r('app.media.ic_menu1')
    },
    {
      title:"我的作品",
      url:$r('app.media.ic_menu3')
    },
    {
      title:"我的服务",
      url:$r('app.media.ic_menu2')
    }
  ];
  @State MenuList:MenuToType[] = [
    {
      title:"我的订单",
      url:$r('app.media.ic_user_1')
    },
    {
      title:"我的资料",
      url:$r('app.media.ic_user_2')
    },
    {
      title:"我的收藏",
      url:$r('app.media.ic_user_5')
    },
    {
      title:"联系客服",
      url:$r('app.media.ic_user_3')
    },
    {
      title:"系统设置",
      url:$r('app.media.ic_user_6')
    },
    {
      title:"检查更新",
      url:$r('app.media.ic_user_4')
    }
  ];

  build() {
    Column() {
      // 顶部
      Column(){
        Flex({justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center}){
          Image('https://img1.baidu.com/it/u=1775314681,3148438664&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500')
            .width(50)
            .height(50)
            .borderRadius(60)
            .margin({right:10})
          Column(){
            Text(this.nickname)
              .fontSize(16)
              .width('100%')
              .textAlign(TextAlign.Start)
            Text('ID: '+this.signature)
              .fontSize(12)
              .margin({top:5})
              .textAlign(TextAlign.Start)
              .width('100%')
          }
        }
        .width('100%')
        Flex({justifyContent:FlexAlign.SpaceAround}){
          Column(){
            Text('10')
              .fontSize(16)
            Text('关注')
              .fontSize(14)
          }
          Column(){
            Text('100')
              .fontSize(16)
            Text('收藏')
              .fontSize(14)
          }
          Column(){
            Text('300')
              .fontSize(16)
            Text('访客')
              .fontSize(14)
          }
          Column(){
            Text('90')
              .fontSize(16)
            Text('点赞')
              .fontSize(14)
          }
        }.margin({top:30})

      }.width('100%')
      .padding(20)
      .height(200)
      .backgroundImage('https://img1.baidu.com/it/u=684770079,849342797&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800')

      //主体内容
      Column(){
        Row(){
          ForEach(this.menuTopList, (item:MenuToType) => {
            Column()
            {
              Image(item.url)
                .width(40)
              Text(item.title)
                .width('100%')
                .fontSize(14)
                .margin({top:10})
                .textAlign(TextAlign.Center)
            }.width('25%')
          })
        }.width('100%')
        .backgroundColor('#ffffff')
        .borderRadius(15)
        .padding(15)

        Column(){
          ForEach(this.MenuList, (item:MenuToType) => {
            Row(){
              Row(){
                Image(item.url)
                  .width(20)
                  .margin({right:10})
                Text(item.title)
                  .fontSize(14)
              }
              Image($r('app.media.ic_more'))
                .width(15)

            }.width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
            .borderWidth({bottom:1})
            .borderColor('#f7f7f7')
            .padding({top:12,bottom:12})
          })
        }
        .backgroundColor('#ffffff')
        .borderRadius(15)
        .padding(15)
        .width('100%')
        .margin({top:10})
      }
      .width('100%')
      .padding(15)
      .margin({top:-40})


    }
    .backgroundColor('#f7f7f7')
    .height('100%')
    .width('100%')
  }
}
总结

现在我们前端开发，大量新人涌入导致竞争愈发激烈；岗位需求上，受经济环境和技术成熟度影响，新增岗位数量有所降低。然而，对于能够掌握前沿技术、具备创新能力和丰富经验的开发者来说，仍能在有限的岗位中脱颖而出，获得良好的发展机遇。最近我看到招聘网站上已经逐步开始有了鸿蒙开发工程师的岗位， 所以我认为这次华为HarmonyOS NEXT 的出现也可能是我们的一个机会。

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。 

为了确保高效学习，建议规划清晰的学习路线，涵盖以下关键阶段：

希望这一份鸿蒙学习文档能够给大家带来帮助~

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.视频教程+学习PDF文档

（鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

 纯血版鸿蒙全套学习文档（面试、文档、全套视频等）

                   

鸿蒙APP开发必备

​​

总结

参与鸿蒙开发，你要先认清适合你的方向，如果是想从事鸿蒙应用开发方向的话，可以参考本文的学习路径，简单来说就是：为了确保高效学习，建议规划清晰的学习路线


http://www.kler.cn/a/289263.html

相关文章：

  • Java NIO 深度解析：构建高效的 I/O 操作
  • SpringBoot实战（三十一）集成iText5，实现RSA签署PDF
  • Java算法OJ（7）随机快速排序
  • JavaWeb后端开发知识储备1
  • 图像处理实验二(Image Understanding and Basic Processing)
  • 系统架构设计师论文：大数据Lambda架构
  • 使用docker compose一键部署 Openldap
  • el-table中文排序-前端
  • Java 输入与输出之 NIO.2【AIO】【内存映射文件】【自动资源管理】探索之【四】
  • java-URLDNS 链条审计
  • 9、设计模式
  • Spring 学习笔记
  • 【Rust光年纪】解密Rust语言在经济学计算领域的全面应用与潜力展望
  • 【docker】docker 镜像仓库的管理
  • 39. 数组中出现次数超过一半的数字
  • 【专项刷题】— 哈希表
  • 阅读笔记——《阿里巴巴Java开发规范》
  • Unity实战案例 2D小游戏HappyGlass（游戏管理类脚本）
  • git进阶·团队开发的时候为何要创建临时分支来修复bug
  • 2708. 一个小组的最大实力值（24.9.3）
  • ADB 获取屏幕坐标，并模拟滑动和点击屏幕
  • 深入理解 JavaScript DOM 操作
  • js处理echarts tooltip定时轮播
  • 一款基于Vue的低代码可视化表单设计器工具，6K star的可视化表单设计器工具，轻松搞定表单，支持多端适配（附源码）
  • 被低估的SQL
  • 基于vue框架的超市管理系统ki6i8（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。