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

2024-08-28 19:44
文章标签 模板 应用 开发 页面 常用 next harmonyos

本文主要是介绍HarmonyOS NEXT应用开发： 常用页面模板，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

正文内容

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

  • 登录页面 运行效果如下 代码我放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=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）最新学习路线

​

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

路线图适合人群：

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

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

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

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

                   

鸿蒙APP开发必备

​​

总结

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

这篇关于HarmonyOS NEXT应用开发： 常用页面模板的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1115704。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

csu 1446 Problem J Modified LCS （扩展欧几里得算法的简单应用）

这是一道扩展欧几里得算法的简单应用题，这题是在湖南多校训练赛中队友ac的一道题，在比赛之后请教了队友，然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意：把题意转变下就变成了：求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点：求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个
阅读更多...
poj3468(线段树成段更新模板题)

poj3468(线段树成段更新模板题)

题意：包括两个操作：1、将[a.b]上的数字加上v；2、查询区间[a,b]上的和 下面的介绍是下解题思路： 首先介绍  lazy－tag思想：用一个变量记录每一个线段树节点的变化值，当这部分线段的一致性被破坏我们就将这个变化值传递给子区间，大大增加了线段树的效率。 比如现在需要对[a,b]区间值进行加c操作，那么就从根节点[1,n]开始调用update函数进行操作，如果刚好执行到一个子节点，
阅读更多...
hdu1394(线段树点更新的应用)

hdu1394(线段树点更新的应用)

题意：求一个序列经过一定的操作得到的序列的最小逆序数 这题会用到逆序数的一个性质，在0到n-1这些数字组成的乱序排列，将第一个数字A移到最后一位，得到的逆序数为res-a+(n-a-1) 知道上面的知识点后，可以用暴力来解 代码如下： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#in
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2