uni-app零基础入门指南：1小时上手多端开发

一、环境准备（10分钟）

1.1 开发工具安装

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

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

1.2 项目创建

# 创建项目
文件 → 新建 → 项目 → uni-app → 默认模板

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

---

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

2.1 页面 vs 组件

区别点	页面	组件
文件位置	pages目录下	components目录下
路由跳转	uni.navigateTo	通过import引入
生命周期	onLoad/onShow等	created/mounted等
配置项	.json文件配置	通过props接收参数

2.2 条件编译

<!-- 平台差异化代码 -->
<template>
  <!-- #ifdef MP-WEIXIN -->
  <view>微信小程序专属内容</view>
  <!-- #endif -->
  
  <!-- #ifdef H5 -->
  <div>H5网页内容</div>
  <!-- #endif -->
</template>

2.3 样式注意事项

/* 使用rpx响应式单位 */
.container {
  width: 750rpx; /* 等于屏幕宽度 */
  padding: 20rpx;
}

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

---

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

3.1 待办事项应用

<!-- pages/todo/index.vue -->
<template>
  <view class="container">
    <input 
      v-model="newTodo" 
      @confirm="addTodo"
      placeholder="输入待办事项"
    />
    <checkbox-group @change="toggleTodo">
      <view 
        v-for="(item, index) in todos" 
        :key="index"
        class="todo-item"
      >
        <checkbox :checked="item.done" />
        <text :class="{ 'done': item.done }">{{ item.text }}</text>
        <text @click="removeTodo(index)">❌</text>
      </view>
    </checkbox-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ text: this.newTodo, done: false })
      this.newTodo = ''
    },
    toggleTodo(e) {
      const index = e.detail.value[0]
      this.todos[index].done = !this.todos[index].done
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

3.2 路由配置

// 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 打包发布

# 微信小程序打包
发行 → 小程序-微信 → 生成生产环境包

# 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 性能优化

• 长列表使用<scroll-view>+分页加载
• 复杂运算使用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平台，体验跨端开发的魅力！