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

【中工开发者】鸿蒙商城实战项目（启动页和引导页）

news 来源：原创 2025/7/1 18:27:24

创建一个空项目

先创建一个新的项目选择第一个，然后点击finish

接下来为项目写一个名字，然后点击finish。

把index页面的代码改成下面代码块的代码，就能产生下面的效果

@Entry
@Component
struct Index {build() {Column(){Blank()Column(){}.height('100%').width('100%').linearGradient({colors: [['#FF8469',0],[ '#FC4355',1] ]})}}
}

          Text('探索').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)Text('探购物乐趣').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)

import { router } from '@kit.ArkUI'@Entry
@Component
struct Index {@State opacityValue: number = 0.3;onPageShow(){this.opacityValue = 1;}build() {Column(){Blank()Column(){Text('探索').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)Text('探购物乐趣').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration:  1500,iterations:3,onFinish:()=>{router.replaceUrl({url: 'pages/LaunchPage'})}}).height('100%').width('100%').linearGradient({colors: [['#FF8469',0],[ '#FC4355',1] ]})}}
}

启动页

index页面代码如下

import router from '@ohos.router';
@Entry
@Component
struct Index {@State opacityValue: number = 0.3;
onPageShow(){this.opacityValue = 1;
}build() {Column(){Blank()Column(){Text('探索').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)Text('探购物乐趣').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration:  1500,iterations:3,onFinish:()=>{router.replaceUrl({url: 'pages/LaunchPage'})}})Blank()Blank()Image($r('app.media.logo')).width(100)}.height('100%').width('100%').linearGradient({colors: [['#FF8469',0],[ '#FC4355',1] ]})}
}

export default  interface BannerModel{id:numbertitle:stringimage:Resourcesubtitle:string
}

LaunchModels页面代码

引导页

LaunchPage页面代码

