使用 Taro 写一个你画我猜的小程序_微信小程序

上一篇: 「wxParser」小程序插件：想在小... 下一篇:小程序音视频能力技术负责人解读...

使用 Taro 写一个你画我猜的小程序

发布时间：2019-08-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了使用 Taro 写一个你画我猜的小程序，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

选择技术类型
微信小程序使用Taro（功能不多就不是使用redux了）,后台用php写，websocket使用选workman来做。   
这里使用Taro做画布是有问题的，它不支持h5。
选型的问题
taro 不支持画布的H5
下面来详细讲讲
小程序登陆，我的做法是写一个登陆的组件，再在layout中加入login的组件

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="return (
            
                {this.PRops.children}
                
            
        )" tITle="" data-original-title="复制">
      
      
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 = [];
    userList: Array = [];
}

public state = {
        socket: Object,
        user: new UserType,
        game: new Game,
        log: Array>()
    }" title="" data-original-title="复制">
      
      
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 使用的还是挺爽的！！