THEMIS---Alpha Sprint Essays1

THEMIS—Alpha Sprint Essays1

---

The Link MY Class	2301-MUSE社区-CSDN社区云
The Link of Requirement of This Assignment	Teamwork——Alpha Sprint-CSDN社区
Team Name	THEMIS
The Aim of This Assignment	Alpha Sprint–Implement campus rental platform
Other Reference Documents

---

---

1. Meeting photo 📸

2. Progress overview 📝

• Found and downloaded appropriate UI component materials for some pages;
• The general front-end framework is built, and changes will be made according to the actual situation
• Completed the detailed coding of some pages;

3. Progress details 📃

1️⃣Download the UI component material of some pages

2️⃣The general front-end page framework is built

3️⃣Completed part of the front-end page design and text writing

Registration login interface

• login.wxml :

<view class="top-bg"></view>
<view class="contain">
   <view class="card">
   	<view class="title">登录注册</view>
   	<view class="contact">
   		<input bindinput="emInput" value="{{email}}" maxlength="30" placeholder-class="pache" placeholder="输入您的账号" />
   	</view>
   	<view class="contact">
   		<input bindinput="wxInput" value="{{wxnum}}" maxlength="30" placeholder-class="pache" placeholder="输入您的密码" />
   	</view>
   </view>
 <van-divider />
   <!--底部确认-->
   <button class="confirm" open-type='getUserInfo' bindgetuserinfo="getUserInfo">注册并登录</button>
   <view class="shen_title">
   	<image class="about" src="/images/about.png" />使用申明
   </view>
   <view class="des">1. 请确保微信号、qq号和邮箱百分百有效，之后将用于发送实时订单通知。</view>
   <view class="des">2.待补充。</view>
   <view class="des">3. 待补充。</view>
   <view class="des">4. 待补充</view>
</view>

• login.wxss

.top-bg {
     position: absolute;
     top: 0rpx;
     left: 0rpx;
     width: 100%;
     height: 460rpx;
     background-repeat: no-repeat;
     background-size: 100%;
}

.contain {
     position: absolute;
     top: 176rpx;
     left: 0rpx;
     width: 100%;
     padding: 0rpx 40rpx 0rpx 40rpx;
     box-sizing: border-box;
}

.card {
     border-radius: 32rpx;
     width: 100%;
     background: #fff;
     padding: 50rpx 60rpx;
     box-sizing: border-box;
     box-shadow: 0 0 20rpx #eee;
}

.title {
     width: 100%;
     text-align: center;
     font-size: 40rpx;
     font-weight: 600;
     letter-spacing: 6rpx;
}

.phone {
     justify-content: space-between;
     margin-top: 45rpx;
     width: 100%;
     height: 92rpx;
     background: #f1f3f8;
     border-radius: 10rpx;
     text-align: left;
     padding: 0 20rpx 0 36rpx;
     box-sizing: border-box;
     font-size: 32rpx;
     display: flex;
     align-items: center;
     color: #8c9aa8;
     border: none;
}

.phone::after {
     border: none;
}

.campus {
     margin-top: 24rpx;
     width: 100%;
     height: 92rpx;
     background: #f1f3f8;
     border-radius: 10rpx;
     text-align: left;
     padding: 0 20rpx 0 36rpx;
     box-sizing: border-box;
     font-size: 32rpx;
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: #8c9aa8;
}

.right {
     width: 30rpx;
     height: 30rpx;
}

.contact {
     margin-top: 24rpx;
     width: 100%;
     height: 92rpx;
     background: #f1f3f8;
     border-radius: 10rpx;
     text-align: left;
     padding: 0 36rpx;
     box-sizing: border-box;
     font-size: 32rpx;
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: #8c9aa8;
}

.contact input {
     width: 100%;
     height: 100%;
}

.pache {
     font-size: 32rpx;
     color: #8c9aa8;
}

.confirm {
     margin-top: 50rpx;
     width: 100%;
     height: 100rpx;
     display: flex;
     justify-content: center;
     align-items: center;
     background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
     border-radius: 60rpx;
     color: #fff;
     font-size: 40rpx;
     letter-spacing: 4rpx;
     box-shadow: 0 0 20rpx #eee;
     border: none;
}

