微信小游戏制作指南（十四）——好友与评价

好大的猫

本节对添加好友和点赞、点灭等功能进行开发，出于各方面的考虑，添加好友、点赞、点灭功能仅限于在对战过程中可用，防止出现恶意评价等行为。
一、更新游玩触摸事件
在touchEventHandlerPlaying触摸事件里，添加对gameModel==3的判断：
（1）当用户点击下方第一个“放弃”按钮时，则播放点击声音，删除当前监听器，弹出窗口giveup，添加touchEventHandlerGiveup监听器（当前正在对战中，是否放弃）；
（2）当用户点击下方第二个“添加好友”按钮时，则播放点击声音，执行myService.addFriend，此时不删除监听器，也不等待后续结果（后续会弹出系统窗口进行提示），直接继续游玩。
（3）当用户点击下方第三个“点赞”按钮时，则播放点击声音，执行myService.addAppraise(1)，此时不删除监听器，也不等待后续结果（后续会弹出系统窗口进行提示），直接继续游玩。
（4）当用户点击下方第四个“点灭”按钮时，则播放点击声音，执行myService.addAppraise(-1)，此时不删除监听器，也不等待后续结果（后续会弹出系统窗口进行提示），直接继续游玩。
  touchEventHandlerPlaying(e) {
    e.preventDefault();
    const x = e.touches[0].clientX;
    const y = e.touches[0].clientY;
    if (y > myRender.btnAreaStartUpY && y <= myRender.btnAreaEndUpY) {
      if (x > myRender.btnAreaStartUpX1 && x <= myRender.btnAreaEndUpX1) {
        myMusic.playPressButtonU();
        canvas.removeEventListener("touchstart", this.touchHandler);
        this.gamePopup = "return";
        this.touchHandler = this.touchEventHandlerReturn.bind(this);
        canvas.addEventListener("touchstart", this.touchHandler);
      } else if (x > myRender.btnAreaStartUpX2 && x <= myRender.btnAreaEndUpX2) {
        myMusic.playPressButtonU();
        canvas.removeEventListener("touchstart", this.touchHandler);
        this.gamePopup = "help";
        this.touchHandler = this.touchEventHandlerHelp.bind(this);
        canvas.addEventListener("touchstart", this.touchHandler);
      }
    } else if (y > myRender.btnAreaStartDownY && y <= myRender.btnAreaEndDownY) {
      if (x > myRender.btnAreaStartDownX1 && x <= myRender.btnAreaEndDownX1) {
        myMusic.playPressButtonU();
        canvas.removeEventListener("touchstart", this.touchHandler);
        this.gamePopup = "giveup";
        this.touchHandler = this.touchEventHandlerGiveup.bind(this);
        canvas.addEventListener("touchstart", this.touchHandler);
      } else if (x > myRender.btnAreaStartDownX2 && x <= myRender.btnAreaEndDownX2) {
        if (myData.gameModel == 1) {
          myMusic.playPressButtonU();
          canvas.removeEventListener("touchstart", this.touchHandler);
          this.gamePopup = "saveGame";
          myData.pauseBeginTime = new Date().getTime();
          this.gameStatus = "pause"; //保存时游戏应该暂停
          this.touchHandler = this.touchEventHandlerSaveGame.bind(this);
          canvas.addEventListener("touchstart", this.touchHandler);
        } else if (myData.gameModel == 3) {
          myMusic.playPressButtonU();
          myService.addFriend();
        }
      } else if (x > myRender.btnAreaStartDownX3 && x <= myRender.btnAreaEndDownX3) {
        if (myData.gameModel == 3) {
          myMusic.playPressButtonU();
          myService.addAppraise(1);
        }
      } else if (x > myRender.btnAreaStartDownX4 && x <= myRender.btnAreaEndDownX4) {
        if (myData.gameModel == 3) {
          myMusic.playPressButtonU();
          myService.addAppraise(-1);
        }
      }
    } else if (x > myRender.btnAreaStartCenterX && x <= myRender.btnAreaEndCenterX && y > myRender.btnAreaStartCenterY && y <= myRender.btnAreaEndCenterY) {
      let blockWidth = (myRender.btnAreaEndCenterX-myRender.btnAreaStartCenterX)/9;
      let touchColumnIndex = parseInt((x-myRender.btnAreaStartCenterX)/blockWidth);
      let touchRowIndex = parseInt((y-myRender.btnAreaStartCenterY)/blockWidth);
      if (myData.gemColors[touchRowIndex*9+touchColumnIndex] != 0) {
        myMusic.playSelectGem();
        myData.curSelectedIndex = touchRowIndex*9+touchColumnIndex;
      } else if (myData.curSelectedIndex != -1) {
        let index = touchRowIndex*9+touchColumnIndex;
        myData.createNewPath(myData.curSelectedIndex,index);
        if (myData.pathIndexs.length == 0) {myMusic.playCannotMoveGem();return;} //播放禁止移动的音效
        myData.randomIndexs[myData.randomIndexs.indexOf(index)] = myData.curSelectedIndex;
        myData.curSelectedIndex = -1;
      }
    }
  }
