正文内容
我只写了几个我认为比较常用的界面 登录
首页
个人中心
然后尽量没有拆分代码,也没有使用公共变量,这样方便大家有需要的,可以快速直接复制使用,然后再根据自己实际项目情况进行拆分提取。
- 登录页面 运行效果如下 代码我放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开发必备
总结
参与鸿蒙开发,你要先认清适合你的方向,如果是想从事鸿蒙应用开发方向的话,可以参考本文的学习路径,简单来说就是:为了确保高效学习,建议规划清晰的学习路线