#小程序云开发挑战赛#-分录英雄-test
发布于 4 年前 作者 chao79 4307 次浏览 来自 分享


作品名称:分录英雄

队伍名称:test

团队人员及分工:段文慧(代码实现)张琦(ui设计)

下面的东西有点乱可以看这里

https://docs.qq.com/doc/DVHVQQmtrcXlpVmlp

目录

1 摘要 2

1.1作品介绍 2

1.2作品优势总结 2

2 作品可行性分析和目标群体 3

2.1可行性分析 3

2.1.1 应用前景 3

2.1.2可行性 3

2.2目标群体及名字意义 3

3 作品功能和原型设计 4

3.1页面设计 4

3.1.1 主界面 4

3.1.2 热身及答题页面 5

3.1.3 记忆卡片 8

3.1.4我的页面 9

3.1.5使用说明页面 10

3.2交互逻辑 11

3.2.1答题页面的交互逻辑 12

3.2.2记忆卡片的交互逻辑 12

3.3 数据库设计 13

3.3.1 单选题 13

3.3.2 判断题 14

3.3.3 用户集合 15

4. 引用 16






















1 摘要

1.1作品介绍

随着2018年会计从业资格考试取消,初级会计考试成为进入会计行业的入门考试,该考试分为两科,一科为经济法基础,一科为初级会计实务。而初级会计实务的考察核心在于财务会计的分录运用能力,也是非财会类考生的一大难题。在此基础上我们团队的“分录英雄”小程序,通过微信这一国民应用的巨大流量接口,为参加该考试的考生提供了实时的答题和错题备忘平台。

1.2作品优势总结

“分录英雄”相较于东奥会计在线等竞品的付费网课加答题的模式,其最大的优势在于更加专注于答题的交互性和趣味性。

2 作品可行性分析和目标群体

2.1可行性分析

2.1.1 应用前景

2018年全国初级会计考试报名人数呈现井喷式增长,考试报名总数为403.6万人,较2017年度增长116% ,该考试出现以下新特征:一是在校学生占报考人数43.70%,逐渐成为考试的主力军;二是非财经专业背景的考生占报名人数比重首次超过半数,达到50.21%。 (上文数据来源自财政部会计资格评价中心公众号《努力提高会计资格考试服务水平》一文)

2.1.2可行性

使用初级考试范围内的会计分录,对试题数据进行组织和呈现,以及对用户上传的自定义数据进行自动化的上传和呈现,本次应用基于微信开发者工具基础库 v 2.2.3。

2.2目标群体及名字意义

参加初级会计考试的在校生及社会考生。

“分录英雄”小程序名称的“分录”二字是会计分录的简称,对于那些不知道初级会计考试的人,更不可能了解分录,也不会在微信中使用“分录”来搜索小程序,故使用这个名字使得该小程序可以精准的投放需要使用的人手中。


作品功能和原型设计

3.1页面设计

  1. 主题色和背景色

