今日总结 2025-01-13

（一）搭建基本开发环境

1. 创建项目
   • HBuilder X 方式：先安装 HBuilder X，Windows 系统下载压缩包解压启动，Mac OS 系统下载.dmg 程序安装。安装核心插件，注册开发者账号。在 HBuilder X 可视化界面通过【菜单栏】 => 【文件】 => 【新建】 => 【项目】创建项目，配置项目名称、位置、Vue 版本等属性。
   • Vue - CLI 方式创建 uni - app 项目步骤：
     • 确保环境准备：
       • 首先要安装 Node.js，它是运行 Vue - CLI 的基础环境。可以从 Node.js 官方网站（Node.js — Run JavaScript Everywhere）下载适合自己操作系统的安装包进行安装。安装完成后，在命令行工具中输入node -v，若能输出版本号，则说明安装成功。
       • 安装 Vue - CLI 工具。在已经安装好 Node.js 的基础上，打开命令行工具，执行命令npm install -g @vue/cli。-g参数表示全局安装，这样在系统的任何目录下都可以使用 Vue - CLI 命令。安装完成后，输入vue -V（注意是大写的 V），若输出版本号，则说明 Vue - CLI 安装成功。
     • 创建 uni - app 项目：
       • 打开命令行工具，切换到你希望创建项目的目录。例如，若想在D:\myprojects目录下创建项目，可在命令行中执行cd D:\myprojects。
       • 执行创建 uni - app 项目的命令vue create -p dcloudio/uni - app my - uni - app。其中，my - uni - app是你自定义的项目名称，可以根据实际需求进行修改。执行该命令后，Vue - CLI 会根据dcloudio/uni - app模板来创建 uni - app 项目。
       • 命令执行过程中，可能会提示你选择一些项目配置，例如 Vue 的版本（Vue2 或 Vue3）等。你可以根据项目需求进行选择。选择完成后，Vue - CLI 会自动下载项目所需的依赖包并完成项目的初始化。
     • 项目初始化完成后：
       • 进入项目目录，执行cd my - uni - app。
       • 此时项目结构已经生成，你可以使用文本编辑器（如 Visual Studio Code）打开项目目录进行开发。项目的基本结构包括src目录（存放源码）、public目录（存放静态资源）、package.json（记录项目依赖和脚本等信息）等。
       • 要运行项目，在项目目录的命令行中执行npm run dev:h5（以运行 H5 版本为例），也可以根据需要执行npm run dev:mp - weixin（运行微信小程序版本）、npm run dev:app - plus（运行 App 版本）等命令，具体命令可根据package.json中scripts字段的配置来确定。运行命令后，会启动相应的开发服务器，你可以在浏览器或模拟器中查看项目效果。

   • 与 HBuilder X 方式创建项目的对比：

     • HBuilder X 方式：
       • 优点：可视化操作，对于初学者来说更加直观，容易上手。在创建项目过程中，可以通过图形化界面配置项目的各项参数，如项目名称、位置、Vue 版本等。同时，HBuilder X 内置了对 uni - app 开发的优化，如代码提示、语法检查等功能，能提高开发效率。而且，它的插件市场丰富，方便安装和管理各种插件来增强开发功能。
       • 缺点：相对来说，定制性可能稍弱一些，对于一些熟悉命令行操作，希望更灵活地控制项目创建过程的开发者，可能不太满足需求。
     • Vue - CLI 方式：
       • 优点：具有更高的灵活性和定制性。开发者可以通过命令行参数对项目创建过程进行更细致的控制，例如可以更方便地自定义项目模板、选择特定版本的依赖等。对于有一定前端开发经验，熟悉 Vue - CLI 操作的开发者，使用这种方式创建项目会更加高效。
       • 缺点：需要开发者具备一定的命令行操作基础和前端开发知识，对于初学者来说，上手难度相对较大。创建项目过程中没有可视化界面，配置参数需要记住相应的命令和选项，不够直观。
2. 项目运行：uni - app 项目本质是 Vue 项目，在 HBuilder X 菜单栏通过【运行】或快捷键 Ctrl + R（Command + R）运行项目。可运行到浏览器（打包成 H5 版本）、小程序模拟器（打包成小程序）、手机或模拟器（打包成 App）。
   • H5 端：运行到浏览器或内置浏览器，运行到内置浏览器可能需安装【内置浏览器】插件。
   • 小程序端：运行到小程序端需设置小程序【AppID】并开启【服务端口】，以微信小程序为例，在微信开发者工具申请获取 AppID，在微信开发者工具【菜单栏】 => 【设置】 => 【安全设置】中启用服务端口。
   • App 端：运行到 App 端调试需先安装【真机运行插件】，开发阶段可在浏览器或微信小程序上调试。
3. Hbuilder X 插件
   • 注册账号：点击 HBuilder X 左下角用户登录进行注册和登录。
   • 插件市场：通过【菜单】 => 【工具】 => 【插件安装】打开插件市场，查看已安装插件，市场有丰富插件。
   • 安装插件：在插件市场搜索并下载插件，如 Prettier 插件，下载后 HBuilder X 会提示确认安装。
   • 管理 / 配置插件：打开 HBuilder X 设置或用快捷键 Ctrl +, （Command +,），可自定义 Prettier 插件的生效文件范围、NPM 模块位置等，安装后默认启用，可在项目根目录创建.prettierrc 添加配置。
   • 其它配置：对 HBuilder X 本身设置进行调整，包括项目管理器字体大小、编辑器字体大小、编辑字体、制表符长度、空格代替制表符、保存时自动格式化、代码折叠时显示最后一行等。配置保存自动格式化时，若安装 Prettier 插件，HBuilder X 会提示选择使用 Prettier 格式化代码。