.confirm::after {
     border: none;
}
.shen_title{
     margin-top: 40rpx;
     font-size: 32rpx;
     letter-spacing: 2rpx;
     display: flex;
     justify-content: flex-start;
     align-items: center;
}
.about{
     width: 32rpx;
     height: 32rpx;
     padding-right: 10rpx;
}
.des{
     padding-left: 30rpx;
     padding-top: 20rpx;
     font-size: 26rpx;
     color: #acacac;
     letter-spacing: 2rpx;
     line-height: 42rpx;
}
.top-bg {
     position: absolute;
     top: 0rpx;
     left: 0rpx;
     width: 100%;
     height: 460rpx;
     background: #fbbd08;
     background-repeat: no-repeat;
     background-size: 100%;
}

Chat interface

• room.wxml

<view class="container">

<van-notice-bar left-icon="volume-o" text="注意交易安全balabala后续补充!" speed="30" />
 <chatroom
   style="width: 100%; height: 95%"
   envId="{{chatRoomEnvId}}"
   collection="{{chatRoomCollection}}"
   groupId="{{chatRoomGroupId}}"
   groupName="{{chatRoomGroupName}}"
   userInfo="{{userInfo}}"
   onGetUserInfo="{{osnGetUserInfo}}"
   getOpenID="{{getOpenID}}"
 ></chatroom>
</view>

• room.wxss

.container {
 height: 98%;
 position: absolute;
 /* top: 0; */
 bottom: 0;
 left: 0;
 right: 0;
 padding-top: 80rpx;
 padding-bottom: 30rpx;
 width: 100%;
 display: flex;
 flex-direction: column;
}

.space {
 width: 100%;
 height: 15rpx;
 background: #eee;
}

Customer service contact interface

• kefu.wxml

<view class="contain">
     <view style="height:20rpx;"></view>
     <!--顶部图-->
     <image src="{{banner}}" class="slide-image" />
     <!--在线咨询-->
     <view class="card">
           <view class="card1">
                 <image class="wechatimg" src="/images/online.png" />
           </view>
           <view class="borderbox">
                 <view class="border"></view>
           </view>
           <view class="centercontain">
                 <view class="name">在线咨询</view>
                 
           </view>
           <view class="rightico">
                       <image class="rightimg" src="/images/right.png" />
           </view>
           <button open-type="contact"></button>
     </view>
     <!--微信联系-->
     <view class="card" bindtap="copy" data-copy="{{weixin}}" data-name="微信">
           <view class="card1">
                 <image class="wechatimg" src="/images/weixin.png" />
           </view>
           <view class="borderbox">
                 <view class="border"></view>
           </view>
           <view class="centercontain">
                 <view class="name">官方微信</view>
                 
           </view>
           <view class="rightico">
                 <image class="rightimg" src="/images/right.png" />
           </view>
     </view>
     <!--QQ联系-->
     <view class="card" bindtap="copy" data-copy="{{qq}}" data-name="QQ">
           <view class="card1">
                 <image class="wechatimg" src="/images/qq.png" />
           </view>
           <view class="borderbox">
                 <view class="border"></view>
           </view>
           <view class="centercontain">
                 <view class="name">QQ联系</view>
                 
           </view>
           <view class="rightico">
                 <image class="rightimg" src="/images/right.png" />
           </view>
     </view>
    
     <!--公众号-->
     <view class="card" bindtap="preview" data-link="{{gzh}}">
           <view class="card1">
                 <image class="wechatimg" src="/images/gzh.png" />
           </view>
           <view class="borderbox">
                 <view class="border"></view>
           </view>
           <view class="centercontain">
                 <view class="name">官方公众号</view>
                 
           </view>
           <view class="rightico">
                 <image class="rightimg" src="/images/right.png" />
           </view>
     </view>
</view>

• kefu.wxss