主题色使用的是和微信相一致的绿色(#3bac6a),使得小程序的配色和微信的配色搭配和谐,而且绿色和白色背景搭配时具有强烈的且明确的存在感,对于答题页面有较强的醒目作用。

  1. 布局

主页使用了坐标的定位方式,使得四个按钮沿“借贷”圆形图片的散开,同时避免了四个按钮在弹性盒子布局下,页面单调死板,而且方便了单手操控;其他页面均为弹性盒子布局。

3.1.1 主界面

本页面为小程序用户进入小程序的主界面,实现了向各个页面跳转的功能。









表1主页布局展示




图 1 - 1


图 1 - 2


图 1 - 3

用户未授权

用户已授权

点击6次“借贷“图片

 


3.1.2 热身及答题页面

  1. 核心流程

本页面为小程序的核心页面,是给小程序的主要功能体现。本页面由两个字页面构成,分别是热身页面和答题页面,热身页面是让用户了解答题页面的具体有什么题型,故而热身页面所答的题目不计入数据库中;答题页面除热身页面所拥有的功能外,还加入了动画和答题后给出用户答题正确与否,并在最后显示本次答题错误的题目和图形化的汇总。

  1. 网络加载

由于答题页面的题目是从数据库上下载的,故而在答题页面开始答题前,显示一个倒计时动画来为数据的加载提供时间。

  1. 自动进入下一题

除了点击后会进入下一道题,当页面上方的进度条走到最右侧时,也会进入下一题。

  1. 点击选项后延时

为了方便用户在答题后,继续思考这道题是否正确,我们利用setInterval方法延缓了进入下一题的时间。

注:热身页面和答题页面有重复的部分在热身页面这里说明后,不再在答题页面说明。

表2热身页面布局展示




图2-1


图2-1


图2-1

初始进入时的状态

单选题未被选择

单选题被选择,且选择正确


图2-4


图2-5


图2-6

单选题被选择,且选择错误

判断题未被选择

判断题被选择,且选择正确


图2-1



判断题被选择,且选择错误



 






表3答题页面布局展示




图3-1


图3-2-1


图3-3-2

初始进入时的状态

答题结束后的页面

 



3.1.3 记忆卡片

该页面为显示用户每次做错的题目的页面,该页面为一个两级的菜单结构,当第一次点击的时候显示,对应的分录(图4-2),再次点击显示对应错题的正确答案(如图4-3),方便用户对错题进行记忆。




表4记忆卡片布局展示




图4 - 1


图4 - 2


图4 - 3

初始进入时的状态

“81-90的错题”被选中

“83.单选题”被选中

 



3.1.4我的页面

本页面显示了用户头像,昵称,用户做题的进度以及选择是否打开热身页面和利用 open-type="contact" 的按钮,这一按钮的颜色经行了处理,为了背景颜色保持一致。











表5我的页面布局展示




图 5 - 1


图 5 - 2

热身页面打开

热身页面关闭

 



3.1.5使用说明页面

该页面为静态页面,对本小程序使用过程中需要注意的地方进行说明。






表6使用说明页面布局展示




图 6 - 1


图 6 - 2

 



3.2交互逻辑

只介绍答题页面和记忆卡片页面的交互逻辑,其他页面为静态页面。








3.2.1答题页面的交互逻辑


3.2.2记忆卡片的交互逻辑


3.3 数据库设计

3.3.1 单选题

数据库使用的是小程序的云开发功能集成的 MongoDB 数据库。由于 MongoDB 支持的数据结构是类 json 的较复杂的数据类型,其相较于表状的数据结构,对于会计分录的一借多贷,多借一贷,多借多贷的固定格式有较好的支持。

这种的存储方式不需要增加一个字段( field)去标记该分录的类型(分录可分为一借一贷,一借多贷,多借一贷,多借多贷的形式);在使用时只要在 JavaScript 中进行云端的下载和向 xwml 传参即可,在界面显示时使用 wx:if 判断debit_index credit_index 是否存在,若存在则使用 wx:for 循环输出即可,使得开发更加便捷。 (注: 会计分录的书写有固定的格式,1.先写借方后写贷方 2.贷方和借方之间有一定的缩进 3. 每个会计科目需要占用一行)

由于每道题的问题都是由会计分录的构成,故每个文档(record/doc)只存储该题的问题及其对应的正确答题(其由 debit ,debit_index,credit和credit_index 构成)。其中一个最具有迷惑性的错误答题从relation 字段( field)对应的 num 中debit ,debit_index,credit和credit_index获取,其他错误答案随机选择。


图 A

图A为单选题的一条记录,存储在 item 1-150 这一集合( collection

图A记录各字段的意义



字段名称

字段意义

是否必须存在

是否在wxml中要显示,

_id

系统默认字段

credit

在贷方的第一条字段

credit_index

贷方的其他字段(数组类型)

debit

借方的第一条字段

debit_index

借方的其他字段(数组类型)

item

标志字段,标记其为item 为 0单选题,item 为 3是判断题

num

标志字段,标记的题目顺序共有 1-150

question

要显示的问题题目

relation

与该题相关性较强的一个选项

 



3.3.2 判断题


图B

图B为判断题的一条记录


图B记录各字段的意义



字段名称

字段意义

是否在wxml中要显示,

_id

系统默认字段

item

标志字段,标记其为item 为 0单选题,item 为 3是判断题

judge

判断正确与否 0 为正确 1为错误

num

标志字段,标记的题目顺序共有 1-150

question

要显示的问题题目

 



3.3.3 用户集合


图 C

图C为用户信息的一条记录,存储在user_info这一集合( collection)

图C记录各字段的意义



字段名称

字段意义

_id

系统默认字段

_openid

用户的 openid

canUseApp

当countOpen小于·14时,其为 true,否则为false

countOpen

取值为1~15,对应item 1-150 这一集合

createTime

用户开始使用的时间

errNum

错误题题目数

numArrErr

错题数组,对应item 1-150 这一集合的num

today

将年月日转化为一个整数,当本地得到的时间

 



4. 引用

  1. vant UI
  2. switch-cell

用于进入我的页面的选择是否打开热身

  1. notify消息提示

用于提示部分题目的正确或错误

  1. 微信的时间方法(util.js)

用于和数据库的时间对比

  1. wxCharts 的图表制作方法

用于我的页面和答题页面

  1. 数据库中的分录来自初级会计考试大纲
回到顶部