创建第一个 uni-app 项目

环境准备

开发uni-app项目前需要安装必要的工具和环境。HBuilderX是官方推荐的IDE，提供了完善的uni-app开发支持。Node.js也是必须安装的，建议使用LTS版本。

安装HBuilderX步骤：

1. 访问官网下载对应操作系统的版本
2. 解压安装包到指定目录
3. 运行HBuilderX.exe

Node.js安装验证方法：

node -v
npm -v

新建项目

在HBuilderX中创建uni-app项目有多种方式：

1. 通过菜单栏：文件 -> 新建 -> 项目
2. 使用快捷键Ctrl+N
3. 在项目管理器空白处右键选择新建项目

项目模板选择很重要，常用的有：

• 默认模板：基础uni-app项目结构
• uni-ui项目：包含uni-ui组件库
• 自定义模板：可配置各种插件

项目结构解析

新建的uni-app项目包含以下核心目录和文件：

├── pages                 // 页面目录
│   ├── index             // 首页
│   │   ├── index.vue     // 页面组件
│   │   └── index.json    // 页面配置
├── static                // 静态资源
├── App.vue               // 应用入口
├── main.js               // 应用配置
├── manifest.json         // 应用配置
└── pages.json            // 页面路由配置

编写第一个页面

在pages/index/index.vue中编写简单页面：

<template>
  <view class="container">
    <text class="title">欢迎使用uni-app</text>
    <button @click="showToast">点击提示</button>
  </view>
</template>

<script>
export default {
  methods: {
    showToast() {
      uni.showToast({
        title: 'Hello uni-app',
        icon: 'none'
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.title {
  font-size: 18px;
  color: #333;
}
</style>

配置页面路由

pages.json是重要的配置文件，用于设置页面路由和窗口样式：

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

运行和调试

HBuilderX提供多种运行方式：

1. 运行到浏览器：直接调试网页版
2. 运行到手机或模拟器：需要配置adb环境
3. 运行到小程序开发者工具：需先安装对应平台工具

调试技巧：

• 使用console.log输出日志
• 在HBuilderX的调试窗口查看日志
• 使用Chrome开发者工具调试网页版

常用API示例

uni-app提供了丰富的API，以下是一些常用示例：

获取系统信息：

uni.getSystemInfo({
  success(res) {
    console.log(res.platform)
  }
})

发起网络请求：

uni.request({
  url: 'https://example.com/api',
  method: 'GET',
  success(res) {
    console.log(res.data)
  }
})

本地存储：

// 存储
uni.setStorageSync('key', 'value')

// 读取
const value = uni.getStorageSync('key')

跨平台适配

uni-app支持条件编译处理平台差异：

<template>
  <view>
    <!-- #ifdef H5 -->
    <p>仅在H5平台显示</p>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <p>仅在小程序平台显示</p>
    <!-- #endif -->
  </view>
</template>

样式适配示例：

/* 通用样式 */
.button {
  padding: 10px;
}

/* 小程序特有样式 */
/* #ifdef MP-WEIXIN */
.button {
  margin-top: 5px;
}
/* #endif */

发布准备

发布前需要完成以下工作：

1. 配置manifest.json文件

{
  "name": "MyApp",
  "appid": "__UNI__XXXXXX",
  "versionName": "1.0.0",
  "versionCode": "100"
}

2. 配置各平台特有的设置
3. 运行项目到对应平台
4. 使用各平台开发者工具提交审核

常见问题解决

开发过程中可能遇到的问题：

1. 页面不显示：

• 检查pages.json配置
• 确认文件路径正确
• 查看控制台错误信息

2. 样式不生效：

• 检查样式作用域
• 确认选择器优先级
• 查看是否被条件编译排除

3. API调用失败：

• 检查权限配置
• 确认平台支持该API
• 查看官方文档兼容性说明