一、环境准备（10分钟）

1.1 开发工具安装

• HBuilderX（官方IDE）
  官网下载地址
  → 选择「App开发版」
  → 安装后启动，顶部菜单「工具」-「插件安装」添加小程序模拟器插件

• 微信开发者工具（如需开发小程序）
  → 安装后设置：安全设置 → 服务端口开启

1.2 项目创建

bash
 代码解读
复制代码
# 创建项目
文件 → 新建 → 项目 → uni-app → 默认模板

# 目录结构解析
├── pages         # 页面目录（自动生成路由）
│   └── index
│       ├── index.vue
│       └── index.json
├── static        # 静态资源
├── App.vue       # 根组件
└── manifest.json # 多端配置

二、核心概念速通（20分钟）

2.1 页面 vs 组件

2.2 条件编译

html
 代码解读
复制代码

<template>
  
  <view>微信小程序专属内容view>
  
  
  
  <div>H5网页内容div>
  
template>

2.3 样式注意事项

css
 代码解读
复制代码
/* 使用rpx响应式单位 */
.container {
  width: 750rpx; /* 等于屏幕宽度 */
  padding: 20rpx;
}

/* 全局样式需加前缀 */
/* App.vue中 */
.uni-page-body {
  background: #f5f5f5;
}

三、第一个完整应用（30分钟）

3.1 待办事项应用

vue
 代码解读
复制代码

3.2 路由配置

json
 代码解读
复制代码
// pages.json
{
  "pages": [
    {
      "path": "pages/todo/index",
      "style": {
        "navigationBarTitleText": "待办清单"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8"
  }
}

四、调试与发布

4.1 多端调试

• 微信小程序：

  1. 运行 → 运行到小程序模拟器 → 微信开发者工具
  2. 点击工具栏「预览」生成体验码

• H5：
  运行 → 运行到浏览器 → Chrome

• Android：
  数据线连接手机 → 开启USB调试 → 运行到Android App

4.2 打包发布

bash
 代码解读
复制代码
# 微信小程序打包
发行 → 小程序-微信 → 生成生产环境包

# H5部署
发行 → 网站-H5手机版 → 生成的dist目录上传服务器

# Android打包
发行 → 原生App-云打包 → 选择证书

五、避坑指南

5.1 常见问题

1. 图片路径问题
   ✔️ 使用绝对路径：/static/logo.png
   ❌ 错误写法：./static/logo.png

2. 样式不生效
   → 检查是否添加scoped属性
   → 使用/deep/穿透组件样式

3. 跨端兼容性
   → 使用uni API代替浏览器API：
   uni.showToast() 代替 alert()

5.2 性能优化

• 长列表使用+分页加载
• 复杂运算使用worker线程
• 静态资源压缩：图片转webp格式

六、学习路线图

下一步学习建议：

1. Vue 3组合式API → 提升代码组织能力
2. 状态管理 → 学习Pinia/Vuex
3. UI框架 → uView/uni-ui深度使用
4. 原生扩展 → 开发uni-app原生插件

资源推荐：

• uni-app官方文档
• DCloud插件市场
• 《uni-app跨平台开发实战》

通过这个教程，你已完成从环境搭建到第一个跨端应用发布的完整流程。uni-app的真正威力在于「一次开发，多端部署」，接下来可以尝试将本教程的TODO应用同时发布到小程序和H5平台，体验跨端开发的魅力！