软工第四次作业

PSP

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

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上协作

学习进度条

视频演示

这里是我们此次作业成果的视频演示！已上传B站（想要一键三连，不是下次一定）

演示链接 https://www.bilibili.com/video/BV11b4y1a7UZ/

作业过程

（大显示屏的极致享受）

（网络略卡的腾讯会议）