《uni-app跨平台开发完全指南》- 01 - uni-app介绍与环境搭建

QuantumLeap丶
113 阅读9分钟

uni-app初识与环境搭建

1. 开篇：从移动开发困境到跨平台曙光

在移动互联网发展的早期，移动端开发的形式相对单一，各平台基本处于“各自为战”的状态。对于开发人员而言，这种模式带来了不少现实困扰：不同平台间的代码重复率居高不下，团队配置冗余现象普遍，同一套功能逻辑往往需要重复实现多次，不仅开发效率受到影响，后期维护成本也居高不下。

正是这些实际问题，促使越来越多的开发团队开始寻求更高效的跨平台开发解决方案。在这样的背景下，uni-app 应运而生，它以其“一次编写，多端运行”的理念，为开发者打开了一扇新的大门。今天，就让我带你一起走进 uni-app 的世界，共同开启高效、智能的跨平台开发新旅程。

2. uni-app是什么？为什么选择Uni-app？

2.1 uni-app的本质：一次编写，处处运行

uni-app（读音：/ˈjuːniˌæp/）是由DCloud公司推出的基于Vue.js的跨端应用框架。它的核心思想可以用一句话概括："Write once, run anywhere"。

举个例子来理解下uni-app：

传统开发模式：
iOS开发 → 就像用西式厨具做西餐
Android开发 → 就像用中式厨具做中餐
小程序开发 → 就像用微波炉做快餐

uni-app模式：
使用"万能厨具" → 做一顿饭，自动转换成西餐、中餐、快餐

2.2 uni-app的技术架构

为了更好地理解uni-app的工作原理，让我们看看它的整体架构：

graph TB
    A[开发者编写Vue代码] --> B[uni-app编译器]
    B --> C[平台特定代码生成]
    C --> D[iOS原生应用]
    C --> E[Android原生应用]
    C --> F[微信小程序]
    C --> G[H5网页应用]
    C --> H[其他平台]

    subgraph "编译时转换"
        B1[Vue组件] --> B2[平台组件映射]
        B3[uni API] --> B4[平台API桥接]
    end

uni-app的核心技术栈：

  1. Vue.js语法：使用熟悉的Vue语法进行开发
  2. 条件编译：针对不同平台的差异化处理
  3. 原生渲染：不是WebView包装，而是真正的原生组件
  4. JS引擎：使用各平台原生JavaScript引擎

2.3 为什么选择uni-app？有以下几个优势，重点介绍一下：

2.3.1 开发效率大幅提升

让我用一个真实的项目数据来证明：

// 传统多平台开发工作量估算
const traditionalWorkload = {
  ios: 100,      // iOS开发人天
  android: 100,  // Android开发人天  
  wechat: 80,    // 微信小程序人天
  h5: 60,        // H5开发人天
  total: 340     // 总人天
};

// uni-app开发工作量估算
const uniAppWorkload = {
  common: 120,   // 通用逻辑开发
  platform: 40,  // 平台差异化处理
  total: 160     // 总人天
};

这还只是保守估计，在实际项目中，由于代码复用率更高，效率提升往往更为显著。

2.3.2 学习成本极低

如果你已经熟悉Vue.js，那么学习Uni-app就像：

Vue开发经验 + 1天uni-app学习 = 立即开始跨平台开发
2.3.3 性能接近原生

让我们通过各项指标对比一下说明：

性能指标原生应用uni-appReact NativeFlutter小程序
启动时间⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
渲染性能⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
内存占用⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
包体大小⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
2.3.4 生态丰富，组件齐全

uni-app拥有庞大的插件市场，涵盖：

  • UI组件库（uView、ColorUI等）
  • 功能插件（支付、推送、统计等）
  • 模板项目（电商、社交、工具等）

2.4 uni-app与其他框架的对比

目前市面上跨平台框架层出不穷，为了辅助开发者做出更好的技术选型，下面对主流跨平台方案做一个详细比较：