二、添加好友
添加好友功能仅对战时可用，好友信息保存在user集合的relations_中，采用关联表的方式保存其他用户的_openid，不额外建集合。如果已经存在则弹出系统提示窗“好友已经添加过了”；如果不存在则添加新的好友，弹出系统提示窗“好友添加成功”。
已添加的好友可以在初始界面第四个按钮“我的信息”里进行查看，执行refreshFriends方法，刷新好友信息列表。
  addFriend() {
    let isAdded = false;
    for (let i=0;i<this.friends.length;i++) {
      if (this.friends._openid == battleUser_openid) {isAdded = true;break;}
    }
    if (isAdded) {
      wx.showToast({title: "好友已经添加过了",icon:"error",duration: 2000});
      return;
    }
    let newFriend = new Object();
    newFriend._openid = battleUser_openid;
    newFriend.name = this.battleUserName;
    newFriend.value_ = "?";
    this.friends.push(newFriend);
    myData.userInfo.relations_ += (myData.userInfo.relations_==""?"":",")+battleUser_openid;
    user.doc(myData.userInfo._id).update({data:{relations_:myData.userInfo.relations_}});
    wx.showToast({title: "好友添加成功",icon:"success",duration: 2000});
  }
  refreshFriends() {
    if (myData.userInfo.relations_ == "") {this.doServiceOver();return;}
    user.where({id:_.in(myData.userInfo.relations_.split(","))}).get().then(res => {
      this.friends = res.data;
      this.friendsPage = 1;
      this.doServiceOver();
    });
  }
清空user集合，更改addNewUser和loadOldUser方法，好友friends列表的初始化工作在载入用户信息时进行。
  addNewUser(newUser_id,newUser_openid,isGetUserProfile) {
    let newUser = new Object();
    newUser.name = "匿名";
    newUser.time_ = new Date().getTime();
    newUser.setting_ = myData.mainSets.toString();
    newUser.setting = myData.model1PlaySets.toString();
    newUser.version_ = myData.model2PlaySets[10];
    newUser.version = myData.model3PlaySetsTimeIndex+","+myData.model3PlaySetsDiffIndex;
    newUser.relations_ = ""; //好友列表
    newUser.level_ = 1; //我的等级(游戏积分换算升级)
    newUser.level = 0; //我的排名缓存
    newUser.value_ = 0; //游戏普通积分
    newUser.value = 0; //游戏对战积分
    newUser.save1 = "";
    newUser.save2 = "";
    newUser.save3 = "";
    newUser.save4 = "";
    newUser.file_ = ""; //用户头像
    newUser.type = ""; //用户性别
    newUser.memo_ = ""; //用户所在地区
    newUser.memo = ""; //用户所使用语言
    user.doc(newUser_id).update({data:newUser}).then(res => {
      myData.userInfo = newUser;
      myData.userInfo._id = newUser_id;
      myData.userInfo._openid = newUser_openid;
      this.friends = new Array();this.friendsPage = 1;
      if (isGetUserProfile) this.doGetUserProfile();
      else this.doServiceOver();
    });
  }
  loadOldUser(oldUserInfo,isGetUserProfile) {
    myData.userInfo = oldUserInfo;
    myData.mainSets = stringParses(oldUserInfo.setting_,',');
    myData.model1PlaySets = stringParses(oldUserInfo.setting,',');
    myData.model2PlaySets[10] = parseInt(oldUserInfo.version_);
    myData.model3PlaySetsTimeIndex = parseInt(oldUserInfo.version.split(",")[0]);
    myData.model3PlaySetsDiffIndex = parseInt(oldUserInfo.version.split(",")[1]);
    this.friends = new Array();this.friendsPage = 1;
    if (myData.userInfo.relations_ != "") {
      let temps = myData.userInfo.relations_.split(",");
      for (let i=0;i<temps.length;i++) {
        let newFriend = new Object();
        newFriend._openid = temps;
        newFriend.name = "?";
        newFriend.value_ = "?";
        this.friends.push(newFriend);
      }
    }
    if (isGetUserProfile) this.doGetUserProfile();
    else this.doServiceOver();
  }
