# XDU-2022-mini_program

**Repository Path**: ukiyo-epoch/xdu-2022-mini_program

## Basic Information

- **Project Name**: XDU-2022-mini_program
- **Description**: XDU-2022
WeChat mini-program
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-10-22
- **Last Updated**: 2022-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XDU-2022-mini_program

西安电子科技大学2022年秋-移动互联网导论

<a href="https://gitee.com/ukiyo-epoch/xdu-2022-mini_program/tree/master">gitee地址</a>

## 架构
微信小程序<br />
开发者工具：调试基础库v2.19.4

## 使用
**开启不校验合法域名、wev-view(业务域名)、TLS版本以及HTTPS证书选项以关闭localhost屏蔽**

## 小组成员及分工
排名不分先后<br />
*  涂楷 20009200971
    * 后端服务器部分开发
    * 前端微信小程序内编写后端API代码对接
*  郑朝璐 20009200172
    * 微信小程序页面与基础逻辑实现
    * 可靠性测试
*  刘鉴萱 20030100012
    * 微信小程序页面UI设计与后期优化
    * 可靠性测试

## 程序功能介绍
Wordle属于字谜游戏的一种。玩家目标是在六次尝试机会内猜出一个五字母单词。为此，游戏界面是一个 5×6 的方块阵列。玩家通过下方键盘输入猜测结果后，游戏会给字母方块标上颜色，提示猜测的准确性：<br />
绿色 ：说明答案里有这个字母、所在位置也正确；<br />
黄色 ：说明答案里有这个字母、但不在这个位置；<br />
灰色 ：说明答案里没有这个字母。<br />
然后，玩家根据获得的提示继续尝试，直到猜对答案，或者用尽六次机会。

## 设计思想
* <a href="https://gitee.com/ukiyo-epoch/xdu-2022-mini_program/blob/master/server/README.md">server后端README文档</a>
* <a href="https://gitee.com/ukiyo-epoch/xdu-2022-mini_program/blob/master/app/README.md">app前端README文档</a>
1. 关于前后端交互<br />
    在前后端分离的设计模式中，二者如何进行交互是很关键的问题，使用最广泛的一般是 XML 和 json 格式。考虑到对于本课程而言，前后端交互的数据量并不会很大，且为了前端调用方便，故采取 json 格式交互。
    
2. 关于API设计<br />
    后端向前端提供的 API 有什么、做什么、答什么都需要根据项目以及前端的具体需求确定。在我们小组确定 wordle 这个主要内容后，我们进一步研究哪一些内容需要拆分到后端而哪一些可以留在前端。<br />
  
  首先，对于 wordle 这个游戏而言，从现实角度出发，为了一定的游戏性，其本身词库容量不能很小，至少要包含常见的五字母长度单词；而从软件开发角度出发，每次进入小程序都将词库内所有单词全部传输给用户是完全不必要的，不仅带来大量的存储资源浪费，还会导致程序反应速度减慢、通信成本增加等影响用户体验的负面效果。 一般而言，手机的性能都会弱于台式电脑与服务器，而且考虑到微信小程序**寄生于微信应用，性能受限且无权直接访问本地存储系统，只能以小容量缓存形式暂时存放，数据稳定性低**的特性，我们决定将词库作为一个静态文件以数组形式存放在一个单独的<code>data.js</code>文件中，并将用于获取单词的 API <code>getWord</code>与检查数据合法性的 API <code>checkExist</code>封装到<code>wordle</code>路由下以路由节点形式分离。附加参数通过<code>?运算符</code>连接在 URL 中。<br />

## 技术点

1. docker 封装

    为了更方便负责前端页面的两位同学调用 API 及测试程序稳定性，后端 server 服务被封装成为一个 docker 映像以保证可直接开箱运行，镜像存放在私人阿里云镜像托管服务中以便于拉取。

2. express 框架

    <code>Express</code>是简洁 node.js Web 应用框架, 提供一系列强大特性以创建 Web 应用和 HTTP 工具。

    - 可通过设置中间件响应 HTTP 请求。
    - 定义路由表以执行不同 HTTP 请求动作。
    - 可通过向模板传递参数动态渲染页面。

    在本项目中，为了区分两个 API ，使用<code>Express</code>的<code>Router</code>组件创建路由从而能在 URL 中以类似文件路径的形式区分与调用 API ；为了前端调用的直接与便携性，使用<code>query</code>方法直接从 URL 中获取参数；为了前端获取返回结果的可读性，使用<code>res.json()</code>方法将返回数据以 json 格式传递。
    
3. 微信小程序生命周期

    为了实现在首次进入游戏时自动获取一次随机单词，此时就要使用微信小程序内部提供的生命周期函数，根据实际要求，最后选择使用<code>onShow()</code>方法在页面每次进入渲染展示阶段时调用一次<code>getWord</code> API 以达到每次进入游戏时即可直接开始一局的效果。

4. 异步调用

    在微信小程序官方提供的 API 中，<code>wx.request()</code>是常用的 HTTP 通信请求 API ，其一大特点即为异步执行网络请求，即在请求时不会阻塞当前任务而是继续执行。这就导致某些需要同步的数据可能在未被同步完成前即已被渲染结束并显示到页面上，例如：在<code>Page({ data:{} })</code>中有一<code>userMotto</code>变量，需要从服务器获取后再渲染输出到页面上，而在<code>wx.request( success: (req, res) => { this.setData({}) } )</code>中的<code>this.setData( { } )</code>并不能成功地将变量写入。所以在前端对接代码中，我们使用<code>Promise</code>对象包裹返回值并使用<code>Promise.then()</code>方法解析。

    ```javascript
    // template of async function call
    // in function that use returned data
    function xxxUseData {
      this.xxxHTTPrequest().then( (/*param*/) => {
        // TODO
      });
    };
    
    // in function of HTTP request
    function xxxHTTPrequest() {
      return new Promise( (resolve) => {
        wx.request( {
          url: reqURL,
          header: {
            "content-type": "application/json",
          },
          success: (res) => {
            resolve( res.data );
          },
          fail: () => {
            console.log("http request fail");
          },
        } );
      } );
    };
    ```

## 程序运行示例
<img src="./img/app_noWord.png"></img>
<img src="./img/app_victory.png"></img>
<img src="./img/app_console_get.png"></img>
<img src="./img/app_console_check.png"></img>
<img src="./img/server_runTime.png"></img>