整站优化seo,nginx wordpress.conf,网站开发建设属于什么费用,网站建设怎么搞前言#xff1a;
及上一文章#xff1a;https://blog.csdn.net/djssubddbj/article/details/133895170?spm1001.2014.3001.5501我们所写的会议OA的首页#xff0c;在这个上面我们继续完成我们的会议OA系统#xff0c;这是我们的本期所要完成的页面 自定义组件
微信小程序…前言
及上一文章https://blog.csdn.net/djssubddbj/article/details/133895170?spm1001.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--
!-- textpages/meeting/list/list.wxml/text --
tabs tabList{{tabs}} bindtabsItemChangetabsItemChange
/tabs
view styleheight: 100rpx;/view
block wx:for-items{{lists}} wx:for-itemitem wx:keyitem.idview classlist data-id{{item.id}}view classlist-img al-centerimage classvideo-img modescaleToFill src{{item.image}}/image/viewview classlist-detailview classlist-titletext{{item.title}}/text/viewview classlist-tagview classstate al-center{{item.state}}/viewview classjoin al-centertext classlist-num{{item.num}}/text人报名/view/viewview classlist-infotext{{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){// debuggerlet tolists;if(e.detail.index1){tolists this.data.lists1;}else if(e.detail.index2){tolists this.data.lists2;}else{tolists this.data.lists3;}this.setData({lists: tolists})}
}) 设置代码
index.wxml
!--pages/ucenter/index/index.wxml--
!-- textpages/ucenter/index/index.wxml/text --
!--pages/ucenter/index/index.wxml--
!-- textpages/ucenter/index/index.wxml/text --
view classuserInfoimage classuser-head src/static/images/avatar.png/imagetext classuser-name立即登录/texttext classuser-edit修改/text
/view
view classlistview classlist-itemimage classitem-icon src/static/tabBar/sdk.png/imagetext classitem-title我主持的会议/texttext spacenbsp classitem-num1 /texttext classitem-detail/text/viewview classhr/viewview classlist-itemimage classitem-icon src/static/tabBar/sdk.png/imagetext classitem-title我参与的会议/texttext classitem-num10/texttext classitem-detail/text/view
/view
view classlistview classlist-itemimage classitem-icon src/static/tabBar/sdk.png/imagetext classitem-title我发布的投票/texttext spacenbsp classitem-num1 /texttext classitem-detail/text/viewview classhr/viewview classlist-itemimage classitem-icon src/static/tabBar/sdk.png/imagetext classitem-title我参与的投票/texttext classitem-num10/texttext classitem-detail/text/view
/view
view classlistview classlist-itemimage classitem-icon src/static/tabBar/sdk.png/imagetext classitem-title消息/texttext classitem-num/texttext spacenbsp classitem-detail /text/viewview classhr/viewview classlist-itemimage classitem-icon src/static/tabBar/sdk.png/imagetext classitem-title设置/texttext spaceemsp classitem-num/texttext spacenbsp classitem-detail /text/view
/viewindex.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;
}
