UniApp 从入门到实战：一套代码，搞定 App + 小程序 + H5！

一、什么是 UniApp？

UniApp 是一个基于 Vue.js 的跨平台前端框架。只用一套 Vue 代码，就可以同时发布到：

• 微信/支付宝/百度/QQ/抖音 等多个 小程序
• iOS、Android 等 App
• 各类 Web（H5）

1.1 它有什么优点？

二、如何开始一个 UniApp 项目？

2.1 方法一：使用 HBuilderX（推荐初学者）

HBuilderX 是官方提供的开发工具，非常适合新手，不用命令行，界面操作简单。

• 访问官网下载安装：https://www.dcloud.io/hbuilderx.html
• 安装后 → 点击「新建项目」 → 选择 uni-app 项目模板即可开始开发！

2.2 方法二：使用 Vue CLI 创建项目（适合前端开发者）

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-uniapp
cd my-uniapp
npm run dev:h5        # 运行在网页
npm run dev:mp-weixin # 运行在微信小程序
npm run dev:app       # 运行在 App（需真机）

三、项目结构解读（新手版）

创建项目后，会看到如下目录结构：

├── pages/             # 页面文件夹（你写的每个页面）
│   └── index.vue      # 首页
├── components/        # 组件目录（可复用小模块）
├── static/            # 存放图片、音频等静态资源
├── App.vue            # 项目入口
├── main.js            # 主配置文件
├── manifest.json      # 平台打包配置（比如 App 名称）
├── pages.json         # 路由配置（控制页面路径）

四、写一个页面：你好，UniApp！

4.1 新建页面 pages/hello/hello.vue

<template>
  <view class="container">
    <text>你好，UniApp！</text>
    <button @click="sayHi">点我试试</button>
  </view>
</template>

<script>
export default {
  methods: {
    sayHi() {
      uni.showToast({
        title: 'Hello World!',
        icon: 'none'
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding: 50rpx;
  text-align: center;
}
</style>

4.2 配置路由 pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/hello/hello",
      "style": {
        "navigationBarTitleText": "你好页"
      }
    }
  ]
}

4.3 页面跳转示例

uni.navigateTo({
  url: '/pages/hello/hello'
});

五、网络请求（如何获取后端数据）

5.1 基本用法

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

5.2 推荐封装（新手也能理解的版本）

创建文件：utils/request.js

export const request = (url, method = 'GET', data = {}) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url,
      method,
      data,
      success: res => resolve(res.data),
      fail: err => reject(err)
    });
  });
}

使用方法：

import { request } from '@/utils/request.js';

request('https://api.example.com/user').then(data => {
  console.log('用户数据', data);
});

六、使用本地存储

6.1 保存数据

uni.setStorageSync('token', 'abcdefg12345');

6.2 读取数据

const token = uni.getStorageSync('token');
console.log('本地 token:', token);

七、图片、按钮、列表等常见组件

<template>
  <view>
    <image src="/static/logo.png" mode="widthFix" />
    <button type="primary" @click="loadData">加载列表</button>
    <view v-for="item in list" :key="item.id">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    loadData() {
      this.list = [
        { id: 1, name: '香蕉' },
        { id: 2, name: '苹果' },
        { id: 3, name: '西瓜' }
      ];
    }
  }
}
</script>

八、发布与运行

8.1 运行调试

• 在 HBuilderX 中点击「运行到小程序模拟器」或「运行到浏览器」
• 也可以导出小程序代码到微信开发者工具中运行

8.2 发布 App（HBuilderX 云打包）

点击菜单栏「发行」→「原生App云打包」即可生成 APK（安卓安装包）

九、推荐插件和工具（适合新手）

十、你可以做的项目（新手实战方向）

• 📱 记账本小程序：增删查改记录，每天一笔账
• 📦 商品展示 App：调用 API 展示产品，收藏与分享
• 📷 拍照打卡系统：用摄像头上传照片打卡
• 📅 任务待办工具：今日计划 + 完成标记 + 进度图表
• 🛍 商城系统小程序：支持商品、购物车、下单流程（进阶）

🎉 恭喜你！已经入门 UniApp 了！

如果你希望我出一篇“完整的商城小程序实战项目”教程，可以告诉我，我来继续补全 👇