-
微信小程序--自定义组件（超详细 从新建到使用）
微信小程序–自定义组件
本文提供给急需使用自定义组件人群，以下是博主个人理解和案例！可以辅助官网来看
介绍：
从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。目录
一.自定义组件（创建-使用）
1.创建自定义组件
类似页面，一个自定义组件由json ,wxml,wxss,js 4个文件组成
1、在根目录下自定义一个components文件夹，用来存放自定义的组件。
2、再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。、
新建components文件夹
文件分类
组件新建Components（新建components的才是组件）
在这里插入图片描述2.声明组件
在需要引入组件的页面的json文件中，在usingComponents里面写键值对，写组件名和路径
{ "usingComponents": { //引用组件 "cell": "/components/cell/cell", "item": "/components/item/item" } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
3.使用组件
在需要引入组件的页面的wxml文件中，添加组件标签
<item>使用item自定义组件</item>- 1
效果：
二， 自定义组件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, },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
options —— 样式隔离
styleIsolation : " 值 ",
值：
apply-shared ：父影响子
shared：父子相互影响
isolated：相互隔离2，externalClasses ——外部类
// 通过组件的外部类实现父组件控制子自己的样式 externalClasses:["cell-class"],- 1
- 2
在组件：cell.js 中定义外部类
<view class="cell cell-class">我是cell组件</view>- 1
使用组件
<cell cell-class="mycell"></cell>- 1
在页面设组件样式
.mycell{ line-height: 120rpx !important; color:#F70; }- 1
- 2
- 3
- 4
四，组件的插槽
1，默认插槽
父组件
<cell> <text>插槽内容</text> </cell>- 1
- 2
- 3
子组件
<view><slot></slot></view>- 1
2，命名多插槽
父组件com.wxml（页面）
<cell> <text slot="pre"> 🚒</text> <text slot="next">🥗</text> </cell>- 1
- 2
- 3
- 4
子组件 cell.js
// 允许多个插槽 options:{ multipleSlots:true}- 1
- 2
子组件 cell.wxml
<view> <slot name="pre"></slot> <slot name="next"></slot> </view>- 1
- 2
- 3
- 4
允许多个插槽
options:{ multipleSlots:true}
五，组件的传参
父传子
property
子传参父
triggerEvent
组件 cell.js
/** * 组件的方法列表 */ methods: { tapHd(){ this.setData({count:this.data.count+1}) // 发送一个事件 this.triggerEvent("cellclick",this.data.count) } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
组件 cell.wxml 使用插槽
<view class="cell" bindtap="tapHd"> <text>{{title}}</text> <text>{{count}}</text> </view>- 1
- 2
- 3
- 4
六，自定义组件生命周期
1，组件的生命周期 —— lifetimes
1，创建： created
此时还不能调用 setData
2，挂载： attached
3，卸载： detached
2，页面的生命周期 —— pageLifetimes
1，show：显示
2，hide：后台运行
3，resize：尺寸变化
七，定义组件 并 使用 + 效果图 —— item
props
title：标题
icon ：图标
tip ：提示
url ：跳转连接
open-type ： 打开的方式slot
right
left ：插槽event
click ：事件
外部类itemClass ：整体
titleClass ：标题1，组件 item代码：
item.js 代码：
// components/item/item.js Component({ options:{ multipleSlots:true }, externalClasses:["itemclass"], /** * 组件的属性列表 */ properties: { // 标题 title:{ type:String, value:"" }, // 显示右侧插槽 showrslot:{ type:Boolean, value:false, }, // 图标 icon:{ type:String, value:"" }, tip:{ type:String, value:"", }, badge:{ type:[Boolean,Number], value:false }, url:{ type:String, value:"" }, openType:{ type:String, value:"navigate" } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { itemclick(e){ console.log(e); //发送一个事件 this.triggerEvent("itemclick",e.detail) } } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
组件 item.json
{ "component": true, "usingComponents": {} }- 1
- 2
- 3
- 4
组件 item.wxml
<navigator class="item itemclass" url="{{url}}" open-type="{{openType}}" bindtap="itemclick"> <view class="icon" wx:if="{{icon}}"> <image src="{{icon}}" mode="aspectFill"></image> </view> <view class="content"> <view class="title"> <view class="title" wx:if="{{title}}">{{title}}</view> <slot name="title" wx:else ></slot> </view> <view class="right" wx:if="{{!showrslot}}"> <view class="tip">{{tip}}</view> <view class="badge" wx:if="{{badge}}"> <view wx:if="{{badge===true}}" class="dot"> </view> <view wx:else class="redbadeg"> {{badge}} </view> </view> <view class="arrow"></view> </view> <slot name="right" wx:else></slot> </view> </navigator> <!-- icon 图标 conent 内容 title 标题 right 右侧 tip 提示 badge 红点 arrow 箭头 -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
组件 item.wxss 代码：
/* components/item/item.wxss */ .item{ line-height: 88rpx; display: flex; align-items: center; justify-content: space-between; } .icon{ margin-left: 30rpx; margin-right: 30rpx; height: 100%; display: flex; align-items: center; } .icon image{ width: 60rpx; height: 60rpx; } .content{ padding: 0 30rpx; border-bottom: 1rpx solid #ccc; display: flex; flex:1; } .title{ flex:1; color:#333; font-size: 32rpx; } .right{ display: flex; align-items: center; } .right .arrow{ height: 30rpx; width: 30rpx; border-top:3rpx solid #999; border-right: 3rpx solid #999; transform: rotate(45deg); } .tip{ color:#999; font-size: 24rpx; } .dot{ height: 14rpx; width: 14rpx; background-color: #f00; border-radius: 12rpx; margin-left: 15rpx; } .redbadeg{ font-size: 18rpx; color:#fff; border-radius: 18rpx; background-color: #f00; max-height: 30rpx; width: 30rpx; line-height: 30rpx; text-align: center; margin-left: 15rpx; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
2，com页面使用 item组件/ com页面代码：
com.js 代码如下：
// pages/com/com.js Page({ /** * 页面的初始数据 */ data: { }, cellHd(e){ console.log(e); wx.showToast({ title: '你点击了'+e.detail, }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
com.json 代码如下：
{ "usingComponents": { "cell":"/components/cell/cell", "item":"/components/item/item" } }- 1
- 2
- 3
- 4
- 5
- 6
com.wxml 代码如下：
<item title="支付" icon="/images/icon01.png"></item> <item title="相册" icon="/images/icon02.png"></item> <item title="支付" ></item> <item title="消息" icon="/images/icon02.png" badge="{{true}}" tip="3条未读"></item> <item title="消息" icon="/images/icon02.png" badge="{{12}}" tip="12条未读"></item> <item title="消息" icon="/images/icon02.png" showrslot="{{true}}"> <switch checked="true" slot="right"></switch> </item> <item> <view slot="title">插槽title</view> </item> <item title="新闻" icon="/images/icon02.png" url="/pages/yidian/yidian" open-type="switchTab"> </item> <item title="首页" icon="/images/icon02.png" url="/pages/home/home" > </item> <item title="消息" icon="/images/icon02.png" showrslot="{{true}}" itemclass="myitem"> <switch checked="true" slot="right"></switch> </item> <!-- <view class="title">自定义组件</view> <cell bind:cellclick="cellHd" title="中美两国和平相处" num="{{5}}"></cell> <cell bind:cellclick="cellHd" title="阶级不同立场也不同" ></cell> --> <!-- <cell cell-class="mycell"> <text slot="pre">💖</text> <text slot="next">🥗</text> <text>新冠肺炎消失了</text> <text>假的</text> </cell> <cell> <text slot="next">🚒</text> <text slot="pre">💥</text> <text>工资10倍</text> <text>鸡蛋50倍</text> </cell> -->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
com.wxss 代码如下：
/* pages/com/com.wxss */ .title{ line-height: 88rpx; background-color: #f0f0f0; padding: 0 15rpx; } .cell{ color:red; } .mycell{ line-height: 120rpx !important; color:#F70; } .myitem{ line-height: 200rpx !important; background-color: #F0f0f0; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
3，效果图：
八，自定义顶部导航栏
wx.getMenuButtonBoundingClientRect() —— 胶囊的边界
wx.getSystemInfoSync(); —— 系统信息（状态栏的高度）配置自定义状态栏
1，定义组件 nav 并使用 + 效果图
1， images 图标 文件
两个图标
back.svg<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="745"><path d="M670.954667 86.826667L269.44 488.362667a32 32 0 0 0-2.090667 42.965333l2.090667 2.282667L670.933333 935.168a8.533333 8.533333 0 0 0 6.037334 2.496h66.368a8.533333 8.533333 0 0 0 6.037333-14.570667L337.28 511.018667 749.397333 98.901333a8.533333 8.533333 0 0 0-6.037333-14.570666h-66.346667a8.533333 8.533333 0 0 0-6.058666 2.496z" fill="#fff" p-id="746"></path></svg>- 1
home.svg
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1408"><path d="M149.333333 960a85.333333 85.333333 0 0 1-85.333333-85.333333V331.221333a85.333333 85.333333 0 0 1 48.64-77.056l362.666667-172.693333a85.333333 85.333333 0 0 1 73.386666 0l362.666667 172.693333A85.333333 85.333333 0 0 1 960 331.221333V874.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H149.333333zM505.386667 138.24l-2.56 1.024-362.666667 172.693333a21.333333 21.333333 0 0 0-11.989333 16.554667L128 331.221333V874.666667a21.333333 21.333333 0 0 0 18.837333 21.184L149.333333 896h192V661.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h170.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v234.666667h192a21.333333 21.333333 0 0 0 21.184-18.837333L896 874.666667V331.221333a21.333333 21.333333 0 0 0-9.792-17.941333l-2.368-1.322667-362.666667-172.693333a21.333333 21.333333 0 0 0-15.786666-1.024zM597.333333 640h-170.666666a21.333333 21.333333 0 0 0-21.184 18.837333L405.333333 661.333333v234.666667h213.333334V661.333333a21.333333 21.333333 0 0 0-18.837334-21.184L597.333333 640z" fill="#fff" p-id="1409"></path></svg>- 1
2，nav 组件代码
nav.js
// components/nav/nav.js Component({ /** * 组件的属性列表 */ properties: { "title":{ type:"string", value:"" }, "color":{ type:"string", value:"#fff" } }, /** * 组件的初始数据 */ data: { statusBarHeight:20, barHeight:44, pagesLen:0, }, lifetimes:{ attached(){ // 获取系统信息 var info = wx.getSystemInfoSync(); console.log(info); // 更新状态栏的高度 this.setData({statusBarHeight:info.statusBarHeight}) // 胶囊的位置 const res = wx.getMenuButtonBoundingClientRect() console.log(res); // 标题栏可以使用的宽度（排除右侧胶囊的位置） this.setData({titleWidth:res.left}); // 标题栏高度 var barHeight = res.height+(res.top-info.statusBarHeight)*2; this.setData({barHeight}); // 获取当前页 var pages = getCurrentPages(); console.log(pages); //更新页面的长度 this.setData({pagesLen:pages.length}) } }, /** * 组件的方法列表 */ methods: { goBack(){ wx.navigateBack() }, goHome(){ wx.navigateBack({ // 返回历史的长度为总页面数 delta: this.data.pagesLen, }) } } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
nav.json
{ "component": true, "usingComponents": {} }- 1
- 2
- 3
- 4
nav.wxml
<!--components/nav/nav.wxml--> <view class="nav" style="padding-top: {{statusBarHeight}}px; height: {{barHeight}}px;"> <view class="bar" style="width: {{titleWidth}}px; height: {{barHeight}}px; color: {{color}};"> <view class="btn"> <view class="back" wx:if="{{pagesLen>1}}" bindtap="goBack" ><image src="./images/back.svg" mode="aspectFill"></image></view> <view class="home" bindtap="goHome"><image src="./images/home.svg" mode="aspectFit"></image></view> </view> {{title}} {{pagesLen}} </view> </view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
nav.wxss
/* components/nav/nav.wxss */ .nav{ background-image: linear-gradient(90deg, rgb(96, 197, 236), rgb(37, 125, 197)); position: sticky; } .nav .bar{ box-sizing: border-box; padding: 0 7px; display: flex; align-items: center; } .btn{display: flex; align-items: center;} .btn>view{ height: 40px; width: 40px; text-align: center; display: flex; align-items: center; justify-content: center; } .btn image{ height: 22px; width: 22px; align-items: center; } .btn .back { border-right: 1rpx solid rgba(255,255,255,.5); height: 22px;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
3，navpa 页面代码
navpa.js
// pages/navpa/navpa.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
navpa.json
{ "usingComponents": { "nav":"/components/nav/nav" }, "navigationStyle":"custom" }- 1
- 2
- 3
- 4
- 5
- 6
navpa.wxml
<nav title="你好渐变标题" color="#fff"></nav> <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2012-3-2%2Fenterdesk.com-B526ECADD33DBD367676A93E051BA1EC.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671158107&t=aaeb716592b0a54dba6dfb997e761a60"></image>- 1
- 2
navpa.wxss
/* pages/navpa/navpa.wxss */ /* 空 */- 1
- 2
效果图：
-
相关阅读:
element 表单自定义效验规则
Redis 缓存预热、缓存雪崩、缓存击穿、缓存穿透业务实践
el-tooltip使用在dialog中，dialog按ESC关闭后，悬浮不消失情况对应。
vue2系列 — 自定义指令
Linux vi/vim
解析 IssueVision使用的OBSERVER(观察者)模式和COMMAND(命令)模式
《徐汇区推动数字广告产业高质量发展的扶持意见》的通知
[iOS]App Store Connect添加银行卡时的CNAPS代码查询
isEmpty() 和 null的区别
业绩承压来临，京东方还能抗周期多久
- 原文地址：https://blog.csdn.net/m0_64875238/article/details/127891877
