当前位置: 首页 > news >正文

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。

http://www.dtcms.com/a/490806.html

相关文章:

  • 微信小程序报错 ubepected character `的style换行问题
  • H5封装打包小程序助手抖音快手微信小程序看广告流量主开源
  • 金华建设局网站做爰片在线看网站
  • 如何做二维码链接网站虚拟空间的网站赚钱吗
  • 营业部绩效考核方案与管理方法
  • 光刻刻蚀工艺控制要点及材料技术进展与限制
  • VPS SSH密钥登录配置指南:告别密码,拥抱安全
  • 注入“侨动力” 锻造“湘非链”
  • 做网站自己申请域名还是建站公司菏泽最好的网站建设公司
  • 网站建设方面书籍温州网站建设案例
  • 【Linux】Linux 零拷贝技术全景解读:从内核到硬件的性能优化之道
  • 微软ML.NET技术详解:从数据科学到生产部署的全栈解决方案
  • 镇江网站搜索引擎优化做外贸雨伞到什么网站
  • 网站收录一般多久沈阳建设学院
  • C++ AI 编程助手
  • 编程之python基础
  • 【系统分析师】写作框架:软件设计模式及其应用
  • leetcode 2598 执行操作后最大MEX
  • GPTBots Multi-Agent架构解析:如何通过多Agent协同实现业务智能化升级
  • 深圳网站建设智能小程序礼品网站如何做
  • 预约洗车小程序
  • 四字母域名建设网站可以吗乐清房产在线网
  • 中后台管理系统导航布局切换的技术原理解析
  • 【Android 、Java】为什么HashMap在JDK8中要将链表转换为红黑树的阈值设为8?这个数字是如何确定的?
  • Django中处理多数据库场景
  • 建设信源网站全国分类信息网站排名
  • MathType延时使用
  • Vue3 基础语法全解析:从入门到实战的核心指南
  • 莆田建站服务相馆网站建设费用预算
  • shell编程语言---数组函数