（二）uni - app 基础知识

1. 全局文件
   • uni.scss：uni - app 项目运行时自动注入页面样式，可定义全局 SASS 变量统一页面样式风格，添加或修改需重启服务生效，可安装插件编译 SCSS/SASS 为 CSS。
   • App.vue：特殊文件（组件），script 相当于小程序 app.js，style 相当于小程序 app.wxss。
   • pages.json：包含小程序【全局配置】和【页面配置】。pages 对应【页面配置】，指定页面路径和相关配置；globalStyle 对应【全局配置】的 window，可全局配置页面背景色、导航栏等。tabBar 图片需放 static 目录，配置分包后需重启服务生效。
2. 组件
   • 内置组件：uni - app 重新实现微信小程序内置组件，保证不同平台表现一致，使用时参照微信小程序内置组件文档。
   • 扩展组件：可参考 uni - app 官网，注意重启打包服务器。
3. 生命周期：uni - app 生命周期分应用级、页面级和组件级。应用和页面生命周期采用小程序生命周期，自定义组件生命周期使用 Vue 生命周期。结合 Vue3 setup 语法使用应用和页面生命周期需用 @dcloudio/uni - app 包（HBuilder X 内置）。
4. API 调用
   • 命名空间：uni - app 重新实现微信小程序大部分 API，调用时将命名空间换成 uni，如 uni.request。
   • Promise：对部分原生小程序不支持 Promise 的 API 重写，传入 success、fail、complete 回调为 callback 方式；未传入回调为 Promise 方式，方便用 async/await 获取结果。
5. 条件编译：uni - app 为解决不同平台差异提供条件编译技术。用特殊注释标记，语法格式如 #ifdef H5 等，不同平台有对应名称。可针对不同平台编写特定代码，如在不同平台的盒子内放置不同组件、设置不同样式及点击事件。

（三）uni - app 组件进阶

1. 自定义组件
   • easycom 组件规范：组件安装在项目根目录 components 目录或 uni_modules 目录下，符合特定路径规范可自动导入。
   • custom - tabs：按 easycom 规范创建标签页组件，可省略导入步骤在页面引用，注意组件命名以 - 分割。
   • 组件样式隔离：原生小程序自定义组件引用其它组件时修改内部样式需设置样式隔离，在 uni - app 中创建符合 easycom 规范的组件，修改输入框组件样式时需指定 styleIsolation:'shared' 。
2. uniForms 表单验证
   • 表单数据：uni - app 开发常用 uni - easyinput 增强组件替代 input 和 textarea，通过 v - model 获取表单数据。
   • 验证规则：uniForms 通过 rules 属性指定验证规则，不同表单项规则不同，需通过 rules 应用规则、name 为待验证数据命名、model 指定验证数据。
   • 触发验证：用户点击提交按钮时，通过 ref 获取组件实例，调用组件暴露方法执行数据验证。
3. 自定义字体图标
   • 单色图标：在iconfont.cn平台制作字体图标，下载字体文件及样式文件放 static/fonts 目录，在 App.vue 全局导入 iconfont.css 样式，通过类名或 uni - icons 的 custom - prefix 和 type 属性使用图标。uni - app 引入本地字体文件打包后会处理成 base64。
   • 多色图标：安装 iconfont - tools 工具处理多色图标，将其转换为 base64 格式图片。根据引导生成支持多色图标的文件，将生成的 colors.css 文件放项目中，在 App.vue 全局引入。转换后的图片本质是 base64 格式图片，无法修改颜色，修改尺寸需调整宽高。
4. 生命周期：同前文 uni - app 基础知识中的生命周期内容，再次强调应用、页面、组件级生命周期的适用范围及使用原则。

二、重点难点

（一）重点

1. 熟练掌握 uni - app 项目创建、运行及 HBuilder X 插件的使用，包括插件安装、配置等，提高开发效率。
2. 理解并运用 uni - app 的全局文件、组件、生命周期、API 调用及条件编译等基础知识，实现跨端开发。
3. 掌握 uni - app 组件进阶知识，如自定义组件规范、表单验证、自定义字体图标使用等，丰富应用功能。

（二）难点

1. 项目运行到不同端的配置细节，如小程序端设置 AppID 和开启服务端口，确保项目在各端顺利运行。
2. 条件编译的灵活运用，根据不同平台差异编写针对性代码，实现跨端兼容。
3. uniForms 表单验证规则的定义和触发验证的逻辑，确保表单数据的准确性和合法性。

三、解决方法

1. 针对项目运行配置问题，详细阅读官方文档和操作指南，按步骤逐步配置，遇到问题可参考官方社区或向技术论坛求助。
2. 学习条件编译时，多做不同平台差异的示例练习，理解不同平台名称对应的生效条件，熟练掌握语法格式。
3. 对于 uniForms 表单验证，深入研究官方文档中验证规则的说明，结合实际项目需求进行练习，调试触发验证的逻辑代码，确保功能实现。

四、今日收获

1. 知识技能：全面学习了 uni - app 开发的基础知识和组件进阶内容，包括开发环境搭建、项目运行、各种功能的实现等，具备了使用 uni - app 进行跨端应用开发的初步能力。
2. 问题解决：在学习过程中，通过解决如环境配置、插件使用等问题，提升了自主学习和解决实际问题的能力，学会利用官方文档、社区等资源解决技术难题。

五、未来展望

后续深入学习 uni - app 的高级功能，如优化跨端性能、与后端服务集成等，结合实际项目需求开发出功能更强大、用户体验更好的跨端应用，进一步提升 uni - app 开发技能。