网站建设.软件开发,帮人做传销网站违法吗,缩我短链接生成器,炫酷网站源码下载#x1f389;#x1f389;欢迎来到我的CSDN主页#xff01;#x1f389;#x1f389; #x1f3c5;我是Java方文山#xff0c;一个在CSDN分享笔记的博主。#x1f4da;#x1f4da; #x1f31f;推荐给大家我的专栏《微信小程序开发实战》。#x1f3af;#x1f3a… 欢迎来到我的CSDN主页 我是Java方文山一个在CSDN分享笔记的博主。 推荐给大家我的专栏《微信小程序开发实战》。 点击这里就可以查看我的主页啦 Java方文山的个人主页 如果感觉还不错的话请给我点赞吧 期待你的加入一起学习一起进步 一、自定义组件
开发者可以将页面内的功能模块抽象成自定义组件以便在不同的页面中重复使用也可以将复杂的页面拆分成多个低耦合的模块有助于代码维护。自定义组件在使用时与基础组件非常相似。
1.创建自定义组件
在微信小程序的根目录下创建一个文件夹名为components继续在components文件夹下创建文件夹tabs选中tabs右击新建component输入定义的组件名会创建出json、wxml、wxss、js4个文件。 首先需要在 json 文件中进行自定义组件声明将 component 字段设为 true 可将这一组文件设为自定义组件
{component: true
}
同时还要在 wxml 文件中编写组件模板在 wxss 文件中加入组件样式它们的写法与页面的写法类似。
!-- 这是自定义组件的内部WXML结构 --
view classinner{{innerText}}
/view
slot/slot/* 这里的样式只应用于这个自定义组件 */
.inner {color: red;
}
注意在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
在自定义组件的 js 文件中需要使用 Component() 来注册组件并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml 的渲染其中属性值是可由组件外部传入的。
// components/tabs/tabs.jsComponent({properties: {// 这里定义了innerText属性属性值可以在组件使用时指定innerText: {type: String,value: default value,}},data: {// 这里是一些组件内部数据someData: {}},methods: {// 这里是一个自定义方法customMethod: function(){}}
})2.使用自定义组件
使用已注册的自定义组件前首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径
{usingComponents: {tabs: /components/tabs/tabs}
} 这样在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名节点属性即传递给组件的属性值。
tabs/tabs
效果展示 3.自定义组件传值 自定义组件传值需要注意的一个点就是不能以驼峰命名如果遇见是大写的字母要变成小写并在中间加一个“-”例如我们的自定义组件属性值“innerText”就要变成“inner-text”。
tabs inner-text自定义组件/tabs
效果演示 小贴士 如果你在创建自定义组件的时候出现以下问题 可以将以下代码复制到project.config.json中的setting中即可 ignoreDevUnusedFiles: false,ignoreUploadUnusedFiles: false, 4.注意事项
一些需要注意的细节
因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合所以自定义组件的标签名也只能包含这些字符。自定义组件也是可以引用自定义组件的引用方法类似于页面引用自定义组件的方式使用 usingComponents 字段。自定义组件和页面所在项目根目录名不能以“wx-”为前缀否则会报错。注意是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异包括使用 usingComponents 页面的原型与不使用时不一致即 Object.getPrototypeOf(this) 结果不同。使用 usingComponents 时会多一些方法如 selectComponent 。出于性能考虑使用 usingComponents 时 setData 内容不会被直接深复制即 this.setData({ field: obj }) 后 this.data.field obj 。深复制会在这个值被组件间传递时发生。如果页面比较复杂新增或删除 usingComponents 定义段时建议重新测试一下。 二、自定义组件案例
学会了自定义组件的基本概念下面我就带领大家编写一个我们会议OA系统中所需的组件。
1.创建自定义组件
tabs.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.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;
} tabs.js
var App getApp();
Component({/*** 组件的属性列表*/properties: {tabList:Object},/*** 组件的初始数据*/data: {tabIndex:0},/*** 组件的方法列表*/methods: {handleItemTap(e){// 获取索引const {index} e.currentTarget.dataset;// 触发 父组件的事件this.triggerEvent(tabsItemChange,{index})this.setData({tabIndex:index})}}
})2.使用自定义组件
list.json
{usingComponents: {tabs: /components/tabs/tabs}
}
list.js的data中定义属性 tabs:[会议中,已完成,已取消,全部会议]
list.wxml
tabs tabList{{tabs}} bindtabsItemChangetabsItemChange
/tabs
效果展示 三、会议管理布局
现在我们需要考虑的就是点击相应的内容显示相应的数据我们只需将所点击内容的index值传递根据index值的不同进行不同数据的遍历即可。
1.定义所需数据
js
//定义所需数据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: 北京市·朝阳区}]}
2.定义内容切换事件
//定义点击内容显示相应的数据的方法tabsItemChange(e) {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})}
3.布局会议管理
wxml !-- 顶部信息栏 --
tabs tabList{{tabs}} bindtabsItemChangetabsItemChange
/tabs
!-- 内容显示区 --
view styleheight: 60px;/view
block wx:for-items{{lists}} wx:for-itemitem wx:keyitem.idview classlist data-id{{item.id}}view classlist-imgimage classvideo-img modescaleToFill src{{item.image}}/image/viewview classlist-detailview classlist-titletext{{item.title}}/text/viewview classlist-tagview classstate{{item.state}}/viewview classjointext classlist-num{{item.num}}/text人报名/view/viewview classlist-infotext{{item.address}}/text|text{{item.time}}/text/view/view/view
/block
view classsectiontext到底啦/text
/view
wxss
/* pages/meeting/list/list.wxss */
.section{color: #aaa;display: flex;justify-content: center;
}.list-info {color: #aaa;
}.list-num {color: #e40909;font-weight: 700;
}.join {padding: 0px 0px 0px 10px;color: #aaa;
}.state {margin: 0px 6px 0px 6px;border: 1px solid #93b9ff;color: #93b9ff;
}.list-tag {padding: 3px 0px 10px 0px;display: flex;align-items: center;
}.list-title {display: flex;justify-content: space-between;font-size: 11pt;color: #333;font-weight: bold;}.list-detail {display: flex;flex-direction: column;margin: 0px 0px 0px 15px;
}.video-img {width: 80px;height: 80px;
}.list {display: flex;flex-direction: row;border-bottom: 1px solid #6b6e74;padding: 10px;
}.mobi-text {font-weight: 700;padding: 15px;
}.mobi-icon {border-left: 5px solid #e40909;
}.mobi-title {background-color: rgba(158, 158, 142, 0.678);margin: 10px 0px 10px 0px;
}.swiper-item {height: 300rpx;width: 100%;border-radius: 10rpx;
}.userinfo {display: flex;flex-direction: column;align-items: center;color: #aaa;
}.userinfo-avatar {overflow: hidden;width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.usermotto {margin-top: 200px;
}
效果演示 四、投票管理布局
1.顶部导航栏
我们可以根据自定义组件完成首先在相应的json文件中引用自定义组件。 usingComponents: {tabs: /components/tabs/tabs} 随后在js文件中定义我们所需要展示的内容。 tabs: [发起投票, 投票进行中, 已结束投票, 全部投票] 最后直接在wxml中应用即可。
tabs tabList{{tabs}} bindtabsItemChangetabsItemChange/tabs 效果展示 2.定义内容切换事件
我们这里和刚刚的会议管理有些不同我们刚刚的会议管理是点击不同的菜单显示不同的数据但是这个的内容可就不是数据了而是各不相同的组件所以针对这个事情我们要做一个内容切换事件。
首先在我们的wxml中定义好每个菜单需要展示的内容并写好hidden样式 view class{{componentStatus[0] ? : hidden}}发起投票/viewview class{{componentStatus[1] ? : hidden}}投票进行中/viewview class{{componentStatus[2] ? : hidden}}已结束投票/viewview class{{componentStatus[3] ? : hidden}}全部投票/view
.hidden {display: none;
}
在js中定义好属性与事件 componentStatus: [true,false, false, false] tabsItemChange(e) {let index e.detail.index;//全部的组件赋值为falseconst lists [false, false, false, false];//将所点击的组件赋值为truelists[index] true;this.setData({componentStatus: lists // 更新 data 中的 componentStatus 属性值});} 效果展示 3.布局投票管理
结合以上知识我们只需要将需要展示的内容放入view中即可我这里只做一个演示。
wxml !-- 发起投票 --
view class{{componentStatus[0] ? : hidden}}view classtitle-view基本信息/viewinput classinfo-title typetext placeholder选择所属会议 /input classinfo-title typetext placeholder投票标题最多30个字符 /view classinfo-texttextarea bindinputhandleInput placeholder请输入文本内容/textarea/viewview classimage-containerimage src{{imageUrl}} modeaspectFit/image/viewbutton classupload-button bindtaphandleUploadImage上传图片/buttonview classtitle-view选项设置/viewinput classinfo-title typetext placeholder请输入第一项最多30个字符 /input classinfo-title typetext placeholder请输入第二项最多30个字符 /view classtitle-view时间设置/viewview classtimetext 开始时间/textpicker modedate bindchangehandleDateChange1input placeholder请选择日期 disabled value{{selectedDate1}} //pickerpicker modetime bindchangehandleTimeChange1input placeholder请选择时间 disabled value{{selectedTime1}} //picker/viewview classtimetext结束时间/textpicker modedate bindchangehandleDateChange2input placeholder请选择日期 disabled value{{selectedDate2}} //pickerpicker modetime bindchangehandleTimeChange2input placeholder请选择时间 disabled value{{selectedTime2}} //picker/viewbutton发起投票/button/view
wxss
/* pages/vote/list/list.wxss */
.hidden {display: none;
}
.title-view{background-color: beige;font-weight: 700;padding-left: 7px;
}
.info-title{
padding: 5px 5px 10px 5px;
border-top:1px solid rgb(129, 129, 127);
}.info-text{height: 100px;padding: 5px 5px 10px 5px;border-top:1px solid rgb(129, 129, 127);
}
.image{padding-left: 55px;display: flex;align-items: center;
}
.time{border-top:1px solid rgb(129, 129, 127);padding: 5px 0px 5px 0px;display: flex;align-items: center;
}
.image-container{padding-left: 60px;
}
js
// pages/vote/list/list.js
Page({/*** 页面的初始数据*/data: {tabs: [发起投票, 投票进行中, 已结束投票, 全部投票],//顶部导航栏componentStatus: [true, false, false, false],//用于处理内容显示imageUrl: ,// 用于存储选择的图片路径selectedDate1: , // 用于开始存储选择的日期selectedTime1: ,// 用于开始存储选择的时间selectedDate2: , // 用于结束存储选择的日期selectedTime2: // 用于结束存储选择的时间},//结束时间选择handleTimeChange2(e) {const selectedTime e.detail.value;this.setData({selectedTime2: selectedTime // 更新选择的时间触发重新渲染});},//结束日期选择handleDateChange2(e) {const selectedDate e.detail.value;this.setData({selectedDate2: selectedDate // 更新选择的日期触发重新渲染});},//开始时间选择handleTimeChange1(e) {const selectedTime e.detail.value;this.setData({selectedTime1: selectedTime // 更新选择的时间触发重新渲染});},//开始日期选择handleDateChange1(e) {const selectedDate e.detail.value;this.setData({selectedDate1: selectedDate // 更新选择的日期触发重新渲染});},//图片选择器handleUploadImage() {wx.chooseImage({count: 1,success: (res) {const imagePath res.tempFilePaths[0];// 处理选择的图片路径console.log(选择的图片路径, imagePath);this.setData({imageUrl: imagePath // 更新图片路径触发重新渲染});}});},//点击导航栏进行切换下方内容tabsItemChange(e) {let index e.detail.index;//全部的组件赋值为falseconst lists [false, false, false, false];//将所点击的组件赋值为truelists[index] true;this.setData({componentStatus: lists // 更新 data 中的 componentStatus 属性值});} ,/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
效果展示 五、个人中心布局
相对之前的内容这个还是比较简单的大家直接看代码就好。
1.wxml
!--pages/ucenter/index/index.wxml--
view classuserInfoimage classuserInfo-head src/static/persons/CSDN头像.jpg/imageview classuserInfo-loginJava方文山/viewtext classuserInfo-set修改/text
/viewview classcellsview classcell-itemsimage src/static/tabBar/sdk.png classcell-items-icon/imagetext classcell-items-title我发布的会议/textview classcell-items-num3/viewtext classcell-items-detail/text/viewhr /view classcell-itemsimage src/static/tabBar/sdk.png classcell-items-icon/imagetext classcell-items-title我主持的会议/textview classcell-items-num4/viewtext classcell-items-detail/text/view
/view
view classcellsview classcell-itemsimage src/static/tabBar/coding.png classcell-items-icon/imagetext classcell-items-title投票的会议/textview classcell-items-num10/viewtext classcell-items-detail/text/viewhr /view classcell-itemsimage src/static/tabBar/coding.png classcell-items-icon/imagetext classcell-items-title未投票的会议/textview classcell-items-num6/viewtext classcell-items-detail/text/view
/view
view classcellsview classcell-itemsimage src/static/tabBar/template.png classcell-items-icon/imagetext classcell-items-title我参与的会议/textview classcell-items-num11/viewtext classcell-items-detail/text/viewhr /view classcell-itemsimage src/static/tabBar/template.png classcell-items-icon/imagetext classcell-items-title我审核的会议/textview classcell-items-num4/viewtext classcell-items-detail/text/view
/viewview classcellsview classcell-itemsimage src/static/tabBar/coding.png classcell-items-icon/imagetext classcell-items-title消息/text/viewhr /view classcell-itemsimage src/static/tabBar/component.png classcell-items-icon/imagetext classcell-items-title设置/text/view
/view
2.wxss
/* pages/ucenter/index/index.wxss */
.userInfo{padding: 5px 0px 20px 10px;display: flex;align-items: center;
}
.userInfo-head{height: 80px;width: 80px;border: 5px solid rgb(121, 212, 224);
}
.userInfo-login{width: 245px;padding-left: 10px;font-weight: 700;
}
.userInfo-set{color: rgb(146, 151, 155);
}
.cells{border-top: 8px solid rgb(238, 238, 238);
}
.cell-items{display: flex;align-items: center;border-top: 1px solid rgb(238, 238, 238);padding-top: 20px;padding-bottom: 20px;
}
.cell-items-icon{height: 25px;width: 25px;padding: 0px 10px 0px 5px;
}
.cell-items-title{width: 340px;
}
.cell-items-num{width: 30px;font-weight: 700;color: rgb(218, 31, 31);
}
.cell-items-detail{color: rgb(146, 151, 155);
}
效果演示 六、总体效果展示
1.首页 2.会议 3.投票 4.个人中心
到这里我的分享就结束了欢迎到评论区探讨交流
如果觉得有用的话还请点个赞吧
