uniapp微信小程序+vue3基础内容介绍~（含标签、组件生命周期、页面生命周期、条件编译（一码多用）、分包））

一、微信小程序基础标签介绍

视图容器类

标签名	说明
<view>	视图容器，相当于 HTML 中的 div
<scroll-view>	可滚动视图区域
<swiper>	滑块视图容器，用于轮播图
<swiper-item>	swiper的子项，每个滑块项
<movable-view>	可移动的视图容器
<movable-area>	movable-view的移动区域
<cover-view>	覆盖在原生组件之上的文本视图
<cover-image>	覆盖在原生组件之上的图片视图

基础内容类

标签名	说明
<text>	文本标签，支持长按选中
<rich-text>	富文本标签，支持 HTML 节点
<progress>	进度条
<icon>	图标
<button>	按钮

表单类

标签名	说明
<form>	表单
<input>	输入框
<textarea>	多行输入框
<checkbox>	复选框
<checkbox-group>	复选框组
<radio>	单选框
<radio-group>	单选框组
<picker>	从底部弹起的滚动选择器
<picker-view>	内嵌页面的滚动选择器
<slider>	滑动选择器
<switch>	开关选择器
<label>	改进表单组件的可用性
<editor>	富文本编辑器

导航类

标签名	说明
<navigator>	页面链接，相当于 HTML 中的 a标签
<functional-page-navigator>	用于跳转到插件功能页

媒体组件类

标签名	说明
<image>	图片
<video>	视频
<camera>	系统相机
<live-player>	实时音视频播放（已废弃）
<live-pusher>	实时音视频推流（已废弃）

地图类

标签名	说明
<map>	地图

画布类

标签名	说明
<canvas>	画布

开放能力类

标签名	说明
<open-data>	用于展示微信开放的数据
<web-view>	承载网页的容器
<ad>	广告
<official-account>	公众号关注组件
<ad-custom>	自定义广告

其他特殊标签

标签名	说明
<block>	包装元素，不会在页面中做任何渲染，只接受控制属性
<template>	模板，可以在模板中定义代码片段，然后在不同的地方调用
<wxs>	小程序脚本标签，可以在 WXML 中编写 JavaScript 逻辑
<include>	包含其他 WXML 文件
<import>	导入模板

二、微信小程序+vue3页面生命周期及组件生命周期（页面创建到销毁）

1. 页面加载阶段

顺序	所属体系	生命周期钩子	说明	可用范围
1	​​小程序​​	onLoad	​​页面加载​​。接收上一个页面传递的参数，只触发一次。最佳的数据初始化位置。	仅页面
2	​​小程序​​	onShow	​​页面显示​​。页面每次切入前台（初次进入、从后台返回）都会触发。	仅页面
3	​​Vue 3​​	setup()	​​Composition API 入口​ ​。在此定义响应式数据、方法、计算属性等。此时 this为 undefined。	页面和组件
4	​​Vue 3​​	onBeforeMount	​​挂载开始之前​ ​。相关的 render函数首次被调用，但尚未生成DOM。	页面和组件
5	​​小程序​​	onReady	​​页面初次渲染完成​​。页面视图层布局完成，可以安全地操作节点。	仅页面
6	​​Vue 3​​	onMounted	​​挂载完成后​​。组件已经挂载到页面，可以操作DOM或调用小程序节点API。	页面和组件

2. 页面运行阶段（状态更新）

顺序	所属体系	生命周期钩子	触发条件	可用范围
1	​​Vue 3​​	onBeforeUpdate	​​数据变化，DOM更新前​​。响应式数据发生变化，虚拟DOM重新渲染之前。	页面和组件
2	​​Vue 3​​	onUpdated	​​数据变化，DOM更新后​​。DOM已经更新完成，可以基于更新后的DOM进行操作。	页面和组件

3. 页面隐藏/卸载阶段

顺序	所属体系	生命周期钩子	说明	可用范围
1	​​Vue 3​​	onBeforeUnmount	​​实例卸载之前​​。实例依然完全可用，适合清理非DOM相关的资源。	页面和组件
2	​​Vue 3​​	onUnmounted	​​实例卸载后​​。组件已从DOM移除，清理定时器、事件监听器等副作用。	页面和组件
3	​​小程序​​	onHide	​​页面隐藏​​。当页面跳转、切入后台时触发（如navigateTo或切换App）。	仅页面
4	​​小程序​​	onUnload	​​页面卸载​​。当页面被销毁（如redirectTo或navigateBack）时触发。	仅页面

