2021秋软工实践第二次结对编程作业

CC_川行 2021-10-09 21:47:09

软工第四次作业

这个作业属于哪个课程	https://bbs.csdn.net/forums/fzuSoftwareEngineering2021?category=0
这个作业的要求在哪里	https://bbs.csdn.net/topics/601189945
这个作业的目标	进行需求分析，原型实现
个人学号	031902141
结对成员学号	031902124
结对小伙伴的博客	https://bbs.csdn.net/topics/601427142
Github仓库地址	https://github.com/Horizonxr/Zhongqiu-Dice
视频演示链接	https://www.bilibili.com/video/BV11b4y1a7UZ/

PSP

PSP2.1	Personal software process stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划
Estimate	估计这个任务需要多少时间	30	30
Development	开发
Analysis	需求分析 (包括学习新技术)	360	1000
Design Spec	生成设计文档	120	120
Design Review	设计复审	60	60
Coding Standard	代码规范 (为目前的开发制定合适的规范)	30	30
Design	具体设计	60	60
Coding	具体编码	1500	2000
Code Review	代码复审	120	120
Test	测试（自我测试，修改代码，提交修改）	300	300
Reporting	报告
Test Report	测试报告	60	60
Size Measurement	计算工作量	20	20
Postmortem & Process Improvement Plan	事后总结, 并提出过程改进计划	120	120
合计		2720	3920

重点/难点功能、编程思考

uni-app生命周期

在做uniapp的项目之前学过Vue的生命周期，由于用的就是Vue的框架所以觉得差不多，但是在实际开发中由于之前学艺不精（捂脸）经常搞错

相较于Vue的生命周期，uni-app将生命周期分为了应用生命周期，页面生命周期和组件生命周期，还是存在一些区别的，所以花了一些时间来翻阅官方的文档

uni-app页面间传递参数，需要调用相应的接口

以前写自己的小程序的时候大多数情况是单页面的，不存在页面间传递参数的问题，但是做一个多人对战的博饼小程序就需要创建房间的页面将玩家的参数传递给游戏界面。我们知道Vue兄弟组件间的传值有三种方式：子传父，父传子 (在uni-app中uni.$emit)、vuex 和eventBus，但我们这是第一次在uniapp中使用，感觉有点不一样。后来考虑到以后可能接入云数据库，并且有可能增加继续游戏的功能，还是将玩家信息本地化存储比较好，所以采用了uni.setStorage的方式来实现本地持久化存储，再在游戏界面OnShow的页面声明周期中读出。

methods相互嵌套调用时遇到this指向问题，用bind(this)解决

实现游戏组件的时候，有的时候会存在需要函数嵌套调用的情况，这时候我们可以调用Vue实例身上的$options，在里面访问methods中的方法，但这样访问的话会存在this的指向性问题，这时候我们可以通过bind(this)来解决，代码示例如下

this.$options.methods.showResultAni.bind(this)()

js执行异步任务

为了让画面更加流程，所以加入了不少动画，这势必会用到定时器，例如

setTimeout(()=>{
    this.stopClickStar = false
},2000)

但是一开始的时候没有理解异步任务的性质，经常导致重复创建动画实例导致动画失效的问题。后来发现其实为了保障数据的有序性，要使用async/await的方式，通过await接收promise对象解决问题。

CSS布局的时候经常遇到奇怪的问题

CSS真的是前端编程的重中之重，为了方便书写，项目使用了scss进行预处理，这样就可以很方便的进行css的嵌套和变量定义，减少代码的复杂度使得css的结构更加清晰。

元素设置了点击事件，但是却无法触发，这个有时候是因为元素堆叠导致的，我们可以设置z-index来自定义堆叠顺序。这个方法有一些神奇的作用。例如微信小程序不支持background设置image，这时候我们可以将背景图片的z-index设置为-999，也可以达到一样的效果。

在游戏制作过程中，还遇到很多元素需要居中定位的方法，这边我们一般使用以下两种方法：

第一种是flex布局，通过将父盒子设置justify-content: center来实现主轴上的居中，具体怎么使用flex布局可以参考下面这篇博文：

flex布局教程 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

第二种就比较取巧了，示例代码如下

left:50%;
transform: translateX(-50%);

高度同理

引入icon

一开始为了找小图标真是焦头烂额，后来发现居然有iconfont这个阿里家的东西，但是在uniapp项目中引入iconfont需要一点小技巧，第一种方法是转化成base64来引入，这边我们使用第二种方法，就是将iconfont项目中的css文件拷贝下来放入项目，在所有的链接前面加上https:，然后在APP.vue中全局引入就可以了，当然也可以选择在具体页面中引入。

