小程序入门到实战(二)--案例源码分享

前言

作为小程序入门系列第二篇,这次分享绝对干货拉满,直接开源一个线上已经在运行的个人小程序,通过阅读源码,学习如何利用腾讯云搭建自己的个人小程序。

源码,欢迎 star~

拼词乐斗 GitHub

项目介绍

拼词乐斗是一款类似 H5 游戏的小程序,玩家需要在 10s 内根据单词的释义,将顺序错乱的字母拼成一个完整的单词,这是最初的核心设计理念,但是后来觉得,这样的游戏太枯燥,于是就加入了音乐的概念,让用户在拼词的过程中可以听到音乐,这样加大了趣味性,如果只是做一个单机版的小程序,这就够了,但是,我又希望用户在拼词完成后可以看到自己的世界排名,或者至少可以看到排名靠前的人的歌曲挑战分,于是,就必须要有一个后台服务了,这时候,就开始考虑着手利用腾讯云搭建自己的小程序后台服务(现在也可以考虑使用腾讯云服务,而不是自己搭建服务)。

项目结构:

├── README.md
├── client
│   ├── README.md
│   ├── build
│   ├── config
│   ├── dist
│   ├── index.html
│   ├── node_modules
│   ├── package.json
│   ├── project.config.json
│   ├── src
│   ├── static
│   └── yarn.lock
├── project.config.json
└── server
    ├── README.md
    ├── app.js
    ├── config.js
    ├── controllers
    ├── middlewares
    ├── mysql
    ├── node_modules
    ├── nodemon.json
    ├── package-lock.json
    ├── package.json
    ├── process.prod.json
    ├── qcloud.js
    ├── routes
    ├── tools
    └── tools.md
复制代码

client 小程序端

小程序开发选择了 mpvue 框架,关于为什么使用 mpvue 可以去我的第一篇文章里面查看。mpvue 生成的模板上稍作一些修改后,就可以使用了。

小程序页面:

├── err-words           错词展示页面
├── fight               拼词游戏页面
├── friend-room         好友对战房间(待完成)
├── index               首页
├── intro               规则介绍页
├── login               登录页
├── personal-center     个人中心
├── rank                排行榜页面
├── result              游戏结果页
└── songs               歌曲选择页
复制代码

登录页

使用官方提供的wafer2-client-sdk库的登录功能实现小程序的用户登录。

首页

可以跳转各个功能页面,实现体力银行的功能。

歌曲选择页

选择歌曲,实现分享解锁的功能(由于微信取消了分享的回调,所以采用 hack 方式实现)

游戏中页面

实现拼词的主要逻辑,包括首字母提示,两秒提示,拼错词减时间条等等。

结果页

展示游戏结果,计算得分,更新本地歌曲分数记录,破纪录则调用上传分数接口。

排行榜

调用后台接口展示排行榜,可以切换歌曲

server 端

项目后台框架来自Wafer2 快速开发 demo

使用到的技术栈 nodejs+koa+knex+mysql,对于前端 er 来说这是十分便捷的方式来开发后台服务。

项目中,后台服务新增了两个接口:上传分数,查询排行榜。如何新增路由(接口)可以查看 wafer 库的相关文档,十分详细的指导教程。

可以使用 wafer 提供的信道 tunnel 服务(websocket)实现多人对战的逻辑(doing)。

controller:

.
├── index.js
├── login.js
├── message.js
├── rank.js
├── score.js
├── tunnel.js
├── upload.js
└── user.js
复制代码

资源存储

小程序开通后台服务后,腾讯云账号下会有免费的对象存储服务,所有的静态资源可以放在里面(比如歌曲,图片)。

最后

如果你有兴趣开发一个全栈的小程序,这份源码或许可以帮助你。

拼词乐斗 GitHub

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值