graph LR
    A[跨平台方案] --> B[uni-app]
    A --> C[React Native]
    A --> D[Flutter]
    A --> E[原生开发]

    B --> B1[Vue语法]
    B --> B2[多端发布]
    B --> B3[生态丰富]
    
    C --> C1[React语法]
    C --> C2[原生组件]
    C --> C3[社区活跃]
    
    D --> D1[Dart语言]
    D --> D2[高性能]
    D --> D3[自绘引擎]
    
    E --> E1[最佳性能]
    E --> E2[原生体验]
    E --> E3[平台特性]

详细对比表格：

特性维度uni-appReact NativeFlutter原生开发
语言基础Vue基础React基础Dart语言平台语言
开发效率极高高高低
性能表现接近原生优秀接近原生最佳
社区生态丰富极其丰富快速增长成熟稳定
招聘成本中等较高高高
维护成本低中等中等高

3. 开发工具对比：HBuilderX vs VSCode

3.1 HBuilderX：官方推荐的开发利器

3.1.1 HBuilderX的核心优势

HBuilderX是DCloud官方为uni-app量身定制的IDE。

主要功能：

// HBuilderX功能演示
const hbuilderxFeatures = {
  // 1. 语法提示
  intelligentAssist: {
    vueSyntax: 'Vue语法支持',
    uniApi: '完整的API提示',
    component: '组件属性智能提示'
  },
  
  // 2. 一键运行调试
  oneClickDebug: {
    platforms: ['iOS', 'Android', '微信小程序', 'H5'],
    simulators: '内置模拟器支持',
    realDevices: '真机调试'
  },
  
  // 3. 高效开发工具
  developmentTools: {
    emmet: '支持快速编写HTML/CSS',
    snippets: '丰富的代码块',
    themes: '多种主题选择'
  }
};
3.1.2 HBuilderX的安装与配置

安装步骤详解：

  1. 下载安装包

    • 访问DCloud官网下载HBuilderX
    • 选择适合你操作系统的版本（Windows/Mac）

  2. 基础配置

    // 推荐的基础配置
const hbuilderxConfig = {
  editor: {
    fontSize: 14,           // 字体大小
    theme: 'Monokai',       // 主题风格
    tabSize: 2,             // Tab缩进
    wordWrap: true          // 自动换行
  },
  uniApp: {
    autoSave: true,         // 自动保存
    lintOnSave: true,       // 保存时检查
    hotReload: true         // 热重载
  }
};

  3. 插件安装

    • 内置插件市场，一键安装
    • 推荐插件：Git插件、代码格式化、终端集成
3.1.3 HBuilderX实战技巧

下面分享几个提高开发效率的小技巧：

技巧1：快速创建页面模板

在pages.json中配置页面路径后
右键 → 新建页面 → 自动生成标准页面结构

技巧2：条件编译可视化

<!-- 在HBuilderX中，条件编译会有特殊颜色标记 -->
<template>
  <!-- #ifdef APP-PLUS -->
  <view>这是App端特有内容</view>
  <!-- #endif -->
  
  <!-- #ifdef MP-WEIXIN -->
  <view>这是微信小程序特有内容</view>
  <!-- #endif -->
</template>

技巧3：一键真机调试

连接手机 → 点击运行 → 选择真机运行 → 自动安装调试基座

3.2 VSCode：灵活的备选方案

3.2.1 为什么选择VSCode？

虽然HBuilderX是官方推荐，但VSCode在某些场景下也有独特优势：

// VSCode适用场景
const vscodeScenarios = {
  // 1. 团队统一开发环境
  teamDevelopment: '团队已标准化使用VSCode',
  
  // 2. 个性化配置需求
  customization: '需要深度自定义开发环境',
  
  // 3. 多技术栈项目
  multiTechStack: '项目涉及多种技术栈',
  
  // 4. 插件生态依赖
  pluginEcosystem: '依赖特定VSCode插件'
};
3.2.2 VSCode配置uni-app开发环境

步骤1：安装必要插件

