共计 881 个字符，预计需要花费 3 分钟才能阅读完成。
选择技术类型
微信小程序使用 Taro（功能不多就不是使用 Redux 了）, 后台用 php 写，websocket 使用选 workman 来做。这里使用 Taro 做画布是有问题的，它不支持 h5。
选型的问题
taro 不支持画布的 H5
下面来详细讲讲
小程序登陆，我的做法是写一个登陆的组件，再在 layout 中加入 login 的组件
return (
<View>
{this.props.children}
<Login />
</View>
)
这里微信获取用户信息是异步的，在到后台获取 openid 也是异步的，但是我更希望整个过程是同步运行的这样写的代码也好看点
但是不支持同步处理，这里使用 regeneratorRuntime await Promise 来处理
websocket 断线重连问题
小程序在后台运行很快 websocket 会断开连接，使用 onshow（componentDidShow）方法, 此时后台的 websocket 其实可能也已经失去
结局办法 websocket 创建将获得连接 id，将 id 对应到 uid 放在 redis 中，发送消息就已 uid 去找连接 id。
游戏同步问题，这里用状态同步的方法。状态修改便通过 websocket 来同步。
typescript
整个画布加上对局后加入 websocket 以后代码将变得更为繁琐，这个玩意可以确保获取正确类型判断提示。
export class UserType {
type: string = “”;
nickname: string = “”;
uid: number = 0;
img: string = ”;
}
export class Game {
room: string;
uid: number;
time: number =100;
start: boolean = false;
name: string =””;
prompt: Array<string> = [];
userList: Array<UserType> = [];
}
public state = {
socket: Object,
user: new UserType,
game: new Game,
log: Array<Array<XyType>>()
}
最后
taro 使用的还是挺爽的！！