import BannerModel from '../models/BannerModel'
import { router } from '@kit.ArkUI'@Entry
@Component
struct LaunchPage {@State index: number = 0@State items: BannerModel[] =[{id: 0,title: '电脑专区',image: $r('app.media.diannao'),subtitle: '探购物乐趣'},  {id: 1,title: '专区手机',image: $r('app.media.shouji'),subtitle: '探购物乐趣'},  {id: 2,title: '耳机专区',image: $r('app.media.erji'),subtitle: '探购物乐趣'}]build() {
Column(){Tabs() {ForEach(this.items, (item: BannerModel, index: number) => {TabContent() {Column() {Text(item.title).fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold).fontWeight(FontWeight.Bold)Text(item.subtitle).fontColor(Color.White)//.fontSize(36).fontWeight(FontWeight.Bold)Blank()Image(item.image).width(200).objectFit(ImageFit.Contain).interpolation(ImageInterpolation.High)//.height(100)Row({space:10}){ForEach([1,2,3], (item: number, index: number)=>{Rect({width: 40, height: 40}).fill(this.index == index ? Color.White : Color.Gray)})}.margin({top: 200})if (this.index == this.items.length-1) {Button("立即体验").width('100%').height(60).fontSize(36).borderWidth(2).borderColor(Color.White).backgroundColor(Color.Transparent).margin({top: 30}).onClick(()=>{router.replaceUrl({url:"pages/HomePage"})})}}.width('100%').height('100%').padding({top: 30,left: 30,right: 30})}.width('100%').height('100%')})}.width('100%').height('100%').onChange((index: number) => {this.index = index})
}.width('100%').height('100%').linearGradient({colors: [['#FF8469',0],[ '#FC4355',1]]}).height('100%').width('100%')}
}

图片资源

创建一个空项目

启动页

引导页

图片资源

使用image要传入照片的路径，记得在resource文件夹里面粘贴相应的图片

演示视频如下

QQ2024126-195722

【中工开发者】鸿蒙商城实战项目（启动页和引导页）

创建一个空项目先创建一个新的项目选择第一个，然后点击finish 接下来为项目写一个名字，然后点击finish。把index页面的代码改成下面代码块的代码，就能产生下面的效果 Entry Component struct Index {build() {Column(){Blank()Column(){…...

编程日记 2025/7/1 18:27:24

云计算IaaS-PaaS-SaaS三种服务模式转至元数据结尾

在当今数字化时代，云计算已经成为推动企业创新与发展的核心力量。而云计算的模型主要有三种：IAAS、PAAS 和 SAAS，它们各自在云计算的庞大体系中扮演着独特且关键的角色，恰似一座大厦的不同楼层，共同构建起强大而灵活的…...

编程日记 2025/7/1 16:31:56

Python爬虫：如何优雅地“偷窥”商品详情

在这个信息爆炸的时代，获取商品详情已经不再是简单的点击和浏览。我们需要的是速度、效率，还有一点点的...偷偷摸摸。没错，今天我们要聊的是如何使用Python爬虫来“偷窥”商品详情。别担心，我们保证一切都是合法合规的&#xff0c…...

编程日记 2025/6/28 18:11:01

自动化测试报错：Exception managing chrome: error decoding response body

报错：Exception managing chrome: error decoding response body 报错解释： 这个错误通常发生在使用Selenium WebDriver时，尝试管理（例如关闭）Chrome浏览器时出现了问题。具体来说，是在解码Chrome浏览器响…...

编程日记 2025/6/28 19:46:30

Dataset 与 JavaRDD

是的，Dataset 底层确实是基于 RDD 实现的，但它是通过更高层次的抽象和优化来提供更强大和易用的功能。以下是关于 Dataset 底层实现的一些详细信息： 1. RDD 是基础 RDD（弹性分布式数据集） 是 Spark 最基础的抽象&…...

编程日记 2025/6/30 18:22:04

【后端面试总结】Golang defer的实现原理和常见面试问题

前言在Go语言中，defer关键字用于延迟函数的执行，即在包含defer语句的函数返回之前执行。这一特性使得defer在资源释放、文件关闭、解锁资源等场景中非常有用。本文将深入探讨defer的实现原理，并总结一些常见的面试问题。基本使用 defer通…...

编程日记 2025/6/28 18:06:56

http 502 和 504 的区别

首先看一下概念： 502：作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。503：由于临时的服务器维护或者过载，服务器当前无法处理请求。这个状况是临时的，并且将在一段时间以后恢…...

编程日记 2025/7/1 13:05:40

农业园区气象站

农业园区气象站是一种专为农业生产和科研设计的气象监测设备，它集成了多种传感器和技术，用于实时、准确地监测和记录农业园区内的气象数据。以下是农业园区气象站的主要功能和用处： 一、主要功能实时监测：农业园区气象站能够实时…...

编程日记 2025/6/28 19:25:59

机器学习学习笔记-20241211

文章目录空间归纳偏置局部性（Locality）平移不变性（Translation Invariance）空间关系（Spatial Relationships）尺度不变性（Scale Invariance）上下文依赖（Context Dependen…...

编程日记 2025/6/28 20:04:39

【在Linux世界中追寻伟大的One Piece】HTTP Session

目录 1 -> 引入HTTP Session 1.1 -> 定义 1.2 -> 工作原理 1.3 -> 安全性 1.4 -> 超时和失效 1.5 -> 用途 2 -> 模拟session行为 3 -> 实验测试session 1 -> 引入HTTP Session 1.1 -> 定义 HTTP Session是服务器用来跟踪用户与服务器交…...

编程日记 2025/6/28 18:07:45

人工智能|自然语言处理——机器翻译评价指标Bleu和Rouge

在机器翻译任务中，BLEU 和 ROUGE 是两个常用的评价指标，BLEU 根据精确率(Precision)衡量翻译的质量，而 ROUGE 根据召回率(Recall)衡量翻译的质量 BLEU（Bilingual Evaluation Understudy）： BLEU是一种用于评…...

编程日记 2025/6/28 18:29:15

【前端】JavaScript中的函数形式参数：预解析与作用域详解

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端文章目录 💯前言💯示例代码💯1. 形式参数的预解析模拟预解析后的代码 💯2. 函数作用域与子函数的关系代码详解 💯3. 扩展：块作用域与变量提…...

编程日记 2025/6/28 18:07:09

自然语言处理的未来愿景

自然语言处理的未来愿景在这个信息爆炸的时代，计算机如何理解和生成我们日常使用的语言，已经成为一个引人注目的问题。你有没有想过，为什么智能助手能理解你的指令？又或者，为什么社交媒体上的推荐引擎能够精准地推荐你喜爱的内容？这背后，正是自然语言处理（NLP）在发挥…...

编程日记 2025/6/28 7:25:06

1.conda create -n pytorch311 python3.11 # 重新进入虚拟环境 source activate # 退出虚拟环境 conda deactivate 最后，重新执行 conda activate pytorch311 pip install torch-2.0.0cpu-cp311-cp311-linux_x86_64 配置Graph-WaveNet网络： pip…...

编程日记 2025/7/1 11:55:48

nvm-windows | node版本管理

问题： npm ERR! notsup Not compatible with your version of node/npm: npm10.9.2 npm ERR! notsup Required: {"node":"^18.17.0 || >20.5.0"} npm ERR! notsup Actual: {"npm":"9.5.0","node":"v18.…...

编程日记 2025/6/28 18:10:01

GLM-4V-Flash：智谱AI引领多模态视觉模型新潮流

点击访问 chatTools 免费体验GPT最新模型，包括o1推理模型、GPT4o 和Claude等模型！ 随着人工智能技术的不断进步，多模态模型逐渐成为行业关注的焦点。智谱AI作为国内领先的人工智能公司，再次以创新姿态推出了首款免费多模态视觉模型…...

编程日记 2025/7/1 18:09:59

二、ubuntu单盘改软raid1

将单盘系统转换为软 RAID 1 是一个复杂的过程，尤其是在已经有数据的生产环境中进行时。这个过程涉及备份现有数据、创建 RAID 阵列、迁移数据以及更新引导加载程序（如 GRUB）。以下是详细的步骤指南： 前提条件备份数据&#xff…...

编程日记 2025/7/1 16:43:05

「Mac玩转仓颉内测版45」小学奥数篇8 - 排列组合计算

本篇将通过 Python 和 Cangjie 双语讲解如何计算排列与组合。这道题目旨在让学生学会使用排列组合公式解决实际问题，并加深对数学知识和编程逻辑的理解。关键词小学奥数Python Cangjie排列与组合一、题目描述编写一个程序，计算从 n 个不同元素中取…...

编程日记 2025/7/1 3:56:00

【零成本抽象】基本概念与在C++中的实现

零成本抽象概念是由 Bjarne Stroustrup 提出的，他在 1994 年的著作中就有相关设想，2016 年其在 C++ 大会登台演讲时，明确阐述了 C++ 中的 “零成本抽象” 这一理念。一、零成本抽象概念 Bjarne Stroustrup提出的零成本抽象概念，是指在编程中使用高级抽象机制时，不会产生…...

编程日记 2025/6/30 20:24:51

域渗透入门靶机之HTB-Cicada

easy难度的windows靶机信息收集端口探测 nmap -sT --min-rate 10000 -p- 10.10.11.35 -oA ./port 发现开放了53，88，389等端口，推测为域控进一步信息收集，对爆破的端口进行更加详细的扫描小tips：对于众多的端口&…...

编程日记 2025/7/1 16:50:10

(仓颉) Cangjie 刷力扣基础语法小结

文章目录 🧓官方资料🧓力扣经典前 3 题🕷️[1. 两数之和 - 力扣（LeetCode）](https://leetcode.cn/problems/two-sum/description/)🕷️[2. 两数相加 - 力扣（LeetCode）](https://leet…...

编程日记 2025/7/1 7:03:02

Phoenix5.1.3安装

环境说明准备三台服务器，分别为：bigdata141（作为HBase主节点）、bigdata142、bigdata143，已经搭建好HBase集群，我这边HBase版本为2.2.7再准备一台服务器，bigdata144，可作为Phoenix客…...

编程日记 2025/6/28 18:11:55

深入理解 Apache Shiro：安全框架全解析

亲爱的小伙伴们😘，在求知的漫漫旅途中，若你对深度学习的奥秘、JAVA 、PYTHON与SAP 的奇妙世界，亦或是读研论文的撰写攻略有所探寻🧐，那不妨给我一个小小的关注吧🥰。我会精心筹备，在…...

编程日记 2025/7/1 18:27:23

机器学习：全面学习路径指南

摘要： 本文精心规划了一条从入门到精通机器学习的学习路线，详细涵盖了基础理论构建、核心技术栈掌握、主流算法学习、实践项目锻炼以及前沿领域探索等多个关键阶段。通过逐步深入各个层面，介绍必备的数学知识、编程工具、经典与现代机器学习算…...

编程日记 2025/6/28 9:43:52

二叉树交换相关算法题|递归/非递归交换所有节点左右子树(C)

交换左右子树设树B是一棵采用链式结构存储的二叉树，编写一个把树B中所有节点的左右子树进行交换的函数算法思想采用递归算法实现交换二叉树的左右子树，首先交换root节点左孩子的左右子树，然后交换root节点右孩子的左右子树，…...

编程日记 2025/7/1 11:49:39

什么是纯虚函数？什么是抽象类？纯虚函数和抽象类在面向对象编程中的意义是什么？

纯虚函数纯虚函数是一个在基类中声明但不实现的虚函数。它的声明方式是在函数声明的末尾添加 0。这意味着这个函数没有提供具体的实现，任何继承这个基类的派生类都必须提供这个函数的实现，否则它们也会变成抽象类，无法实例化。示例&#…...

编程日记 2025/7/1 17:46:12

高效利用资源：分布式有状态服务的高可靠性设计

在分布式系统设计中，实现有状态服务的高可靠性通常采用主备切换的方式。当主服务停止工作时，备服务接管任务，例如通过Keepalive实现VIP的切换以保证可用性。然而，这种方式存在资源浪费的问题，因为备服务始终处于空转状…...

编程日记 2025/7/1 17:56:17

网络安全中的 SOC 是什么？

当今世界，网络威胁日益增多，确保网络安全已成为各种规模企业的首要任务。网络安全讨论中经常出现的一个术语是 SOC，即安全运营中心的缩写。但网络安全中的 SOC 是什么呢？ SOC在防御网络威胁、管理安全事件和全天候监控系统方面发…...

编程日记 2025/7/1 7:23:02

QtCreator UI界面菜单栏无法输入中文

如下图红色所示的区域，直接输入是无法输入中文的： 解决方法：在右边的属性值里输入即可也可以参考这位同学的解决方法：友情链接...

编程日记 2025/7/1 8:08:56

圆桌对话：AI数字笔迹，数字化时代的重要驱动力 | 2024 AI+数字笔迹创新应用发展论坛

12月6日，以“聚焦创新应用，AI引领赋能”为主题的2024 AI数字笔迹创新应用发展论坛在重庆两江新区举办。本届论坛由重庆市大数据应用发展管理局和重庆两江新区管理委员会联合指导，重庆亲笔签数字科技有限公司主办。论坛现场一场题为“数字化…...

编程日记 2025/6/30 7:46:47

Tablesaw封装Plot.ly实现数据可视化

上文介绍tablesaw的数据处理功能，本文向你展示其数据可视化功能，并通过几个常用图表示例进行说明。 Plot.ly包装可视化是数据分析的重要组成部分，无论你只是“查看”新数据集还是验证机器学习算法的结果。Tablesaw是一个开源、高性能的Java…...

编程日记 2025/7/1 18:20:22

在Linux（ubuntu22.04）搭建rust开发环境

1.安装rust 1.安装curl: sudo apt install curl 2.安装rust最新版 curl --proto ‘https’ --tlsv1.2 https://sh.rustup.rs -sSf | sh 安装完成后出现：Rust is installed now. Great! 重启当前shell即可 3.检验是否安装成功 rustc --version 结果出现&…...

编程日记 2025/7/1 18:03:58

Less和SCSS，哪个更好用？

前言 Less 和 SCSS 都是流行的 CSS 预处理器，它们的目的都是扩展 CSS 的功能，使样式表更具组织性、可维护性和可重用性。虽然它们有许多相似之处，但在语法、特性和工作方式上也存在一些差异。 Less Less 是一种动态样式表语言，…...

编程日记 2025/7/1 17:37:57

vuex作用及五大组成部分

Vuex 是 Vue.js 官方的状态管理工具，用于管理应用中的全局状态。它的作用主要是解决组件间的状态共享和数据同步问题，特别是在组件复杂嵌套或兄弟组件通信中提供清晰、结构化的解决方案。 Vuex 的作用集中管理状态： 将组件的共享状态抽取出…...

编程日记 2025/7/1 17:45:23

vue借助西瓜播放器插件实现视频播放

西瓜播放器官网西瓜播放器安装 npm install xgplayer 使用案例 vue3为例 <script setup lang"ts"> import Player from xgplayer import { ref, unref, onMounted, watch, onBeforeUnmount, nextTick } from vue import xgplayer/dist/index.min.csscon…...

编程日记 2025/6/29 22:16:15

PHP无法读取.env的配置变量原因

今天帮一个客户在一台服务器配置laravel，在安装好宝塔后，配置了php环境，把laravel项目上传，并且在根目录的.env上配置好数据库等信息后，发现无法正常使用通过排查发现.env的变量无法正常获取，排查了好久后…...

编程日记 2025/6/29 20:28:20

Android 15（V）新功能适配，雕琢移动细节之美

Android 15，内部代号为Vanilla Ice Cream，是Android移动操作系统的最新主要版本，于2024年2月16日在开发者预览版1中发布。Android 15源代码于 2024年9月4日发布。Android 15稳定版于2024年10月15日发布。以下是针对 Android 15（…...

编程日记 2025/7/1 9:14:11

Qt自定义类型在信号槽中的使用

引言示例自定义数据类型信号槽效果检查代码注册自定义类型信号槽使用QVariant传递参数总结附加绑定信号槽，传递的参数如果是自定义类型的变量，槽函数不会响应。为什么呢？是因为自定义类型没有被写入元对象系统，对于Qt来说，不认识这个数据类型，Qt是以事件来驱动的，信号槽…...

编程日记 2025/6/28 18:12:09

自适应卡尔曼滤波（包括EKF、UKF、CKF等）的创新思路——该调什么、不该调什么

在调节自适应卡尔曼滤波时，需要注意的参数和矩阵都对滤波器的性能有直接影响。本文给出详细的说明，包括相关公式和 MATLAB 代码示例文章目录需要调节的参数1. **过程噪声协方差矩阵 Q Q Q**：2. **测量噪声协方差矩阵 R R R**：…...

编程日记 2025/6/28 18:07:08

Ape-DTS：开源 DTS 工具，助力自建 MySQL、PostgreSQL 迁移上云

Ape-DTS 是一款高效、轻量级且功能强大的开源工具，专注于解决数据迁移、同步、校验、订阅与加工的需求。无论是将自建的 MySQL/PostgreSQL 数据库迁移到云端，还是在不同数据库间进行数据迁移，Ape-DTS 都能为您提供便捷且可靠的解决方案。它特…...

编程日记 2025/6/30 20:15:07

SpringBoot中使用MyBatis-Plus详细介绍

目录一、MyBatis-Plus的使用步骤 1.引入MybatisPlus的起步依赖 2.定义Mapper（也叫dao）层的接口 3.MyBatis-Plus中常用注解 4. 使用MyBatis-Plus时要做如下配置 5.条件构造器 Wrapper 一、MyBatis-Plus的使用步骤 1.引入MybatisPlus的起步依赖 My…...

编程日记 2025/6/30 10:54:39

Buuctf Web题解

写在前面， 本人小白一枚，记录一下web做题过程，大部分为个人理解可能有些地方写的不够明确还请见谅。当然由于刚入手web题，所以有些题会没有思路，这时会参考其他大佬的题解过程。本文会一直更新，由于是第一次…...

编程日记 2025/7/1 17:33:19

Linux 支持多个spi-nor flash

1. 需求通常在嵌入式开发过程中可能会遇到需要再同一个SPI总线上挂载多个spi nor flash才能满足存储需求。 2. 技术简介对于spi-nor flash驱动通常不需要驱动开发人员手搓，一般内核会有一套固定的驱动，而且走的是内核的MTD子系统那一套，市…...

编程日记 2025/6/30 20:22:56

APP、小程序对接聚合广告平台，有哪些广告变现策略？

开发者对接聚合广告平台，可以让自身流量价值最大化，获得更多的广告曝光机会，对接单一的广告联盟容易造成广告填充不足，收益不稳定的问题。#APP广告变现# APP开发者根据应用的生命周期、用户特征和产品定位，选择最适合…...

编程日记 2025/6/28 20:21:31

RPC设计--应用层缓冲区，TcpBuffer

为什么需要应用层的buffer 为了方便数据处理，从fd上直接读写然后做包的组装、拆解不够方便方便异步发送，将数据写到应用层buffer后即可返回，让epoll即event_loop去异步发送。提高发送效率，多个小包可合并发送 buffer 设计可以…...

编程日记 2025/6/28 20:04:25

微服务的问题

1.创建maven项目然后配置对应的maven地址 2.创建父工程删掉其中的src文件在父pom中进行版本依赖和管理如下图所示 3.在子文件中进行添加依赖然后刷新maven进行下载...

编程日记 2025/6/28 20:20:20

开源模型应用落地-知识巩固-如何正确搭建生产级AI服务（一）

一、前言将大语言模型集成至vllm，能够显著实现推理加速，让模型在处理任务时更加高效快捷，极大地提升了响应速度，减少用户等待时间。具体而言，一方面它能大幅提高吞吐量，vLLM 借助 PagedAttention巧妙地对attention中缓存的张量进行高效管理，从而达成比 HuggingFace Tra…...

编程日记 2025/7/1 6:41:27

Uniapp Android SpringBoot3 对接支付宝支付（最新教程附源码）

Uniapp Android SpringBoot3 对接支付宝支付（最新教程附源码） 1、效果展示2、后端实现2.1 引入支付宝SDK依赖 pom.xml2.2 配置 application.yml2.3 支付宝相关代码2.3.1 AlipayConfig.java2.3.2 ZfbPayConfig.java2.3.3 支付接口2.3.4 支付回调处理接口&…...

编程日记 2025/6/28 19:26:27

SpringSpringBoot常用注解

Spring 和 Spring Boot 是 Java 开发中广泛使用的框架，它们提供了许多注解来简化配置和开发过程。以下是一些 Spring 和 Spring Boot 中常用的注解： Spring 常用注解 ‌Component‌ 用于标注一个类为 Spring 容器的一个组件，Spring 会自动…...

编程日记 2025/6/28 19:26:10

【机器人】振动分析和控制工具之Bode图

Bode 图完整介绍 Bode 图由两个部分组成： 幅值图 (Magnitude Plot)：描述系统对不同频率输入信号的增益大小（幅值响应）。相位图 (Phase Plot)：描述系统输出信号相对于输入信号的相位差。 Bode 图的横轴是频率&#x…...

编程日记 2025/6/28 14:58:32

创建一个空项目

启动页

引导页

图片资源

相关文章：