今日总结 2025-01-16

一、学习概况

今日围绕 uni-app 项目展开深入学习，主要聚焦于项目搭建环节，涉及网络请求、状态管理以及用户登录功能的实现，旨在构建一个功能完备的应用基础框架。

二、学习内容详述

（一）项目启动

1. 创建项目：通过 cli 方式，从国内推荐地址（登录 - Gitee.com）成功创建项目，并在 VSCode 编辑器中开展后续代码编写工作。于项目根目录成功创建.prettierrc 文件，并初步添加常用配置选项，为后续代码规范奠定基础。
2. tabBar 与导航栏配置：依据设计要求，新建首页（index）、健康百科（wiki）、消息通知（notify）、我的（my）四个页面，并在 pages.json 文件中完成 tabBar 相关配置，同时将 tabBar 所需图片妥善放置于项目根目录。此外，成功将各页面导航栏标题及全局导航栏背景颜色设置为白色，确保页面视觉一致性。
3. 公共样式与图标处理：在 App.vue 文件中精心配置公共 css 代码，有效精简代码结构，并定义了 scss 变量与混入（用于处理文字溢出显示为...），提升样式管理效率。顺利导入单色图标（解压至 static/fonts 目录并在 App.vue 引入对应样式文件）与多色图标（将转换后的 color-fonts.scss 置于 static 目录并在 App.vue 导入），经测试，图标在页面中能够正常显示。同时，成功指定网站图标，完善项目品牌标识。
4. 网络请求封装：完成 luch-request 安装，在 utils/http.ts 文件中实例化并合理配置基地址后，成功进行网络请求测试。深入设置请求 / 响应拦截器，在请求拦截器中调用 uni.showLoading 实现加载提示，响应拦截器中调用 uni.hideLoading 隐藏提示，并通过 custom 属性灵活自定义控制 loading 提示框的显示逻辑，增强用户交互体验。进一步封装请求函数并准确配置类型，确保数据请求与处理的规范性。

（二）Pinia 状态管理

1. 安装与基础设置：鉴于 pinia 最新版本与 uni-app 依赖存在兼容性问题，采取固定版本安装方式成功安装 Pinia。随后创建 pinia 实例（根 store）并正确传递给应用，明确 createSSRApp 在 uni-app 跨平台开发场景下与 createApp 功能类似，为后续状态管理提供核心支撑。
2. Store 操作：熟练掌握使用 defineStore () 定义 Store 的方法，深入理解其支持的选项式和组合式两种语法格式。在组合式 Store 中，清晰明确 ref () 对应 state 属性、computed 对应 getters、function () 对应 actions，为数据管理与操作提供多样化手段。
3. 数据持久化：成功安装 pinia-plugin-unistorage 插件并添加至 Pinia 实例，通过为 defineStore 传入第三个参数实现数据持久化功能。同时，学会利用 paths 参数精准指定需要持久化存储的数据，有效避免不必要的性能损耗，保障数据存储的高效性与针对性。

（三）用户登录

1. 布局与交互构建：新建 pages/login/login.vue 页面，并准确添加至 pages.json 文件，同时将页面导航栏标题设置为 “用户登录”。成功创建 Tab 标签页切换基础结构，并实现流畅的标签切换功能，为用户提供便捷的登录方式选择。此外，封装 username&password 组件和短信验证码组件，并顺利导入页面，确保登录界面布局完整。
2. 短信验证码登录流程实现：巧妙运用 uni-countdown 组件实现获取短信码过程中的倒计时交互，有效提醒用户剩余时间。严格按照步骤进行表单数据验证，包括准确获取表单数据（通过给 uni-forms 组件添加 :model 属性、uni-forms-item 组件添加 name 属性、uni-easyinput 组件添加 v-model 属性）、合理定义验证规则（给 uni-forms 组件添加 :rules 属性并确保与 uni-forms-item 的 name 属性对应）以及正确调用验证方法，确保用户输入数据的合法性。进一步封装登录相关 api 函数，先高效校验手机号并发送验证码，在接收验证码后准确提交表单全部数据（mobile 和 code）至服务端接口，并通过 Pinia 妥善记录用户登录状态（在 src/stores/user.ts 中新建 user Store 存储 token），实现登录功能的完整性与可靠性。

三、重点难点突破

（一）重点聚焦

1. 着重掌握 luch-request 网络请求的全面用法，包括拦截器的精细设置、加载状态的精准控制以及请求函数的规范封装，确保网络请求在项目中的稳定、高效运行，保障数据交互的顺畅性与可靠性。
2. 深度掌握 Pinia 的初始化操作及 Store 的创建与数据操作技巧，熟练运用不同语法格式实现数据在组件间的高效共享与灵活管理，提升应用数据处理能力与状态管理水平。
3. 全力实现用户登录功能，涵盖登录布局的合理搭建、短信验证码交互的流畅设计、表单验证的严谨实施以及登录状态的准确记录，为用户提供安全、便捷的登录体验，增强应用的用户认证功能。

（二）难点攻克

1. 在 luch-request 中，拦截器逻辑较为复杂，需深入理解请求与响应过程中的各种细节，如在不同业务场景下如何准确设置请求头、妥善处理错误信息以及精准控制加载提示框的显示时机，通过反复研读文档、细致分析示例代码并结合实际项目进行大量调试，逐步攻克这一难点，确保网络请求的可靠性与用户体验的优化。
2. Pinia 数据持久化配置涉及插件机制与 Store 定义参数的深度理解，需要精准把握如何合理选择要持久化的数据，避免过度存储或数据丢失，同时要兼顾性能优化。通过参考官方详细教程、深入研究插件文档并进行多次实验对比，从简单数据结构入手，逐步掌握 paths 参数的使用技巧，成功解决这一难题，实现数据持久化的高效管理。
3. 在用户登录过程中，短信验证码倒计时组件与表单验证、接口调用的协同工作存在一定难度，需精确梳理各环节执行顺序与数据传递流程。通过绘制详细流程图、对各组件进行单独功能测试后再进行集成调试，并在关键节点添加日志输出进行观察分析，成功解决协同问题，确保登录流程的完整性与准确性。

四、学习成果与反思

（一）知识技能提升

今日学习成果显著，全面掌握了 uni-app 项目搭建过程中的核心技术要点，包括项目架构的合理搭建、网络请求的有效处理、状态管理的灵活运用以及用户登录功能的成功实现，已具备独立构建具有一定功能的 uni-app 应用的能力，为后续项目开发奠定了坚实基础。

（二）问题解决能力增强

在解决各类技术难题的过程中，自主学习、调试与优化能力得到了充分锻炼。学会了从官方文档、示例代码以及网络资源中快速获取有效信息，并能将其灵活应用于实际问题解决中，积累了宝贵的实践经验，显著提升了应对复杂开发问题的信心与能力，培养了良好的问题解决思维与方法。

五、明日学习计划

明日将继续深入探索 uni-app 项目开发的后续环节，重点关注项目功能的进一步拓展与优化，如完善用户信息管理模块、实现页面间的数据传递与交互逻辑等。同时，将加强对项目性能的监测与优化，学习并应用相关性能优化工具与技术，确保项目在不同设备上的流畅运行，持续提升项目的质量与用户体验。此外，还将深入研究 uni-app 与后端服务的深度集成，确保数据交互的安全、稳定与高效，为打造一个功能完备、性能卓越的移动应用持续努力。