{
  "推荐插件列表": [
    "Vetur - Vue语法支持",
    "uni-app-snippets - uni-app代码片段", 
    "uni-helper - uni-app API提示",
    "Easy WXL - 微信小程序语法",
    "Prettier - 代码格式化",
    "ESLint - 代码检查"
  ]
}

步骤2：配置工作区设置

// .vscode/settings.json
{
  "files.associations": {
    "*.vue": "vue",
    "*.nvue": "vue"
  },
  "emmet.includeLanguages": {
    "vue": "html",
    "nvue": "html"
  },
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier"
}

步骤3：调试配置

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "调试uni-app",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/@dcloudio/vue-cli-plugin-uni/bin/uni-cli.js",
      "args": ["build", "--platform", "h5"]
    }
  ]
}

3.3 工具选择建议

根据你的具体需求选择合适的工具：

graph TD
    A[选择开发工具] --> B{项目类型}
    B --> C[纯uni-app项目]
    B --> D[混合技术栈项目]
    
    C --> E[团队新人较多]
    C --> F[追求最高效率]
    
    E --> G[推荐HBuilderX]
    F --> G
    
    D --> H[已有VSCode配置]
    D --> I[需要深度定制]
    
    H --> J[推荐VSCode]
    I --> J
    
    G --> K[官方支持完善]
    J --> L[灵活性更强]

IDE选择上有以下考虑因素：

考虑因素推荐HBuilderX推荐VSCode
新手友好度⭐⭐⭐⭐⭐⭐⭐⭐
开发效率⭐⭐⭐⭐⭐⭐⭐⭐⭐
自定义程度⭐⭐⭐⭐⭐⭐⭐⭐
调试体验⭐⭐⭐⭐⭐⭐⭐⭐⭐
团队统一适合统一环境适合多样化环境

4. 环境搭建与项目创建

4.1 环境准备：打好开发基础

在开始创建项目之前，我们需要确保开发环境准备就绪。

以烹饪为例来说明：
Node.js → 就像煤气灶，提供动力
npm/yarn → 就像厨具，管理工具包
IDE → 就像灶台，工作空间
4.1.1 Node.js安装与配置

安装步骤：

  1. 下载Node.js

    • 访问Node.js官网（nodejs.org/）
    • 推荐安装LTS（长期支持）版本

  2. 验证安装

    # 打开终端/命令提示符，输入以下命令
node --version  # 应该显示v14.x.x或更高
npm --version   # 应该显示6.x.x或更高

  3. 配置npm（可选但推荐）

    # 设置淘宝镜像，加速下载
npm config set registry https://registry.npmmirror.com/

# 验证配置
npm config get registry
4.1.2 微信开发者工具（如需开发小程序）

安装配置：

  1. 下载微信开发者工具
  2. 设置 → 安全设置 → 开启服务端口

4.2 项目创建：三种方式任你选

uni-app提供了多种项目创建方式选择：

4.2.1 方式一：HBuilderX可视化创建（推荐新手）

步骤详解：

  1. 打开HBuilderX

    文件 → 新建 → 项目

  2. 选择项目类型

    uni-app → 选择模板（推荐使用默认模板）

  3. 配置项目信息

    // 项目配置示例
const projectConfig = {
  name: 'MyFirstUniApp',        // 项目名称
  location: '/path/to/project', // 项目路径
  template: '默认模板',         // 项目模板
  vueVersion: '2'              // Vue版本（2或3）
};

  4. 项目结构 创建完成后，你会看到这样的目录结构：

    MyFirstUniApp/
├── pages/           // 页面目录
│   ├── index/       // 首页
│   └── ...          // 其他页面
├── static/          // 静态资源
├── App.vue          // 应用配置
├── main.js          // 入口文件
├── manifest.json    // 应用配置
└── pages.json       // 页面配置
4.2.2 方式二：CLI命令行创建（推荐进阶）

使用Vue CLI创建：

# 全局安装@vue/cli
npm install -g @vue/cli

