2020-11-16-软工课程设计-黄金点游戏微信开发

本次博客记录的是现代软件工程课程设计黄金点游戏的第三次开发过程

阿薛 小姚

详细代码链接

项目目录

游戏规则

N个同学（N通常大于10），每人写一个0~100之间的有理数 (不包括0或100)，交给裁判，裁判算出所有数字的平均值，然后乘以0.618 (所谓黄金分割常数），得到G值。提交的数字最靠近G（取绝对值）的同 学得到N分，离G最远的同学得到－2分，其他同学得0分。

项目需求

基本需求

1）采用单机方式实现，需要为用户提供便利的输入界面；
该游戏每次至少可以运行10轮以上，并能够保留各轮比赛结果;
后续在此基础上迭代开发。

扩展需求

2）两人合作，做成简单的 client/server App，用户从网页/手机上输入数字，并算出获胜者。 技术讨论的议题有：
• 前面写的模块有多少是可以重用的？ 为何不能重用？
• 研讨 client/server 的API 应该怎么设计，如何认证用户？
• 如何开发client App？
3）设计测试用例， 保证server 的正确性， 效率， 压力测试 （如何模拟上千个客户端，从不同的端口，提交不同的数字？）
4）原来我们是让用户从客户端输入数字， 看到结果之后，再玩下一轮。用户玩这个游戏是有一定的策略的， 我们如何能把这个策略变成程序，成为人工智能呢？ 能否利用 AI 算法提交数据？
5）修改规则， 每个用户每次可以提交两个数字， 其他规则一样。

带 OCR 功能的App，语音播报游戏结果。
多轮游戏结果可视化显示及数据分析

项目重构

游戏自身操作简单，趣味性相对较低，应用场景大多是调研实验，方便使用是该项目开发的重要目标。相对于web界面输入用户名和密码登录，微信小程序的登录操作更便捷，而且受众更广（如果是我，我不情愿为这种简单的游戏专门注册一个账号，更倾向于微信一键登录这种快捷的操作）。
所以，我们小组经过讨论决定，将项目的开发转移到微信平台，进行微信小程序的开发。

之前的开发的单机模式使用的是python库pyqt5，web开发使用的是Django库，开发平台Pycharm。
而微信小程序的开发使用专门的微信开发者工具，编程语言是JavaScript（逻辑控制）和wxml、wxss（类似于html和css，用于界面渲染）。所以，我们只能保存并改进之前的设计模块，其余的部分需要从头开始重写。

项目环境

操作系统：Windows 10
开发平台：微信开发者工具稳定版1.03
编程语言：JavaScript，wxml，wxss

逻辑设计

游戏模块的设计之前的博文里面已经讨论过，在此不做赘述

具体实现

主界面设计，利用app.js中login函数实现微信一键登录，并使用wx.getSetting()直接获取用户信息

 // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },

在index目录下index.wxml中设计界面，用navigator实现页面路由

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
    <text></text>
  </view>
  <view>
    <navigator url="../gamestart/gamestart">
      <button class="btn1">Start Game</button>
    </navigator>
  </view>
</view>

在index.wxss中渲染页面

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 120px;
}

.btn1{
  margin-top: 50px;
  color: #fff;
  background-color: #007700;
}

同理，设计开始游戏页面StartGame、本机游戏页面LocalGame、在线游戏页面OnlineGame等子页面。
具体代码不再展示，完成项目后一并在GItHub个人账号上开源

开发项目规划

目前学习了微信开发的相关语法，搭建了主要的界面，接下来的任务主要是完成游戏逻辑控制和软件测试
第十二周：完成所有页面搭建并美化
第十三周：完成游戏逻辑控制，对接数据库保存游戏记录
第十四周：软件测试，撰写报告博客
第十五周：修改程序，完成个人课程报告

开发过程所遇问题

使用微信开发者平台进行项目开发，保存后关闭项目和平台，再次打开时左侧无法预览，点击编译出现如下报错。检查文件，发现该文件路径没有任何问题。

在各个社区查询相关错误信息，发现这种错误其实是开发平台自身的bug。按照网上的解决方案，复制项目源文件全部内容，删除文件后新建同名文件，再将内容粘贴回去，然而并没有什么卵用，依旧报错。而且这种方案每次打开都需要重新处理一边，极其繁琐。后来发现，只要清除缓存，就可以解决问题。

清除缓存后重新打开项目，预览恢复正常，编译通过

参考资料

参考资料：微信官方文档·小程序