使用微信小程序来完成一个小游戏都需要些什么

使用微信小程序来完成一个小游戏需要有四个阶段

1. 结构页面
2. 样式页面
3. js交互数据
4. 后端

结构页面——wxml

点击登录——获取用户信息

<!--

  打开小程序后会判断用户是否登录，如果登录显示用户信息，如果未登录，显示登录按钮，

  并在登录按钮内设置open-type="getUserInfo" bindgetuserinfo="getInfo"用来获取用户信息

-->

<view wx:if="{{!isLogin}}">

  <button type="primary" open-type="getUserInfo" bindgetuserinfo="getInfo">点击登录</button>

</view>

用户信息结构

用户信息

<view class="userContainer">

  <!-- 用户具体有几个由后台数据决定，所以在这里使用for循环来写用户信息，可以将多个用户一起渲染到页面 -->

    <view class="userItem" wx:for="{{userArr}}" wx:key="key">

      <image src="{{item.avatarUrl}}"></image>

      <text>昵称：{{item.nickName}}</text>

      <text>分数 : {{item.tapTime}}</text>

      <text>{{message}}</text>

    </view>

  </view>

用户按钮

 <button type="primary" bind:touchstart="startTime" bind:touchend="endTime">点击3秒按钮</button>

样式页面——wxss

/* pages/game/index.wxss */
.userContainer{
  display: flex;
  justify-content: center;
}

.userItem{
  display: flex;
  flex-direction: column;
  align-items: center;
  
  margin: 15rpx;
}

.userItem image{
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}

js交互数据——js

初始数据

  data: {

    isLogin: false, // 判断用户是否登录

    userInfo: {},  // 存放用户信息

    userArr: [], // 存放用户数据用来渲染给页面

    message: "", // 提示用语

    startTime: null // 按下按钮时的时间

  },

登录——获取并存储用户信息

获取openid

  // 获取openid

  getOpenId() {

    // 因为获取openId的使用场景比较多，比如说用来作为存放用户信息的key键、获取用户信息的key键，所以我们将它封装为一个函数

    return new Promise((resolve, reject) => {

      wx.login({// 登录，调用接口获取登录凭证（code）通过凭证进而获取openId(需要使用code换取openId)

        success: (result) => {

          let code = result.code;

          wx.request({// 发起网络请求，通过code换取openId

            url: `https://api.weixin.qq.com/sns/jscode2session?appid=wxb49315418db7e879&secret=d40f63610573267e4293be7c09aaf18e&js_code=${code}&grant_type=authorization_code`,

            success: res => {

              let openid = res.data.openid

              resolve(openid);

            },

            fail(err) {

              reject(err)

            }

          })

        }

      });

    })

  },

存储用户信息与openid

  async getInfo() {

    let userInfo = await this.getUserInfo();

    let openId = await this.getOpenId();

    userInfo.openid = openId;

    this.getSocket(userInfo);



    // 存储用户信息

    wx.setStorage({

      data: userInfo,

      key: openId,

    })

  },

获取用户信息

// 获取用户信息

  getUserInfo() {

    // 因为获取用户我们要用到的地方比较多，比如说页面加载时或者每次按下按钮时都需要使用，所以封装为一个函数

    return new Promise((resolve, reject) => {

      wx.getUserInfo({  // 获取用户信息，调用前需要用户授权

        success: (res) => {

          let userInfo = res.userInfo;

          resolve(userInfo);

        },

        fail(err) {

          reject(err)

        }

      })

    })

  },

监听页面加载

连接socket

    // 创建一个 WebSocket 连接。

    wx.connectSocket({

      // url: 'ws://192.168.2.109:8080',  // wifi版ip

      url: 'ws://192.168.1.100:8080', // 网线版ip

    });

连接成功时

    // 连接成功

    wx.onSocketOpen(async (result) => {

      console.log("连接成功");

      // 连接成功后获取openid并通过openid作为key键，来获取到存放在本地的用户信息

      // 然后判断是否有该用户，如果有，将他所有信息传递给后端，如果没有就显示登录页面

      let openid = await this.getOpenId();

      let userInfo = wx.getStorageSync(openid);

      console.log(userInfo)

      if (userInfo) {

        this.getSocket(userInfo);

      } else {

        this.setData({isLogin:false});

      }

      // if(wx.getStorageSync(openid)){

      //   let userInfo = await this.getUserInfo();

      //   // console.log(userInfo)

      //   this.getSocket(userInfo)

      // }

    })

给后端发送信息并监听返回的消息

  // 给后端发送信息并监听后端返回的信息

  getSocket(userInfo){

    wx.sendSocketMessage({

      data: JSON.stringify(userInfo),

    });

    wx.onSocketMessage((result) => {

      let userArr = JSON.parse(result.data);

      console.log(userArr)

      if(userArr.length > 1){

        userArr = [userArr[1]]

      }

      this.setData({

        isLogin:true,

        userArr

      })

    });

  },

计算分数

获取按下时间

  // 按下

  startTime() {

    let startTime = new Date().getTime();

    this.setData({

      startTime

    })

  },

获取抬起时间并计算出分数后发送给后端

  // 抬起

  async endTime() {

    let endTime = new Date().getTime();

    let tapTime = ((endTime - this.data.startTime) / 1000);



    if (tapTime > 0 && tapTime <= 1) {

      this.setData({

        message: "您可真快"

      });

    } else if (tapTime > 1 && tapTime <= 2.9) {

      this.setData({

        message: "还差点哦"

      });

    } else if (tapTime > 2.9 && tapTime <= 3.1) {

      this.setData({

        message: "哇，大佬！！！"

      });

    } else if (tapTime > 3.1) {

      this.setData({

        message: "您已超时了~"

      });

    }



    // 更新分数，并发送给服务器

    // this.setData({'userInfo.tapTime':tapTime});

    let userInfo = await this.getUserInfo();

    userInfo.tapTime = tapTime;



    this.getSocket(userInfo);

  },

后端

搭建一个webSocket环境

let Ws = require("ws").Server;



let wss = new Ws({

    port: 8080

});

监听是否有连接接入

// 监听是否有链接 接入

wss.on("connection", function (ws) {

    console.log("我被连接了~~~");

});

当有连接接入时监听前端发送过来的消息

    ws.on("message", res => {

        console.log(res);

    });

获取到消息后判断是否有用户连接过

        if (result.length === 0) {

            // 没有连接过

            userArr.push(userInfo);

        } else {

            // 有连接者，更新分数

            for (let i = 0; i < userArr.length; i++) {

                if (userArr[i].openid === openid) {

                    userArr[i] = userInfo

                }

            }

        };

监听关闭webSocket时

        ws.on("close", () => {

            // 关闭请求socket和数据

            delete Sockerobj[openid];



            // 删除用户的信息

            userArr = userArr.filter(user => { user.openid !== openid });



            // 对所有的socket连接者发送广播

            for (let key in Sockerobj) {

                Sockerobj[key].send(JSON.stringify(userArr));

            }

        })

对所有的连接者发送所有的用户信息

        // 对所有的socket连接者发送广播

        for (let key in Sockerobj) {

            Sockerobj[key].send(JSON.stringify(userArr));

        }