从 0 到 1 开发一个 Uniapp 项目，需要覆盖环境准备、项目设计、功能开发、调试测试、打包发布等全流程，以下是详细步骤：
一、前期准备：基础知识与环境搭建
1. 了解 Uniapp 核心概念
什么是 Uniapp：一个使用 Vue.js 开发跨平台应用的框架，可同时发布到微信 / 支付宝 / 百度等小程序、H5、Android、iOS 等平台。
核心优势：一套代码多端运行，减少跨平台开发成本；基于 Vue 语法，学习成本低；生态丰富（插件市场、UI 库等）。
适用场景：中小型跨平台应用（如电商、工具类、资讯类），大型应用需注意性能优化。
2. 掌握前置技术
基础：HTML/CSS/JavaScript（ES6+）。
核心：Vue.js（模板语法、组件化、生命周期、响应式数据、Vuex/Pinia 状态管理）。
v2编译器基于wepback、v3基于vite实现，编译速度更快
可选：TypeScript（增强代码类型安全性）、SCSS/LESS（预处理样式）。
3. 搭建开发环境
安装 Node.js：Uniapp 依赖 Node 环境（建议 v14+），用于 npm 包管理。 下载地址：https://nodejs.org/，安装后通过
node -v
安装 HBuilderX：官方推荐 IDE，对 Uniapp 支持最佳（自带编译器、模拟器、发行工具）。 下载地址：https://www.dcloud.io/hbuilderx.html（选择「App 开发版」，包含 App 打包工具）。
配置模拟器 / 真机
（用于调试）：
小程序：安装对应平台的开发者工具（如微信开发者工具、支付宝小程序开发者工具），并在 HBuilderX 中配置路径（「工具 – 设置 – 运行配置」）。
App：安装 Android Studio（获取 Android 模拟器）或使用真机（开启 USB 调试，HBuilderX 可直接连接）。
H5：无需额外配置，HBuilderX 内置浏览器可直接运行。
二、项目初始化：从 0 创建第一个 Uniapp 项目
1. 创建项目
打开 HBuilderX → 点击「文件 – 新建 – 项目」→ 选择「Uniapp」→ 输入项目名称、选择模板（推荐「默认模板」或「uni-ui 模板」）→ 选择存储路径 → 点击「创建」。
2. 熟悉项目目录结构
your-project/ ├─ .hbuilderx/ # HBuilderX配置（自动生成，无需修改） ├─ node_modules/ # 依赖包（npm安装的插件） ├─ pages/ # 页面目录（核心！每个子目录对应一个页面） │ └─ index/ # 首页 │ ├─ index.vue # 页面组件（模板+逻辑+样式） │ └─ index.json # 页面配置（导航栏、窗口表现等） ├─ static/ # 静态资源（图片、字体等，打包时会原封不动复制） ├─ components/ # 自定义组件（可复用的UI片段） ├─ store/ # 状态管理（Vuex/Pinia，用于跨组件数据共享） ├─ utils/ # 工具类（请求封装、日期格式化等） ├─ App.vue # 应用入口组件（全局样式、生命周期） ├─ main.js # 入口文件（初始化Vue实例、挂载插件等） ├─ manifest.json # 应用配置（名称、图标、权限、各平台配置） ├─ pages.json # 页面路由配置（全局窗口样式、tabBar、页面路径） ├─ uni.scss # 全局样式变量（内置rpx、主题色等变量） └─ package.json # 项目依赖配置（npm包管理）
3. 初始化 Git 版本控制（可选但推荐）
在项目根目录右键 → 选择「终端打开」→ 执行：
bash
git init # 初始化仓库 echo "node_modules/" >> .gitignore # 忽略依赖包 git add . git commit -m "初始化项目"
三、基础配置：定义应用核心属性
1. 配置 manifest.json（应用全局信息）
基础配置：应用名称、图标（1024x1024px）、版本号（如 1.0.0）。
平台配置
：
小程序：填写小程序 AppID（在对应平台开发者中心获取）、配置权限（如地理位置、摄像头）。
App：配置 Android 包名（如 com.yourcompany.app）、iOS Bundle ID、应用权限（如联网、读写存储）。https://uniapp.dcloud.net.cn/tutorial/app-icons.html
H5：配置运行域名、路由模式（hash/history）。
2. 配置 pages.json（页面与路由）
全局窗口样式
：设置默认导航栏标题、背景色、状态栏样式等：
{
"globalStyle": {
"navigationBarTitleText": "我的应用",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black"
}
}
页面路由
数组中声明页面路径（第一个页面为首页）：
"pages": [
{ "path": "pages/index/index" }, # 首页
{ "path": "pages/detail/detail" } # 详情页
]
tabBar 配置
（底部导航栏，适用于多首页场景）：
"tabBar": {
"color": "#666",
"selectedColor": "#007AFF",
"list": [
{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/home.png", "selectedIconPath": "static/home-active.png" },
{ "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/mine.png", "selectedIconPath": "static/mine-active.png" }
]
}
四、UI 与样式：构建应用界面
1. 样式开发规范
单位：使用
rpx
样式文件：
页面内样式：在
.vue
<style>
全局样式：在
App.vue
<style>
uni.scss
引入外部样式：支持 @import 导入 CSS/SCSS 文件（如
@import "@/static/css/common.css";
2. 使用 UI 组件库（加速开发）
uni-ui
：官方组件库，与 Uniapp 深度集成（安装：HBuilderX 中「工具 – 插件安装」搜索「uni-ui」）。
使用示例：
<template>
<uni-card title="标题" :thumb="imageUrl">
<text>卡片内容</text>
</uni-card>
</template>
<script>
import uniCard from '@/components/uni-card/uni-card.vue'
export default {
components: { uniCard }
}
</script>
其他主流库：uView UI（多端兼容）、ColorUI（轻量级），需通过 npm 安装（
npm install uview-ui
main.js
3. 自定义组件开发
场景：封装复用性高的 UI 片段（如商品卡片、弹窗）。
步骤：
在
components
my-card
my-card.vue
编写组件模板、逻辑、样式：
<template>
<view class="my-card">{{ title }}</view>
</template>
<script>
export default {
props: { title: String } // 接收父组件参数
}
</script>
<style scoped>
.my-card { padding: 20rpx; border: 1px solid #eee; }
</style>
在页面中引入使用：
vue
<template>
<my-card title="测试卡片"></my-card>
</template>
<script>
import myCard from '@/components/my-card/my-card.vue'
export default { components: { myCard } }
</script>
五、业务逻辑开发：实现核心功能
1. 页面基础逻辑（.vue 文件）
模板（template）
：使用 Vue 指令（v-for、v-if、v-bind 等）渲染 UI：
<template>
<view>
<text v-for="(item, index) in list" :key="index">{{ item }}</text>
</view>
</template>
脚本（script）
：处理数据与交互（生命周期、事件方法等）：
<script>
export default {
data() {
return { list: ['选项1', '选项2'] } // 响应式数据
},
onLoad() { // 页面加载时触发（Uniapp页面生命周期）
this.fetchData()
},
methods: {
fetchData() { /* 调用接口获取数据 */ },
handleClick() { /* 点击事件处理 */ }
}
}
</script>
Uniapp 特有生命周期：onLoad（页面加载）、onShow（页面显示）、onPullDownRefresh（下拉刷新）等。
2. 网络请求（接口调用）
基础 API
：使用
uni.request
发起请求：
javascript
uni.request({
url: 'https://api.example.com/data',
method: 'GET',
success: (res) => { console.log(res.data) },
fail: (err) => { console.error(err) }
})
封装请求工具
（推荐，简化代码 + 统一处理）：
在
utils/request.js
中封装：
运行
export default (url, method = 'GET', data = {}) => {
return new Promise((resolve, reject) => {
uni.request({
url: 'https://api.example.com' + url, // 拼接基础域名
method,
data,
header: { 'Content-Type': 'application/json' },
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data)
} else {
reject('请求失败')
}
},
fail: reject
})
})
}
在页面中使用：
javascript
运行
import request from '@/utils/request'
async fetchData() {
try {
const data = await request('/userinfo', 'GET')
this.userInfo = data
} catch (err) {
uni.showToast({ title: '获取失败', icon: 'none' })
}
}
3. 状态管理（跨组件数据共享）
场景：用户信息、购物车数据等需要在多个页面 / 组件中使用的数据。
使用 Pinia
（Vue3 推荐，Uniapp 支持）：
安装：
npm install pinia
在main.js中注册：javascript 运行
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
app.use(createPinia())
return { app }
}
创建 store（store/user.js）：
javascript：运行
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({ name: '', token: '' }),
actions: {
setUser(user) { this.name = user.name; this.token = user.token }
}
})
在页面中使用：
javascript
运行
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
console.log(userStore.name) // 读取
userStore.setUser({ name: '张三' }) // 修改
4. 路由与页面跳转
基础跳转
：使用
uni.navigateTo
（保留当前页，跳转到新页）：
javascript
运行
uni.navigateTo({ url: '/pages/detail/detail?id=123' }) // 携带参数
接收参数：在目标页面的
onLoad
中获取：javascript运行
onLoad(options) { console.log(options.id) } // options.id = 123
其他跳转方式：
uni.redirectTo
uni.switchTab
uni.navigateBack
5. 本地存储（持久化数据）
同步 API
（推荐，简单易用）：
javascript
运行
// 存储
uni.setStorageSync('token', 'xxx')
// 读取
const token = uni.getStorageSync('token')
// 删除
uni.removeStorageSync('token')
场景：保存用户登录状态、缓存搜索历史等。
六、跨平台适配：处理多端差异
1. 条件编译（区分平台代码）
使用
开头 #ifdef （仅在某平台生效） #ifndef （除了某平台均存在） 结尾 #endif
<!-- 模板中 -->
<view>
<!-- 仅在微信小程序显示 -->
#ifdef MP-WEIXIN
<text>微信小程序专属内容</text>
#endif
<!-- 不在H5显示 -->
#ifndef H5
<text>非H5平台显示</text>
#endif
</view>
<!-- 脚本中 -->
<script>
onLoad() {
// 仅App平台执行
#ifdef APP-PLUS
console.log('App平台')
#endif
}
</script>
<!-- 样式中 -->
<style>
/* 仅H5平台生效 */
#ifdef H5
.box { background: red; }
#endif
</style>
平台标识：
MP-WEIXIN
MP-ALIPAY
APP-PLUS
H5
2. 平台特有 API 适配
部分 API 仅支持特定平台（如微信小程序的），需用条件编译包裹：javascript运行
#ifdef MP-WEIXIN
wx.scanCode({ success: (res) => console.log(res) })
#endif
3. 样式适配
导航栏高度：不同平台导航栏高度不同，可通过
uni.getSystemInfoSync()
底部安全区域（iOS 刘海屏）：使用
padding-bottom: constant(safe-area-inset-bottom);
七、调试与测试：确保功能稳定
1. 多端调试
H5：点击 HBuilderX 工具栏「运行 – 运行到浏览器 – 选择浏览器」，直接在浏览器调试（F12 打开开发者工具）。
小程序
：
点击「运行 – 运行到小程序模拟器 – 微信开发者工具」。
在微信开发者工具中使用「调试器」查看 console、network 等。
App
：
模拟器：「运行 – 运行到手机或模拟器 – Android 模拟器」（需先启动 Android Studio 模拟器）。
真机：连接手机（开启 USB 调试），「运行 – 运行到手机或模拟器 – 选择设备」，通过 HBuilderX 的「控制台」查看日志。
Android 真机调试 打开手机开发者模式：进入“设置 → 关于手机”，连续点击“版本号”7次，开启开发者权限。 启用USB调试：返回设置，进入“开发者选项”，开启“USB调试”。 连接电脑并选择传输模式：用数据线连接手机和电脑，在手机弹出的USB选项中选择“文件传输”或“MTP模式”（关键！不能选“仅充电”）。 允许调试授权：首次连接时，手机会弹出“允许USB调试吗？”点击“确定”。 HBuilderX运行：回到 HBuilderX，点击运行按钮，稍等几秒即可识别设备。 ✅ 核心要点：确保手机开启了开发者模式和USB调试，并在连接时选择了“文件传输”模式。 2.打包到手机上 发行-app云打包-Android-选择使用云端证书-打包-下载地址到手机上安装
ios真机调试 获取iOS测试证书(.p12)和描述文件(.mobileprovision)（具体看下打包处下面）
2. 常见调试技巧
console 输出：使用
console.log()
断点调试：在 HBuilderX 中点击代码行号左侧设置断点，运行时会暂停在断点处，可查看变量状态。
性能调试
：
小程序：微信开发者工具「性能」面板，检测渲染耗时、内存占用。
App：使用
uni.getPerformance()
3. 测试要点
功能测试：覆盖所有交互（点击、输入、跳转等），确保逻辑正确。
兼容性测试：
设备：测试不同品牌 / 型号手机（如 iPhone、华为、小米）。
系统：覆盖主流版本（Android 8.0+、iOS 12+）。
平台：验证各端（小程序、H5、App）表现一致。
边界测试：网络异常（无网、弱网）、数据为空、重复操作等场景。
八、邀请成员加入项目
1个应用有一个管理员，但可以有多名协作开发者。 在使用app云端打包时，协作开发者也有权对该Appid进行云打包。
https://uniapp.dcloud.net.cn/dev/app/add-member.html
登录DCLOUD开发者中心 https://dev.dcloud.net.cn/pages/app/detail/info
我的应用中创建应用
成员管理-邀请项目成员-邮箱
九、打包发布：上线应用**
1. H5 发布
点击 HBuilderX「发行 – 网站 – H5 手机版」→ 配置发行路径、标题等 → 点击「发行」，生成打包后的静态文件（dist/build/h5）。
部署：将文件上传到服务器（如 Nginx、阿里云 OSS），配置域名即可访问。
2. 小程序发布
以微信小程序为例：
点击「发行 – 小程序 – 微信小程序」→ 选择微信开发者工具路径 → 点击「发行」，自动打开微信开发者工具。
在微信开发者工具中点击「上传」，填写版本号和描述。
登录微信公众平台（https://mp.weixin.qq.com/）→ 「版本管理」→ 提交审核，审核通过后发布。
3. App 发布
Android
：
生成签名证书：HBuilderX「工具 – 证书管理 – Android 证书 – 生成证书」，保存证书文件（.keystore）和密码。
点击「发行 – 原生 App – 云打包」→ 选择「Android 打包」→ 上传证书 → 配置包名、版本号 → 点击「打包」，等待云端生成 APK。
发布：将 APK 上传到应用市场（华为、小米、应用宝等）。
iOS
：
需苹果开发者账号（每年 99 美元），在苹果开发者中心创建证书和描述文件。
HBuilderX「发行 – 原生 App – 云打包」→ 选择「iOS 打包」→ 上传证书和描述文件 → 打包生成 IPA。
发布：通过 Xcode 或 Transporter 上传到 App Store，等待审核。
iOS证书(.p12)和描述文件(.mobileprovision)申请流程 https://ask.dcloud.net.cn/article/152
如需安装APP需填写设备名称 和 UDID（设备标识）：
十、优化与维护：提升应用质量**
1. 性能优化
代码层面
：
减少不必要的 data 数据（响应式数据会消耗性能）。
长列表优化：使用
v-for
key
recycle-view
图片优化：压缩图片、使用 WebP 格式、懒加载（
lazy-load
网络层面
：
接口数据缓存（结合本地存储）。
合并请求，减少 HTTP 请求次数。
打包优化
：
移除未使用的组件和插件（HBuilderX「发行 – 原生 App – 优化代码」）。
开启 tree-shaking（摇树优化），减小包体积。
2. 代码规范与协作
配置 ESLint：在
package.json
npm install
分支管理：使用 Git 分支（如 master 主分支、dev 开发分支、feature 功能分支），避免直接修改主分支。
3. 后续维护
监控：接入错误监控工具（如 Sentry），及时发现线上 bug。
迭代：根据用户反馈更新功能，定期修复已知问题。
版本更新：各平台发布新版本（小程序审核快，App 审核较慢，需预留时间）。
总结**
Uniapp 开发流程可概括为：环境搭建→项目初始化→基础配置→UI 开发→业务逻辑→跨端适配→调试测试→打包发布→优化维护。核心优势是「一套代码多端运行」，但需注意不同平台的差异适配。新手建议从简单功能（如资讯列表、表单提交）入手，逐步熟悉 Uniapp 的 API 和生态，再开发复杂应用。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
