UniApp开发最佳实践：从入门到精通（2025最新版）

UniApp 是一个基于 Vue.js 的跨平台开发框架，可以一次开发，同时发布到 iOS、Android、H5 以及各种小程序（微信、支付宝、百度、字节跳动等）。本教程将从零开始，带你全面掌握 UniApp 开发的核心技术，涵盖基础语法、组件使用、API 调用、状态管理、性能优化，以及实战项目开发。

---

1. UniApp 简介与开发环境搭建

1.1 UniApp 是什么？

UniApp 是 DCloud 推出的一个使用 Vue.js 开发跨平台应用的框架，开发者编写一套代码，可编译到多个平台运行。

核心优势：

• 跨平台：一套代码，多端运行（iOS、Android、H5、小程序）。

• 开发效率高：基于 Vue.js，学习成本低。

• 生态丰富：插件市场提供丰富的扩展能力。

1.2 开发环境搭建

1.2.1 安装 HBuilderX（官方 IDE）

1. 下载 HBuilderX（推荐使用 App 开发版）。

2. 安装后，新建 UniApp 项目：

   • 选择 文件 → 新建 → 项目。

   • 选择 UniApp，填写项目名称，选择默认模板。

1.2.2 使用 Vue CLI 创建 UniApp 项目（可选）

如果你习惯使用命令行开发，可以全局安装 @vue/cli 并创建 UniApp 项目：

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-uniapp

选择默认模板或自定义配置。

---

2. UniApp 基础语法与项目结构

2.1 项目目录结构

my-uniapp/
├── pages/          # 页面目录
│   ├── index/      # 首页
│   │   ├── index.vue
│   │   └── index.json
├── static/         # 静态资源
├── App.vue         # 应用入口
├── main.js         # 主入口文件
├── manifest.json   # 应用配置
└── pages.json      # 页面路由配置

2.2 页面生命周期

UniApp 的页面生命周期与 Vue.js 类似，但增加了小程序特有的钩子：

<script>
export default {
  onLoad() { console.log("页面加载") },
  onShow() { console.log("页面显示") },
  onReady() { console.log("页面初次渲染完成") },
  onHide() { console.log("页面隐藏") },
  onUnload() { console.log("页面卸载") },
}
</script>

2.3 路由跳转

UniApp 使用 uni.navigateTo、uni.redirectTo、uni.switchTab 进行页面跳转：

// 跳转到新页面（保留当前页）
uni.navigateTo({
  url: '/pages/detail/detail?id=1'
})

// 关闭当前页，跳转到新页面
uni.redirectTo({
  url: '/pages/login/login'
})

// 跳转到 TabBar 页面
uni.switchTab({
  url: '/pages/home/home'
})

---

3. 常用组件与 API

3.1 基础组件

UniApp 提供了一套跨平台组件，如：

<template>
  <view class="container">
    <text>Hello UniApp!</text>
    <button @click="handleClick">点击我</button>
    <input v-model="inputValue" placeholder="请输入内容" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮被点击',
        icon: 'success'
      })
    }
  }
}
</script>

3.2 网络请求

使用 uni.request 发送 HTTP 请求：

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success(res) {
    console.log('请求成功:', res.data)
  },
  fail(err) {
    console.error('请求失败:', err)
  }
})

3.3 数据缓存

UniApp 提供本地存储 API：

// 存储数据
uni.setStorageSync('key', 'value')

// 读取数据
const value = uni.getStorageSync('key')

// 异步存储（推荐）
uni.setStorage({
  key: 'token',
  data: '123456',
  success() {
    console.log('存储成功')
  }
})

---

4. 状态管理（Vuex）

在大型项目中，推荐使用 Vuex 管理全局状态：

4.1 安装 Vuex

npm install vuex --save

4.2 创建 Store

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

4.3 在组件中使用

<template>
  <view>
    <text>Count: {{ count }}</text>
    <button @click="increment">+1</button>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>

---

5. 跨平台适配

UniApp 支持条件编译，针对不同平台编写不同代码：

// #ifdef MP-WEIXIN
console.log('这段代码只在微信小程序运行')
// #endif

// #ifdef H5
console.log('这段代码只在 H5 运行')
// #endif

---

6. 性能优化

1. 减少 setData 调用（小程序端性能关键）。

2. 使用 v-if 替代 v-show（减少 DOM 节点）。

3. 图片懒加载：

   <image lazy-load src="xxx.jpg" />

4. 分包加载（优化首屏加载速度）：

   // pages.json
   {
     "subPackages": [
       {
         "root": "pages/sub",
         "pages": [
           { "path": "moduleA", "style": { "navigationBarTitleText": "模块A" } }
         ]
       }
     ]
   }

---

7. 实战：开发一个待办事项 App

7.1 功能需求

• 添加任务

• 标记完成

• 删除任务

• 本地存储

7.2 核心代码

<template>
  <view>
    <input v-model="task" placeholder="输入任务" />
    <button @click="addTask">添加</button>
    <view v-for="(item, index) in tasks" :key="index">
      <text :class="{ done: item.done }">{{ item.text }}</text>
      <button @click="toggleDone(index)">完成</button>
      <button @click="deleteTask(index)">删除</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      task: '',
      tasks: []
    }
  },
  onLoad() {
    this.tasks = uni.getStorageSync('tasks') || []
  },
  methods: {
    addTask() {
      if (!this.task) return
      this.tasks.push({ text: this.task, done: false })
      uni.setStorageSync('tasks', this.tasks)
      this.task = ''
    },
    toggleDone(index) {
      this.tasks[index].done = !this.tasks[index].done
      uni.setStorageSync('tasks', this.tasks)
    },
    deleteTask(index) {
      this.tasks.splice(index, 1)
      uni.setStorageSync('tasks', this.tasks)
    }
  }
}
</script>

<style>
.done {
  text-decoration: line-through;
  color: #999;
}
</style>

---

8. 发布到各平台

8.1 微信小程序

1. 在 manifest.json 配置 AppID。

2. 运行 npm run dev:mp-weixin，用微信开发者工具打开 dist/dev/mp-weixin。

8.2 H5

npm run build:h5

生成的 dist/build/h5 可直接部署到服务器。

8.3 App（Android/iOS）

1. 使用 HBuilderX 进行云打包。

2. 选择 发行 → 原生 App 云打包。

---

9. 总结

本教程从 UniApp 的基础环境搭建到实战开发，涵盖了核心知识点：

• 开发环境配置

• 基础语法与组件

• 路由与 API

• 状态管理（Vuex）

• 跨平台适配

• 性能优化

• 实战项目开发

• 多端发布

通过系统学习，你可以掌握 UniApp 开发的核心技能，并独立开发跨平台应用。建议多实践，结合官方文档（uniapp.dcloud.io 深入学习。