ZUCC信息网demo项目展示
博客班级 | https://edu.cnblogs.com/campus/zjcsxy/SE2020 |
作业要求 | https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334 |
作业目标 | 从0基础开始,做一个面向大众,能够使大众了解浙大城市学院基本情况的小程序 |
作业源代码 | https://github.com/happily4399/ZUCC_1.0 |
学号 | 31802323 |
所在学院 | 浙大城市学院 计算机科学与技术专业 |
前言:
利用了国庆七天假期,从0基础开始学习小程序,逐渐完成的ZUCC信息小程序demo,用于提交软件工程第一次作业。
预览效果:
项目简介:
本博客介绍一个,面向大众(有兴趣了解zucc的大众)的简易ZUCC信息小程序,无需登录,实现在线查看ZUCC相关新闻信息,ZUCC下级分院介绍的小程序
由于是查看信息的小程序,所以并没有很多逻辑功能的实现,更多的代码量在于页面设计与美化界面。
开发工具:
微信开发者工具,vscode2019
项目架构展示:
功能展示:
点击分院图标查看相关分院的招生宣传文章
点击相关信息分类,直接进入学校详情旁的相关导航栏,查看对应新闻
前端设计的关键代码实现:
序.app文件
app.wxss
(用于布控整体,将内框与外边框分隔开,由于多处使用,便将其放入全局文件中):
.container{ padding:0 26rpx; box-sizing: border-box;} @keyframes dh{ 0%, 50%, 100%{opacity: 1;} 25%, 75%{ opacity: 0;} }
1.顶部标题(自定义组件)
功能为展示学校logo与客服功能(后期用于提交bug)
设计时,由于其存在于整个小程序所有页面中,故将其作为自定义组件存放在component文件夹中
zucc.wxml代码展示:
<view class="header"> <view class="container hdCon"> <!-- logo部分,可用于跳转至主页 --> <navigator open-type="switchTab" url="/pages/index/index" class="logo"> <image mode="heightFix" src="/images/Zucclogo.png"></image> </navigator> <!-- 客服部分,可用于提交bug --> <view class="kefu"> <button class="btn" open-type="contact"></button> <image mode="heightFix" src="/images/xiaoxi.png"></image> </view> </view> </view>
zucc.wxss代码展示:
/* 首部模块 */ .header{widows: 750rpx;height: 90rpx; background-color: #0e86D3} .hdCon{ display: flex; justify-content: space-between; align-items: center; height: 100%;} .hdCon navigator, .hdCon .kefu{ height: 70rpx;} .hdCon image{ height: 100%;} .kefu{ position: relative; animation: dh linear 2s infinite alternate;} .kefu .btn{position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; }
2.底部图标(自定义组件)
功能:美观好看
zucc_low.wxml代码展示:
<view class="line"></view> <view class="footer"> <image class="pic" mode="widthFix" src="https://s1.ax1x.com/2020/10/06/0NjjyD.jpg"></image> <view class="text">-高等教育学校-</view> </view>
zucc_low.wxss代码展示:
/* 底部学校图标模块 */ .line{background: #f2f2f2; width: 100%; height: 5rpx;} .footer{ padding: 30rpx 0; text-align: center;} .footer .pic{width: 80rpx;} .footer .text{font-size: 25rpx;color: #666;}
3.导航栏(存在app.json中)
功能:方便用户在主页和学院详情界面跳转
代码展示:
"tabBar": { "selectedColor": "#FE9132", "list":[ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/home.png", "selectedIconPath": "images/home-h.png" },{ "pagePath": "pages/works/works", "text": "学院详情", "iconPath": "images/user.png", "selectedIconPath": "images/user-h.png" } ] },
4.轮播图模块
实现代码(wxml):
<view class="banner"> <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" circular autoplay interval="4000"> <swiper-item><image src="https://s1.ax1x.com/2020/10/06/0Nl0BQ.png"></image></swiper-item> <swiper-item><image src="https://s1.ax1x.com/2020/10/06/0N1n5n.png"></image></swiper-item> <swiper-item><image src="https://s1.ax1x.com/2020/10/06/0N1Q2V.png"></image></swiper-item> <swiper-item><image src="https://s1.ax1x.com/2020/10/06/0N18rF.png"></image></swiper-item> </swiper> </view>
wxss:
/* 轮播图模块 */ .banner{width: 100%; height: 295rpx;} .banner swiper{height: 100%;width: 100%;} .banner image{ width: 100%; height: 295rpx;}
5.学院分类模块
功能:用于跳转至各个分院的宣传文章中
wxml实现:
<scroll-view class="major" scroll-x> <navigator class="box" url="/pages/cs/cs"> <image class="pic" src="https://s1.ax1x.com/2020/10/06/0N8Uc6.jpg"></image> <view class="txt">计算分院</view> </navigator> <navigator class="box" url="/pages/xd/xd"> <image class="pic" src="https://s1.ax1x.com/2020/10/06/0N8t91.jpg"></image> <view class="txt">信电分院</view> </navigator> <navigator class="box" url="/pages/gc/gc"> <image class="pic" src="https://s1.ax1x.com/2020/10/06/0NYEAe.jpg"></image> <view class="txt">工程分院</view> </navigator> <navigator class="box" url="/pages/fx/fx"> <image class="pic" src="https://s1.ax1x.com/2020/10/06/0N8wnO.jpg"></image> <view class="txt">法学分院</view> </navigator> <navigator class="box" url="/pages/yx/yx"> <image class="pic" src="https://s1.ax1x.com/2020/10/06/0N80BD.jpg"></image> <view class="txt">医学分院</view> </navigator> <navigator class="box" url="/pages/lb/lb"> <image class="pic" src="https://s1.ax1x.com/2020/10/06/0N8KXT.jpg"></image> <view class="txt">图书馆</view> </navigator> </scroll-view>
wxss实现:
/* 学院分类模块 */ .major{ white-space: nowrap; padding: 30rpx 0;} .major .box{ text-align: center; width: 165rpx;display: inline-block;} .major .pic{width: 100rpx; height: 100rpx;} .major .txt{ font-size: 26rpx; margin-top: 8rpx;} .pubTitle{ display: flex; justify-content: space-between; height: 60rpx; align-items: center; margin-bottom: 40rpx;} .pubTitle .txt{ font-size: 34rpx; height: 100%; position: relative; padding-left: 20rpx;} .pubTitle .txt::after{ display: block; width: 10rpx; height: 20rpx; background-color: #0e86D3; content: ""; position: absolute; left: 0; top: 50%; margin-top: -15rpx;} .pubTitle .more{ font-size: 24rpx; color: #666;}
6.一个好看的跳转表格
功能:对接学院详情界面的导航栏,点击后直接跳转至相应位置
简介:
实现这种效果使用了两个同级的模块
ceng:遮罩层,用于铺在图片上,使图片减少对比度,并为相应的字提供平面
pic:用于放图片
wxml关键代码:
<view class="works"> <view class="container"> <!-- 介绍模块 --> <view class="pubTitle"> <view class="txt">学院详情</view> <navigator class="more">更多 >></navigator> </view> <!-- 跳转栏模块 --> <view class="wkMain"> <navigator class="box" open-type="reLaunch" url="/pages/works/works?id=0"> <image class="pic" src="https://s1.ax1x.com/2020/10/06/0NBJl4.jpg"></image> <view class="ceng"> <view class="title">认识城院</view> <view class="line"></view> <view class="des">Get to know ZUCC</view> </view> </navigator> </view> </view> </view>
wxss关键代码:
/* 学校详情模块 */ .works{ background: #f0f3f8; padding: 90rpx 0 70rpx;} .wkMain{display: flex; flex-wrap: wrap; justify-content: space-between;} .wkMain .box{ width: 344rpx; height: 214rpx; margin-bottom: 10rpx; position: relative;} .wkMain .pic{ width: 100%; height: 100%;} /* 降低对比度的遮罩层 */ .wkMain .ceng{ width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 20rpx; box-sizing: border-box;} .wkMain .ceng .title{font-size: 34rpx;} .wkMain .ceng .line{width: 100rpx; height: 2rpx; background: #fff; margin: 10rpx 0 20rpx;} .wkMain .ceng .des{ opacity: 0.6; text-transform: uppercase; font-size: 20rpx; letter-spacing: 2rpx;}
7.经典新闻展示样式
功能:用于展示杭州高校相关动态,对应城院官网的同名功能
wxml关键代码实现:
<view class="dynamic"> <view class="container"> <view class="pubTitle"> <view class="txt">高校动态</view> <navigator class="more">更多 >></navigator> </view> <view class="dyMain"> <navigator class="dyItem"> <view class="pic"> <image src="https://s1.ax1x.com/2020/10/07/0aZWxe.jpg"></image> </view> <view class="txt"> <view class="title"> 月是中秋圆 | 包饺子、话家常,共庆佳节 </view> <view class="info"> <text>作者:</text>学生工作部<text space="ensp"> - </text><text>时间:</text>2020-09-30 </view> </view> </navigator> </view> </view> </view>
wxss实现:
/* 高校动态部分 */ .dynamic{ padding:90rpx 0 70rpx;} .dyItem{display:flex; padding: 15rpx 0; border: 1rpx dashed #f4f4f4; justify-content: space-between;} .dyItem .pic{width: 230rpx; height: 150rpx;} .dyItem .pic image{width: 100%;height: 100%;} .dyItem .txt{width: 440rpx; display: flex; flex-direction: column; justify-content: space-between;} .dyItem .title{ font-size: 32rpx;} .dyItem .info{font-size: 26rpx;color:#888} .dyItem .info text{font-size: 22rpx}
8.可滑动顶端导航栏实现
wxml代码:
<scroll-view class="tabs" scroll-x scroll-with-animation> <view class="tabs_title"> <view wx:for="{{tabs}}" wx:key="id" bindtap="handleTap" data-index="{{index}}" class="title_item {{item.isActive?'active':''}}" > {{item.value}} </view> </view> <view class="tabs_content"></view> </scroll-view> <block wx:if="{{tabs[0].isActive}}"><knowzucc/></block> <block wx:if="{{tabs[1].isActive}}"><science/></block> <block wx:if="{{tabs[2].isActive}}"><people/></block> <block wx:if="{{tabs[3].isActive}}"><new/></block>
wxss代码:
.tabs{height: 80rpx; box-shadow: 0 10rpx 10rpx rgba(0,0,0,0.05);border-top:1rpx solid #efefef; white-space: nowrap;} .tabs_title{display: flex;} .title_item{display: inline-block; line-height: 80rpx; width:150rpx; text-align: center; font-size:30rpx; position: relative; padding-left: 25rpx; padding-right: 25rpx;} .active{color:#0e86D3;} .active::after{content: ""; display: block; width:40rpx; height: 5rpx; background:#0e86D3; position: absolute; left:50%; margin-left:-20rpx; bottom:0;}
基础数据js代码:
data: { tabs:[ { id:0, value:"认识城院", isActive:true }, { id:1, value:"科学研究", isActive:false }, { id:2, value:"人才培养", isActive:false }, { id:3, value:"新闻报道", isActive:false }, { id:4, value:"综合服务", isActive:false }, { id:5, value:"师资队伍", isActive:false }, { id:6, value:"走进校园", isActive:false }, { id:7, value:"招生咨询", isActive:false }, ] },
点击后使相应导航栏处于选中状态js函数:
handleTap(e){ const{index}=e.currentTarget.dataset; let {tabs} = this.data; tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false); this.setData({ tabs }) },
点击index中的图片跳转到相应导航栏的js函数:
handleTapID(e){ var id = e; let {tabs} = this.data; tabs.forEach((v,i)=>i===id?v.isActive=true:v.isActive=false); this.setData({ tabs }) },
用于储存传递至页面数据的js代码:
onLoad: function (options) { if(options.id==null){ this.handleTapID(0) } else{ this.handleTapID(parseInt(options.id)) } },
结语:
国庆黄金周期间投入了很多时间去学习小程序,虽然最后的成品没有很多有趣的功能,仅仅像一张报纸,但我仍学到了很多前端设计上的小技巧,这些都将成为我后续开发认知评估系统界面强有力的帮手。
2020.10.16