# 创建项目（注意：Vue CLI 4.x+支持）
vue create -p dcloudio/uni-preset-vue my-project

# 进入项目目录
cd my-project

# 安装依赖
npm install

创建过程中的选项说明：

? 请选择 uni-app 模板 (Use arrow keys)
❯ 默认模板          # 标准模板，包含基础功能
  默认模板(TypeScript) # TypeScript版本
  Hello uni-app     # 示例项目，包含大量组件演示
  自定义模板        # 高级用户可选
4.2.3 方式三：从GitHub模板创建
# 使用degit工具（需要先安装：npm install -g degit）
degit dcloudio/uni-app-template#vue2 my-project

# 或直接clone
git clone https://github.com/dcloudio/uni-app-template.git my-project
cd my-project
npm install

4.3 项目结构深度解析

让我们深入了解uni-app项目的目录结构：

graph TD
    A[uni-app项目根目录] --> B[pages目录]
    A --> C[static目录]
    A --> D[components目录]
    A --> E[配置文件]
    
    B --> B1[页面1]
    B --> B2[页面2]
    B --> B3[...]
    
    E --> E1[pages.json]
    E --> E2[manifest.json]
    E --> E3[App.vue]
    E --> E4[main.js]

关键文件详解：

4.3.1 pages.json - 页面配置文件
{
  // 页面路由配置
  "pages": [
    {
      "path": "pages/index/index",  // 页面路径
      "style": {
        "navigationBarTitleText": "首页",  // 页面标题
        "enablePullDownRefresh": true      // 开启下拉刷新
      }
    }
  ],
  
  // 全局样式配置
  "globalStyle": {
    "navigationBarTextStyle": "black",          // 标题颜色
    "navigationBarTitleText": "我的应用",       // 默认标题
    "navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景色
    "backgroundColor": "#F8F8F8"               // 页面背景色
  },
  
  // 底部Tab栏配置
  "tabBar": {
    "color": "#7A7E83",           // 默认颜色
    "selectedColor": "#3cc51f",   // 选中颜色
    "borderStyle": "black",       // 边框样式
    "backgroundColor": "#ffffff", // 背景色
    "list": [
      {
        "pagePath": "pages/index/index",    // 页面路径
        "iconPath": "static/icon/home.png", // 图标路径
        "selectedIconPath": "static/icon/home-active.png", // 选中图标
        "text": "首页"                      // 显示文字
      }
    ]
  }
}
4.3.2 manifest.json - 应用配置文件
{
  "name": "MyFirstUniApp",        // 应用名称
  "appid": "__UNI__XXXXXX",       // 应用ID（自动生成）
  "description": "项目描述",       // 应用描述
  "versionName": "1.0.0",         // 版本名称
  "versionCode": "100",           // 版本号
  
  // 各平台特定配置
  "app-plus": {
    "usingComponents": true,      // 是否使用组件
    "nvueStyleCompiler": "uni-app", // nvue样式编译器
    "compilerVersion": 3,         // 编译器版本
    "splashscreen": {             // 启动页配置
      "alwaysShowBeforeRender": true,
      "waiting": true,
      "autoclose": true,
      "delay": 0
    }
  },
  
  "mp-weixin": {
    "usingComponents": true,      // 使用组件
    "appid": "wx1234567890",      // 微信小程序AppID
    "setting": {
      "urlCheck": false           // 关闭域名校验
    }
  },
  
  "h5": {
    "title": "我的H5应用",         // H5页面标题
    "router": {                   // 路由配置
      "mode": "hash"              // 路由模式
    }
  }
}
4.3.3 App.vue - 应用入口文件
<script>
// 应用生命周期管理
export default {
  // 应用初始化时触发
  onLaunch: function(options) {
    console.log('App Launch', options);
    // 可以在这里进行全局数据初始化
    // 比如检查登录状态、获取用户信息等
  },
  
  // 应用显示时触发（从后台进入前台）
  onShow: function(options) {
    console.log('App Show', options);
  },
  
  // 应用隐藏时触发（从前台进入后台）
  onHide: function() {
    console.log('App Hide');
  },
  
  // 全局数据
  globalData: {
    userInfo: null,        // 用户信息
    systemInfo: null       // 系统信息
  }
}
</script>

