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

正文内容

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

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

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=truelet 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）最新学习路线