寒假实训经验回顾

梁建麟

寒假实训项目介绍

我寒假进行的实训项目是一个贺卡棋类的小程序，这个小程序开发的意图就是为了让亲朋好友之间相互投递祝福以及投递贺卡，在棋盘页面也可以通过投骰子到特定的格子上面触发特定的效果。例如获得贺卡祝福触发机会牌等等。

开发过程

在开发的过程中，先是在等待产品稿和视觉稿的同时学习了开发小程序的一些知识，对于小程序的一些感受就是真的既方便又随便，方便指的是提供了许多的可用的接口，但是随便的指的就是随随便便就会废弃接口，一些一两年前的代码甚至就不太能参考了（你以为你是腾讯就可以为所欲为吗.jpg）。在产品稿出来之后我们就开始动工了，但是因为我是第一次协作，也是第一次线上协作开发，大家生活中的事情也实在不少（忙，忙点好啊）再加上过年，过年那几天嘛懂的都懂，所以在各方面进展缓慢，我检讨（自罚看一集迷宫饭，都给我去看迷宫饭）。在开学第一周才大致竣工，不过在视觉稿方面有些不尽如人意，所以一直没有去搞样式的事情。然后在开学第一周周六就开始和后端搞这搞那，尝试着添加了一些代码，也面对了一些有关form-data的传输以及本地缓存的问题。样式啊，样式也是到最后才匆匆开始搞，对不起后端的小伙伴啊😭😭😭

项目所用的技术

这要我怎么说呢，大概就是小程序和jwt这些？
感觉微信开发者工具确实是很适合初学者来学的，因为总感觉会有很多的既视感，经常会有咦，这个，噢，这样的感觉。

经验

我认为这一次学习的经验对于我来说还是特别宝贵的，在这次的实训过程中，我明白了和组员之间经常沟通，在一些地方上进行统一的重要性，这样子可以加快我们组内每个人阅读别人所写代码的效率（没有黑屁的意思，但是lxq的代码看的我真的是有点）。也学到了应该要经常和后端沟通关于接口的事情，不然到后面真的是改到想似。以及如果有一些经常要用到的代码的话最好是可以把它单独写成一个工具啦。不然到后面维护和修改起来真的会头大。

亮点

我想了半天我们最大的亮点应该就是图片的上传以及缓存？
以下是缓存图片的代码
这是对比两个存储图片url的数组除去相同对象并且缓存的数组

1
const iconRes = await setCache(      this.removeDuplicates(this.data.icons,res.data),this.data.icons.length)

通过对比数组中每一个对象的url利用过滤器除去相同的对象

1
2
3
4
removeDuplicates(arr1, arr2) {  
  let res = arr2.filter(obj2 => !arr1.some(obj1 => obj1.url === obj2.url))
  return res
  } ,

将数组中每一个url中的图片进行下载，并且借助传进来的长度来设置id并且返回一个新的数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { baseUrl } from "./index";  
  
export const setCache = async function images(urls,l) {  
  const promises = urls.map((url, i) => {  
    return new Promise((resolve, reject) => {  
      wx.downloadFile({  
        url: baseUrl + url.url, // 图片的URL  
        success: function(res) {  
          wx.getFileSystemManager().saveFile({  
            tempFilePath: res.tempFilePath,  
            success: function(savedRes) {  
              console.log("缓存成功" + baseUrl + url.url);  
              resolve({
                url:savedRes.savedFilePath,
                id:i + l
              });  
            },  
            fail: function(err) {  
              console.log(err);  
              reject(err);  
            }  
          });  
        },  
        fail: function(err) {  
          console.log(err);  
          reject(err);  
        }  
      });  
    });  
  });  
  
  try {  
    const savedFilePaths = await Promise.all(promises);  
    console.log("保存结束");  
    console.log(savedFilePaths);  
    return savedFilePaths;  
  } catch (error) {  
    console.error("Error saving images", error);  
    return [];  
  }  
};

省略了一些些细节，在上面的一套连招过后，每一次渲染的都会是已经存储过的图片的，如果没有上传新的图标以及背景什么的是不会重新发起请求的，而且就算发起请求也只是请求刚上传的图片。

遇到的问题

我认为主要的问题还是在棋盘，jwt和form-data的传输上面

棋盘

在棋盘的处理上面我觉得我做的有一些过分得怎么说呢，过分原始了。
下面是一些我写的极为逆天的运动和定位的逻辑。
通过一个数组保存不同格子的坐标，这个就得靠一些毅力和尝试了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
checkers:[
      {
        x:125,
        y:335
      },{
        x:250,
        y:335
      },{
        x:375,
        y:335
      },{
        x:500,
        y:335
      },{
        x:500,
        y:470
      },{
        x:500,
        y:595
      },{
        x:500,
        y:715
      },{
        x:500,
        y:845
      },{
        x:500,
        y:965
      },{
        x:375,
        y:965
      },{
        x:250,
        y:965
      },{
        x:125,
        y:965
      },{
        x:125,
        y:845
      },{
        x:125,
        y:715
      },{
        x:125,
        y:595
      },{
        x:125,
        y:470
      },
    ]

以下是棋子移动的逻辑，通过递归和定时器来实现间断的移动，判断停止类的。通过设置棋子位置改变的动画时间长短来实现棋子一格一格移动的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
pieceMove(curPos,pos){
if(curPos - 1 == pos){
  this.setData({
    isDiceDisabled:false
  })
  if(pos == 3||pos == 5||pos == 9||pos == 12||pos == 14){
    this.chanceHandler()
  }
  if(pos == 2|| pos == 4|| pos == 8|| pos == 13){
    this.getGreeting(1)
  }
  if(pos == 1|| pos == 6|| pos == 10){
    this.getGreetingCard(1)
  }
  return
}
if(curPos == 16){
  curPos = 0
}
this.setData({
  position:pos,
  positionX:this.data.checkers[curPos].x,
  positionY:this.data.checkers[curPos].y
})
setTimeout(()=>{
  this.pieceMove(curPos + 1,pos)
},300)
}

以上就是我给大家的一些反面教材，在布局的改变以及在一些修改上面就可能要了别人的老命，真的是究极体力活啊，最有力的一集。希望jrm可以给出一些修改的建议。我现在想着好像可以通过网格布局啥的来进行布局？但是还没有付诸实践过。我也希望大家可以给我一些建议~

jwt

在前端获得token之后需要通过解析获得例如id等等的信息，这是什么我上网，纳尼，他们说好像不能解析？难道这要是自己写吗？不过我还是在英特网上找到了别人写好的js。

form-data

在前后端联调的时候后端突然说需要在请求体中要使用form-data格式，啊？这怎么搞呢，我尝试了多种办法都没法解决，到后反而是靠修改后端才终于解决了这个问题，但是小程序到底怎么发form-data格式的内容呢？我现在还是没有解决这个问题。

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。