网站导航
> 技术文档 > UniApp 从入门到实战：一套代码，搞定 App + 小程序 + H5！_uniapp开发小程序 模板

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

网友: 技术文档 2025-07-30 12:37:50

文章目录

  • 一、什么是 UniApp？
    • 1.1 它有什么优点？
  • 二、如何开始一个 UniApp 项目？
    • 2.1 方法一：使用 HBuilderX（推荐初学者）
    • 2.2 方法二：使用 Vue CLI 创建项目（适合前端开发者）
  • 三、项目结构解读（新手版）
  • 四、写一个页面：你好，UniApp！
    • 4.1 新建页面 `pages/hello/hello.vue`
    • 4.2 配置路由 pages.json
    • 4.3 页面跳转示例
  • 五、网络请求（如何获取后端数据）
    • 5.1 基本用法
    • 5.2 推荐封装（新手也能理解的版本）
  • 六、使用本地存储
    • 6.1 保存数据
    • 6.2 读取数据
  • 七、图片、按钮、列表等常见组件
  • 八、发布与运行
    • 8.1 运行调试
    • 8.2 发布 App（HBuilderX 云打包）
  • 九、推荐插件和工具（适合新手）
  • 十、你可以做的项目（新手实战方向）

一、什么是 UniApp？

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

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

1.1 它有什么优点？

优点 说明 ✅ 一套代码多端运行 编写一次，自动适配 App、小程序、网页 ✅ 使用 Vue 语法 学过 Vue 就可以直接上手 ✅ 插件丰富 官方/社区提供了成百上千的插件 ✅ 支持原生能力 可以调用摄像头、定位、推送、支付等原生功能

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

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

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

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

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

npm install -g @vue/clivue create -p dcloudio/uni-preset-vue my-uniappcd my-uniappnpm 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

  你好，UniApp！  export default { methods: { sayHi() { uni.showToast({ title: \'Hello World!\', icon: \'none\' }); } }}.container { padding: 50rpx; text-align: center;}

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);

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

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

八、发布与运行

8.1 运行调试

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

8.2 发布 App（HBuilderX 云打包）

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

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

插件 用途 地址 uView UI 精美 UI 框架 https://uviewui.com Luch Request 网络请求封装 https://ext.dcloud.net.cn/plugin?id=381 uni-id 登录/注册认证 https://uniapp.dcloud.net.cn/uniCloud/uni-id.html uCharts 图表绘制 https://www.ucharts.cn/ 图标库 在线图标库 https://icones.js.org/collection/all

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

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

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

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

网络标签：

相关问题