<style>
/* 每个页面都会加载的公共样式 */
/* 注意：这里定义的样式会影响所有页面 */
page {
  background-color: #f8f8f8;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 
               'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 
               SimSun, sans-serif;
}

/* 全局类名 */
.text-primary {
  color: #007AFF;
}

.bg-primary {
  background-color: #007AFF;
}
</style>

5. 第一个Hello World程序

5.1 创建第一个页面

现在让我们动手创建第一个uni-app页面，这就像学习编程时写的第一个"Hello World"程序。

5.1.1 修改首页内容

打开 pages/index/index.vue 文件，让我们逐步理解并修改它：

<template>
  <!-- view相当于HTML中的div，是uni-app中的基本容器组件 -->
  <view class="container">
    
    <!-- 文本显示组件，相当于span或p标签 -->
    <text class="title">欢迎来到uni-app世界！</text>
    
    <!-- 图片组件，用于显示图片 -->
    <image 
      class="logo" 
      src="/static/logo.png" 
      mode="widthFix"
      @click="handleImageClick"
    />
    
    <!-- 按钮组件 -->
    <button 
      class="action-button" 
      type="primary" 
      @click="handleButtonClick"
    >
      点击我
    </button>
    
    <!-- 显示点击次数的文本 -->
    <text class="counter-text">按钮已被点击 {{ clickCount }} 次</text>
    
    <!-- 条件渲染示例 -->
    <view v-if="showExtraInfo" class="extra-info">
      <text>你已经成功创建了第一个uni-app应用！</text>
    </view>
    
  </view>
</template>