.contain{
   width: 100%;
   padding: 0 46rpx;
   box-sizing: border-box;
}
.slide-image{
   width: 100%;
   height: 310rpx;
   border-radius: 20rpx;
}
.card{
   margin-top: 40rpx;
   border-radius: 20rpx;
   width: 100%;
   height: 162rpx;
   box-sizing: border-box;
   box-shadow: 0 0 20rpx #eee;
   display: flex;
   position: relative;
}
.card button{
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0rpx;
     top: 0rpx;
     opacity: 0.01;
}
.card1{
   width: 140rpx;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.wechatimg{
   width: 90rpx;
   height:90rpx;
}
.borderbox{
   width: 10rpx;
   height: 100%;
   display: flex;
   align-items: center;
}

.border{
   width: 4rpx;
   height: 82rpx;
   border-left: 3rpx solid #eee;
   box-sizing: border-box;
}

.centercontain{
   width: 420rpx;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
    padding-left: 20rpx;
}
.name{
   font-size: 32rpx;
   font-weight: 600;
   letter-spacing: 2rpx;
}
.des{
   padding-top: 10rpx;
   font-size: 28rpx;
   color: rgb(161, 161, 161);
    letter-spacing: 2rpx;
}
.rightico{
   width: 40rpx;
   height: 100%;
    display: flex;
   align-items: center;
   justify-content: center;
}

.rightimg{
   width: 30rpx;
   height: 30rpx;
}

help Interface (Self-Help Q&A)

• help.wxml

<view class="contain" >
     <view class="contains" wx:for="{{list}}" wx:key="id">
           <view class="top" bindtap="show" data-show="{{item}}">
                 <view class="title">{{item.id+1}}.{{item.title}}</view>
                 <image wx:if="{{item.check}}" class="ico" src="/images/on.png"></image>
                 <image wx:if="{{!item.check}}" class="ico" src="/images/off.png"></image>
           </view>
           <view class="descontain" hidden="{{!item.check}}">
                 <block wx:for="{{item.des}}" wx:key="*this">
                       <view class="destext">{{item}} </view>
                 </block>
           </view>
     </view>
</view>
<view style="height:100rpx;"></view>
<view class="bottom">
     <button bindtap="go" data-go="/pages/kefu/kefu">
           <image style="width:40rpx;height:40rpx;" src="/images/kefu.png" />
           <view class="btxt">联系客服</view>
     </button>
     <view class="center"></view>
     <button bindtap="go" data-go="/pages/about/about">
           <image style="width:40rpx;height:40rpx;" src="/images/good.png" />
           <view class="btxt">去打赏</view>
     </button>
</view>

• help.js

Page({
     /**
      * 页面的初始数据
      */
     data: {
           list: [{
                       title: 'THEMIS校园租赁小程序为什么会插入广告？',
                       id: 0,
                       des: [ '小程序完全公益，不存在盈利目的，插入广告仅仅是为了本小程序的正常运行，望理解'],
                       check: true,
                 }, {
                       title: '该程序收费吗？',
                       id: 1,
                       des: ['本程序是完全的公益项目，，您可以随心所欲的发布自己的闲置物品和购买。'],
                       check: false,
                 }, {
                       title: '该程序是做什么的？',
                       id: 2,
                       des: ['本程序主要是方便福州各大学的同学发布自己不要了的二手书籍或者物品。',
                             'THEMIS校园租赁旨在为学生提供一个便捷、安全的交易平台，方便学生进行二手交易，促进校园资源的共享和循环利用。'
                       ],
                       check: false,
                 }, {
                       title: '本程序的通知形式？',
                       id: 3,
                       des: ['对于买家下单时，我们通过微信服务消息通知和邮件发送订单信息给卖家，通知与您联系完成交易', '当交易状态中途取消时，也会通过微信服务信息通知于您', '您也可以在订单详情页面通过买（卖）家留下的联系方式第一时间联系，这样更能提高效率'],
                       check: false,
                 },
                 {
                       title: '为什么要留下联系方式？',
                       id: 4,
                       des: ['本程序交易完全由交易双方沟通。', '除非程序出现问题导致交易故障，平台不参与任何交易'],
                       check: false,
                 }, {
                       title: '小程序发现异常（bug）怎么办？',
                       id: 5,
                       des: ['点击客服加群或关注公众号反馈，我们会有专人为您服务。您还可以向我们提出意见或者建议，我们会争取将小程序做得更好！！！希望我们能够一起打造一个完美的校园租赁平台。'],
                       check: false,
                 },
           ]
     }

help.wxss文件代码

.contain {
     width: 100%;
     padding: 30rpx 30rpx;
     box-sizing: border-box;
}

.top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 50rpx;
     margin-top: 20rpx;
}

.title {
     font-size: 32rpx;
     font-weight: 600;
     letter-spacing: 2rpx;
     width: calc( 100% - 60rpx);
     line-height: 50rpx;
}

.ico {
     width: 50rpx;
     height: 50rpx;
}

.descontain {
     margin-top: 30rpx;
     background: #f8f8f8;
     border-radius: 15rpx;
     width: 100%;
     padding: 14rpx 24rpx 24rpx 24rpx;
     box-sizing: border-box;
}

.destext {
     padding-top: 10rpx;
     font-size: 29rpx;
     line-height: 44rpx;
     color: #a7adb8;
     letter-spacing: 1rpx;
}

.contains {
     width: 100%;
     padding-bottom: 30rpx;
     border-bottom: 1rpx solid #f8f8f8;
}

.bottom {
     left: 0rpx;
     bottom: 0rpx;
     right: 0rpx;
     position: fixed;
     align-items: center;
     display: flex;
     width: 100%;
     height: 100rpx;
     box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.212);
}

button {
     width: 49%;
     height: 100%;
     background: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     border: none;
}

button::after {
     border: none;
}

.btxt {
     padding-left: 20rpx;
     font-size: 34rpx;
     letter-spacing: 2rpx;
}

.center {
     font-weight: 2%;
     border-right: 2rpx solid #a7adb8;
     height: 32rpx;
}

edit page

• edit.wxml

<view class="top-bg"></view>
<view class="contain">
     <view class="card">
           <view class="title">修改资料</view>
           <picker bindchange="choose" value="{{ids}}" range="{{campus}}" range-key="name">
                 <view class="campus">
                       <block wx:if="{{ids!==-1}}">当前选择：{{campus[ids].name}}</block>
                       <block wx:if="{{ids==-1}}">请选择您所在校区</block>
                       <image class="right" src="/images/right.png" />
                 </view>
           </picker>
            <view class="contact">
                 <input bindinput="emInput" value="{{email}}" maxlength="30" placeholder-class="pache" placeholder="输入您的邮箱地址" />
           </view>
           <view class="contact">
                 <input bindinput="wxInput" value="{{wxnum}}" maxlength="30" placeholder-class="pache" placeholder="输入您的微信号(选填)" />
           </view>
           <view class="contact">
                 <input type="number" bindinput="qqInput" value="{{qqnum}}" maxlength="20" placeholder-class="pache" placeholder="输入您的QQ号" />
           </view>
     </view>
      <van-divider />
   <van-checkbox value="{{checked}}" checked-color="#fbbd08" bind:change="onChange">
   	授权接收订单消息通知
   </van-checkbox>
     <!--底部确认-->
     <button class="confirm" open-type='getUserInfo' bindgetuserinfo="getUserInfo">提交修改</button>
     <view class="shen_title">
           <image class="about" src="/images/about.png" />使用申明
     </view>
     <view class="des">1. 待补充</view>
     <view class="des">2. 待补充</view>
     <view class="des">3. 待补充</view>
     <view class="des">4. 待补充</view>
</view>

edit.wxss

.top-bg {
      position: absolute;
      top: 0rpx;
      left: 0rpx;
      width: 100%;
      height: 460rpx;
      background:#fbbd08;
      background-repeat: no-repeat;
      background-size: 100%;
}

.contain {
      position: absolute;
      top: 30rpx;
      left: 0rpx;
      width: 100%;
      padding: 0rpx 40rpx 0rpx 40rpx;
      box-sizing: border-box;
}

.card {
      border-radius: 32rpx;
      width: 100%;
      background: #fff;
      padding: 50rpx 60rpx;
      box-sizing: border-box;
      box-shadow: 0 0 20rpx #eee;
}

.title {
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      font-weight: 600;
      letter-spacing: 6rpx;
}

.phone {
      justify-content: space-between;
      margin-top: 45rpx;
      width: 100%;
      height: 92rpx;
      background: #f1f3f8;
      border-radius: 10rpx;
      text-align: left;
      padding: 0 20rpx 0 36rpx;
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      color: #8c9aa8;
      border: none;
}

.phone::after {
      border: none;
}

.campus {
      margin-top: 24rpx;
      width: 100%;
      height: 92rpx;
      background: #f1f3f8;
      border-radius: 10rpx;
      text-align: left;
      padding: 0 20rpx 0 36rpx;
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #8c9aa8;
}

.right {
      width: 30rpx;
      height: 30rpx;
}

.contact {
      margin-top: 24rpx;
      width: 100%;
      height: 92rpx;
      background: #f1f3f8;
      border-radius: 10rpx;
      text-align: left;
      padding: 0 36rpx;
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #8c9aa8;
}

.contact input {
      width: 100%;
      height: 100%;
}

.pache {
      font-size: 32rpx;
      color: #8c9aa8;
}

.confirm {
      margin-top: 50rpx;
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background:linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
      border-radius: 60rpx;
      color: #fff;
      font-size: 40rpx;
      letter-spacing: 4rpx;
      box-shadow: 0 0 20rpx #eee;
      border: none;
}

.confirm::after {
      border: none;
}

.shen_title {
      margin-top: 40rpx;
      font-size: 32rpx;
      letter-spacing: 2rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
}

.about {
      width: 32rpx;
      height: 32rpx;
      padding-right: 10rpx;
}

.des {
      padding-left: 30rpx;
      padding-top: 20rpx;
      font-size: 26rpx;
      color: #acacac;
      letter-spacing: 2rpx;
      line-height: 42rpx;
}

4. Experience 💭

• UI Group（林兆青 李欣芸 华雨杨）

The UI design has been further improved and new page components and service tools have been redefined. Due to the complicated UI design feedback in the process of front-end page building, the front-end is difficult to achieve, and there are unreasonable areas in the UI design that need to be improved. After docking and negotiation with the front-end part, further adjustment and improvement will be made.

• 洪伟杰

How to start writing an entire page is often a difficult problem, which involves page elements and styles. In fact, I only need to complete one of the four elements of this page, and the other three are almost the same.
I learned that there was a plugin to help me make a rough page, so I could build on it. That’s CodeFun, created by “即时设计”.

• 鲍琳

At the beginning, because my professional did not learn a lot of front-end knowledge, so after self-learning to write my own code will make me feel difficult and rusty. Sometimes I can not find the best layout of a page, or do not know their superior relationship.
However, after I constantly watching the relevant code structure explanation videos and their own relevant exercises, now it can be more organized to clarify the page layout and the relationship between superiors and subordinates. At the same time, in the communication with my classmates, I found that the export function of “ui design” small program saved me a lot of effort. I’m now managing to practice more in the future to make sure I get better at programming.

• 高铭浩

In the process of creating edit pages based on the ui designed by my group members, I deeply realized the challenges of front-end development. Here are some of the things I learned about WXML and WXSS:

• WXML, as the page description language for wechat applets, has good readability and flexibility. By building the page structure in such a way, I was able to clearly express the page hierarchy and make the code easier to maintain. In practice, using tags such as <view> and <picker>, I successfully built a personalized user profile modification page.
• WXSS provides powerful style control for applets to make the page more attractive. By defining .class and #id selectors, I easily added styles to the page elements to achieve personalized appearance effects. For example, with styles such as gradient backgrounds and rounded borders, I gave the page a modern and cozy feel.
• In addition to the technical aspects, I also focus on the design ideas and user experience of the page. Through design techniques such as reasonable layout and color matching, I make users feel comfortable and convenient when modifying their profiles. Meanwhile, a submit button is set at the bottom of the page, which realizes the submission of information through the authorization of WeChat users and improves the user’s operation experience.

• 彭雨馨

I ran into some difficulties when prototyping the front-end code of the mini program through UI. The main difficulties include achieving complex interaction and animation effects, as well as adaptation issues on different screen sizes. To solve these difficulties, I learned how to use small program frameworks, such as how to use custom components, templates, and event-driven programming. Through practice, I learned a lot of new knowledge, including performance optimization, loading speed improvement and other skills. In addition, reading official documentation, participating in developer community discussions, and referring to good open source projects are all easy ways to solve difficulties. When it comes to adapting to different screen sizes, I’ve learned to use techniques like elastic layout and media queries to achieve responsive design, ensuring that small programs look good on a variety of devices.

• 苏宇翔

I encountered several challenges specific to the content of my work. Firstly, it is hard to to design van-notice-bar and chatroom. I had to learn not only their properties and functionalities but also how to use them in my page effectively.

Additionally, data binding posed a significant challenge, especially in correctly passing data such as envId and userInfo to the chatroom component.

Through this process, I learned how to effectively use and customize various components within my project. Handling data bindings and event handler functions boosted my programming skills. Furthermore, learning to optimize page layouts for different devices has significantly improved my wxss abilities.

5. Project Burnout Diagram 📈