前言：
及上一文章：https://blog.csdn.net/djssubddbj/article/details/133895170?spm=1001.2014.3001.5501我们所写的会议OA的首页，在这个上面我们继续完成我们的会议OA系统，这是我们的本期所要完成的页面
自定义组件
微信小程序自定义组件是指开发者可以将一些功能和样式封装成独立的组件，然后在不同的页面中使用这些组件，从而提高开发效率和代码复用性。自定义组件可以包含模板、样式和行为逻辑，可以由开发者自主定义组件的属性和事件，使得组件更加灵活、可定制化。
自定义组件的使用方式类似于小程序原生组件，可以通过标签名引用，也可以通过自定义属性传递参数和设置组件状态。自定义组件还支持向外暴露属性、方法和事件，方便开发者在使用组件时进行交互和控制。
易于维护和扩展：自定义组件具备良好的封装性，内部的实现细节对外部是隐藏的，这样可以避免代码耦合和冲突。当需要修改或扩展某个功能时，只需要修改自定义组件的代码，而不会影响其他部分。
类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：
{
"component": true
}
同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。
自定义组件开发需要使用小程序提供的Component构造器，通过编写wxml、wxss和js文件来定义组件的结构、样式和行为逻辑。在编写组件时，需要考虑组件的可复用性和可定制化，同时也需要注意组件的兼容性和性能问题。
我们的微信小程序需要创建自定义组件的原因有以下几个：
提高开发效率和代码复用性：自定义组件可以将一些常用的功能和样式封装成独立的组件，方便在不同的页面中进行调用，从而减少代码的重复编写，提高开发效率和代码复用性。
实现组件化开发：自定义组件可以将一个页面拆分成多个独立的组件，每个组件都有自己的结构、样式和行为逻辑，从而实现组件化开发，方便团队协作，提高代码的可维护性和可拓展性。
实现定制化需求：自定义组件可以根据不同的需求进行定制化开发，自由定义组件的属性、方法和事件，使得组件更加灵活、可定制化。
提高用户体验：自定义组件可以使得小程序的界面更加丰富和生动，提高用户的体验和满意度。
在新的版本里面我们会出现报错，但是在win7的一些旧版本里面是不会出现这些问题的，我们需要在project.config.json文件里面添加以下代码：
"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false,
综上，创建自定义组件是微信小程序开发中的常见需求和实践，对于提高开发效率和代码质量、提高用户体验等方面都具有重要的意义。
代码案例
会议代码：
list.wxml
<!--pages/meeting/list/list.wxml-->
<!-- <text>pages/meeting/list/list.wxml</text> -->
<tabs tabList="{{tabs}}" bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
<view class="list" data-id="{{item.id}}">
<view class="list-img al-center">
<image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
</view>
<view class="list-detail">
<view class="list-title"><text>{{item.title}}</text></view>
<view class="list-tag">
<view class="state al-center">{{item.state}}</view>
<view class="join al-center"><text class="list-num">{{item.num}}</text>人报名</view>
</view>
<view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
</view>
</view>
</block>
list.wxss
/* pages/meeting/list/list.wxss */
page{
height: 100%;
background-color:#efeff4;
}
.swiper-item {
height: 350rpx;
width: 100%;
border-radius: 10rpx;
}
.mobi-title{
font-size: 18px;
margin: 10rpx;
}
.mobi-icon{
margin:0 0 200px 0 ;
background-color: red;
padding: 3rpx;
}
.mobi-title text{
margin-left: 10rpx;
}
.list{
background-color: #fff;
display: flex;
margin:10rpx;
padding:10rpx;
}
.list-img,.video-img{
height: 150rpx;
width: 150rpx;
}
.list-img{
margin:30rpx 0 0 0 ;
}
.list-detail{
margin:0 0 0 10rpx;
}
.list-title{
font-weight: 700;
}
.list-tag{
display: flex;
margin: 10px 0 ;
}
.state{
border: 3px solid lightblue;
padding: 2px;
color: lightblue;
}
.join{
border: 3px solid #fff;
padding: 2px;
margin: 0 0 0 20rpx;
color:gray;
}
.list-num{
color: red;
}
.list-info{
color:gray;
}
.bottom-line{
text-align: center;
margin-bottom: 10px;
}
list.json
{
"usingComponents": {
"tabs": "/components/tabs/tabs"
}
}
list.js
// pages/meeting/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs:['会议中','已完成','已取消','全部会议']
,lists: [
{
'id': '1',
'image': '/static/persons/1.jpg',
'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
'num':'304',
'state':'进行中',
'time': '10月09日 17:59',
'address': '深圳市·南山区'
},
{
'id': '1',
'image': '/static/persons/2.jpg',
'title': 'AI WORLD 2016世界人工智能大会',
'num':'380',
'state':'已结束',
'time': '10月09日 17:39',
'address': '北京市·朝阳区'
},
{
'id': '1',
'image': '/static/persons/3.jpg',
'title': 'H100太空商业大会',
'num':'500',
'state':'进行中',
'time': '10月09日 17:31',
'address': '大连市'
},
{
'id': '1',
'image': '/static/persons/4.jpg',
'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您"与世界对话"',
'num':'150',
'state':'已结束',
'time': '10月09日 17:21',
'address': '北京市·朝阳区'
},
{
'id': '1',
'image': '/static/persons/5.jpg',
'title': '新质生活 · 品质时代 2016消费升级创新大会',
'num':'217',
'state':'进行中',
'time': '10月09日 16:59',
'address': '北京市·朝阳区'
}
],
lists1: [
{
'id': '1',
'image': '/static/persons/1.jpg',
'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
'num':'304',
'state':'进行中',
'time': '10月09日 17:59',
'address': '深圳市·南山区'
},
{
'id': '1',
'image': '/static/persons/2.jpg',
'title': 'AI WORLD 2016世界人工智能大会',
'num':'380',
'state':'已结束',
'time': '10月09日 17:39',
'address': '北京市·朝阳区'
},
{
'id': '1',
'image': '/static/persons/3.jpg',
'title': 'H100太空商业大会',
'num':'500',
'state':'进行中',
'time': '10月09日 17:31',
'address': '大连市'
}
],
lists2: [
{
'id': '1',
'image': '/static/persons/1.jpg',
'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
'num':'304',
'state':'进行中',
'time': '10月09日 17:59',
'address': '深圳市·南山区'
},
{
'id': '1',
'image': '/static/persons/2.jpg',
'title': 'AI WORLD 2016世界人工智能大会',
'num':'380',
'state':'已结束',
'time': '10月09日 17:39',
'address': '北京市·朝阳区'
}
],
lists3: [
{
'id': '1',
'image': '/static/persons/1.jpg',
'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
'num':'304',
'state':'进行中',
'time': '10月09日 17:59',
'address': '深圳市·南山区'
},
{
'id': '1',
'image': '/static/persons/2.jpg',
'title': 'AI WORLD 2016世界人工智能大会',
'num':'380',
'state':'已结束',
'time': '10月09日 17:39',
'address': '北京市·朝阳区'
},
{
'id': '1',
'image': '/static/persons/3.jpg',
'title': 'H100太空商业大会',
'num':'500',
'state':'进行中',
'time': '10月09日 17:31',
'address': '大连市'
},
{
'id': '1',
'image': '/static/persons/4.jpg',
'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您"与世界对话"',
'num':'150',
'state':'已结束',
'time': '10月09日 17:21',
'address': '北京市·朝阳区'
},
{
'id': '1',
'image': '/static/persons/5.jpg',
'title': '新质生活 · 品质时代 2016消费升级创新大会',
'num':'217',
'state':'进行中',
'time': '10月09日 16:59',
'address': '北京市·朝阳区'
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
tabsItemChange(e){
// debugger
let tolists;
if(e.detail.index==1){
tolists = this.data.lists1;
}else if(e.detail.index==2){
tolists = this.data.lists2;
}else{
tolists = this.data.lists3;
}
this.setData({
lists: tolists
})
}
})
设置代码
index.wxml
<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="userInfo">
<image class="user-head" src="/static/images/avatar.png"></image>
<text class="user-name">立即登录</text>
<text class="user-edit">修改</text>
</view>
<view class="list">
<view class="list-item">
<image class="item-icon" src="/static/tabBar/sdk.png"></image>
<text class="item-title">我主持的会议</text>
<text space="nbsp" class="item-num">1 </text>
<text class="item-detail">＞</text>
</view>
<view class="hr"></view>
<view class="list-item">
<image class="item-icon" src="/static/tabBar/sdk.png"></image>
<text class="item-title">我参与的会议</text>
<text class="item-num">10</text>
<text class="item-detail">＞</text>
</view>
</view>
<view class="list">
<view class="list-item">
<image class="item-icon" src="/static/tabBar/sdk.png"></image>
<text class="item-title">我发布的投票</text>
<text space="nbsp" class="item-num">1 </text>
<text class="item-detail">＞</text>
</view>
<view class="hr"></view>
<view class="list-item">
<image class="item-icon" src="/static/tabBar/sdk.png"></image>
<text class="item-title">我参与的投票</text>
<text class="item-num">10</text>
<text class="item-detail">＞</text>
</view>
</view>
<view class="list">
<view class="list-item">
<image class="item-icon" src="/static/tabBar/sdk.png"></image>
<text class="item-title">消息</text>
<text class="item-num"></text>
<text space="nbsp" class="item-detail"> ＞</text>
</view>
<view class="hr"></view>
<view class="list-item">
<image class="item-icon" src="/static/tabBar/sdk.png"></image>
<text class="item-title">设置</text>
<text space="emsp" class="item-num"></text>
<text space="nbsp" class="item-detail"> ＞</text>
</view>
</view>
index.wxss
/* pages/ucenter/index/index.wxss */
/* pages/ucenter/index/index.wxss */
Page{
background-color: #fff;
}
.userInfo{
display: flex;
background-color: antiquewhite;
border: 1px solid red;
padding: 20rpx;
}
.user-head{
width: 150rpx;
height: 150rpx;
}
.user-name,.user-edit{
display: flex;
align-items: center;
margin: 0 0 0 20rpx;
}
.user-name{
/* display: inline-block; */
width: 450rpx;
font-weight: 700;
}
.user-edit{
color: gray;
}
.list{
height: 280rpx;
width: 750rpx;
display: flex;
flex-direction: column;
}
.list-item{
height: 130rpx;
}
.item-icon{
height: 60rpx;
width: 60rpx;
margin-top: 20px;
/* border: 1px solid red; */
}
.item-title,.item-num,.item-detail{
/* border: 1px solid red; */
position: relative;
top:-10px;
display: inline-block;
}
.item-title{
font-size: 18px;
width: 520rpx;
height: 25px;
margin-left: 10px;
}
.item-num{
margin-right: 10px;
}
.item-detail{
color: gray;
}
.list .hr{
background-color: lightgray;
height: 1px;
width: 400px;
display: inline-block;
}
