news 2026/6/10 14:33:00

全民健身项目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/6/10 13:17:43

盲盒小程序开发✨全玩法覆盖不踩坑!

盲盒小程序开发✨全玩法覆盖不踩坑!做盲盒小程序怕玩法单一?我们全搞定!🎉爬塔闯关赢稀有赏、经典一番赏抽限定款、无限赏解锁持续惊喜,还有对对碰互动 PK,玩家粘性直接拉满!社交 商城双 buff …

作者头像 李华
网站建设 2026/6/10 13:17:15

Jmeter进行http接口测试,这一篇就搞定

jmeter-http接口测试脚本 jmeter进行http接口测试的主要步骤(1.添加线程组 2.添加http请求 3.在http请求中写入接口的URL,路径,请求方式,参数 4.添加查看结果树 5.调用接口,查看返回值) 针对接口添加heade…

作者头像 李华
网站建设 2026/6/10 13:17:16

LobeChat能否支持WebGL可视化?三维数据呈现设想

LobeChat能否支持WebGL可视化?三维数据呈现设想 在AI助手逐渐从“问答工具”演变为“智能工作台”的今天,用户不再满足于冷冰冰的文字回复。工程师想看神经网络的拓扑结构,科研人员需要直观展示分子空间构型,设计师希望实时预览3D…

作者头像 李华
网站建设 2026/6/10 11:03:18

Fail2Ban 一键部署 + 管理脚本(可直接执行)

将以下内容保存为 fail2ban_setup.sh,执行 sudo bash fail2ban_setup.sh 即可完成「配置 Web 界面 常用命令封装」,无需手动敲命令!bash运行#!/bin/bash # Fail2Ban 一键部署脚本(适配 Ubuntu 20.04/22.04) # 作者&a…

作者头像 李华
网站建设 2026/6/10 13:19:42

软件工程与系统,容器,进程,架构,组织,结构和部署的关系概论

考虑软件工程作为一个学科,它涉及软件开发的整个生命周期。在这个生命周期中,系统、容器、进程、架构、组织、结构和部署是不同层次和阶段的关键概念。下面将详细阐述它们之间的关系,以及它们的核心机制和原理,并举例说明。 系统&…

作者头像 李华
网站建设 2026/6/10 9:19:46

C#字符串与数组操作全解析

第八次一,字符串创建1,对象类型: 可以通过class 创建一个对象类型如:People p1 new People() { Id100}; //p1对象类型2,基本类型: int float double 等 int 10如:int a 10;Test(a); Test1(…

作者头像 李华