使用微信小程序来完成一个小游戏都需要些什么
使用微信小程序来完成一个小游戏需要有四个阶段
- 结构页面
- 样式页面
- js交互数据
- 后端
结构页面——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));
}