本文详细介绍了使用 uni-app 进行项目开发的全过程，涵盖框架介绍、开发工具配置、网络请求、分包加载、自定义组件使用以及常见问题解决，为开发者提供一站式指南。
一、项目准备工作
1. uni-app 介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（如微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝）、快应用等多个平台。官方地址为：uni-app 官网。
2. 开发工具下载和安装
uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目，主要好处包括模板丰富、完善的智能提示和一键运行。下载地址为：HBuilderX 下载页。建议下载正式版中的 App 开发版。下载后，将 zip 包解压到纯英文目录下，双击 HBuilderX.exe 即可启动。
3. 开发工具的配置
为了方便编写样式，建议安装 scss/sass 编译插件。插件下载地址为：scss/sass 编译插件。操作步骤包括注册账号，然后下载插件并导入 HBuilderX。此外，可以切换快捷键方案为 VS Code，操作路径为：工具 -> 预设快捷键方案切换 -> vs Code。还可以修改编辑器的基本设置，通过工具 -> 设置，进入源码视图进行调整。
二、项目开发
1. 网络请求配置
由于平台限制，小程序不支持 axios，且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制功能，因此建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。首先通过 npm 初始化并安装依赖：
npm init -y
npm install @escook/request-miniprogram
然后进行网络请求配置，示例代码如下：
import { $http } from '@escook/request-miniprogram'
$http.baseUrl = ''
$http.beforeRequest = function (options) {
uni.showLoading({
title: '数据加载中...'
})
}
$http.afterRequest = function () {
uni.hideLoading()
}
uni.$http = $http
2. 小程序分包加载
分包指的是把一个完整的小程序项目按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需加载。分包的好处包括优化小程序首次启动时的下载时间，以及在多团队共同开发时更好地解耦协作。
分包前，小程序项目中所有的页面和资源都被打包到一起，导致整个项目体积过大，影响首次启动下载时间。分包后，小程序项目由一个主包和多个分包组成：主包一般只包含项目的启动页面或 TabBar 页面，以及所有主包都需要用到的一些公共资源；分包则只包含和当前分包有关的页面和私有资源。
分包的加载规则是：在小程序启动时，默认会下载主包并启动主包内页面；当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。注意，非 TabBar 页面可以按照功能的不同划分为不同的分包进行按需下载。
分包的体积限制为：整个小程序所有分包大小不超过 20M（主包加所有分包），单个分包或主包大小不能超过 2M。
分包的配置步骤包括：在项目根目录创建分包的根目录，命名为 subpkg；在 pages.json 中，和 pages 字段平级的位置声明 subPackages 数据节点来定义分包结构。示例配置如下：
{
"subPackages": [{
"root": "subpkg",
"pages": []
}]
}
然后创建 subpkg 目录，并在其下添加页面，配置后 pages.json 中 subPackages.pages 会自动填充页面信息。
3. 自定义组件使用
在项目根目录的 components 目录上，鼠标右键选择新建组件，填写组件信息后点击创建按钮即可。使用时直接以标签的形式调用，无需额外引入。
4. 组件使用技巧
- 获取页面可用高度：使用
const sysInfo = uni.getSystemInfoSync()获取系统信息。 - 数据保存到本地：通过
uni.setStorageSync('key', value)保存数据，uni.getStorageSync('key')读取数据。 - 图片预览功能：使用
uni.previewImage({ current: 1, urls: [] })实现图片预览。 - 商品导航组件 uni-goods-nav：官方组件，地址为：uni-goods-nav 文档。
- 为 TabBar 设置数字徽标：通过
uni.setTabBarBadge({ index: 2, text: '2' })设置。 - 混入功能：创建 mixins 文件夹，新建 .js 文件定义混入内容，然后在需要的 Vue 文件中通过
mixins: [badgeMix]引入。 - 调用小程序方法获取用户地址：使用
const [err, succ] = await uni.chooseAddress()，成功后可处理返回数据。 - NumberBox 数字输入框：官方组件，地址为：uni-number-box 文档。使用时设置 min、max 等属性，监听 change 事件。
- 获取微信用户信息：通过
const [err, res] = await uni.getUserProfile({desc: '完善个人资料'})获取。 - 获取微信登录返回的 code 信息：使用
const [err, res] = await uni.login()，成功后可从 res.code 获取。 - 退出登录：通过
uni.showModal({ title: '提示', content: '确认退出登录吗？' })弹窗确认。 - 微信支付功能：使用
const [err, succ] = await uni.requestPayment(payInfo)调用支付。
5. 解决问题
- 解决 .webp 格式图片在 iOS 设备上无法正常显示的问题：可考虑转换图片格式或使用兼容性处理。
- 判断对象是否为空：使用
JSON.stringify(obj) === '{}'进行判断。
总结
本文系统介绍了 uni-app 开发小程序的关键步骤和实用技巧，从环境搭建到功能实现，帮助开发者高效完成项目开发。通过合理配置工具、使用分包优化、组件化开发以及处理常见问题，可以提升开发效率和用户体验。