<script>
export default {
  // 组件数据
  data() {
    return {
      clickCount: 0,           // 点击次数计数器
      showExtraInfo: false     // 是否显示额外信息
    }
  },
  
  // 页面生命周期 - 加载时触发
  onLoad(options) {
    console.log('页面加载完成', options);
    // 可以在这里接收页面参数，比如从其他页面传递过来的数据
  },
  
  // 页面生命周期 - 显示时触发
  onShow() {
    console.log('页面显示');
  },
  
  // 组件方法
  methods: {
    // 处理按钮点击事件
    handleButtonClick() {
      // 增加点击计数
      this.clickCount += 1;
      
      // 每点击3次显示/隐藏额外信息
      if (this.clickCount % 3 === 0) {
        this.showExtraInfo = !this.showExtraInfo;
      }
      
      // 显示提示信息
      uni.showToast({
        title: `点击了 ${this.clickCount} 次`,
        icon: 'none',
        duration: 1500
      });
      
      console.log('按钮被点击，当前计数:', this.clickCount);
    },
    
    // 处理图片点击事件
    handleImageClick() {
      uni.showModal({
        title: '提示',
        content: '你点击了Logo图片！',
        showCancel: false
      });
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 标题样式 */
.title {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  text-align: center;
  margin-bottom: 60rpx;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Logo图片样式 */
.logo {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 60rpx;
  border-radius: 30rpx;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

/* 图片悬停效果（H5端有效） */
.logo:hover {
  transform: scale(1.05);
}

/* 按钮样式 */
.action-button {
  width: 400rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(45deg, #FF6B6B, #FF8E53);
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
  margin-bottom: 40rpx;
  transition: all 0.3s ease;
}

/* 按钮激活效果 */
.action-button:active {
  transform: scale(0.95);
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.6);
}

/* 计数器文本样式 */
.counter-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 30rpx;
}

/* 额外信息样式 */
.extra-info {
  background: rgba(255, 255, 255, 0.2);
  padding: 30rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: fadeIn 0.5s ease;
}

.extra-info text {
  font-size: 28rpx;
  color: white;
  text-align: center;
}

/* 动画定义 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计考虑 */
@media (max-width: 750px) {
  .title {
    font-size: 36rpx;
  }
  
  .logo {
    width: 250rpx;
    height: 250rpx;
  }
}
</style>

5.2 运行与调试

现在让我们运行这个Hello World程序，看看它在不同平台上的表现。

5.2.1 在HBuilderX中运行

步骤：

  1. 选择运行平台

    点击工具栏"运行"按钮 → 选择运行平台

  2. 平台选项

    const runOptions = {
  'h5': '在浏览器中运行',
  'mp-weixin': '在微信开发者工具中运行', 
  'app': '在手机或模拟器中运行'
};

  3. 首次运行配置

    • H5: 自动打开浏览器
    • 微信小程序: 需要配置微信开发者工具路径
    • App: 需要连接真机或启动模拟器
5.2.2 在命令行中运行

如果你使用CLI创建项目，可以使用以下命令：

# 运行到H5
npm run dev:h5

# 运行到微信小程序
npm run dev:mp-weixin

# 构建生产版本
npm run build:h5
5.2.3 多平台运行效果对比

让我们观察同一个代码在不同平台上的运行效果：

平台运行效果注意事项
H5在浏览器中完美运行支持所有CSS特性
微信小程序在微信开发者工具中运行部分CSS特性受限
App在手机模拟器或真机运行性能最佳，体验最流畅

5.3 调试技巧

5.3.1 控制台调试
// 在页面或组件中使用console进行调试
export default {
  onLoad() {
    console.log('页面加载完成');
    console.warn('这是一个警告信息');
    console.error('这是一个错误信息');
    
    // 打印对象时使用JSON.stringify便于查看
    const userInfo = { name: '张三', age: 25 };
    console.log('用户信息:', JSON.stringify(userInfo, null, 2));
  }
}
5.3.2 网络请求调试
// 使用uni.request进行网络请求
uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log('请求成功:', res.data);
  },
  fail: (err) => {
    console.error('请求失败:', err);
  }
});

6. 常见问题与解决方案

6.1 环境配置问题

问题1：Node.js版本不兼容

解决方案：
- 卸载现有Node.js
- 安装Node.js 14.x或16.x LTS版本
- 避免使用Node.js 17+（可能存在兼容性问题）

问题2：npm安装失败

# 解决方案：使用淘宝镜像
npm config set registry https://registry.npmmirror.com/
npm config set sass_binary_site https://npmmirror.com/mirrors/node-sass/

# 或使用yarn
npm install -g yarn
yarn config set registry https://registry.npmmirror.com/

6.2 项目运行问题

问题3：微信开发者工具连接失败

解决方案：
1. 确认微信开发者工具已安装
2. 设置 → 安全设置 → 开启服务端口
3. 在HBuilderX中设置微信开发者工具安装路径

问题4：真机调试无法连接

解决方案：
1. 确保手机开启USB调试
2. 使用原装数据线
3. 在开发者选项中开启"USB调试（安全设置）"
4. 如果是华为手机，还需要安装HiSuite

7. 总结

7.1 本章重点回顾

通过本章的学习，我们已经掌握了：

  • uni-app的核心概念和优势
  • 跨平台开发的工作原理
  • 不同开发工具的对比和选择
  • 完整的开发环境搭建
  • 项目的创建和配置
  • 第一个uni-app应用的开发和运行
关键配置文件
  • pages.json - 页面路由和样式配置
  • manifest.json - 应用全局配置
  • App.vue - 应用入口和全局样式
graph LR
    A[uni-app基础] --> B[环境搭建]
    A --> C[工具选择]
    A --> D[项目创建]
    
    B --> B1[Node.js安装]
    B --> B2[IDE配置]
    
    C --> C1[HBuilderX]
    C --> C2[VSCode]
    
    D --> D1[目录结构]
    D --> D2[配置文件]
    D --> D3[Hello World]

如果觉得这篇文章对你有帮助，请不要忘记一键三连（点赞、关注、收藏）！有任何问题，欢迎评论区留言

avatar
文章
阅读
粉丝