微信小程序组件详解

最新推荐文章于 2024-05-16 17:41:03 发布
最新推荐文章于 2024-05-16 17:41:03 发布
阅读量1.1k 收藏 21
点赞数 19
分类专栏： 微信小程序开发 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741577/article/details/136577577
版权

文章目录

一、组件的创建

image.png
image.png

二、组件的引入

image.png

2.1. 局部引入

image.png

2.2. 全局引用组件

image.png

2.3. 全局引用VS局部引用

image.png

三、组件和页面的区别

image.png

四、组件样式隔离

image.png

image.png

4.1. 组件样式隔离的注意点

image.png

4.2. 修改组件的样式隔离选项

image.png

image.png

4.2.1. stylelsolation 的可选值

image.png

五、组件的数据方法和属性

5.1. data 数据

image.png

5.2. methods 方法

image.png

5.3. properties 属性

image.png

5.4. data和 properties 的区别

image.png

5.5. 使用 setData 修改 properties 的值

image.png

image.png

六、组件的数据监听器

6.1. 什么是数据监听器

image.png

image.png

6.2. 数据监听器的基本用法

image.png

image.png

6.3. 监听对象属性的变化

image.png

七、组件的纯数据字段

7.1. 什么是纯数据字段

image.png

7.2. 使用规则

image.png

image.png

八、组件的生命周期

8.1. 组件全部的生命周期函数

image.png

8.2. 组件主要的生命周期函数

image.png

8.3. lifetimes 节点声明生命周期函数

image.png

image.png

8.4. 组件中使用所在页面的生命周期

image.png

8.4.1. pageLifetimes 节点

组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中，示例代码如下:

image.png

九、组件的插槽

image.png

9.1. 单个插槽

在小程序中，默认每个自定义组件中只允许使用一个 <slot> 进行占位，这种个数上的限制叫做单个插槽。
image.png

9.2. 启用多个插槽

在小程序的自定义组件中，需要使用多 <slot> 插槽时，可以在组件的js文件中，通过如下方式进行启用。
image.png

9.3. 定义多个插槽

可以在组件的.wxml中使用多个 <slot> 标签，以不同的 name 来区分不同的插槽。示例代码如下:

image.png

9.4. 使用多个插槽

image.png

十、父子组件之间的通信的三种方式

image.png

10.1. 属性绑定 （父传子）

image.png

10.2. 事件绑定 （子传父）

image.png

image.png

image.png

image.png
image.png

image.png

10.3. 获取组件实例

image.png

image.png

十一、自定义组件 - behaviors

11.1. 什么是behaviors

image.png

11.2. behaviors的工作方式

image.png

11.3. 创建 behavior

image.png

image.png

11.4. 导入并使用 behavior

image.png

image.png

11.5. behavior中所有可用的节点

image.png

11.6. 同名字段的覆盖和组合规则

image.png

关于详细的覆盖和组合规则，大家可以参考微信小程序官方文档给出的说明:
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

