使用 Taro 寫一個你畫我猜的小程序

jkyin 發(fā)布于2019-08-23 16:47 / 3041人閱讀

摘要：選擇技術(shù)類型微信小程序使用功能不多就不是使用了后臺用寫，使用選來做。這里使用做畫布是有問題的，它不支持。游戲同步問題，這里用狀態(tài)同步的方法。最后使用的還是挺爽的

選擇技術(shù)類型

微信小程序使用Taro（功能不多就不是使用Redux了）,后臺用php寫，websocket使用選workman來做。
這里使用Taro做畫布是有問題的，它不支持h5。

選型的問題

taro 不支持畫布的H5

下面來詳細講講

小程序登陸，我的做法是寫一個登陸的組件，再在layout中加入login的組件

return (
            
                {this.props.children}
                
            
        )

這里微信獲取用戶信息是異步的，在到后臺獲取openid也是異步的，但是我更希望整個過程是同步運行的這樣寫的代碼也好看點

但是不支持同步處理，這里使用regeneratorRuntime await Promise 來處理

websocket 斷線重連問題

小程序在后臺運行很快websocket會斷開連接，使用onshow（componentDidShow）方法,此時后臺的websocket 其實可能也已經(jīng)失去

結(jié)局辦法websocket創(chuàng)建將獲得連接id，將id對應(yīng)到uid放在redis中，發(fā)送消息就已uid去找連接id。

游戲同步問題，這里用狀態(tài)同步的方法。狀態(tài)修改便通過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>()
    }

最后