在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调用：

弹窗内容视图：

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

点击同意后的首页状态（非真机状态）：