uniapp学习【项目创建+项目结构解析】

1.项目创建

1. 打开 HBuilderX，点击 "文件> 新建 > 项目"。

2. 选择 "Uniapp 项目"，填写以下信息：

   • 项目名称：自定义（例：uniapp-miniprogram-demo）。

   • 目录：选择本地文件夹（建议新建一个专门的开发文件夹，避免路径含中文）。

   • 模板：选择 "默认模板（Vue3）"（务必选 Vue3，否则后续无法使用 Vue3 语法）。

   • 勾选 "启用 TypeScript"（可选，小白建议先不勾，用 JavaScript 更易上手）。

   • 勾选 "创建 git 仓库"（可选，用于版本管理）。

3. 点击 "创建"，项目初始化完成（首次创建会自动下载依赖，需等待 1-2 分钟）。

4. 项目创建完成后，点击 HBuilderX 工具栏的 "运行> 运行到小程序模拟器 > 微信开发者工具"。

5. 此时会自动启动微信开发者工具，并加载项目（首次运行可能需要授权，点击 "允许" 即可）。

6. 若微信开发者工具显示 "编译成功"，页面出现 Uniapp 默认的 "Hello World"，则项目运行成功。

2.项目结构解析

uniapp-miniprogram-demo/
├── pages/               # 页面文件夹（核心！所有页面放在这里）
│   └── index/           # 首页文件夹（每个页面一个单独文件夹）
│       ├── index.vue    # 首页组件（页面核心，含模板、逻辑、样式）
│       ├── index.json   # 首页配置（单独配置当前页面的导航栏、标题等）
│       ├── index.js     # 首页逻辑（若用JavaScript，可选，可合并到.vue文件）
│       └── index.wxss   # 首页样式（若需单独写微信小程序样式，可选）
├── static/              # 静态资源文件夹（存放图片、字体等，不会被编译）
├── components/          # 自定义组件文件夹（存放复用的组件，如弹窗、卡片）
├── utils/               # 工具函数文件夹（存放通用函数，如请求封装、日期格式化）
├── App.vue              # 全局根组件（控制全局样式、全局生命周期）
├── main.js              # 入口文件（初始化Vue实例、引入全局依赖）
├── pages.json           # 全局页面配置（核心！配置所有页面路径、全局导航栏、tabBar等）
├── manifest.json        # 应用配置（配置小程序AppID、名称、权限等）
└── uni.scss             # Uniapp全局样式文件（定义全局变量、混入等）

2.1 pages.json（全局页面配置）

{
  "pages": [
    // 页面路径配置：第一个页面为首页
    {
      "path": "pages/index/index",  // 页面路径（对应pages文件夹下的目录）
      "style": {
        "navigationBarTitleText": "首页",  // 当前页面导航栏标题
        "navigationBarBackgroundColor": "#ffffff",  // 导航栏背景色
        "navigationBarTextStyle": "black"  // 导航栏文字颜色（仅支持black/white）
      }
    },
    // 新增页面需在这里添加路径（例：详情页）
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ],
  "globalStyle": {
    // 全局样式配置（所有页面默认继承）
    "navigationBarBackgroundColor": "#ffffff",  // 全局导航栏背景色
    "navigationBarTextStyle": "black",          // 全局导航栏文字颜色
    "backgroundColor": "#f5f5f5"               // 页面背景色
  },
  "tabBar": {
    // 底部tab栏配置（若小程序需要多tab页面，需配置此项）
    "color": "#666666",          // 未选中tab文字颜色
    "selectedColor": "#007aff",  // 选中tab文字颜色
    "backgroundColor": "#ffffff",// tab栏背景色
    "list": [
      // tab项配置（最少2项，最多5项）
      {
        "pagePath": "pages/index/index",  // tab对应的页面路径
        "text": "首页",                   // tab文字
        "iconPath": "static/tab/home.png",// 未选中图标路径（建议尺寸：40x40px）
        "selectedIconPath": "static/tab/home-selected.png"// 选中图标路径
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tab/my.png",
        "selectedIconPath": "static/tab/my-selected.png"
      }
    ]
  }
}

2.2 manifest.json（应用配置）

关键配置：小程序 AppID（必须配置，否则无法真机调试和发布）。

1. 打开manifest.json，点击 "微信小程序配置"。

2. 填写 "AppID"：登录微信公众平台，进入 "开发> 开发设置"，复制 "小程序 AppID"（个人账号也可获取，测试号不可用于发布）。

3. 其他配置（如小程序名称、描述）可根据需求填写。

2.3 App.vue（全局根组件）

控制全局样式和全局生命周期

<template>
  <!-- 全局页面容器（所有页面都会嵌套在这个容器里） -->
  <div id="app">
    <router-view />  <!-- 页面路由出口（Uniapp自动管理，无需修改） -->
  </div>
</template>

<script setup>
// 全局生命周期钩子（Uniapp特有）
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'

// 小程序初始化完成时触发（全局只触发一次）
onLaunch(() => {
  console.log('小程序初始化完成')
})

// 小程序显示时触发（如从后台切到前台）
onShow(() => {
  console.log('小程序显示')
})

// 小程序隐藏时触发（如切到后台）
onHide(() => {
  console.log('小程序隐藏')
})
</script>

<style>
/* 全局样式（所有页面都会继承） */
/* 注意：不要在App.vue中写scoped样式，否则不会生效 */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

2.4 页面组件（如 index.vue）

每个页面的核心文件，包含 "模板（Template）""逻辑（Script）""样式（Style）" 三部分

<template>
  <!-- 模板：页面UI结构，只能有一个根节点（通常用view） -->
  <view class="index-page">
    <text class="title">Hello Uniapp+Vue3!</text>
    <button @click="handleClick">点击我</button>
  </view>
</template>

<script setup>
// 逻辑：页面交互逻辑（Vue3 setup语法糖，无需写export default）
// 1. 引入需要的API或组件（若有）
import { ref } from 'vue'

// 2. 响应式数据（Vue3特有，ref用于基本类型，reactive用于对象/数组）
const count = ref(0)  // 定义响应式变量count，初始值0

// 3. 事件处理函数
const handleClick = () => {
  count.value += 1  // 修改ref变量需用.value
  uni.showToast({ title: `点击了${count.value}次` })  // Uniapp弹窗API
}

// 4. 页面生命周期钩子（Uniapp页面特有，比Vue3生命周期更常用）
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'

// 页面加载时触发（只触发一次，可接收路由参数）
onLoad((options) => {
  console.log('页面加载，路由参数：', options)
})

// 页面显示时触发（每次页面切换到前台都会触发）
onShow(() => {
  console.log('页面显示')
})

// 页面初次渲染完成时触发（可操作DOM）
onReady(() => {
  console.log('页面渲染完成')
})
</script>

<style scoped>
/* 样式：页面样式，scoped表示样式只作用于当前页面（避免污染其他页面） */
.index-page {
  padding: 20rpx;  /* Uniapp推荐用rpx做单位（自适应不同屏幕），1rpx=0.5px */
}
.title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}
button {
  background-color: #007aff;
  color: #fff;
}
</style>