一、UniApp 是什么？

UniApp 是一个使用 Vue.js 语法开发所有前端应用的框架。开发者编写一套代码，可以发布到 iOS、Android、Web（H5）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

核心优势：

• 跨平台开发： 一套代码，多端发布，极大提升开发效率。
• 学习成本低： 如果你会 Vue.js 和微信小程序语法，上手会非常快。
• 生态丰富： 拥有完善的插件市场（DCloud 插件市场），可以引入各种现成的功能模块。
• 性能良好： 基于小程序原理，在非 H5 端拥有接近原生应用的体验。

---

二、开发前的准备

1. 安装开发工具 HBuilderX

   • 这是 DCloud 官方推出的专为 UniApp 定化的 IDE，提供了非常强大的开发支持和调试功能。
   • 下载地址： https://www.dcloud.io/hbuilderx.html
   • 建议下载 App开发版。

2. 基础知识储备

   • 必要： HTML、CSS、JavaScript。
   • 强烈建议： Vue.js 基础（特别是 Vue 2 的语法）。官方文档：https://v2.cn.vuejs.org/
   • 有帮助： 了解任意一种小程序（如微信小程序）的开发流程，因为很多概念是相通的。

---

三、创建你的第一个 UniApp 项目

1. 打开 HBuilderX，点击左上角 文件 -> 新建 -> 项目。
2. 选择 uni-app，输入项目名称，选择模板（推荐使用 默认模板），点击创建。
3. 项目结构如下：

   my-first-uniapp
   │  pages.json          // 页面配置，类似小程序的 app.json
   │  App.vue             // 应用入口文件
   │  main.js             // 应用主脚本
   │  index.html          // 首页模板
   │  manifest.json       // 应用配置文件，用于配置应用名称、appid、图标、权限等
   ├─pages                // 页面目录
   │  └─index
   │      └─index.vue     // 首页页面文件
   ├─static              // 静态资源目录
   │      └─logo.png
   └─uni_modules         //  uni_modules 规范插件目录
   

---

四、核心概念和语法

1. 页面结构 (.vue 文件)

UniApp 使用 Vue 单文件组件（SFC）结构，每个页面由三部分组成：

• <template>: 模板部分，负责 UI 结构。这里使用类似小程序的标签，而非 HTML 标签。

  <template>
      <view class="container">
          <text>{{ message }}</text>
          <button @click="changeMessage">点击我</button>
      </view>
  </template>
  

• <script>: 脚本部分，负责逻辑和数据。

  <script>
      export default {
          data() {
              return {
                  message: 'Hello UniApp!'
              }
          },
          methods: {
              changeMessage() {
                  this.message = '消息被改变了！';
              }
          }
      }
  </script>
  

• <style>: 样式部分，负责页面样式。

  <style>
      .container {
          padding: 20px;
          text-align: center;
      }
      text {
          font-size: 16px;
          color: #333;
          display: block;
          margin-bottom: 20px;
      }
  </style>
  

2. 生命周期

• 应用生命周期: 在 App.vue 中定义，如 onLaunch, onShow, onHide。
• 页面生命周期: 在页面的 .vue 文件中定义，如 onLoad, onShow, onReady, onHide, onUnload。
• 组件生命周期: 与 Vue 标准生命周期相同，如 created, mounted, updated, destroyed。

3. 路由与页面导航

UniApp 内置了路由功能，无需额外安装库。

• 跳转到新页面 (关闭当前页面):

  uni.navigateTo({
      url: '/pages/detail/detail?id=1&name=test'
  });
  

• 重定向页面 (关闭所有页面):

  uni.redirectTo({
      url: '/pages/home/home'
  });
  

• 返回上一页:

  uni.navigateBack();
  

• 在 pages.json 中注册页面和设置首页:

  {
      "pages": [
          {
              "path": "pages/index/index",
              "style": {
                  "navigationBarTitleText": "首页" // 页面标题
              }
          },
          {
              "path": "pages/detail/detail",
              "style": {
                  "navigationBarTitleText": "详情页"
              }
          }
      ]
  }
  

4. 组件

UniApp 提供了一套丰富的基础组件，如 <view>, <text>, <image>, <button>, <input> 等。这些组件在不同平台会被编译成对应的原生组件，体验更好。

5. API

UniApp 提供了大量的原生 API，以 uni. 开头，用于调用设备功能，如：

• uni.request() - 网络请求
• uni.showToast() - 显示消息提示框
• uni.getLocation() - 获取地理位置
• uni.chooseImage() - 选择图片
• uni.login() - 登录
• uni.navigateTo() - 页面跳转

使用示例：

// 发起一个 GET 请求
uni.request({
    url: 'https://www.example.com/api/data',
    success: (res) => {
        console.log(res.data);
    },
    fail: (err) => {
        console.error(err);
    }
});

// 显示提示
uni.showToast({
    title: '操作成功！',
    icon: 'success'
});

---

五、调试与运行

HBuilderX 提供了极其方便的调试方式：

1. 运行到浏览器： 点击工具栏 运行 -> 运行到浏览器 -> Chrome。会编译成 H5 项目并在浏览器中打开。
2. 运行到小程序模拟器（以微信为例）：
   • 首先需要安装微信开发者工具。
   • 在 HBuilderX 中点击 运行 -> 运行到小程序模拟器 -> 微信开发者工具。
   • HBuilderX 会自动编译项目并启动微信开发者工具。
3. 运行到手机或模拟器（App）：
   • 通过数据线连接手机并开启 USB 调试（Android）。
   • 点击 运行 -> 运行到手机或模拟器 -> 选择你的设备。

---

六、发布

1. 发布为 H5：

   • 点击 发行 -> 网站-H5手机版。
   • 编译后的文件在 /unpackage/dist/build/h5 目录下，将其部署到你的服务器即可。

2. 发布为微信小程序：

   • 点击 发行 -> 小程序-微信。
   • 输入你的小程序 AppID。
   • 编译完成后，会生成一个 /unpackage/dist/dev/mp-weixin 目录。
   • 用微信开发者工具打开这个目录，然后点击上传即可。

3. 发布为 App (Android/iOS)：

   • 这是一个更复杂的过程，需要配置 manifest.json 文件（应用图标、启动图、模块权限等）。
   • 云打包： 点击 发行 -> 原生App-云打包。DCloud 服务器会帮你完成打包，你直接下载安装包即可。（推荐新手）
   • 本地打包： 需要配置 AndroidStudio / Xcode 环境，过程较复杂。

---

七、学习路径与资源推荐

1. 官方文档 (最重要！): https://uniapp.dcloud.net.cn/

   • 遇到任何问题，第一反应就是查文档。

2. 实践项目：

   • 新手练习： 做一个 TodoList（待办事项列表）、新闻列表页（调用一个公开 API 获取数据并展示）。
   • 进阶项目： 模仿一个完整的小程序，如简易商城、博客应用、天气应用等。

3. 社区与插件市场：

   • DCloud 插件市场： https://ext.dcloud.net.cn/ - 寻找现成的轮子，节省开发时间。
   • 遇到问题： 优先在官方文档和论坛中搜索，90% 的问题都能找到答案。

总结

UniApp 的核心思路是 “Vue 的语法 + 小件的标签 + 跨端的 API”。只要你掌握了 Vue.js 的基础，再对照官方文档熟悉一下它的组件和 API，就能很快地开发出跨平台应用。从一个小项目开始动手实践是最好的学习方式。