太棒了🎯！以下是完整的
📘**《uniapp 微信小程序 + Vue3 基础内容介绍》**
——系统性学习笔记 + 博客稿版本（含标签、组件生命周期、页面生命周期、条件编译与分包机制）。
已采用 Markdown 格式，可直接用于博客或教学文档。

🧭 uni-app 微信小程序 + Vue3 基础内容介绍

一文带你快速上手 uni-app + Vue3 构建多端小程序！

📌 一、uni-app 简介

uni-app 是一个使用 Vue 语法开发多端应用的框架。
👉 一套代码，可发布到：

  • 微信小程序
  • 支付宝、抖音、快手小程序
  • H5 网页
  • App（Android / iOS）

基于 Vue3 + Composition API 的 uni-app 支持更高的性能与更好的代码组织。

🧩 二、项目基本结构

├─ pages/                # 页面目录
│   ├─ index/
│   │   └─ index.vue
├─ components/           # 自定义组件
├─ static/               # 静态资源（图片、字体等）
├─ manifest.json         # 应用配置（平台信息、App图标、名称等）
├─ pages.json            # 页面路由配置（路径、导航栏等）
├─ uni.scss              # 全局样式与变量
└─ main.js               # 程序入口文件

🧱 三、常用标签与组件

🔹 页面结构标签

标签说明
<view>类似于 <div>，用于布局容器
<text>文本内容显示
<image>图片标签
<scroll-view>可滚动视图区域
<button>按钮组件
<input>输入框
<form>表单容器，用于提交数据
<navigator>页面跳转导航

⚠️ 注意：
小程序中禁止直接使用 <div>、<span> 等 HTML 标签，需使用 uni-app 提供的组件。

⚙️ 四、Vue3 组件生命周期

在 uni-app + Vue3 中，生命周期与标准 Vue3 基本一致。

生命周期钩子说明
onBeforeMount()组件挂载前执行
onMounted()组件挂载后执行（DOM 可操作）
onBeforeUpdate()响应式数据更新前执行
onUpdated()数据更新并重新渲染后执行
onUnmounted()组件卸载时执行（清理定时器/监听器）

示例：

&lt;script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件已挂载')
})

onUnmounted(() => {
  console.log('组件被销毁')
})
&lt;/script>

🌀 五、页面生命周期（uni-app 特有）

页面级别生命周期（类似微信小程序的 Page 生命周期）：

生命周期函数触发时机
onLoad()页面加载时（带参数）
onShow()页面显示（包括返回时）
onReady()页面初次渲染完成
onHide()页面隐藏（跳转或切后台）
onUnload()页面卸载（离开页面）
onPullDownRefresh()用户下拉刷新触发
onReachBottom()页面滚动到底部触发
onShareAppMessage()用户点击分享时触发

示例：

&lt;script setup>
onLoad((options) => {
  console.log('页面加载，参数为：', options)
})

onShow(() => {
  console.log('页面显示')
})
&lt;/script>

🧩 六、条件编译（一码多用）

uni-app 支持在不同平台编译时使用不同的代码逻辑。
使用 #ifdef / #ifndef 宏指令即可控制平台特定内容。

语法示例：

&lt;template>
  &lt;view>
    &lt;!-- 微信小程序专属 -->
    #ifdef MP-WEIXIN
    &lt;view>当前运行在微信小程序&lt;/view>
    #endif

    &lt;!-- H5 平台 -->
    #ifdef H5
    &lt;view>当前运行在网页端&lt;/view>
    #endif
  &lt;/view>
&lt;/template>
指令含义
#ifdef如果是指定平台则编译
#ifndef如果不是指定平台则编译
#endif条件编译结束

常见平台标识：

  • APP-PLUS
  • H5
  • MP-WEIXIN
  • MP-ALIPAY
  • MP-BAIDU
  • MP-QQ
  • MP-TOUTIAO

📦 七、分包加载机制（Subpackage）

分包 是为了减小小程序主包体积、加快首屏加载速度。
适用于大型项目或多模块应用。

📁 目录结构：

├─ pages/                   # 主包页面
│   └─ index/index.vue
├─ subpkg/                  # 分包目录
│   ├─ user/
│   │   └─ user.vue
│   └─ admin/
│       └─ dashboard.vue
└─ pages.json

⚙️ pages.json 配置：

{
  "pages": [
    { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }
  ],
  "subPackages": [
    {
      "root": "subpkg/user",
      "pages": [
        { "path": "user", "style": { "navigationBarTitleText": "用户中心" } }
      ]
    },
    {
      "root": "subpkg/admin",
      "pages": [
        { "path": "dashboard", "style": { "navigationBarTitleText": "后台管理" } }
      ]
    }
  ]
}

🚀 分包跳转：

&lt;navigator url="/subpkg/user/user">进入用户中心&lt;/navigator>

✅ 优势：

  • 提升加载速度
  • 减少主包体积（≤ 2M 限制）
  • 模块化管理页面

🧠 八、总结

模块核心要点
基本结构统一入口、pages.json 控制页面路由
组件生命周期与 Vue3 保持一致，支持 onMounted 等
页面生命周期onLoad、onShow 等小程序特有钩子
条件编译#ifdef 控制平台差异，一码多用
分包机制优化首屏性能，模块化管理

📚 推荐学习路径

  1. 官方文档：https://uniapp.dcloud.net.cn
  2. 微信开发者文档：https://developers.weixin.qq.com/miniprogram/dev/
  3. 推荐实践：
    • 使用 uni_modules 构建通用组件库
    • 尝试 Vue3 + Pinia 状态管理
    • 熟悉条件编译与分包部署流程