4. 特殊生命周期（仅小程序页面）

顺序	所属体系	生命周期钩子	说明	触发时机
-	​​小程序​​	onPullDownRefresh	​​下拉刷新​​	用户下拉页面时
-	​​小程序​​	onReachBottom	​​上拉触底​​	页面滚动到底部时
-	​​小程序​​	onShareAppMessage	​​分享​​	用户点击分享时
-	​​小程序​​	onPageScroll	​​页面滚动​​	页面滚动时

5、代码示例

<template>
  <view>
    <text>{{ count }}</text>
    <button @click="count++">增加</button>
  </view>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
  setup() {
    console.log('3. setup - 初始化数据和方法')
    const count = ref(0)
    
    onBeforeMount(() => console.log('4. onBeforeMount - 挂载前'))
    onMounted(() => console.log('6. onMounted - 挂载完成'))
    onBeforeUpdate(() => console.log('onBeforeUpdate - 更新前'))
    onUpdated(() => console.log('onUpdated - 更新完成'))
    onBeforeUnmount(() => console.log('onBeforeUnmount - 卸载前'))
    onUnmounted(() => console.log('onUnmounted - 卸载完成'))
    
    return { count }
  },
  
  onLoad(options) {
    console.log('1. onLoad - 页面加载，参数:', options)
  },
  
  onShow() {
    console.log('2. onShow - 页面显示')
  },
  
  onReady() {
    console.log('5. onReady - 页面渲染完成')
  },
  
  onHide() {
    console.log('onHide - 页面隐藏')
  },
  
  onUnload() {
    console.log('onUnload - 页面卸载')
  },
  
  onPullDownRefresh() {
    console.log('下拉刷新触发')
  }
}
</script>

**三、条件编译语句：**跨端兼容（实现一码多用）

3.1、条件编译语句，不同平台在编译出包后已经是不同代码。

<!-- #ifdef MP -->
<!-- 使用组件-->
<search></search>
<!-- #endif -->

3.2、也可使用uni-app提供的异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。（不建议使用，影响性能）

uni.getSystemInfo({
    success: (res) => {
        switch(res.osName){
            case 'ios':
                console.log('运行在ios中')
                break;
            case 'android':
                console.log('运行在android中')
                break;
            default:
                console.log('运行在开发者工具中')
        }
 
    }
})

四、主包与分包理解

特性	主包 (Main Package)	分包 (Subpackage)
​​页面存放目录​​	src/pages/	src/sub_pages_XXX/pages/(如 sub_pages_agreement/pages/)
​​组件存放目录​​	src/components/(全局公用组件)	src/sub_pages_XXX/components/(分包私有组件)
​​页面注册方式​​	在 pages.json的 "pages"数组中​​直接注册​​	在 pages.json的 "subPackages"下的 "pages"数组中注册
​​组件引用范围​​	​​全局可用​​，可被主包和所有分包的页面引用	​​仅限本分包内使用​​，通常不能被主包或其他分包引用
​​包含内容​​	小程序入口页(首页)、TabBar页面、最常用功能页面	特定功能模块的页面集合 (如协议页、优惠券页、购买流程页)
​​加载方式​​	启动小程序时​​同步加载​​，影响首屏时间	访问分包路径时​​异步按需加载​​，不影响首屏时间
​​体积限制​​	​​≤ 2MB​​ (所有主包代码和资源总和)	每个分包 ​​≤ 2MB​​，所有分包总和 ​​≤ 20MB​

主包 (src/pages/)​​：放​​首页、分类、个人中心​​等TabBar页面和常用功能。用户一点开小程序就要用，必须快速加载。

​​分包 (src/sub_pages_XXX/)​​：放​​二级页面、功能模块​​（如商品详情、订单流程、优惠券列表、各种协议页）。用户不一定访问，等用到的时候再加载，为主包"减负"。

五、微信小程序为什么需要分包？

微信小程序规定了主包大小不能超过 2M ，但随着开发的更新迭代，一个小程序往往是大于 2M 的。于是小程序提供了分包的解决方法，将一个完整的的小程序，在打包时分成不同功能或需求的分包，在用户使用时再加载对应的分包。

目前小程序分包大小有以下限制：

整个小程序所有分包 大小不超过 20M ；单个分包/主包 大小不能超过2M。