小程序 const moment = require('moment')_开源小程序精选
我最近在做二人对战模式答题,体验了不少小程序,找到一个开源的,现推荐给大家
小程序代码地址
微信小程序云开发实现的单词PK小程序,支持好友对战、随机匹配、人机模式,完整代码 ~ UI可以披靡市场上所有同类型小程序,体验也是一流的哦 ~ 目前已经有同学在QQ小程序、阿里小程序部署;也有同学修改成了公务员题库
~ 期待看到各类优秀产品上线哦 ~
上线说明: 源码开源,但上线需要经过作者许可哦 ~ 开发不易、创作不易。
收费服务
微信:34805850,期待大佬关注微信公众号:前端面试之道
- 部署文档:
66+
获取小程序部署文档,根据文档可以很简单的跑起来项目 ~ - 自己修改代码上线任意平台,需支付
199+
(开发不易,相信你上线后,通过广告也可以回本),赠送部署文档,指导部署错误解决 - 新需求:想在小程序源码基础上开发新功能的,根据需求难度定制开发;亦或者自己研究代码直接新增即可
- 合作:如果您是某某英语培训机构,想拥有自己品牌的背单词程序,欢迎联系,帮部署及合作定制开发,¥4000+
- 其他合作:欢迎骚扰 ~
在线体验
UI截图
需求概述
单词对战模式
对战业务需求解析
单词对战的游戏核心为:随机生成一定数量的单词列表的单选题类型题目,题目文本为该单词,有 4 个随机中文释义的选项,其中仅有一个为正确释义,双方用户一起选择释义,正确率高且速度快的用户获得对战胜利。
单词对战游戏分为好友对战、随机匹配、人机对战三种对战的形式,均通过上述游戏核心的方式进行对战。
对战设置
用户还可以对以下对战信息进行自定义设置
- 对战的单词书,用户可以选择自己想要背诵的单词类型,包含四级核心词、四级大纲词、六级核心词、六级大纲词、考研真题核心词、考研大纲词、小学必备词、中考大纲词、高考大纲词、雅思大纲词、商务词汇等多种单词书,亦可以选择随机单词书模式,则将从所有的单词中进行随机抽取;
- 设置每一局对战的单词数目为以下任意一种:8、 10(默认)、 12、 15、 20
- 设置切换下一题是否自动播放单词发音
- 设置错词是否加入到生词本
- 开始和错词的时候是否震动
- 设置默认是否播放背景音乐,游戏中也可以随时关闭/开启背景音乐
其他细节优化
- 加入
正在对战过程中
、对战已结束
、房间已满
等非正常类型房间,做出相应的交互提示,然后跳转至首页 - 在对战过程中任意用户退出游戏或掉线,则结束本局游戏,进行对战结算
- 对战结束后,房主可以选择再来一局,当房主创建好再来一局的房间后,另外一个用户可以选择再来一局,加入继续对战
- 在对战过程中,选择错误的单词或使用提示卡选择的单词,自动加入到用户生词本,用户可以在生词本中进行复习
- 加入倒计时机制,每一个单词的对战周期为 10s,超时则判断为错选
完整对战流程图
词汇挑战模式
词汇挑战模式业务解析
词汇挑战的核心为:获取随机的一个单词作为单选题题目文本,包含四个中文释义选项,其中一个为正确答案,选择错误则失败,选择正确再获取随机单词,循环下去。
挑战复活机制
在词汇挑战的过程中,如果选择错误,可以有两次复活机会
- 首次复活:通过分享小程序获得复活机会
- 第二次复活:通过观看一个 15s 之内的广告获得复活机会
- 当第三次选择错误,显示再来一局,从零开始记录分数
其他
- 词汇挑战每正确一个词,得分增加 100 分
- 当挑战失败的时候,如果挑战分数高于历史最高分数,则修改历史最高分数为当前分数,用于排行榜排行
- 可以使用提示卡进行选择
完整挑战流程图
其他功能
生词本
- 用户可以在生词本中查看在单词对战模式、词汇挑战模式中选择错误的单词
- 可以查看单词及单词释义、播放单词发音、删词生词
- 在设置中可以一键清空所有生词
学习打卡
- 当在单词对战模式中,当天对战局数超过 5 局且胜利局数超过 2 局,则打卡成功
- 可以在在打卡页面查看当日进度,可以查看历史的打卡日历
排行榜
- 排行榜包含词力值、词汇挑战分数、签到天数等排名信息
- 每类排行版显示前 20 名的排名头像和昵称以及分数
- 显示自己当前类目下的排名以及分数
用户相关
- 数据库应记录的用户数据包含:昵称、头像、对战局数、胜利局数、选择的单词本、词力值
- 词力值机制:在单词对战模式、单词挑战模式中,每局对战都可以获得相应的词力值分数,作为用户的经验值
其他
- 建议反馈:用户可以在小程序中,反馈意见,然后再后台可以查看用户留言
- 打赏作者:用户可以在小程序中,通过扫码的形式,对小程序进行打赏
- 小程序友情链接:可通过当前小程序跳转至作者的其他小程序中
- 小程序中加入部分广告,不影响用户体验
团队组成
整个项目的产品方案、UI 设计、开发、测试、上线运营等皆一个人独立完成。
技术方案
设计
设置使用sketch完成,设计稿上传至蓝湖
,作为数据标注。
蓝湖链接
链接: 密码: ydIX
设计图源文件
下载链接: 密码:vylm
开发技术栈
其他工具
- ESLint
- Git + Github
- vscode
- Electron
- NodeJS
- Python
系统架构
项目文件简介
├── cloudfunctions | ├── model_auto_sign_trigger # 自动签到定时触发器
| ├── model_book_changeBook | ├── model_userWords_clear # 清除用户生词
| ├── model_userWords_get | └── model_user_getInfo # 获取用户信息
├── db # 数据整理的脚本
├── design # 设计稿文件、素材文件
| └──
├── docs
├── miniprogram | ├── app.js # 小程序全局入口
| ├── | ├── app.wxss # 全局样式
| ├── audios | | ├──
| | └──
| ├── components # 全局组件
|| ├── header # header组件
|| ├── loading # 全局loading
|| └── message # 全局弹窗
| ├── images
| | ├── ... 图片素材
| ├── miniprogram_npm # 小程序npm目录
|| └── wxapp-animate # 动画库
| ├── model | | ├── | | ├── | | ├── | | ├── | | ├── | | ├── | | ├── | | └── | ├── pages # 页面
|| ├── combat # 对战页
|| ├── home # 首页
|| ├── ranking # 排行榜
|| ├── setting # 设置页
|| ├── sign # 签到页
|| ├── userWords # 生词表页
|| └── wordChallenge # 单词挑战
| └── utils
| ├── Tool.js # 全局工具类,放了加载、全局store等
| ├── | ├── log.js # 日志上报
| ├── | ├── setting.js # 全局设置
| └──
├──
└──
云开发数据交互的 Model 层设计
在该项目中,将所有的服务端交互、数据库的读取、云函数的调用都放到了 model 目录下,对该目录结构深入解析。
(1) Base.js
base 基类,所有其他数据集合都继承该类,在构造函数中,用来做数据集合初始化和生命一些可能所需用到的变量。
import $ from './../utils/Tool'const DB_PREFIX = 'pk_'export defaultclass{constructor(collectionName) {const env = $.store.get('env')const db = ({ env })this.model = db.collection(`${DB_PREFIX}${collectionName}`)this._ = db.commandthis.db = dbthis.env = env}get date() {return ({ env: this.env }).serverDate()}serverDate(offset = 0) {return ({ env: this.env }).serverDate({ offset })}
}
(2)其他集合文件 (model 目录下,除了 base 和 index 之外的文件)
在这些文件中,对应和文件名同名的集合的所有数据操作,比如 中,包含了所有对 pk_book 集合的所有数据增删改查操作。
import Base from'./base'import $ from'./../utils/Tool'const collectionName = 'book'classBookModelextendsBase{constructor() {super(collectionName)}async getInfo() {const { data } = awaitthis.model.get()return data}async changeBook(bookId, oldBookId, bookName, bookDesc) {if (bookId !== oldBookId) {const { result: bookList } = await $.callCloud('model_book_changeBook', { bookId, oldBookId, bookName, bookDesc })return bookList}}
}exportdefaultnew BookModel()
(3)
在该文件中,对所有的数据集合操作文件进行引入,然后又导出,之后在其他文件中的的调用,就只需要引入该文件即可,就可以实现调用不同的集合操作。
import userModel from'./user'import bookModel from'./book'import wordModel from'./word'import roomModel from'./room'import userWordModel from'./userWord'import signModel from'./sign'export {userModel,bookModel,wordModel,roomModel,userWordModel,signModel
}
环境区分
在小程序初始化的时候,对云开发环境进行了全局的初始化,区别开发环境和正式环境。
initEnv() {const envVersion = __wxConfig.envVersionconst env = envVersion === 'develop' ? 'dev-lkupx' : 'prod-words-pk'wx.cloud.init({env,traceUser: true})this.store.env = env},onLaunch() {this.initEnv()this.initUiGlobal()},
难点解析
难点 1:单词数据
1. 抓包分析和代码实现
本课题中使用 MacOS 系统、Charles 抓包软件、安卓手机作为抓包的基本环境。首先在电脑上安装 Charles,然后开启 Proxy 抓包代理,同局域网下配置手机 WiFi 代理实现抓取手机包。
2. 单词数据整理
通过爬虫下来的单词数据如下,对于该课题的项目单词数据相对复杂,所以我们对单词数据结构进行简化,只提取项目中需要的字段,以单词 yum 为例:
优化前:
{"wordRank":63,"headWord":"yum","content":{"word":{"wordHead":"yum","wordId":"PEPXiaoXue4_2_63","content":{"usphone":"jʌm","ukphone":"jʌm","ukspeech":"yum&type=1","usspeech":"yum&type=2","trans":[{"tranCn":"味道好","descCn":"中释"}]}}},"bookId":"PEPXiaoXue4_2"}
优化后:
{"rank":286,"word":"yum","bookId":"primary","_id":"primary_286","usphone":"jʌm","trans":[{"tranCn":"味道好"}]}
通过 NodeJS 编写批量格式整理的程序,整理后导出 JSON 文件
3. 数据文件批量导入(传入数据库)
由于微信小程序云开发控制台不支持数据文件的批量导入数据库,所以开发了一个支持云开发数据集合批量导入的程序
难点 2:单词对战模式
本节详细解析单词对战模式的实现,将从创建房间(生成随机词汇、新增房间数据)、对战监听、对战过程(好友对战、随机匹配、人机对战)、对战结算的角度进行分析。
创建对战房间
对战房间的创建,分为触发创建房间事件、获取当前选择的单词书、获取单词对战每一局的词汇数量、从数据库 pk_word 集合读取随机单词、格式化获取的随机单词列表、创建房间(使用生成的单词列表、是否好友对战条件)、根据房间的 roomId(主键)跳转至对战页等多个步骤流程组成。
房间数据监听
单词对战模式中,对 room 数据集合的监听是对战的核心要点,进入对战页面后,调用数据集合的 WatchAPI 对 room 集合中的当前房间记录进行监听,在当前房间记录数据发生变化的时候,将会调用 watch 函数的回调,执行相应的业务,详细流程如下:
好友对战的实现
有了前面创建好的对战房间,也建立好了对当前房间的数据监听,接下来就可以实现有趣的对战交互了。游戏会监听好友用户准备,更新 room 集合中的 字段,触发 watch,通知房主可以开始对战;房主点击开始对战,会更新 room 集合中的 state 字段为 PK,watch 回调通知双方开始对战,显示第一道题目,双方用户选择释义的时候,会把选择结果和得分更新至 left/right 中的 grades 和 gradeSum 字段,在 watch 的回调中对双方的选择结果进行显示;当对战到达最后一道题目,且双方都选择完毕,进入结算流程,将房间 state 更新至 finish;如果在对战过程中,有任意用户离开对战,将修改房间 state 为 leave;对战结束之后,房主可以选择再来一局,进行创建房间,更新上一个房间的 nextRoomId 字段,在 watch 回调中通知非房主用户可以加入新的房间,进行再来一局的对战。
随机匹配的实现
随机匹配对战相对于好友对战的区别在于:好友对战是通过房主将房间链接(roomId)分享到微信好友/微信群,当用户点击分享卡片之后,会跳转至对战页面且房间 Id 为当前分享的房间 roomId,用户进入房间之后就进行上述的监听操作和准备、开始对战等。然而随机匹配的实现原理为,当用户触发随机匹配操作之后,会先在数据库检索有没有符合自己所选择的单词书、目前房主在等待的房间,如果有则加入该房间,如果没有则创建新的随机匹配房间,等待其他用户进入。用户进入之后会自动触发准备操作,房主在 watch 中监听到有用户准备,然后自动触发开始对战操作,后续对战、结算、再来一局流程则和好友对战流程一致。
人机对战的实现
人机对战的核心思想为:房主用户端随机取一名人机用户,房主端触发人机的自动准备,房主端也自动开始对战,在对战过程中,房主端通过页面 UI 用户手动选词,人机将在 2~5s 或房主选词之后随机完成选词操作,正确率为 75%。 后期可以对正确率进行优化,根据用户的历史正确率进行自动化推算,实现更智能的人机用户,提供更好的用户体验。
最后
通过 3 个月的开发、功能迭代和运营,目前拥有2600 多的用户量,小程序用户打分为 满分。创建房间且完成对战12000 多局,收录词汇25960个,收录了用户65000多个生词,十分感谢这个项目带给我的成就感。
小程序 const moment = require('moment')_开源小程序精选相关推荐
- 小程序 const moment = require('moment')_小程序依赖分析实践
用过 webpack 的同学肯定知道 webpack-bundle-analyzer ,可以用来分析当前项目 js 文件的依赖关系. webpack-bundle-analyzer 因为最近一直在做小 ...
- 小程序 const moment = require('moment')_有C语言程序员说,使用移位操作代替乘除运算效率更高,真的吗?...
在C语言程序开发中,一些移位操作似乎可以达到与乘除法操作一样的效果.例如,4>>1 等于 2,此时右移一位相当于除以 2.类似的,2<<1 等于 4,此时左移一位相当于乘以 2 ...
- 小程序在输入npm命令_微信小程序使用npm包步骤
这里以npm引入小程序官方UI组件库weui-miniprogram为例 1.在小程序根目录内,初始化npm(官方文档上是没写出这一步,这里做个补充) npm init 2.在小程序中执行命令安装 n ...
- 微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = ...
- 微信小程序怎么长按复制_微信小程序基于Parser添加长按复制、代码高亮等功能...
功能展示 引入Parser 微信小程序中引入Parser可直接在项目主页查阅. 代码高亮 高亮插件 Prism官网下载prism.js和prism.css,默认只有css代码有渲染样式,注意选择需要渲 ...
- 微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
- 小程序返回上一页_智能小程序档案馆手把手教你成为小程序流量头号玩家(上)...
百度智能小程序为开发者提供了全面开放的自然搜索接入能力 为了让开发者们接入得又快又好,我们准备了详细说明给大家了解~ 首先我们了解一个问题:什么是小程序接入自然搜索? 通过接入百度搜索生态,在百度 A ...
- 大型程序是如何开发的_大型小程序如何研发提效
作者:王梦君 微信公众号:滴滴顺风车技术 出处:https://mp.weixin.qq.com/s/M1VArJ_ORY-eXSKzD6ysQw 导读: 自2016年小程序诞生以来,小程序以其&qu ...
- 小程序怎么打出横线效果_成都小程序开发:哪些因素会影响小程序的运营效果?...
相信现在微信小程序对于大家来说都不陌生了,目前小程序在市场中的占有率比较高,也是用户比较喜欢的平台.对于初次开发小程序的企业商家,在小程序的开发运营时,往往会有一些细节性的问题,影响到小程序的运营效果 ...
最新文章
- IOS - 设置与帮助界面
- R语言构建xgboost模型:模型的特性重要度计算及可视化、模型对应的结构树(文本文件)
- IMF 报告:比特币等加密货币有朝一日可能取代传统支付手段
- Grounded Theory and Coding Lecture Notes
- iOS之Socket的使用-AsyncSocket
- python-语言播报
- 开放源代码GIS资源集锦
- Honest Coach CodeForces - 1360B(简单贪心)
- [6] ADB 文件管理
- Vue 页面加载闪现出现{{xxx}}问题
- 最详细的Spring核心IOC的源码分析
- ASP.NET 封装JS文件到DLL中并在页面中调用
- 他在 Stack Overflow 提问如何黑掉Stack Overflow,结果成了
- 古董电脑室:2019日记簿(一)
- 文件 - 介绍 含PEM文件
- 夜神模拟器安装drozer
- android点击特效,android 点击特效动画
- python剔除数字 青少年编程电子学会python编程等级考试二级真题解析2020年12月
- ​相亲APP开发软件为广大单身男女牵线搭桥​
- html元素在模块中心显示,DW怎么设置DIV模块在页面中居中 DW如何设置网页打开绝对居中?...
热门文章
- 骚操作,IDEA防止写代码沉迷插件 !
- Spring Boot(十)Logback和Log4j2集成与日志发展史
- ReactNative实现图集功能
- SQL Server 不同数据库导入指定数据解决方案
- Python操作excel(.xlsx)封装类MyPyExcel V2.0
- ImportError: No module named ‘sklearn.qda‘ ImportError: No module named ‘sklearn.lda‘
- lamda表达式修改数据_图解sql面试题:如何按条件修改数据?
- 按钮传值给ajax,用jquery和ajax实现分页时,按钮怎么给jquery传值?
- mysql 时间差_后端从mysql取值返回0时区时间数据的问题
- linux qt手册,明远智睿I.MX6 Linux-4.1.15 QT5 程序编译手册