实例如下

在iconfont.css文件中：

@font-face {
  font-family: 'iconfont';  /* Project id 2851481 */
  src: url('https://at.alicdn.com/t/font_2851481_zuqyube1h5j.woff2?t=1633769910375') format('woff2'),
       url('https://at.alicdn.com/t/font_2851481_zuqyube1h5j.woff?t=1633769910375') format('woff'),
       url('https://at.alicdn.com/t/font_2851481_zuqyube1h5j.ttf?t=1633769910375') format('truetype');
}

在链接前面全部加上https:

然后引入：

@import "./common/iconfont.css"

结对编程体验

既然是结对编程，那么这个体验也是两个人一起写的hhh

深刻地体验到了原型和实现的巨大差距
- 在实现原型的时候，我们的工作主要是在满足需求的基础上，尝试提升手感，进一步优化用户体验等
- 开始编码时就开始感受到理想功能和具体实现的巨大差距
成就感
- 有很多东西都是从0开始学起，这几天一直都在学新的东西，已经数不清打开了多少个网页hhh
- 也体验到了专心投入于一件事的快乐，看到做出来的成品很有成就感！
关于结对编程本身
- 首先，结对编程可以提高工作效率，连续开发（“极限编程”）很上头
- 一个人写作业、打代码容易越写越郁闷，结对打代码比较不容易郁闷
something else
- 开发过程中感觉时间过得很快，第一次见到晚上已经关门的三区超市（之前还真没见过）

Special events

选择技术路线

当时做完原型的之后我们就开始想选择什么技术路线比较好。讨论了一下还是做成微信小程序吧，从前都是用别人的小程序，都没有自己亲手做过。但是做微信小程序对于我们来说真的是一个全新的东西，虽然两人之前都有一点前端的基础，但是基本写的都是网页版，没有写过小程序。微信小程序开发目前有两个主流的方式，一个是原生微信小程序开发，另外一个是跨平台开发。原生微信小程序的开发可能相对来说门槛低一点。关于这一点我们争论了挺久，是选择一条看起来更加容易的道路，还是多学一点、更进一步做全平台的开发？后来我们还是选择了Hbuilder X做uni-app项目，原因无他，万一有一天我们想做个别的平台的小程序呢（笑）？于是我们就开始了Vue框架的漫漫学习之路。

学，给我狠狠地学

在这次软工实践之前，还真的没有熬夜狂写代码，一边开着几十个网页查的经历。有的时候数据绑定一个值就是访问不到真的会让人非常崩溃，浏览器挤满了密密麻麻的标签页，就是找不到问题的答案。在我们熬到凌晨两点筋疲力尽的时候（写了一整天），突然想起了某位大牛曾经说过这样一句话：“写程序要有写诗的感觉”。写诗？那我们现在写的肯定也是首苦情诗吧哈哈哈哈。但是这句话多少为劳累的我们带来了一丝宽慰。学，给我狠狠地学！学就完了！~~你说，拜一下尤雨溪会不会学的快一点？~~

关于git协作

在结对进行git协作之前，一直以为git不算太难搞（虽然之前也搞了挺久的）没想到在漫长的coding过程中，还发现它并没有我们想象的那么简单（而且git bash下的命令学了之后就忘，属实有点坑）花了一段时间来学怎么在github上协作

学习进度条

第N天	新增代码（行）	累计代码（行）	今日学习耗时（小时）	重要成长
1	160	160	8	了解了SCSS语法、了解了Vue的生命周期以及ES6-ES11的新增特性
2	180	340	6	了解了Vue组件间通信，Vue路由技术
3	200	540	8	更加熟练的掌握flex布局与z-index的使用，了解了easycom基本规则，及uni-app组件引入和使用方式，通过scope插槽修改其中内容等
4	160	700	7	深入理解Vue的数据绑定实现，以及Vue原型上的方法与定时器的基本用法；了解了图片文件上云方法与云服务空间的绑定
5	210	910	9	了解了animation的使用方法和uni-popup弹出层组件的用法，深入理解JS数组深浅拷贝问题和promise请求的使用方式
6	120	1030	5	了解了通过页面视口实现响应式布局
7	170	1200	7	了解了JS中this指向性问题以及解决方式，以及uni-app页面数据持久化存储的方法
8	200	1400	9	了解了iconfont的引用方式