uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
一、微信小程序基础标签介绍
视图容器类
标签名 | 说明 |
---|---|
| 视图容器,相当于 HTML 中的 |
| 可滚动视图区域 |
| 滑块视图容器,用于轮播图 |
|
|
| 可移动的视图容器 |
|
|
| 覆盖在原生组件之上的文本视图 |
| 覆盖在原生组件之上的图片视图 |
基础内容类
标签名 | 说明 |
---|---|
| 文本标签,支持长按选中 |
| 富文本标签,支持 HTML 节点 |
| 进度条 |
| 图标 |
| 按钮 |
表单类
标签名 | 说明 |
---|---|
| 表单 |
| 输入框 |
| 多行输入框 |
| 复选框 |
| 复选框组 |
| 单选框 |
| 单选框组 |
| 从底部弹起的滚动选择器 |
| 内嵌页面的滚动选择器 |
| 滑动选择器 |
| 开关选择器 |
| 改进表单组件的可用性 |
| 富文本编辑器 |
导航类
标签名 | 说明 |
---|---|
| 页面链接,相当于 HTML 中的 |
| 用于跳转到插件功能页 |
媒体组件类
标签名 | 说明 |
---|---|
| 图片 |
| 视频 |
| 系统相机 |
| 实时音视频播放(已废弃) |
| 实时音视频推流(已废弃) |
地图类
标签名 | 说明 |
---|---|
| 地图 |
画布类
标签名 | 说明 |
---|---|
| 画布 |
开放能力类
标签名 | 说明 |
---|---|
| 用于展示微信开放的数据 |
| 承载网页的容器 |
| 广告 |
| 公众号关注组件 |
| 自定义广告 |
其他特殊标签
标签名 | 说明 |
---|---|
| 包装元素,不会在页面中做任何渲染,只接受控制属性 |
| 模板,可以在模板中定义代码片段,然后在不同的地方调用 |
| 小程序脚本标签,可以在 WXML 中编写 JavaScript 逻辑 |
| 包含其他 WXML 文件 |
| 导入模板 |
二、微信小程序+vue3页面生命周期及组件生命周期(页面创建到销毁)
1. 页面加载阶段
顺序 | 所属体系 | 生命周期钩子 | 说明 | 可用范围 |
---|---|---|---|---|
1 | 小程序 |
| 页面加载。接收上一个页面传递的参数,只触发一次。最佳的数据初始化位置。 | 仅页面 |
2 | 小程序 |
| 页面显示。页面每次切入前台(初次进入、从后台返回)都会触发。 | 仅页面 |
3 | Vue 3 |
| Composition API 入口。在此定义响应式数据、方法、计算属性等。此时 | 页面和组件 |
4 | Vue 3 |
| 挂载开始之前。相关的 | 页面和组件 |
5 | 小程序 |
| 页面初次渲染完成。页面视图层布局完成,可以安全地操作节点。 | 仅页面 |
6 | Vue 3 |
| 挂载完成后。组件已经挂载到页面,可以操作DOM或调用小程序节点API。 | 页面和组件 |
2. 页面运行阶段(状态更新)
顺序 | 所属体系 | 生命周期钩子 | 触发条件 | 可用范围 |
---|---|---|---|---|
1 | Vue 3 |
| 数据变化,DOM更新前。响应式数据发生变化,虚拟DOM重新渲染之前。 | 页面和组件 |
2 | Vue 3 |
| 数据变化,DOM更新后。DOM已经更新完成,可以基于更新后的DOM进行操作。 | 页面和组件 |
3. 页面隐藏/卸载阶段
顺序 | 所属体系 | 生命周期钩子 | 说明 | 可用范围 |
---|---|---|---|---|
1 | Vue 3 |
| 实例卸载之前。实例依然完全可用,适合清理非DOM相关的资源。 | 页面和组件 |
2 | Vue 3 |
| 实例卸载后。组件已从DOM移除,清理定时器、事件监听器等副作用。 | 页面和组件 |
3 | 小程序 |
| 页面隐藏。当页面跳转、切入后台时触发(如navigateTo或切换App)。 | 仅页面 |
4 | 小程序 |
| 页面卸载。当页面被销毁(如redirectTo或navigateBack)时触发。 | 仅页面 |
4. 特殊生命周期(仅小程序页面)
顺序 | 所属体系 | 生命周期钩子 | 说明 | 触发时机 |
---|---|---|---|---|
- | 小程序 |
| 下拉刷新 | 用户下拉页面时 |
- | 小程序 |
| 上拉触底 | 页面滚动到底部时 |
- | 小程序 |
| 分享 | 用户点击分享时 |
- | 小程序 |
| 页面滚动 | 页面滚动时 |
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) |
---|---|---|
页面存放目录 |
|
|
组件存放目录 |
|
|
页面注册方式 | 在 | 在 |
组件引用范围 | 全局可用,可被主包和所有分包的页面引用 | 仅限本分包内使用,通常不能被主包或其他分包引用 |
包含内容 | 小程序入口页(首页)、TabBar页面、最常用功能页面 | 特定功能模块的页面集合 (如协议页、优惠券页、购买流程页) |
加载方式 | 启动小程序时同步加载,影响首屏时间 | 访问分包路径时异步按需加载,不影响首屏时间 |
体积限制 | ≤ 2MB (所有主包代码和资源总和) | 每个分包 ≤ 2MB,所有分包总和 ≤ 20MB |
主包 (src/pages/
):放首页、分类、个人中心等TabBar页面和常用功能。用户一点开小程序就要用,必须快速加载。
分包 (src/sub_pages_XXX/
):放二级页面、功能模块(如商品详情、订单流程、优惠券列表、各种协议页)。用户不一定访问,等用到的时候再加载,为主包“减负”。
五、微信小程序为什么需要分包?
微信小程序规定了主包大小不能超过 2M ,但随着开发的更新迭代,一个小程序往往是大于 2M 的。于是小程序提供了分包的解决方法,将一个完整的的小程序,在打包时分成不同功能或需求的分包,在用户使用时再加载对应的分包。
目前小程序分包大小有以下限制:
整个小程序所有分包大小不超过 20M;单个分包/主包大小不能超过 2M。