news 2026/7/13 5:03:12

全民健身项目UI可视化首页的构建和排版

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
全民健身项目UI可视化首页的构建和排版

在DevEco Studio创建一个小程序项目所需要的知识储备:

了解核心前端代码基础

所有开发程序的必要前提:

鸿蒙小程序基于ArkTS(鸿蒙主流开发语言)开发,而 ArkTS 脱胎于TypeScript/JavaScript,且 UI 层复用前端核心思想,必须掌握:

  • JavaScript/TypeScript
    • 核心语法:变量、数据类型、函数、对象、数组、异步编程(Promise/async-await)、ES6 + 特性(箭头函数、解构赋值、模块导入导出);
    • TypeScript 额外要求:类型注解、接口(interface)、泛型(基础),因为 ArkTS 是 TypeScript 的超集,强类型思维是关键。
  • HTML/CSS 核心思想
    • 无需精通,但要理解 “结构(HTML)+ 样式(CSS)” 的分层逻辑 —— 对应鸿蒙的组件布局(ArkTS UI 组件)+ 样式(@Styles/@Extend)
    • 掌握 Flex 弹性布局(鸿蒙小程序主流布局方式)、盒子模型、样式优先级等核心概念。

基础编程思维

  • 面向对象编程(OOP)基础:类、对象、继承、封装(ArkTS 基于 OOP 设计 UI 组件和逻辑);
  • 模块化思维:代码拆分、复用(如鸿蒙的自定义组件、工具类);
  • 调试能力:看懂报错日志、使用控制台打印(console)定位问题。

鸿蒙生态核心基础

这是区别于微信 / 支付宝小程序的关键,必须掌握鸿蒙特有的体系:

  • 基本语法:装饰器(@Entry/@Component/@State 等)、构建函数(build ())、UI 组件渲染逻辑;
  • 状态管理:
    • 基础状态:@State(组件内状态)、@Prop(父子组件单向传值)、@Link(父子双向绑定);
    • 进阶:@Provide/@Consume(跨组件传值)、AppStorage/LocalStorage(全局 / 局部状态);
  • 事件处理:点击、滑动等事件绑定(onClick、onChange)、事件参数传递。

鸿蒙小程序核心概念

  • 项目结构:理解 DevEco Studio 中小程序项目的目录规范(如 pages/(页面)、resources/(资源)、app.json5(全局配置));
  • 配置文件:
    • app.json5:配置小程序名称、入口页面、窗口样式、权限等;
    • page.json5:页面级配置(覆盖全局、设置页面标题、导航栏等);
  • 组件体系:
    • 内置基础组件:Text(文本)、Image(图片)、Button(按钮)、List(列表)、Input(输入框)等常用组件的属性和用法;
    • 自定义组件:封装可复用的 UI 片段(如自定义导航栏、卡片)。

一.拟定制作小程序的思路,将必要的文件储存在Studio文件夹里

在正式开始小程序的创作之前,要理清好创作思路,把可能用到的文件资料按分类放在各个不同的文件夹中(如未来程序所需的图片,颜色,音频,文案等等),相关图片可以在网上查找或者AI 生成

如图(图片背景可以考虑放在media文件夹中):

颜色也可以提前想好并放在element中,并用相关代码命名,方便以后开发调用:

首页所需要的弹窗文案也可以相继存放:

在相关的资料准备充分后,可以开始第一步的首页开发

二.开始UI首页的创建

可以再pages文件夹里新构建一个项目,命名welcomescreen,开始进行第一步的首页底层创建:

以上为首页底层代码局部

字体也可以根据个人的审美来进行调整

制作弹窗

首页弹窗核心价值

1. 抓住 “黄金注意力窗口”,提升关键信息触达率

用户打开小程序首页的瞬间,是注意力最集中的时刻:

  • 相比埋在页面角落的公告、按钮,弹窗的触达率接近 100%(只要设计合理不被直接关闭);
  • 尤其针对 “一次性 / 时效性信息”(如版本更新、活动提醒),能避免用户因浏览惯性忽略核心内容。
2. 引导用户完成 “关键行为闭环”,降低转化成本

个人用户的核心行为(登录、授权、订阅、使用核心功能)往往需要主动触发,弹窗可直接缩短路径:

  • 比如首次打开小程序时的 “手机号快捷登录弹窗”:跳过 “找登录按钮→点击→输入信息” 的多步操作,直接在首页弹窗完成,提升登录转化率(登录后才能使用收藏、下单等核心功能);
  • 又如 “订阅服务通知弹窗”:引导用户订阅后,后续的订单提醒、活动通知能触达用户,提升复访率。

可以新建一个项目命名userprivacydialog(方便在首页welcomescreen中通过import -from调用)(建议userprivacydialog放在dialog文件夹中)

期间可以调用之前创建好的弹窗文案

在welcomescreen调用:

弹窗内容视图:

用鸿蒙真机运行的首页弹窗:

点击同意后的首页状态(非真机状态):

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/10 19:36:41

光伏四可“可观”功能:光伏电站全景数字化的底层支撑技术

在光伏产业从“规模扩张”向“质量提升”转型的关键阶段,全景数字化已成为电站降本增效、安全运维的核心路径。而实现光伏电站“设备状态全可视、运行数据全可溯、管理决策全可依”的“可观”功能,正是支撑这一转型的底层技术基石。不同于传统光伏监控仅…

作者头像 李华
网站建设 2026/7/10 22:08:23

如何用FLUX.1-dev镜像在本地部署下一代AI绘画模型?

如何用FLUX.1-dev镜像在本地部署下一代AI绘画模型? 在数字创作的前沿战场上,一个核心矛盾正日益凸显:用户对图像生成质量的要求越来越高——不仅要“像”,还要“准”;不仅要有美感,更要精准响应复杂提示。而…

作者头像 李华
网站建设 2026/7/11 16:32:38

基于 Comsol 移动网格方法的激光熔池流动数值模拟

基于comsol移动网格方法的激光熔池流动数值模拟,包含马兰戈尼对流,表面张力,重力和浮力,欢迎交流在材料加工领域,激光熔池流动的数值模拟对于理解和优化工艺过程至关重要。今天咱就聊聊基于 Comsol 移动网格方法来模拟…

作者头像 李华
网站建设 2026/7/12 23:19:13

[光学原理与应用-491]:水冷机、零气模块CDA、功率计等影响266皮秒紫外激光器的种子源1064nm功率稳定性结果的主要因素有哪些?

影响 266 nm 皮秒紫外激光器种子源(1064 nm)功率稳定性 的关键因素涉及多个子系统,其中你提到的 水冷机、零气模块(CDA)、功率计 都是重要的外部支撑或监测设备。下面我们从系统工程角度,系统性地分析这些设…

作者头像 李华
网站建设 2026/7/10 14:32:09

昆仑通态MCGS与欧姆龙E5CC温控器通讯实战:PID模式及输出启停控制

昆仑通态MCGS与欧姆龙E5CC温控器通讯PID模式输出启停(KUNL-1) 功能:通过昆仑通态对欧姆龙E5CC温控器 设定温度,读取温控,控制输出启停,切换PID/ON-OFF控制,PID自整定调整。 反应灵敏,通讯稳定可靠。 器件&a…

作者头像 李华