鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)
鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)
- 1、效果展示
- 2、下载 DevEco Studio
- 3、创建项目
- 4、新建页面模板
- 5、更改应用信息
- 6、新建以下页面
- 7、Index.ets
- 8、真机运行
- 9、图片资源文件
1、效果展示


2、下载 DevEco Studio
- 访问官网根据自己的版本进行下载,默认安装下一步即可。
https://developer.huawei.com/consumer/cn/download/

3、创建项目



4、新建页面模板


/**
* ${PROJECT_NAME} #项目的名称
* ${FILE_NAME} #文件名称
* Created by ${USER} ON ${DATE} #作者及添加日期
*/
@Entry
@Component
struct ${NAME} {build() {}
}
5、更改应用信息
{"string": [{"name": "module_desc","value": "module description"},{"name": "EntryAbility_desc","value": "description"},{"name": "EntryAbility_label","value": "硅谷租房" # 应用名称}]
}
6、新建以下页面
- Home.ets
- See.ets
- Discover.ets
- Service.ets
- My.ets


7、Index.ets
import Home from './Home'
import See from './See'
import Service from './Service'
import Discover from './Discover'
import My from './My'@Entry
@Component
struct Index {@State currentTabBarIndex: number = 0;@BuildertabBarBuilder(image: Resource, activeImage: Resource, text: string, index: number) {Column() {Image(this.currentTabBarIndex == index ? activeImage : image).width(28).height(28)Text(text).fontSize(10).fontColor(this.currentTabBarIndex == index ? '#000' : '#CBCBCB')}}build() {Tabs({ barPosition: BarPosition.End }) {TabContent() {Home()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_home'), $r('app.media.tabbar_home_active'), '首页', 0))TabContent() {See()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_see'), $r('app.media.tabbar_see_active'), '想看', 1))TabContent() {Service()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_service'), $r('app.media.tabbar_service_active'), '服务', 2))TabContent() {Discover()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_discover'), $r('app.media.tabbar_discover_active'), '发现', 3))TabContent() {My()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_my'), $r('app.media.tabbar_my_active'), '我的', 4))}.barHeight(50).scrollable(false).onChange((index) => {this.currentTabBarIndex = index;})}
}
8、真机运行





9、图片资源文件
见资源绑定
相关文章:
鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)
鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar) 1、效果展示2、下载 DevEco Studio3、创建项目4、新建页面模板5、更改应用信息6、新建以下页面7、Index.ets8、真机运行9、图片资源文件 1、效果展示 2、下载 DevEco Studio 访问官网根据自己的版本…...
Vue组件:从使用到原理的深度解析
一、什么是Vue组件? 组件是Vue的核心特性之一,它允许开发者将UI拆分为独立可复用的代码片段。每个组件本质上是一个Vue实例,具有自己的: 模板(Template) 数据(Data) 方法…...
Docker部署 MongoDB及常用命令
docker 部署 docker run -d \--name mongo \-e MONGO_INITDB_ROOT_USERNAMEroot \-e MONGO_INITDB_ROOT_PASSWORD123456 \-p 27017:27017 \-v ./local-mongo-data:/data/db \mongo:latest或者编写 docker-compose.yaml 文件。如下: version: 3.1services:mongo:im…...
27.[前端开发-JavaScript基础]Day04-函数基本使用-递归-变量作用域-函数式编程
一、JavaScript函数 1 认识JavaScript函数 程序中的foo、bar、baz 认识函数 函数使用的步骤 2 函数的声明和调用 声明和调用函数 函数的参数 有参数的函数练习 函数的返回值 函数的练习 arguments参数(JS高级再学习) 3 函数的递归调用 函数中调用函数…...
mac修改docker的daemon.json 镜像文件
1、找到daemon.json文件的位置 docker info 可以看出位置在: /Users/spuer/.docker 2. 进入daemon.json 所在的目录: cd /Users/spuer/.docker3. 查看daemon.json的内容: more daemon.json可以看出,没有配置registry-mirrors&…...
KIMI K1.5:大规模强化学习在大语言模型中的应用与工程实践
目录 1、核心技术创新:长上下文强化学习 2、策略优化的技术细节 2.1、在线镜像下降变体 2.2、长度惩罚机制 2.3、智能采样策略 3、工程架构创新 3.1、混合部署框架 3.2、代码沙箱与奖励模型 3.3、分布式系统架构 4、实验成果与性能提升 5、结论与未来展望 大语言模…...
seacms v9 实现的MySQL注入
目录 过滤关键词information_schema 怎么办 一、环境搭建 二、环境分析 三、源代码分析 1、过滤程序 2、注入点 四、获取数据库名 五、获取数据库表名 六、获取表的列名 七、获取数据信息 过滤关键词information_schema 怎么办 1.、利用sys数据库(MySQL 5.…...
Go中slice和map引用传递误区
背景 关于slice和map是指传递还是引用传递,很多文章都分析得模棱两可,其实在Go中只有值传递,但是很多情况下是因为分不清slice和map的底层实现,所以导致很多人在这一块产生疑惑,下面通过代码案例分析slice和map到底是…...
C# Unity 唐老狮 No.2 模拟面试题
本文章不作任何商业用途 仅作学习与交流 安利唐老狮与其他老师合作的网站,内有大量免费资源和优质付费资源,我入门就是看唐老师的课程 打好坚实的基础非常非常重要: Unity课程 - 游习堂 - 唐老狮创立的游戏开发在线学习平台 - Powered By EduSoho 如果你发现了文章内特殊的字体…...
【Uniapp-Vue3】开发userStore用户所需的相关操作
在项目根路径下创建的stores文件夹中创建user.js文件 并将以下内容复制到user.js中 import {ref} from "vue" import { defineStore } from pinia; const uniIdCo uniCloud.importObject("uni-id-co") const db uniCloud.database(); const usersTable…...
DeepSeek开源周首日:发布大模型加速核心技术可变长度高效FlashMLA 加持H800算力解码性能狂飙升至3000GB/s
FlashMLA的核心技术特性包括对BF16精度的全面支持,以及采用块大小为64的页式键值缓存(Paged KV Cache)系统,实现更精确的内存管理。在性能表现方面,基于CUDA12.6平台,FlashMLA在H800SXM5GPU上创下了显著成绩…...
易语言模拟真人鼠标轨迹算法 - 防止游戏检测
一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序,它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言,原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势: 模拟…...
DeepSeek 提示词:基础结构
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…...
文件系统
目录 1.认识磁盘 磁盘的物理结构 CHS定位法 磁盘的逻辑结构 2.认识文件系统 inode 分区和分组 磁盘上的文件系统 3.软硬链接 软链接 软链接的操作 创建软链接 查看软链接 删除软链接 软链接的特点 软链接的使用场景 硬链接 硬链接的操作 创建硬链接 查看硬…...
力扣LeetCode:1472 设计浏览器历史记录
题目: 你有一个只支持单个标签页的 浏览器 ,最开始你浏览的网页是 homepage ,你可以访问其他的网站 url ,也可以在浏览历史中后退 steps 步或前进 steps 步。 请你实现 BrowserHistory 类: BrowserHistory(string h…...
【FL0091】基于SSM和微信小程序的社区二手物品交易小程序
🧑💻博主介绍🧑💻 全网粉丝10W,CSDN全栈领域优质创作者,博客之星、掘金/知乎/b站/华为云/阿里云等平台优质作者、专注于Java、小程序/APP、python、大数据等技术领域和毕业项目实战,以及程序定制化开发…...
【笔记ing】每天50个英语词汇
ex- e-out exclude 排外,排除 expect 期待,期望 单词构成: 前缀(prefix):情感(emotion)方向(orientation) 词根(root)…...
联想 SR590 服务器 530-8i RAID 控制器更换损坏的硬盘
坏了的硬盘会自动亮黄灯。用一个空的新盘来替换,新盘最好不要有东西。但是有东西可能也没啥,因为我看 RAID 控制器里有格式化的选项 1. 从 IPMI 把服务器关机,电源键进入绿色闪烁状态 2. 断电,推开塑料滑块拉出支架,…...
Java基础关键_012_包装类
目 录 一、基本数据类型对应的包装类 1.概览 2.说明 二、包装类 1.最大值与最小值 2.构造方法 3.常用方法(Integer为例) (1)compare(int x, int y) (2)max(int a, int b) 和 min(int a, int b) &…...
【react】TypeScript在react中的使用
目录 一、环境与项目配置 1. 创建 TypeScript React 项目 2. 关键tsconfig.json配置 3.安装核心类型包 二、组件类型定义 1. 函数组件(React 18) 2.类组件 三、Hooks 的深度类型集成 1. useState 2. useEffect 3. useRef 4. 自定义 Hook 四、事…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
实战三:开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用,用户可以通过网页界面上传黑白视频,系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观,不需要了解技术细节。 效果图 二、实现思路 总体思路: 用户通过Gradio界面上…...
未授权访问事件频发,我们应当如何应对?
在当下,数据已成为企业和组织的核心资产,是推动业务发展、决策制定以及创新的关键驱动力。然而,未授权访问这一隐匿的安全威胁,正如同高悬的达摩克利斯之剑,时刻威胁着数据的安全,一旦触发,便可…...
