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

TANKING 發布于2019-07-01 12:39 / 894人閱讀

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

選擇技術類型

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

選型的問題

taro 不支持畫布的H5

下面來詳細講講

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

return (
            
                {this.props.children}
                
            
        )

這里微信獲取用戶信息是異步的，在到后臺獲取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>()
    }

最后

taro 使用的還是挺爽的！！

GPU云服務器云服務器你畫我猜 webrtc php你畫我猜源碼你畫我猜服務器你畫我猜怎么調服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/31186.html

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

摘要：選擇技術類型微信小程序使用功能不多就不是使用了后臺用寫，使用選來做。這里使用做畫布是有問題的，它不支持。游戲同步問題，這里用狀態同步的方法。最后使用的還是挺爽的選擇技術類型微信小程序使用Taro（功能不多就不是使用Redux了）,后臺用php寫，websocket使用選workman來做。這里使用Taro做畫布是有問題的，它不支持h5。選型的問題 taro 不支持畫布的H5...

jkyin 2019-08-23 16:47 評論0 收藏0
Vue2 + Nodejs + WebSocket 完成你畫我猜多人在線游戲

摘要：使用即可完成一個很有意思的在線游戲作品。你畫我猜，相信大家對這個游戲都很熟悉。我用實現了你畫我猜這個游戲。可以修改畫筆顏色，粗細，進行撤銷，恢復，清空等操作。第一個猜完后，游戲時間縮短為秒。使用 websocket + vue2 即可完成一個很有意思的在線游戲作品。你畫我猜，相信大家對這個游戲都很熟悉。我用Vue2 + mint-ui + nodejs + websocket ...

XanaHopper 2019-08-20 14:29 評論0 收藏0
基于 socket.io 實現實時你畫我猜游戲

摘要：演示地址實時畫板聊天室你畫我猜聊天室圖片搶先看解釋關于是基于實現的套接字前端后端數據交互的庫，通過它的封裝，使用者可以很方便的開發，而且支持長輪詢等方法，兼容低版本瀏覽器。最后推薦一個實時的更加優秀的游戲。前言一直都想好好的學習運用node，一直都不知道要做什么東西，最近Java Web老師要求做個前端的應用，既然是前端應用，那肯定得是單頁應用了，而且node很適用于高并發的實時應...

jsummer 2019-08-21 10:53 評論0 收藏0
Taro集成Redux快速上手

摘要：開發前需要安裝和以及一些需要用到的中間件如果在要使用的話，還需要引入這個庫或者使用示例下面通過實現一個快速上手。然后開始創建處理這兩個指令的。完成上述三步之后，我們就可以在應用的主頁使用相應修改并取得新的數據了。本文適合有一定React和Redux基礎的用戶閱讀。前言的前言最近被一款來自京東凹凸實驗室的多終端開發框架Taro吸粉了，官方對 Taro 的簡介是使用React語法，一...

DevYK 2019-08-22 18:10 評論0 收藏0