EE308FZ_Fifth Assignment_Alpha Sprint_Sprint Essay 5-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73842328/article/details/144285439

Assignment 5	Alpha Sprint
Course	EE308FZ[A] — Software Engineering
Class Link	2401_MU_SE_FZU
Requirements	Fifth Assignment——Alpha Sprint
Team Name	FZUGO
Objective	Sprint Essay 5_Day9-Day10 (12.05-12.06)
Other Reference	1. WeChat Mini Program Design Guide 2. Javascript Style Guide 3. WeChat Developer Tools 4. The Art of Construction

Catalog

I. Project Burn-up Chart
II. Latest Running Gif of the Project Module
III. The Development Team Conducts Code Checks
IV. Release and Testing Results
V. Evaluation of Teammates

I. Project Burn-up Chart

Burn Down Chart

II. Latest Running Gif of the Project Module

Our project manager has ensured that all documentation is prepared and ready for delivery.
Our UI design and front-end development teams have completed all UI designs for the interfaces, along with the front-end development and optimization of all features, ensuring visual consistency across all interfaces and meeting the expected performance and functionality of each module. At the same time, they have coordinated with the backend team to complete the final integration of interfaces and data validation.
Our back-end development team has successfully completed the final data synchronization, interface debugging, and performance optimization, ensuring the stability and efficiency of the system.
Our testing and optimization team has completed the final integration testing to ensure compatibility and stability across different devices, and has also assisted in pre-release checks and internal testing to ensure there are no critical errors before release.

1. Homepage Interface

homepage

2. Map Interface

Map
Map

3. Location Summary Interface

Location Summary

4. Campus Guide Interface

Campus Guide

5. More Interface

mobile test

III. The Development Team Conducts Code Checks

Code Test

1. Homepage Interface

School Information Display Section

<view class="list-landscape-container">
  <swiper class="list-landscape-container-swiper" autoplay="{{autoplay}}" circular="{{circular}}">
    <block wx:for="{{background}}" wx:key="*this">
      <swiper-item>
        <view class="list-landscape-container-swiper-item">
          <image src="{{item}}" bindtap="lookPhoto"></image>
        </view>
      </swiper-item>
    </block>
  </swiper>

  <view class="list-landscape-container-icon" style="margin-left:306rpx">
    <image src="{{school_logo}}" />
  </view>

  <view class="list-landscape-container-icon" style="margin-left:556rpx;margin-top: -66rpx;">
    <image src="{{label}}" bindtap="tointroduction"></image>
  </view>

  <view class="list-landscape-container-text">
    {{school_information.school_name_full}}
  </view>
</view>

<view class="list-info">
  <view class="list-info-container">
    <view class="list-info-container-titletext red">{{school_information.motto}}</view>
    <view class="list-info-container-text">建校时间：{{school_information.build_time}}年</view>
    <view class="list-info-container-text">院校类型：{{school_information.institution_type}}</view>
  </view>
</view>

Common Functional Modules

<view class="card-container">
  <view class="card-container-card">
    <view class="card-container-card-title">🚩 常用功能</view>
    <view class="two">
      <image src="{{function_buttons[0]}}" bindtap="map" />
      <image src="{{function_buttons[1]}}" bindtap="school" />
    </view>
    <view class="two">
      <image src="{{function_buttons[4]}}" bindtap="rank" />
      <image src="{{function_buttons[3]}}" bindtap="link" />
    </view>
  </view>
</view>

Weather Information Display Section

<view class="list-laba">
  <image class="list-laba-image" src="{{weather}}" />
  <view class="list-laba-text weather_text">校园天气</view>
</view>

<view class="card-container-weather">
  <view class="card-container-weather-city">{{school_information.location}}</view>
  <view class="card-container-weather-tmp">
    <view>{{now.temp}}°</view>
    <image class="card-container-weather-tmp-icon" src="https://icons.qweather.com/assets/icons/{{now.icon}}.svg" />
  </view>
  <view class="card-container-weather-info">
    <view>{{now.windDir}} {{now.windScale}}级</view>
    <view>湿度 {{now.humidity}}%</view>
    <view>气压 {{now.pressure}}Pa</view>
  </view>
  <image class="card-container-wave" src="{{wave}}" />
</view>

Friendship Link Section

<mp-dialog title="友情链接" show="{{dialogShow}}" bindbuttontap="mapmarker" buttons="{{buttons}}">
  <view class="list-row">
    <view class="list-row-container" bindtap="toschool">
      <image src="{{school_icon}}" />
      <view>学校</view>
    </view>
    <view class="list-row-container" bindtap="tolibrary">
      <image src="{{book}}" />
      <view>图书馆</view>
    </view>
    <view class="list-row-container" bindtap="tofinance">
      <image src="{{money}}" />
      <view>财务处</view>
    </view>
    <view class="list-row-container" bindtap="toMiniProgram">
      <image src="{{magazine}}" />
      <view>招生</view>
    </view>
  </view>
