脚本宝典收集整理的这篇文章主要介绍了

使用 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 = [];
    userList: Array = [];
}

public state = {
        socket: Object,
        user: new UserType,
        game: new Game,
        log: Array<Array>()
    }

最后

taro 使用的还是挺爽的!!

看看能不能该我带点浏量

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过