微信小程序--自定义组件（超详细 从新建到使用）
微信小程序–自定义组件
微信小程序官网介绍！
本文提供给急需使用自定义组件人群，以下是博主个人理解和案例！可以辅助官网来看
介绍：
从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
目录
- 微信小程序--自定义组件
- 介绍：
- 一.自定义组件（创建-使用）
- 1.创建自定义组件
- 新建components文件夹
- 文件分类
- 组件新建Components（新建components的才是组件）
- 2.声明组件
- 3.使用组件
- 二， 自定义组件Component
- 三，组件的样式
- 1，样式的隔离
- options —— 样式隔离
- 2，externalClasses ——外部类
- 四，组件的插槽
- 1，默认插槽
- 2，命名多插槽
- 五，组件的传参
- 六，自定义组件生命周期
- 1，组件的生命周期 —— lifetimes
- 1，创建： created
- 2，挂载： attached
- 3，卸载： detached
- 2，页面的生命周期 —— pageLifetimes
- 1，show：显示
- 2，hide：后台运行
- 3，resize：尺寸变化
- 七，定义组件 并 使用 + 效果图 —— item
- 1，组件 item代码：
- 2，com页面使用 item组件/ com页面代码：
- 3，效果图：
- 八，自定义顶部导航栏
- 1，定义组件 nav 并使用 + 效果图
- 1， images 图标 文件
- 2，nav 组件代码
- nav.js
- nav.json
- nav.wxml
- nav.wxss
- 3，navpa 页面代码
- navpa.js
- navpa.json
- navpa.wxml
- navpa.wxss
- 效果图：
一.自定义组件（创建-使用）
1.创建自定义组件
类似页面，一个自定义组件由json ,wxml,wxss,js 4个文件组成
1、在根目录下自定义一个components文件夹，用来存放自定义的组件。
2、再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。、
新建components文件夹
文件分类
组件新建Components（新建components的才是组件）
在这里插入图片描述
2.声明组件
在需要引入组件的页面的json文件中，在usingComponents里面写键值对，写组件名和路径
{"usingComponents": {//引用组件"cell": "/components/cell/cell","item": "/components/item/item"}
}
3.使用组件
在需要引入组件的页面的wxml文件中，添加组件标签
<item>使用item自定义组件</item>
效果：
二， 自定义组件Component
生命周期：lifetimes
组件的挂载： attach
数据：data
方法：methods
属性（只读）：properties
外部类：externalClasses
选项：options
多个插槽：multipleSlots:true
组件的样式格式： styleIsolation:“isolated”
三，组件的样式
组件对应 wxss 文件的样式，只对组件 wxml 内的节点生效。编写组件样式时，需要注意以下几点：
1，组件和引用组件的页面不能使用 id 选择器（#a）、属性选择器（[a]）和标签名选择器，请改用 class 选择器。
2，组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
3，子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
4，继承样式，如 font 、 color ，会从组件外继承到组件内。
5，除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。
除此以外，组件可以指定它所在节点的默认样式，使用 :host 选择器（需要包含基础库 1.7.2 或更高版本的开发者工具支持）。
1，样式的隔离
组件：cell.js
// components/cell/cell.js
Component({// 选项：options:{// 样式隔离：apply-shared 父影响子，shared父子相互影响， isolated相互隔离styleIsolation:"isolated",// 允许多个插槽multipleSlots:true,},
options —— 样式隔离
styleIsolation : " 值 ",
值：
apply-shared ：父影响子
shared：父子相互影响
isolated：相互隔离
2，externalClasses ——外部类
// 通过组件的外部类实现父组件控制子自己的样式externalClasses:["cell-class"],
在组件：cell.js 中定义外部类
<view class="cell cell-class">我是cell组件</view>
使用组件
<cell cell-class="mycell"></cell>
在页面设组件样式
.mycell{line-height: 120rpx !important;color:#F70;
}
四，组件的插槽
1，默认插槽
父组件
<cell><text>插槽内容</text>
</cell>
子组件
<view><slot></slot></view>
2，命名多插槽
父组件com.wxml（页面）
<cell><text slot="pre">
微信小程序--自定义组件（超详细 从新建到使用）相关推荐
- 【小程序】微信小程序自定义组件Component详细总结
1- 前言 在本文中你将收获 小程序如何使用自定义组件 自定义组件之间的传值 自定义组件中插槽的使用 2- 组件文件新建 2.1 定义组件 在根目录新建components文件夹,建立cell 文件夹 ...
- 小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下 微信小程序自定义组件 微信小程序支持自定义组件 下方的目录 其中,components为组件目录,nodemodule ...
- 一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件 更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
- 微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
- 微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
- 微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注 为何存在组件 组件间的关系 使用rel ...
- 微信小程序自定义组件子传父详解（多图）
微信小程序自定义组件子传父详解 前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
- 微信小程序自定义组件的基本使用
微信小程序自定义组件的基本使用 组件与模块类似,实现了功能的复用,提高开发速率,减少代码量 在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者 导航栏等 . ...
- 基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条 最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
最新文章
- Using Regular Expression to validate a Guid
- 【深度学习入门到精通系列】CIFAR-10数据集说明
- Matlab 非线性规划问题模型代码
- 团队章程---促进团队合作
- google怎么做（3.搜索结果重排序)
- css background 充满自适应_剖析一些经典的CSS布局问题，为前端开发+面试保驾护航...
- phpexcel 获取工作簿名称_工作分享 | Excel快速汇总考勤
- 中文整合包_案例 | 美研市场营销和整合营销专业1620Fall 580+申请实例（含MS+PHD）...
- Oracle AWR ASH
- java 常量池溢出_Java方法区和运行时常量池溢出问题分析（转）
- java中图片与像素矩阵转换,java - Java中具有矩阵乘法的图片转换不起作用 - 堆栈内存溢出...
- android 评分条 RatingBar 使用及自定义
- java给list排序_java 怎么将List里面数据排序
- FFmpegFFplay常用命令汇总
- DiskGenius无损调整C盘容量方法扩大c盘
- alps interview
- 手机怎样设置垃圾短信拦截？
- 程序员写个人技术博客的价值与意义
- 手把手带你抓取智联招聘的“数据分析师”岗位！
- 根据三角形三边长求面积 c++
热门文章