扶苏1002
关注
  • 19
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序的组件
yang792508465的博客
03-25 8190
第五单元 小程序组件 一、昨日知识点回顾 1.小程序导航 2.上拉加载和下拉刷新的配置 3.小程序网络请求 4.异步api的promise化 二、本单元知识点概述 （Ⅰ）指定教材 无 （Ⅱ）知识点概述 （Ⅲ）教学时长 共4课时，180分钟 三、本单元教学目标 （Ⅰ）重点知识目标 1.组件的创建 2.组件通信 （Ⅱ）能力目标 1.掌握组件的创建 2.掌握组件通信 四、本单元知识详讲 5.1. 小程序组件 5.1.1 组件创建 在项目的根目录中，鼠标右键，创建 c
微信小程序组件详解《一》视图容器
03-29
小程序给出的视图容器组件有三个：、和</swiper>： 1、 视图容器 相当于html中的标签，有四个属性： (此图片来源于网络，如有侵权，请联系删除! ) hover和hover-class与点击效果有关：hover设置是否启用点击效果，...
微信小程序之组件（入门）
qq_38776443的博客
06-10 161
自定义组件 1、json文件，自定义组件声明 { "component": true } 2、js文件 Component({ properties: {//自定义属性 // 这里定义了innerText属性，属性值可以在组件使用时指定 innerText: { type: String, value: 'default value', } }, data: { // 这里是一些组件内部数据 someData: {} },
3.微信小程序之常用组件篇
最新发布
weixin_41993336的博客
05-16 1157
在开 Web 网站的时候：页面的结构由HTML进行编写，例如：经常会用到divpspanimga等标签页面的样式由CSS进行编写，例如：经常会采用.class#idelement等选择器但在小程序中不能使用HTML标签，也就没有DOM和BOM，同时仅仅支持部分CSS选择器不过不用担心，小程序中提供了同样的角色：其中WXML充当的就是类似HTML的角色，只不过在WXML中没有divpspanimga等标签，在WXML中需要使用 小程序提供的viewtextimagenavigator。
微信小程序常用组件
weixin_53500514的博客
04-30 7263
一、小程序组件分类 小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类，分别是： ① 视图容器 ② 基础内容 ③ 表单组件 ④ 导航组件 ⑤ 媒体组件 ⑥ map 地图组件 ⑦ canvas 画布组件 ⑧ 开放能力 ⑨ 无障碍访问 二、小程序常用组件 ① view 普通视图区域 类似于 HTML 中的 div，是一个块级元素 常用来实现页面的布局效果 ② scroll-view 可滚动的视图区域 常用来实现滚动列表效果 ③
微信小程序的常用组件
一指流沙的博客
07-11 5823
目录一、常用的视图容器类组件① view② scroll-view③ swiper 和 swiper-item二、常用的基础内容组件① text② rich-text三、其它常用组件 ① button② image③ navigator 属性类型默认值说明indicator-dotsbooleanfalse是否显示面板指示点indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色indicator-active-colorcolor#000000当前选中的指示点颜色autopla
微信小程序 常用组件
MW
05-21 3208
微信小程序组件的官网地址： https://developers.weixin.qq.com/miniprogram/dev/component/ 一、View 二、text 三、image 四、button 五、swiper 六、navigator 七、rich-text 八、ircon 九、radio 十、checkbox
微信小程序 video组件详解
01-20
微信小程序的`video`组件是用于在小程序中嵌入视频播放功能的重要元素，它使得开发者能够在用户界面上展示视频内容，无论是来自网络还是本地存储。本文将深入解析`video`组件的主要属性及其使用方法。 首先，`video...
微信小程序日历组件calendar详解及实例
08-30
微信小程序日历组件calendar详解及实例 微信小程序日历组件calendar是一种常用的日期选择控件，提供了多种日期选择方式，满足不同场景的需求。在本文中，我们将详细介绍微信小程序日历组件calendar的使用方法和实例...
详解微信小程序中组件通讯
01-03
这篇主要讲组件通讯 （1）父组件向子组件传值： <header title='{{title}}' bind:fn='fn' id='header'></header> 通过title='{{title}}’传向子组件向子组件传递参数 子组件接收参数： Component({ properties: {...
微信小程序 loading 组件实例详解
09-01
微信小程序的`loading`组件是开发者在构建应用时经常用到的一个组件，它主要用于表示数据加载状态，给用户展示一个正在处理的过程，增加用户体验的友好性。本篇将深入讲解`loading`组件的实例和使用方法。 ### 1. `...
【微信小程序】创建动态组件和引用的方法
业余丰富各种技术栈
11-01 2497
微信小程序创建动态组件和引用的方法
微信小程序-组件生命周期方法
Neo
05-21 237
官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html 正如官方显示组件的生命周期中常用的如下： !> 组件的生命周期方法编写的位置与页面的生命周期是不一样的，组件生命周期声明是写在 lifetimes 当中 官方文档：https://developers.weixin.qq.c...
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
m0_63622279的博客
07-11 7797
scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件，swiper为轮播图的容器，swiper-item为轮播图的每一项。官网地址【swiper组件】
微信小程序的生命周期
qq_51580006的博客
05-05 2490
生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。我们可以把每个小程序运行的过程，也概括为生命周期：小程序的启动，表示生命周期的开始小程序的关闭，表示生命周期的结束生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在onLoad生命周期函数中初始化页面的数据。
微信小程序自定义组件data,properties,methods节点的介绍
qq_44821064的博客
06-15 800
微信 小程序中的.js文件中的节点介绍。
微信小程序学习笔记（四）——自定义组件
Jackson_Mseven的博客
07-19 524
数据监听器用于监听和响应任何属性和数据字段的变化，从而执行待定的操作。它的作用类似于 vue 中的 watch 侦听器。'字段A, 字段B' : function(字段 A 的新值 , 字段 B 的新值) {纯数据字段指的是那些不用于界面渲染的 data 字段。应用场景：有些情况下，某些 data 中的字段即不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。好处：纯数据字段有助于提升页面更新的性能。有时，
微信小程序开发学习笔记②组件和API
tutgxu的博客
01-01 1541
微信小程序开发组件与API
《九》微信小程序中的自定义组件
花铛
10-23 2401
自定义组件：可复用的 WXML、WXSS、JS、JSON。behavior：可复用的组件 JS（属性、数据、生命周期函数和方法等）。wxs：可复用的普通 JS。template 模板：可复用的 WXML。自定义组件类似于页面，也是由 wxml、wxss、json、js 4个文件组成。在 json 文件中进行自定义组件声明：将 component 字段设为 true 可将这一组文件设为自定义组件。在 wxml 文件中编写组件模板；在 wxss 文件中编写组件样式；在 js 文件中使用。
微信小程序input详解
04-06
微信小程序input是一种常见的表单组件，用于接收用户输入的数据。本文将对微信小程序input的常用属性进行详细解释。 常用属性： 1. type: 输入框类型，可选值有text、number、idcard、digit、textarea、password、date、time、search、email、url、color等。 2. value: 输入框的初始值。 3. placeholder: 输入框的提示信息。 4. placeholder-style: 输入框提示信息的样式。 5. placeholder-class: 输入框提示信息的类名，用于自定义样式。 6. disabled: 是否禁用输入框，可选值为true、false。 7. maxlength: 输入框的最大输入长度。 8. cursor-spacing: 输入框的光标与键盘的距离。 9. cursor: 输入框的光标位置。 10. focus: 是否聚焦输入框，可选值为true、false。 11. auto-height: 是否自动增高输入框。 12. adjust-position: 是否自动调整输入框位置。 13. hold-keyboard: 是否保持键盘弹起状态。 14. confirm-type: 确认按钮的类型，可选值有done、next、search、go、send等。 15. confirm-hold: 确认按钮是否保持键盘打开状态。 16. bindinput: 输入框输入时触发的事件。 17. bindfocus: 输入框聚焦时触发的事件。 18. bindblur: 输入框失焦时触发的事件。 19. bindconfirm: 确认按钮点击时触发的事件。 例子： ```html <view> <input type="text" placeholder="请输入用户名" value="{{username}}" bindinput="onUsernameInput" /> <input type="password" placeholder="请输入密码" value="{{password}}" bindinput="onPasswordInput" /> </view> ``` ```js Page({ data: { username: '', password: '' }, onUsernameInput(e) { this.setData({ username: e.detail.value }) }, onPasswordInput(e) { this.setData({ password: e.detail.value }) } }) ``` 以上是微信小程序input的常用属性和例子，希望对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值