网站导航
> 技术文档 > 手把手带你用 UniApp 开发多端应用（H5 + 小程序 + App）_uniapp开发app

手把手带你用 UniApp 开发多端应用（H5 + 小程序 + App）_uniapp开发app

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

🧩 前言

🌱 一、准备工作

✅ 开发环境安装

✅ 创建项目

📁 二、项目结构解析

🛠 三、页面开发：Hello UniApp！

✨ 我们从首页（index.vue）点击跳转到关于页（about.vue），传递用户名参数 username=张三

📖 关于页 pages/about.vue

🔧 四、确认 pages.json 配置正确

⚡ 五、运行项目

🔍 六、调用内置 API 示例

运行说明

🔐 权限说明（App 端）

🧠 项目心得体会

✅ 1. 初识跨平台开发的便利

✅ 2. 页面跳转与参数传递

✅ 3. 扫码功能尝试与挑战

✅ 4. 错误调试与查阅文档的重要性

✅ 5. 项目拓展的方向

总结一句话

🧩 拓展推荐

🧩 前言

在当前前端技术百花齐放的时代，跨平台开发成为趋势。UniApp 正是 DCloud 公司推出的一套基于 Vue.js 的跨平台框架，一次开发、可以发布到iOS、Android、H5、小程序、快应用等多个平台。

本篇文章将带你从 0 到 1 搭建一个简单的 UniApp 项目，掌握基本结构、页面开发、组件使用、数据绑定、API调用等核心技能。

🌱 一、准备工作

✅ 开发环境安装

  • 下载并安装 HBuilderX（推荐，可视化开发+真机调试）

  • 或者使用 vue-cli 搭配 @dcloudio/cli 创建项目（适合熟悉命令行的开发者）

✅ 创建项目

使用 HBuilderX 打开软件后：

文件 → 新建 → 项目 → 选择 uni-app 项目模板

选择默认模板，命名为：HelloUniApp，点击完成即可。

📁 二、项目结构解析

🛠 三、页面开发：Hello UniApp！

✨ 我们从首页（index.vue）点击跳转到关于页（about.vue），传递用户名参数 username=张三

  欢迎来到首页  export default { methods: { goAbout() { // 通过 URL 携带参数 uni.navigateTo({ url: \'/pages/about/about?username=张三\' }) } }}.container { padding: 40rpx;}.title { font-size: 32rpx; margin-bottom: 20rpx;}

📖 关于页 pages/about.vue

  接收到的用户名：{{ username }} export default { data() { return { username: \'\' } }, // 页面加载时接收参数 onLoad(options) { this.username = options.username || \'未传值\' console.log(\'接收到的参数:\', options) }}.container { padding: 40rpx; font-size: 30rpx;}

🔧 四、确认 pages.json 配置正确

打开 pages.json，添加如下内容：

{ \"pages\": [ { \"path\": \"pages/index/index\", \"style\": { \"navigationBarTitleText\": \"首页\" } }, { \"path\": \"pages/about/about\", \"style\": { \"navigationBarTitleText\": \"关于\" } } ]}

⚡ 五、运行项目

  • HBuilderX：点击左上角“运行” → 选择“运行到浏览器” 或 “运行到小程序模拟器”

  • 命令行：使用 npm run dev:%PLATFORM% 进行平台编译

示例命令：

npm run dev:h5 # 运行在浏览器npm run dev:mp-weixin # 编译为微信小程序

🔍 六、调用内置 API 示例

比如调用扫一扫功能：

运行说明

  • H5 端：部分浏览器不支持调用摄像头扫码（推荐使用微信开发者工具、小程序、真机预览测试）。

  • 小程序端：需在微信开发者工具/真机中测试。

  • App 端：可用 HBuilderX 真机运行（需真机授权摄像头权限）。s

uni.scanCode({ success: function (res) { console.log(\'扫码结果：\', res.result); }});

🔐 权限说明（App 端）

如果你打包成 App，要在 manifest.json 中开启摄像头权限：

\"app-plus\": { \"distribute\": { \"android\": { \"permissions\": [ \"CAMERA\" ] } }}

🌈 七、项目展示截图

🧠 项目心得体会

在本次基于 UniApp 的小型跨平台项目开发过程中，我收获了许多宝贵的实践经验和开发技巧：

✅ 1. 初识跨平台开发的便利

UniApp 的“一次开发，多端运行”理念确实非常高效。通过编写一套 Vue 代码，我就可以将应用同时运行在微信小程序、H5、App 真机等多个平台，极大地节省了开发和维护成本。这对初学者来说是一个非常理想的前端入门框架。

✅ 2. 页面跳转与参数传递

在实际开发中，我尝试了页面间的参数传递，例如从首页跳转到关于页并携带用户名信息。通过 navigateTo 携带 URL 参数，在目标页面通过 onLoad(options) 接收，掌握了 页面间通信的基本技巧。这让我更加理解了页面生命周期与参数传递的关系。

✅ 3. 扫码功能尝试与挑战

我还尝试实现扫码功能，初期在浏览器中测试时遇到无法使用摄像头的问题，后经查阅文档后了解到：扫码必须在真机运行或微信开发者工具中才生效。通过对 manifest.json 的权限配置，我成功在真机中调用摄像头完成扫码并展示结果。这一过程让我深入理解了不同平台的能力限制与权限机制。

✅ 4. 错误调试与查阅文档的重要性

在项目中我也遇到了一些错误，比如页面跳转无效、路径大小写不一致等问题，起初感到困扰，但通过查看 HBuilderX 控制台日志、官方文档和社区经验，我逐步定位并解决问题。这让我意识到：善于阅读控制台报错信息、查阅官方文档，是前端开发不可或缺的能力。

✅ 5. 项目拓展的方向

目前项目已实现页面跳转、参数传递和扫码功能。未来我计划：

  • 引入组件库（如 uView）

  • 增加数据缓存（如使用 Vuex 或 Pinia）

  • 尝试接入后端 API，实现用户登录等功能

    总结一句话

    本次 UniApp 项目开发不仅提升了我的跨平台前端实战能力，更让我养成了良好的调试习惯和开发思维，是一次非常有价值的技术实践体验。

🧩 拓展推荐

🔗 官方文档参考

  • UniApp 官方文档（功能全、更新快）

  • Vue.js 官方文档（组件语法基础）

  • HBuilderX 插件市场（扩展你的能力）

📦 常用组件库推荐

  • uView UI：一套高颜值、功能强大的 uni-app 前端 UI 框架

  • uni-ui：官方维护的组件库，跨平台兼容性好

✅ 推荐配合 HBuilderX 插件使用，快速提升页面质量和开发效率

💡 实战技巧建议

  • ✅ 小程序适配技巧：如何使用 mp-weixin 平台标签做兼容开发

  • ✅ 真机调试指南：扫码调试、查看日志、权限申请一步到位

  • ✅ App 权限设置详解：manifest.json 中摄像头、定位、相册权限配置

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏、评论交流！💬

网络标签：

相关问题