三、我的评价
点赞、点灭功能仅对战时可用，我的评价信息保存在user集合的relations中，额外建立集合appraise，采用关联表的方式保存appraise的_id。
当点击“点赞”按钮时，如果已经点赞则弹出系统提示窗“已经点过赞了”；如果之前点的是灭则修改点赞信息，弹出系统提示窗“给对方点了个赞”；如果未评价过则添加点赞信息，弹出系统提示窗“给对方点了个赞”。
当点击“点灭”按钮时，如果已经点灭则弹出系统提示窗“已经点过灭了”；如果之前点的是赞则修改点灭信息，弹出系统提示窗“给对方点了个灭”；如果未评价过则添加点灭信息，弹出系统提示窗“给对方点了个灭”。
我的评价可以在初始界面第四个按钮“我的信息”里进行查看，执行refreshAppraises方法，刷新评价信息列表。
  addAppraise(newValue) {
    let curAppraise_id = "";
    for (let i=0;i<this.appraises.length;i++) {
      if (this.appraises.user == battleUser_openid) {
        if (this.appraises.value_ == newValue) {
          wx.showToast({title: newValue==1?"已经点过赞了":"已经点过灭了",icon:"error",duration: 2000});
          return;
        } else {
          curAppraise_id = this.appraises._id;
          this.appraises.value_ = newValue;
          break;
        }
      }
    }
    if (curAppraise_id != "") {
      appraise.doc(curAppraise_id).update({data:{value_:newValue}});
      myData.userInfo.relations = myData.userInfo.relations.replace(curAppraise_id+"_"+battleUser_openid+"_"+newValue*-1,curAppraise_id+"_"+battleUser_openid+"_"+newValue);
      user.doc(myData.userInfo._id).update({data:{relations:myData.userInfo.relations}});
      wx.showToast({title: "给对方点了个"+(newValue==1?"赞":"灭"),icon:"success",duration: 2000});
      return;
    }
    let newAppraise = new Object();
    newAppraise.name_ = myData.userInfo.name;
    newAppraise.user = battleUser_openid; //用户信息
    newAppraise.name = this.battleUserName;
    newAppraise.value_ = newValue; //评价信息
    appraise.add({data:newAppraise}).then(res => {
      newAppraise._openid = myData.userInfo._openid;
      newAppraise._id = res._id;
      this.appraises.push(newAppraise);
      myData.userInfo.relations +=  (myData.userInfo.relations==""?"":",")+res._id+"_"+battleUser_openid+"_"+newValue;
      user.doc(myData.userInfo._id).update({data:{relations:myData.userInfo.relations}});
      //更新对战用户的新增评价数量(要更改权限规则)
      user.where({_openid:battleUser_openid}).get().then(res1 => {
        user.doc(res1.data[0]._id).update({data:{number:res1.data[0].number+1}});
      });
      wx.showToast({title: "给对方点了个"+(newValue==1?"赞":"灭"),icon:"success",duration: 2000});
      return;
    });
  }
  refreshAppraises() {
    if (myData.userInfo.relations == "") {this.doServiceOver();return;}
    let startIndex = 0;let endIndex = 0;let value;
    let myArray = new Array();
    for (let i=0;i<myData.userInfo.relations.length;i++) {
      if (content.charAt(i) == ',') {
        endIndex = i;
        value = content.substring(startIndex,endIndex);
        startIndex = i+1;
        myArray.push(value.split("_")[0]);
      } else if (i == content.length-1) {
        value = content.substring(startIndex);
        myArray.push(value.split("_")[0]);
      }
    }
    user.where({id:_.in(myArray)}).get().then(res => {
      this.appraises = res.data;
      this.appraisesPage = 1;
      this.doServiceOver();
    });
  }
