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