🧩 前言

🌱 一、准备工作

✅ 开发环境安装

✅ 创建项目

📁 二、项目结构解析

🛠 三、页面开发：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=张三

<template>
  <view class="container">
    <text class="title">欢迎来到首页</text>
    <button @click="goAbout">去关于页（带参数）</button>
  </view>
</template>

<script>
export default {
  methods: {
    goAbout() {
      // 通过 URL 携带参数
      uni.navigateTo({
        url: '/pages/about/about?username=张三'
      })
    }
  }
}
</script>

<style>
.container {
  padding: 40rpx;
}
.title {
  font-size: 32rpx;
  margin-bottom: 20rpx;
}
</style>

📖 关于页 pages/about.vue

<template>
  <view class="container">
    <text>接收到的用户名：{{ username }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  // 页面加载时接收参数
  onLoad(options) {
    this.username = options.username || '未传值'
    console.log('接收到的参数:', options)
  }
}
</script>

<style>
.container {
  padding: 40rpx;
  font-size: 30rpx;
}
</style>

---

🔧 四、确认 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 中摄像头、定位、相册权限配置

---

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