</mp-dialog>

2. Map Interface

Starting and Ending Point Input Box Section

<view class="card-top-left">
  <view class="card-top-left-view up">
    <view class="card-top-circle start"></view>
    <input class="card-top-input" value="{{start.name}}" placeholder="当前地点/起点" disabled="true" data-search_id="{{1}}" bindtap="tosearch" />
  </view>

  <view class="card-top-left-view">
    <view class="card-top-circle end"></view>
    <input class="card-top-input" value="{{end.name}}" placeholder="请选择终点" disabled="true" data-search_id="{{w}}" bindtap="tosearch" />
  </view>
</view>

Route Button Section

// An highlighted block
<view class="card-top-right">
  <view class="card-top-right-button" bindtap="formSubmit">
    路线
  </view>
</view>

Map Display Section

<map style="width: 100%; height: {{windowHeight-180}}px;" id="map" subkey="{{subKey}}" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" min-scale="{{minscale}}" show-location="{{showLocation}}" enable-poi="{{enablepoi}}" markers="{{markers}}" polyline="{{polyline}}" bindmarkertap="markertap">
  <!-- 显示地图右侧按钮 -->
  <view class="map_right_card" style="margin-top: {{windowHeight-375}}px;">
    <view class="location">
      <image wx:if="{{polyline.length != 0}}" class="img" src="{{restore}}" bindtap="restore" />
    </view>

    <view class="location">
      <image class="img" src="{{location}}" bindtap="location" />
    </view>
  </view>

  <!-- 显示路线详情 -->
  <view class="map_right_card" style="margin-top: {{windowHeight-245}}px;width: 100%;">
    <view class="duration_and_distance" style="width: 100%;">
      <view wx:if="{{polyline.length != 0}}" class="duration_and_distance_text">耗时：{{duration}}分钟 距离：{{distance}}米</view>
    </view>

    <view class="location">
      <image class="img" src="{{use}}" bindtap="toinstruction" />
    </view>
  </view>
</map>

Route and Location Pop-up Section

<mp-dialog title="路线详情" show="{{dialogShow_road}}" bindbuttontap="mapmarker_close" buttons="{{button}}">
  <view class="road r_duration_and_distance">耗时：{{duration}}分钟 距离：{{distance}}米</view>
  <view class="road road_start">起点：{{start.name}}</view>
  
  <view wx:for="{{steps}}" wx:key="id">
    <view class="road">{{index+1}}.{{item.instruction}}</view>
  </view>

  <view class="road road_end">终点：{{end.name}}</view>
</mp-dialog>

3. Location Summary Interface

Left Classification List Section

<view class="card-left">
    <scroll-view scroll-y="true" style="height:{{windowHeight}}px;">
        <view class="card-left-scorll-view">
            <view class="card-left-scorll-view-label {{index == category ? 'choose' : ''}}" 
                  wx:for="{{site_data}}" wx:key="id" id="{{index}}" bindtap="changeCategory">
                {{item.name}}
            </view>
        </view>
    </scroll-view>
</view>

Details of the Location on the Right Side

<view class="card-right">
    <view class="card-right-title">
        <image class="card-right-title-icon" src="{{tag}}" mode="" />
        {{site_data[category].name}}
    </view>

    <scroll-view scroll-y="true" style="height: {{windowHeight-50}}px;width: {{windowWidth-75}}px;">
        <view class="card-right-content">
            <view class="card-right-content-card" wx:for="{{site_data[category].list}}" wx:key="id" 
                  bindtap="click" 
                  data-name="{{item.name}}" data-desc="{{item.desc}}" 
                  data-aliases="{{item.aliases}}" data-img="{{item.img}}" id="{{index}}">
                <view>
                    <image class="card-right-content-card-img" src="{{item.img}}" mode="aspectFill" />
                </view>
                <view class="card-right-content-card-context">
                    <view>
                        <image class="card-right-content-card-context-icon" src="{{little_location}}" mode="" />
                    </view>
                    <text>{{item.name}}\n<text style="color:dimgray">{{item.aliases}}</text></text>
                </view>
            </view>
        </view>
    </scroll-view>
</view>

Location Details Pop-up Section

<mp-dialog title="{{card.name}}" show="{{dialogShow}}" bindbuttontap="mapmarker" buttons="{{buttons}}">
    <view>
        <image bindtap="lookPhoto" mode="heightFix" style="height:270rpx;" src="{{card.img}}" data-src="{{card.img}}"></image>
        <view style="font-size:90%">{{card.aliases}}</view>
        <view>{{card.desc}}</view>
    </view>
</mp-dialog>