清空user集合，再次更改addNewUser和loadOldUser方法，评价appraises列表的初始化工作在载入用户信息时进行。
  addNewUser(newUser_id,newUser_openid,isGetUserProfile) {
    let newUser = new Object();
    newUser.name = "匿名";
    newUser.time_ = new Date().getTime();
    newUser.setting_ = myData.mainSets.toString();
    newUser.setting = myData.model1PlaySets.toString();
    newUser.version_ = myData.model2PlaySets[10];
    newUser.version = myData.model3PlaySetsTimeIndex+","+myData.model3PlaySetsDiffIndex;
    newUser.relations_ = ""; //好友列表
    newUser.relations = ""; //评价列表(点赞点灭)
    newUser.number_ = 0; //别人评价数量缓存
    newUser.number = 0; //别人新增评价数量缓存
    newUser.level_ = 1; //我的等级(游戏积分换算升级)
    newUser.level = 0; //我的排名缓存
    newUser.value_ = 0; //游戏普通积分
    newUser.value = 0; //游戏对战积分
    newUser.save1 = "";
    newUser.save2 = "";
    newUser.save3 = "";
    newUser.save4 = "";
    newUser.file_ = ""; //用户头像
    newUser.type = ""; //用户性别
    newUser.memo_ = ""; //用户所在地区
    newUser.memo = ""; //用户所使用语言
    user.doc(newUser_id).update({data:newUser}).then(res => {
      myData.userInfo = newUser;
      myData.userInfo._id = newUser_id;
      myData.userInfo._openid = newUser_openid;
      this.friends = new Array();this.friendsPage = 1;
      this.appraises = new Array();this.appraisesPage = 1;
      if (isGetUserProfile) this.doGetUserProfile();
      else this.doServiceOver();
    });
  }
  loadOldUser(oldUserInfo,isGetUserProfile) {
    myData.userInfo = oldUserInfo;
    myData.mainSets = stringParses(oldUserInfo.setting_,',');
    myData.model1PlaySets = stringParses(oldUserInfo.setting,',');
    myData.model2PlaySets[10] = parseInt(oldUserInfo.version_);
    myData.model3PlaySetsTimeIndex = parseInt(oldUserInfo.version.split(",")[0]);
    myData.model3PlaySetsDiffIndex = parseInt(oldUserInfo.version.split(",")[1]);
    this.friends = new Array();this.friendsPage = 1;
    if (myData.userInfo.relations_ != "") {
      let temps = myData.userInfo.relations_.split(",");
      for (let i=0;i<temps.length;i++) {
        let newFriend = new Object();
        newFriend._openid = temps;
        newFriend.name = "?";
        newFriend.value_ = "?";
        this.friends.push(newFriend);
      }
    }
    this.appraises = new Array();this.appraisesPage = 1;
    if (myData.userInfo.relations != "") {
      let temps = myData.userInfo.relations.split(",");
      for (let i=0;i<temps.length;i++) {
        let newAppraise = new Object();
        newAppraise._id = temps.split("_")[0]; //_id信息
        newAppraise._openid = myData.userInfo._openid;
        newAppraise.name_ = myData.userInfo.name;
        newAppraise.user = temps.split("_")[1]; //用户信息
        newAppraise.name = "?";
        newAppraise.value_ = temps.split("_")[2]; //评价信息
        this.appraises.push(newAppraise);
      }
    }
    if (isGetUserProfile) this.doGetUserProfile();
    else this.doServiceOver();
  }
四、别人对我的评价
别人对我的评价可以在初始界面第四个按钮“我的信息”里进行查看，执行refreshAppraise_s方法，刷新他人评价信息列表，初始化操作也在“我的信息”界面里进行。
在user集合里新增字段number_（别人评价数量缓存）和number（别人新增评价数量缓存），用于在初始界面第四个按钮“我的信息”里快速显示结果。当新增用户评价时，不光要更新自己的评价信息，也要更新对战用户的新增评价数量（需要将user集合的数据权限改为“自定义安全规则”——所有用户可读可写）。
{
  "read": true,
  "write": true
}
当刷新别人对我的评价列表（appraise_s）时，从appraise集合里选择user=myData.userInfo._openid的数据项，同时更新number_和number。
  refreshAppraise_s() {
    appraise.where({user:myData.userInfo._openid}).get().then(res => {
      this.appraise_s = res.data;
      this.appraise_sPage = 1;
      myData.userInfo.number_ = res.data.length;
      myData.userInfo.number = 0;
      user.doc(myData.userInfo._id).update({data:{number_:myData.userInfo.number_,number:0}});
      this.doServiceOver();
    });
  }
五、更新MyService.js变量信息
//对战信息
let battleRoom_id = ""; //房间_id
let battleUser_openid = ""; //对战用户的_openid(用于添加好友)
/**
* 统一的微信云服务类
*/
export default class MyService {
  constructor(_myData) {
    if (instance) return instance;
    instance = this;
    myData = _myData;
    this.serviceStatus = "";
    this.serviceOver = "";
    this.ranks = null;this.ranksPage = 1;this.rankDate = 0;
    this.rooms = new Array();this.roomsPage = 1;this.roomsDesc = 0;this.roomsUsing = false;
    this.battleRoomCreater = true; //是否是自己创建的房间
    this.battleRoomName = ""; //房间名字
    this.battleRoomPlaySetsTimeIndex = -1; //房间设置时间
    this.battleRoomPlaySetsDiffIndex = -1; //房间设置难度
    this.battleUserName = ""; //对战对手名称
    this.battleStatus = 0; //对战状态
    this.battleReadyTime = 0; //对战双方统一准备时间
    this.battleGoTime = 0; //对战双方统一开始时间
    this.battleToastShowed = false; //是否已经显示过提示(对方放弃)
    this.friends = null;this.friendsPage = 1;
    this.appraises = null;this.appraisesPage = 1;
    this.appraise_s = null;this.appraise_sPage = 1;
  }
  ...
}
最终渲染效果如下：