news 2026/4/3 3:17:20

全民健身项目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/3/31 21:22:16

Java GC是任意时候都能进行的吗?

大家好,我是锋哥。今天分享关于【Java GC是任意时候都能进行的吗?】面试题。希望对大家有帮助; Spring IoCJava GC是任意时候都能进行的吗? 超硬核AI学习资料,现在永久免费了! 不是的,Java 的…

作者头像 李华
网站建设 2026/3/31 8:48:15

测试平台出问题?看我20分钟快速定位!

今天遇到一个问题,感觉挺有意思,处理过程也非常有意义,希望能给大家一个借鉴吧。今天一位小姐姐找到了我们大组长,说测试平台添加自动化测试用例失败,之后我们组长把我拉到了一个群里让我去看一下,硬着头皮…

作者头像 李华
网站建设 2026/4/2 13:54:51

C#数组操作全攻略:引用测试与查询方法

第九次一,数组的引用测试和属性方法1, 数组的引用测试int[] ints new int[] {1,2,3}; int[] ints2 ints; //赋值关系 ints[0] 999; Console.WriteLine(ints2[0]); Console.WriteLine(ints[0]);2,方法传递时候对数组引用测试int[] ints3 n…

作者头像 李华
网站建设 2026/4/1 0:43:02

科学休息,DevFish插件1.0.3版本再更新

1、前言 继11.4《科学休息,我用AI写了个vscode养鱼插件:DevFish发布》的插件发布后,2周时间还是有不少小伙伴下载安装了,安装量也是有点超出我的意料之外,原本只是写着玩玩的。于是乎,我今天心血来潮&#…

作者头像 李华
网站建设 2026/3/31 22:23:09

【第57套】一天两套,继续冲刺!

写在前面车门焊死,考研将至,准备冲刺!我将持续为大家更新25最新真题解析!学得快的同学可以和我一起,全力冲刺~注意,目前我只发布最新年份的真题,其他年份的真题,一个是很…

作者头像 李华
网站建设 2026/4/1 3:28:14

AI写论文哪个软件最好?别再只看“秒出万字”了——真正能过导师审的,是敢把数据和文献摊开给你验的只有宏智树AI

你有没有试过这样的场景? 用某AI工具“唰”地生成一篇8000字论文,结果导师一眼指出: “这篇参考文献根本不存在。” “这个图表没数据来源,不能用。” “查重率38%,还得重写。” 那一刻你才意识到:AI写论文…

作者头像 李华