4. Campus Guide Interface

Content Jump List

<scroll-view scroll-y>
  <view class="cu-list">
    <view class="cu-item" wx:for="{{allWords}}" wx:key="index" bindtap="jump" data-id="{{index}}">
      <view class="content">
        <view>
          <text class="cuIcon-link">📖</text>
          <text class="text-grey">{{item.title}}</text>
        </view>
        <image style="height:40rpx;width:40rpx;" src="{{green_arrow}}"></image>
      </view>
    </view>
  </view>
</scroll-view>

Dynamic Content Display

<scroll-view scroll-y="true" style="height: {{height+'px'}}; top: 50px;position: fixed;" 
             scroll-into-view="{{detail}}" scroll-with-animation="true">
  <view class="cu-card dynamic" style="padding-bottom: 0;" 
        wx:for="{{curWords}}" wx:for-item="item" wx:key="index" id="id{{index}}">
    <view class="cu-item shadow padding-sm">
      <view class="text-content">
        <text class="text-blue text-xl">{{item.title}}</text>
      </view>
      <view class="content margin-sm">
        <text decode="true" user-select>{{item.content}}</text>
      </view>
      <view class="img" wx:for="{{item.imageList}}" wx:key="index" bindtap='clickImg' 
            data-url="{{items}}" data-id="{{index}}">
        <image src="{{items}}" mode="aspectFit"></image>
      </view>
    </view>
  </view>
</scroll-view>

5. More Interface

User Information Display

<view class="center_top">
  <view class="center_top_card">
    <view class="center_img">
      <image src="{{avatarUrl}}" class="user_head" mode="" />
    </view>
    <view class="center_info">
      <view class="center_name">
        {{miniprogram_name}}
      </view>

      <view class="center_welcome">
        欢迎使用{{miniprogram_name}}小程序
      </view>
    </view>
  </view>
</view>

Menu Item

<view class="menu">
  <view bindtap="tostatement" class="menu_row">
    <image style="height:60rpx;width:60rpx;margin-left:30rpx;" src="{{statement}}"></image>
    <view style="margin-left:10rpx;">软件声明</view>
    <image style="height:40rpx;width:40rpx;margin-left:auto;margin-right:10px" src="{{green_arrow}}"></image>
  </view>

  <button class="menu_row open_type" style="width: 95%;" open-type="contact">
    <image style="height:60rpx;width:60rpx;margin-left:30rpx;" src="{{chat}}"></image>
    <view style="margin-left:10rpx;">客服对话</view>
    <image style="height:40rpx;width:40rpx;margin-left:auto;margin-right:10px" src="{{green_arrow}}"></image>
  </button>

  <button class="menu_row open_type" style="width: 95%;" open-type="feedback">
    <image style="height:60rpx;width:60rpx;margin-left:30rpx;" src="{{feedback}}"></image>
    <view style="margin-left:10rpx;">意见反馈</view>
    <image style="height:40rpx;width:40rpx;margin-left:auto;margin-right:10px" src="{{green_arrow}}"></image>
  </button>

  <view bindtap="toadmin" class="menu_row">
    <image style="height:60rpx;width:60rpx;margin-left:30rpx;" src="{{admin}}"></image>
    <view style="margin-left:10rpx;">管理界面</view>
    <image style="height:40rpx;width:40rpx;margin-left:auto;margin-right:10px" src="{{green_arrow}}"></image>
  </view>

  <view bindtap="getopenid" class="menu_row">
    <image style="height:60rpx;width:60rpx;margin-left:30rpx;" src="{{admin}}"></image>
    <view style="margin-left:10rpx;">查看openid</view>
    <image style="height:40rpx;width:40rpx;margin-left:auto;margin-right:10px" src="{{green_arrow}}"></image>
  </view>
</view>

Copyright Information

<view style="font-size:30rpx;color:#717776; text-align: center;">
  <text decode="{{true}}">{{miniprogram_name}}&ensp;|&ensp;版权归开发者所有</text>
</view>

IV. Release and Testing Results

在这里插入图片描述

V. Evaluation of Teammates

Student ID	Name	Work	Contribution
832202127	唐宁蔚	Project Manager + Bolg Writing	10%
832201130	薛墨澜	UI Interface Design + Front-end Development	10%
832201126	谢荣城	UI Interface Design + Front-end Development	10%
832201113	张绍钰	UI Interface Design + Front-end Development	10%
832201219	周欣怡	Front-end Development + Defense PPT Production	10%
832202202	王希瑞	Back-end Development	10%
832202208	刘丹妮	Back-end Development	10%
832202213	吴杨顺	Back-end Development	10%
832202214	张子晔	Testing and Optimization + Deployment and Launch	10%
832202209	寿宇浩	Testing and Optimization + Deployment and Launch	10%