准备工作概述uni-app 是一个使用 Vue.js 开发所有前端应用的框架支持同时生成 ios、Android、H5、以及各种小程序等多平台应用。本项目基于 Vue 3、Vite 和 TypeScript 构建集成了 Pinia 状态管理、uview-plus UI 组件库和 WindiCSS 样式框架开发环境搭建工具Node.jsHBuilderX可选uni-app 官方推荐的 IDE提供完整的开发工具链支持环境配置步骤1.安装 Node.js访问 Node.js 官网 下载并安装最新稳定版2.安装 HBuilderX访问 HBuilderX 官网 下载并安装建议选择标准版或 App 开发版3.安装依赖在项目根目录下运行以下命令bashnpm install开发工作流开发调试H5 开发bashnpm run dev:h5 #在浏览器中预览小程序开发bashnpm run dev:mp-weixin #在微信开发者工具中预览构建发布H5构建npm run build:h5生成H5应用包小程序构建npm run build:mp-weixin生成小程序代码包App构建使用HBuilderX的发行功能生成Android/iOS应用包相关文档链接uni-app 官方文档uni-app官网Vue 3 官方文档Vue.js - The Progressive JavaScript Framework | Vue.jsPinia 官方文档Pinia | The intuitive store for Vue.jsWindiCSS 官方文档Windi CSS目录结构路由路由配置概述pages.json 是项目的核心路由配置文件位于 uni-app/src/ 目录下。该文件定义了应用的所有页面、全局样式、选项卡栏等配置信息路由配置详解页面配置pagespages 数组是路由配置的核心定义了应用中所有的页面路径和样式。数组中的第一项表示应用的启动页基本结构jsonpages: [ { path: 页面路径, style: { navigationBarTitleText: 页面标题, navigationStyle: 导航栏样式, // 其他样式配置 }, needLogin: true // 是否需要登录 } // 更多页面配置 ]分包配置subPackages项目使用了分包加载机制将部分页面打包到不同的子包中按需加载以优化应用性能配置示例jsonsubPackages: [ { root: app/components, pages: [] }, { root: app/pages/member, pages: [ // 会员相关页面配置 ] } ]接口接口概述uni-app 端接口系统基于uni.requestAPI 封装提供统一的请求处理、错误处理和权限控制机制支持 H5、小程序、App 等多端运行环境。所有接口通过request.ts工具类进行统一管理使用qs库进行参数序列化确保接口调用的一致性和可维护性API 请求配置请求工具类封装request.ts是 uni-app 端的核心请求工具类封装了请求拦截、响应处理、错误处理等功能。文件位置uni-app/src/utils/request.ts核心功能请求拦截器自动携带token、app-channel等请求头信息响应处理统一处理响应数据支持成功/错误消息提示错误处理统一处理网络错误、业务错误和认证错误多端适配支持 H5、小程序、App 等多端环境文件上传封装uni.uploadFileAPI支持图片、视频等文件上传参数序列化使用qs库进行参数序列化对象深拷贝使用uni.$u.deepClone进行对象深拷贝配置说明配置项类型默认值说明baseUrlstringH5:${location.origin}/api/, 其他:VITE_APP_BASE_URL接口基础地址从环境变量获取或使用默认值showErrorMessagebooleantrue是否显示错误消息showSuccessMessagebooleanfalse是否显示成功消息错误处理错误码说明错误码说明处理方式0业务错误显示错误消息提示400请求参数错误显示错误消息提示401未授权/登录过期调用useMemberStore().logout()处理登出402站点已关闭跳转到站点关闭页面/app/pages/index/close403站点不存在跳转到站点不存在页面/app/pages/index/nosite网络错误处理系统自动处理以下网络错误请求成功但返回错误数据请求失败请求URL不在域名列表中文件上传错误处理文件上传错误处理与普通请求错误处理逻辑一致支持显示错误消息和跳转到相应页面手机端 h5 编译上传安装依赖首先需要安装依赖将文件切换到根目录下的 uniapp 下cmd 启动命令行再输入 npm install 执行安装依赖编译打包将文件切换到根目录下的 uniapp 下cmd 启动命令行。执行命令 npm run build:h5 进行打包编译完成编译后在根目录下的 uniapp 目录下会生成 dist 文件夹将编译文件打包压缩如下图所示将刚刚压缩的编译包上传到 webroot/public/wap 目录下这样就完成了手机端的编译上传。这个时候访问手机端链接就可以看到页面内容微信小程序端编译上传安装依赖打开源码所在目录将路径打开到 uniapp 下如图安装完依赖之后会看到在 uniapp 文件夹下会生成一个 node_modules 文件夹。如图命令行编译上传方式一在 uniapp 目录下打开终端执行 npm run build:mp-weixin 进行编译如图编译完成后在 uni-app/dist/build 下会生成编译文件夹 mp_weixin点击开发者工具右上角的上传即可将小程序发布线上审核上传完成后登录小程序开发者平台将提交的项目点击审核审核通过后再通过小程序开发者平布点击发布这样小程序就上线了方式二将修改后的源码放到至 webroot/runtime/uni-app/src 目录下通过一键云端发布系统会自动打包上传