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

選擇技術類型

• 微信小程序使用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 使用的仍是挺爽的！！