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

jkyin 发布于2019-08-23 16:47 / 2977人阅读

摘要：选择技术类型微信小程序使用功能不多就不是使用了后台用写，使用选来做。这里使用做画布是有问题的，它不支持。游戏同步问题，这里用状态同步的方法。最后使用的还是挺爽的

选择技术类型

微信小程序使用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你画我猜源码你画我猜服务器你画我猜怎么调服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103280.html

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

摘要：选择技术类型微信小程序使用功能不多就不是使用了后台用写，使用选来做。这里使用做画布是有问题的，它不支持。游戏同步问题，这里用状态同步的方法。最后使用的还是挺爽的选择技术类型微信小程序使用Taro（功能不多就不是使用Redux了）,后台用php写，websocket使用选workman来做。这里使用Taro做画布是有问题的，它不支持h5。选型的问题 taro 不支持画布的H5...

TANKING 2019-07-01 12:39 评论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