uni-app 简介与环境搭建

章节概述

本章节将介绍 uni-app 框架的基本概念、核心价值和应用场景，详细讲解开发环境的搭建过程，以及如何初始化和创建第一个 uni-app 项目。通过本章节的学习，您将对 uni-app 有一个全面的认识，并能够搭建完整的开发环境开始实际项目开发。

核心知识点

1. uni-app 框架介绍

什么是 uni-app？

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、鸿蒙 Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。

uni-app 的核心优势

  • 开发者/案例数量更多：数百万应用、uni 统计月活 12 亿、70+ 微信/QQ 群
  • 跨端完善度更高：真正落地的提高生产力
  • 平台能力不受限：通过条件编译 + 平台特有 API 调用，可为某平台写个性化代码
  • 性能体验优秀：加载新页面速度更快、自动 diff 更新数据
  • 周边生态丰富：插件市场数千款插件，支持 NPM、支持小程序组件和 SDK
  • 学习成本低：基于通用的前端技术栈，采用 Vue 语法 + 微信小程序 API
  • 开发成本低：不止开发成本，招聘、管理、测试各方面成本都大幅下降

uni-app 的应用场景

  • 需要同时开发多个平台应用的项目
  • 希望降低开发成本和维护成本的团队
  • 已有 Vue.js 或小程序开发经验的开发者
  • 追求开发效率和跨端一致性的项目

2. 开发环境搭建

安装 HBuilderX

HBuilderX 是 uni-app 官方推荐的开发工具，具有强大的代码提示、编译运行等功能。

  1. 下载 HBuilderX

    • 访问 HBuilderX 官方网站
    • 根据操作系统选择对应的版本（Windows 或 macOS）
    • 下载并安装

  2. 安装 uni-app 插件

    • 打开 HBuilderX
    • 点击菜单栏的「工具」->「插件安装」
    • 在弹出的插件安装界面中，找到「uni-app」插件并安装

  3. 配置编辑器

    • 可根据个人习惯配置代码风格、字体大小等
    • 建议开启自动保存和代码提示功能

安装微信开发者工具

由于 uni-app 支持微信小程序，因此需要安装微信开发者工具以便进行小程序端的调试和预览。

  1. 下载微信开发者工具

    • 访问 微信公众平台
    • 登录后，在「开发」->「开发者工具」中下载
    • 安装并登录

  2. 配置微信开发者工具

    • 打开微信开发者工具
    • 点击「设置」->「安全设置」
    • 开启「服务端口」选项，允许 HBuilderX 调用

3. 项目初始化

创建 uni-app 项目

  1. 打开 HBuilderX
  2. 点击「文件」->「新建」->「项目」
  3. 选择「uni-app」项目类型
  4. 填写项目信息
    • 项目名称：例如「hello-uni-app」
    • 项目路径：选择合适的存储位置
    • 模板选择：可选择「默认模板」或其他模板
  5. 点击「创建」按钮

项目目录结构

创建完成后，项目目录结构如下：

hello-uni-app/
├── components/         # 组件目录
├── pages/             # 页面目录
│   └── index/         # 首页
├── static/            # 静态资源目录
├── uni_modules/       # uni 模块目录
├── unpackage/         # 打包输出目录
├── App.vue            # 应用入口文件
├── main.js            # 应用入口脚本
├── manifest.json      # 应用配置文件
└── pages.json         # 页面路由配置文件

实用案例分析

创建第一个 uni-app 项目

案例目标

创建一个简单的 uni-app 项目，实现基本的页面结构和功能，验证开发环境是否配置正确。

实现步骤

  1. 创建项目

    • 按照上述步骤创建一个名为「hello-uni-app」的项目
    • 选择「默认模板」

  2. 修改首页内容

    • 打开 pages/index/index.vue 文件
    • 修改页面内容如下：
<template>
  <view class="container">
    <view class="title">Hello uni-app</view>
    <view class="content">
      <text class="text">欢迎使用 uni-app 框架</text>
      <view class="feature-list">
        <view class="feature-item">
          <text class="feature-text">跨平台开发</text>
        </view>
        <view class="feature-item">
          <text class="feature-text">Vue 语法</text>
        </view>
        <view class="feature-item">
          <text class="feature-text">丰富的 API</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello uni-app'
    }
  },
  onLoad() {
    console.log('页面加载')
  },
  methods: {
    // 方法定义
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 100vh;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
  color: #333;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 100%;
  max-width: 500rpx;
}

.feature-item {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 8rpx;
  text-align: center;
}

.feature-text {
  font-size: 24rpx;
  color: #333;
}
</style>
  1. 运行项目
    • 在 HBuilderX 中，选中项目
    • 点击菜单栏的「运行」->「运行到浏览器」-> 选择浏览器
    • 或点击「运行」->「运行到小程序模拟器」->「微信开发者工具」
    • 或点击「运行」->「运行到手机或模拟器」-> 选择设备

运行效果

  • Web 端：在浏览器中打开，显示 Hello uni-app 页面
  • 小程序端：在微信开发者工具中打开，显示小程序页面
  • App 端：在手机或模拟器中安装并运行，显示 App 页面

代码示例

项目配置文件示例

manifest.json

{
  "name": "hello-uni-app",
  "appid": "__UNI__XXXXXXXX",
  "description": "uni-app 示例项目",
  "versionName": "1.0.0",
  "versionCode": "1",
  "transformPx": true,
  "uniStatistics": {
    "enable": true
  },
  "app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app",
    "compilerVersion": 3
  },
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  },
  "mp-alipay": {
    "usingComponents": true
  },
  "mp-baidu": {
    "usingComponents": true
  },
  "mp-toutiao": {
    "usingComponents": true
  }
}

pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "Hello uni-app"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

常见问题与解决方案

1. HBuilderX 无法启动

  • 问题：安装后 HBuilderX 无法启动
  • 解决方案：检查系统版本是否兼容，尝试以管理员身份运行，或重新下载安装包

2. 微信开发者工具无法被 HBuilderX 调用

  • 问题：HBuilderX 运行到微信开发者工具时失败
  • 解决方案：确保微信开发者工具已登录，并且已开启服务端口

3. 项目创建失败

  • 问题：创建 uni-app 项目时失败
  • 解决方案：检查网络连接，确保 HBuilderX 已安装 uni-app 插件，或尝试使用命令行创建

学习总结

通过本章节的学习，您已经了解了：

  1. uni-app 的基本概念：它是一个使用 Vue.js 开发跨平台应用的框架，支持多个平台
  2. uni-app 的核心优势：跨端完善度高、平台能力不受限、性能体验优秀等
  3. 开发环境搭建：安装 HBuilderX 和微信开发者工具的详细步骤
  4. 项目初始化：创建 uni-app 项目的完整流程
  5. 项目目录结构：了解 uni-app 项目的基本结构和配置文件
  6. 运行项目：如何在不同平台上运行和预览 uni-app 项目

现在您已经完成了环境搭建和项目初始化，可以开始学习 uni-app 的核心功能和开发技巧了。下一章节将详细介绍 uni-app 的项目结构与配置，帮助您更深入地了解 uni-app 项目的组织方式和配置方法。

下一篇 » uni-app 项目结构与配置
↑