办个网站需要投资多少,网站建设的运作原理,销售人员报销网站开发费,东莞建设网办事指南目录 一.自定义组件
1.1.创建
1.2.定义
1.3.编写
1.4.使用
二.会议
2.1.数据
2.2.显示
2.3. 样式
三.个人中心
3.1.页面
3.2.样式
四.投票
4.1.引用
4.2.数据
4.3.页面
4.4.样式 好啦今天就到这里了#xff0c;希望能帮到你哦#xff01;#xff01;希望能帮到你哦 一.自定义组件 开发者可以将页面内的功能模块抽象成自定义组件以便在不同的页面中重复使用也可以将复杂的页面拆分成多个低耦合的模块有助于代码维护。自定义组件在使用时与基础组件非常相似。 以下的代码都基于我博客中的 : 微信小程序的OA会议之首页搭建https://blog.csdn.net/m0_74915426/article/details/133936420?spm1001.2014.3001.5502 1.1.创建 在项目中创建一个名为 : components 的文件来存放组件 再在components文件夹中创建一个组件名为 : tabs 创建操作如图 : 1.2.定义 类似于页面一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件首先需要在 json 文件中进行自定义组件声明将 component 字段设为 true 可将这一组文件设为自定义组件 在 tabs.json 中编写: {component: true,usingComponents: {}
} 同时还要在 wxml 文件中编写组件模板在 wxss 文件中加入组件样式它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。 1.3.编写 在 tabs.wxml 中进行编写模板: !--components/tabs/tabs.wxml--
!-- textcomponents/tabs/tabs.wxml/text --
!-- 这是自定义组件的内部WXML结构 --
view classtabsview classtabs_titleview wx:for{{tabList}} wx:keyid classtitle_item {{indextabIndex?item_active:}} bindtaphandleItemTap data-index{{index}}view stylemargin-bottom:5rpx{{item}}/viewview stylewidth:30px class{{indextabIndex?item_active1:}}/view/view/viewview classtabs_contentslot/slot/view
/view 在 tabs.js 中进行编写功能 : // components/tabs/tabs.js
Component({/*** 组件的属性列表*/properties: {// 这里定义了innerText属性属性值可以在组件使用时指定innerText: {type: String,value: default value
},
tabList:Object},/*** 组件的初始数据*/data: {tabIndex:1},/*** 组件的方法列表*/methods: {handleItemTap(e){// 获取索引const {index} e.currentTarget.dataset;// 触发 父组件的事件this.triggerEvent(tabsItemChange,{index})this.setData({tabIndex:index})}}
}) 在 tabs.wxss 中进行编写样式: .tabs {position: fixed;top: 0;width: 100%;background-color: #fff;z-index: 99;border-bottom: 1px solid #efefef;padding-bottom: 20rpx;
}.tabs_title {/* width: 400rpx; */width: 90%;display: flex;font-size: 9pt;padding: 0 20rpx;
}.title_item {color: #999;padding: 15rpx 0;display: flex;flex: 1;flex-flow: column nowrap;justify-content: center;align-items: center;
}.item_active {/* color:#ED8137; */color: #000000;font-size: 11pt;font-weight: 800;
}.item_active1 {/* color:#ED8137; */color: #000000;font-size: 11pt;font-weight: 800;border-bottom: 6rpx solid #333;border-radius: 2px;
}
1.4.使用 在项目的 project.config.json 文件中的setting属性中进行配置增加以下两个配置 : ignoreDevUnusedFiles: false,
ignoreUploadUnusedFiles: false,
如图 需要在哪个页面中进行使用就需要在哪个页面中进行引用配置 比如说 : 需要在会议页面中进行使用就要在 会议页面.json (meeting/list/list.json) 中增加以下设置 {usingComponents: {tabs: ../../../components/tabs/tabs}
} 然后再 list.js 中进行初始化数据在data属性中编写 : data: {tabs:[会议中,已完成,已取消,全部会议]
} 在 list.wxml中使用 !--pages/meeting/list/list.wxml--
tabs tabList{{tabs}} bindtabsItemChangetabsItemChange
/tabs 效果图后面一起 注意事项: 一些需要注意的细节 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合所以自定义组件的标签名也只能包含这些字符。自定义组件也是可以引用自定义组件的引用方法类似于页面引用自定义组件的方式使用 usingComponents 字段。自定义组件和页面所在项目根目录名不能以“wx-”为前缀否则会报错。 注意是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异包括 使用 usingComponents 页面的原型与不使用时不一致即 Object.getPrototypeOf(this) 结果不同。使用 usingComponents 时会多一些方法如 selectComponent 。出于性能考虑使用 usingComponents 时 setData 内容不会被直接深复制即 this.setData({ field: obj }) 后 this.data.field obj 。深复制会在这个值被组件间传递时发生。 如果页面比较复杂新增或删除 usingComponents 定义段时建议重新测试一下。 二.会议 学会了自定义组件的使用在后将会议的页面及效果编写搭建完成 2.1.数据 在会议的 list.js 中进行初始化数据进行页面显示效果 : // pages/vote/list/list.js
Page({/*** 页面的初始数据*/data: {tabs:[全部,已发起,已参与],lists: [{id: 1,image: /static/persons/8.jpg,name : 君总,title: 深圳·北京PM大会,vote : 是否认同与京东进行产品合作,num : 304,state:未投票,time : 10月09日 17:59,address: 深圳市·南山区},{id: 2,image: /static/persons/16.jpg,name : 刘老板,title: AIWORLD人工智能大会,vote : 是否投资AI发展,num : 480,state:已投票,time : 10月09日 17:39,address: 北京市·朝阳区},{id: 3,image: /static/persons/13.jpg,name : 肖总,title: H100太空商业大会,vote : 是否太空商业进行合作,num : 500,state: 未参与,time : 10月09日 17:31,address: 大连市},{id: 4,image: /static/persons/15.jpg,name : 文总,title: 2023消费升级创新大会,vote : 是否对本次创新持续升级,num:217,state:已投票,time: 11月20日 16:59,address: 北京市·朝阳区}],lists1: [{id: 1,image: /static/persons/2.jpg,name : 张总,title: 深圳·北京PM大会,vote : 是否认同与京东进行产品合作,num : 304,state:未投票,time : 10月09日 17:59,address: 深圳市·南山区},{id: 2,image: /static/persons/16.jpg,name : 陈总,title: AIWORLD人工智能大会,vote : 是否投资AI发展,num : 480,state:已投票,time : 10月09日 17:39,address: 北京市·朝阳区},{id: 3,image: /static/persons/13.jpg,name : 杨总,title: H100太空商业大会,vote : 是否太空商业进行合作,num : 500,state: 未参与,time : 10月09日 17:31,address: 大连市},{id: 4,image: /static/persons/20.jpg,name : 冯总 ,title: 2023消费升级创新大会,vote : 是否对本次创新持续升级,num:217,state:已投票,time: 11月20日 16:59,address: 北京市·朝阳区}],lists2: [{id: 1,image: /static/persons/11.jpg,name : 徐总,title: 深圳·北京PM大会,vote : 是否认同与京东进行产品合作,num : 422,state:未投票,time : 10月09日 17:59,address: 深圳市·南山区},{id: 2,image: /static/persons/16.jpg,name : 邓总,title: AIWORLD人工智能大会,vote : 是否投资AI发展,num : 377,state:已投票,time : 10月09日 17:39,address: 北京市·朝阳区},{id: 3,image: /static/persons/17.jpg,name : 廖总,title: H100太空商业大会,vote : 是否太空商业进行合作,num : 463,state: 未参与,time : 10月09日 17:31,address: 大连市},{id: 4,image: /static/persons/19.jpg,name : 李总 ,title: 2023消费升级创新大会,vote : 是否对本次创新持续升级,num:543,state:已投票,time: 11月20日 16:59,address: 北京市·朝阳区}]},tabsItemChange(e){console.log(e.detail);let tolists;if(e.detail.index1){tolists this.data.lists1;}else if(e.detail.index2){tolists this.data.lists2;}else{tolists this.data.lists;}this.setData({lists: tolists})
},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
2.2.显示 在会议的 list.wxml 中进行编写 : !--pages/meeting/list/list.wxml--
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
view classsection bottom-linetext到底啦/text
/view
2.3. 样式 在会议的 list.wxss 中进行编写样式美化页面 : /* pages/meeting/list/list.wxss */
.list {display: flex;flex-direction: row;width: 100%;padding: 0 20rpx 0 0;border-top: 1px solid #eeeeee;background-color: #fff;margin-bottom: 5rpx;/* border-radius: 20rpx;box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}.list-img {display: flex;margin: 10rpx 10rpx;width: 150rpx;height: 220rpx;justify-content: center;align-items: center;
}.list-img .video-img {width: 120rpx;height: 120rpx;}.list-detail {margin: 10rpx 10rpx;display: flex;flex-direction: column;width: 600rpx;height: 220rpx;
}.list-title text {font-size: 11pt;color: #333;font-weight: bold;
}.list-detail .list-tag {display: flex;height: 70rpx;
}.list-tag .state {font-size: 9pt;color: #81aaf7;width: 120rpx;border: 1px solid #93b9ff;border-radius: 2px;margin: 10rpx 0rpx;display: flex;justify-content: center;align-items: center;
}.list-tag .join {font-size: 11pt;color: #bbb;margin-left: 20rpx;display: flex;justify-content: center;align-items: center;
}.list-tag .list-num {font-size: 11pt;color: #ff6666;
}.list-info {font-size: 9pt;color: #bbb;margin-top: 20rpx;
}
.bottom-line{display: flex;height: 60rpx;justify-content: center;align-items: center;background-color: #f3f3f3;
}
.bottom-line text{font-size: 9pt;color: #666;
}
效果: 注 其中的图片名称及路径需要根据自己的图片名称及路径进行修改 三.个人中心
3.1.页面 在个人中心页面中编写 .wxml 文件(如 : ucenter/index/index.wxml) 进行页面显示 !--pages/ucenter/index/index.wxml--
!-- textpages/ucenter/index/index.wxml/text --
view classuserimage classuser-img src/static/persons/2.jpg/imageview classuser-nameಥ慧瑶ಥ/viewtext classuser-up修改/text
/view
view classcellsview classcell-itemsimage src/static/tabBar/sdk.png classcell-items-icon/imagetext classcell-items-title我主持的会议/texttext classcell-items-num1/texttext classcell-items-detail/text/viewview styleheight: 5rpx;background-color: rgba(135, 206, 250, 0.075);/viewview classcell-itemsimage src/static/tabBar/sdk.png classcell-items-icon/imagetext classcell-items-title我参与的会议/texttext classcell-items-num10/texttext classcell-items-detail/text/view
/view
view styleheight: 27rpx;background-color: rgba(135, 206, 250, 0.075);/view
view classcellsview classcell-itemsimage src/static/tabBar/sdk.png classcell-items-icon/imagetext classcell-items-title我发布的投票/texttext classcell-items-num1/texttext classcell-items-detail/text/viewview styleheight: 5rpx;background-color: rgba(135, 206, 250, 0.075);/viewview classcell-itemsimage src/static/tabBar/sdk.png classcell-items-icon/imagetext classcell-items-title我参与的投票/texttext classcell-items-num10/texttext classcell-items-detail/text/view
/view
view styleheight: 27rpx;background-color: rgba(135, 206, 250, 0.075);/view
view classcellsview classcell-itemsimage src/static/tabBar/template.png classcell-items-icon/imagetext classcell-items-title信息/texttext classcell-items-ion/text/viewview styleheight: 5rpx;background-color: rgba(135, 206, 250, 0.075);/viewview classcell-itemsimage src/static/tabBar/component.png classcell-items-icon/imagetext classcell-items-title设置/texttext classcell-items-ion/text/view
/view
3.2.样式 在个人中心的 .wxss 样式文件 中进行编写样式来美化布局的页面效果 (如 : ucenter/index/index.wxss) /* pages/ucenter/index/index.wxss */
Page{background-color: rgba(135, 206, 250, 0.075);
}
.user{display: flex;width: 100%;align-items:center;background-color: white;margin-bottom: 28rpx;
}
.user-img{
height: 170rpx;
width: 170rpx;
margin: 30rpx;
border: 1px solid #cdd7ee;
border-radius: 6px;
}
.user-name{
width: 380rpx;
margin-left: 20rpx;
font-weight: 550;
}
.user-up{
color: rgb(136, 133, 133);
}
.cells{background-color: white;
}
.cell-items{display: flex;align-items:center; height: 110rpx;
}
.cell-items-title{width: 290rpx;
}
.cell-items-icon{width: 50rpx;height: 50rpx;margin: 20rpx;
}
.cell-items-num{padding-left: 30rpx;margin-left: 200rpx;width: 70rpx;
}
.cell-items-ion{margin-left: 295rpx;
} 效果图 四.投票
4.1.引用 在 投票页面的 .json 文件( 如: vote/list/list.json )中进行编写 {usingComponents: {tabs: ../../../components/tabs/tabs}
}
4.2.数据 在 投票页面的 .js 文件( 如: vote/list/list.js )中进行编写初始化数据及方法功能 // pages/vote/list/list.js
Page({/*** 页面的初始数据*/data: {tabs:[全部,已发起,已参与],lists: [{id: 1,image: /static/persons/8.jpg,name : 君总,title: 深圳·北京PM大会,vote : 是否认同与京东进行产品合作,num : 304,state:未投票,time : 10月09日 17:59,address: 深圳市·南山区},{id: 2,image: /static/persons/16.jpg,name : 刘老板,title: AIWORLD人工智能大会,vote : 是否投资AI发展,num : 480,state:已投票,time : 10月09日 17:39,address: 北京市·朝阳区},{id: 3,image: /static/persons/13.jpg,name : 肖总,title: H100太空商业大会,vote : 是否太空商业进行合作,num : 500,state: 未参与,time : 10月09日 17:31,address: 大连市},{id: 4,image: /static/persons/15.jpg,name : 文总,title: 2023消费升级创新大会,vote : 是否对本次创新持续升级,num:217,state:已投票,time: 11月20日 16:59,address: 北京市·朝阳区}],lists1: [{id: 1,image: /static/persons/2.jpg,name : 张总,title: 深圳·北京PM大会,vote : 是否认同与京东进行产品合作,num : 304,state:未投票,time : 10月09日 17:59,address: 深圳市·南山区},{id: 2,image: /static/persons/16.jpg,name : 陈总,title: AIWORLD人工智能大会,vote : 是否投资AI发展,num : 480,state:已投票,time : 10月09日 17:39,address: 北京市·朝阳区},{id: 3,image: /static/persons/13.jpg,name : 杨总,title: H100太空商业大会,vote : 是否太空商业进行合作,num : 500,state: 未参与,time : 10月09日 17:31,address: 大连市},{id: 4,image: /static/persons/20.jpg,name : 冯总 ,title: 2023消费升级创新大会,vote : 是否对本次创新持续升级,num:217,state:已投票,time: 11月20日 16:59,address: 北京市·朝阳区}],lists2: [{id: 1,image: /static/persons/11.jpg,name : 徐总,title: 深圳·北京PM大会,vote : 是否认同与京东进行产品合作,num : 422,state:未投票,time : 10月09日 17:59,address: 深圳市·南山区},{id: 2,image: /static/persons/16.jpg,name : 邓总,title: AIWORLD人工智能大会,vote : 是否投资AI发展,num : 377,state:已投票,time : 10月09日 17:39,address: 北京市·朝阳区},{id: 3,image: /static/persons/17.jpg,name : 廖总,title: H100太空商业大会,vote : 是否太空商业进行合作,num : 463,state: 未参与,time : 10月09日 17:31,address: 大连市},{id: 4,image: /static/persons/19.jpg,name : 李总 ,title: 2023消费升级创新大会,vote : 是否对本次创新持续升级,num:543,state:已投票,time: 11月20日 16:59,address: 北京市·朝阳区}]},tabsItemChange(e){console.log(e.detail);let tolists;if(e.detail.index1){tolists this.data.lists1;}else if(e.detail.index2){tolists this.data.lists2;}else{tolists this.data.lists;}this.setData({lists: tolists})
},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
4.3.页面 在投票页面的 wxml 文件( 如: vote/list/list.wxml )中进行编写页面标签显示数据及效果 !--pages/vote/list/list.wxml--
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-titletexttext stylemargin-right: 13rpx; 发 起 人/text {{item.name}}/text/viewview classlist-titletext会议名称 {{item.title}}/text/viewview classlist-titletext投票标题 [ {{item.vote}} ]/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
view classsection bottom-linetext到底啦/text
/view
4.4.样式 在投票页面的 .wxss 文件( 如: vote/list/list.wxss)中进行编写页面样式进行美化效果 /* pages/vote/list/list.wxss */
.list {display: flex;flex-direction: row;width: 100%;padding: 0 20rpx 0 0;border-top: 1px solid #eeeeee;background-color: #fff;margin-bottom: 5rpx;height: 270rpx;/* border-radius: 20rpx;box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}.list-img {display: flex;margin: 10rpx 10rpx;width: 160rpx;height: 250rpx;justify-content: center;align-items: center;flex-direction:column;
}.list-img .video-img {width: 140rpx;height: 160rpx;border-radius: 6px;
}.list-detail {margin: 10rpx 10rpx;display: flex;flex-direction: column;width: 600rpx;height: 300rpx;
}.list-title text {font-size: 9pt;color: #333;font-weight: bold;
}.list-detail {display: flex;height: 100rpx;
}
.list-tag{display: flex;
}
.state {font-size: 9pt;color: #81aaf7;width: 120rpx;height: 40rpx;border: 1px solid #93b9ff;border-radius: 2px;margin: 10rpx 0rpx;display: flex;justify-content: center;align-items: center;
}.join {font-size: 11pt;color: #bbb;margin-left: 20rpx;display: flex;justify-content: center;align-items: center;
}.list-num {margin-right: 10rpx;font-size: 11pt;color: #ff6666;
}.list-info {font-size: 9pt;color: #bbb;
}
.bottom-line{display: flex;height: 60rpx;justify-content: center;align-items: center;background-color: #f3f3f3;
}
.bottom-line text{font-size: 9pt;color: #666;
}
效果图 好啦今天就到这里了希望能帮到你哦
