答题积分小程序云开发实战-开篇:项目介绍以及效果图
发布于 1 年前 作者 jielin 2888 次浏览 来自 分享

答题积分小程序云开发实战

开篇:项目介绍以及效果图

前言

我也看过不少的册子或者文章,大部分都很优秀,但也有的就长篇累牍,从时代背景讲起,复述各种基本概念、底层原理......嗯,看似很高级~

但我阅读的时候,给我的感觉是,把你绕晕、把你劝退的感觉,相信大家都有同感,如图所示:


但既然是教程,那就得有教程的样子,其本质应该是简单而直接的。尽可能的简单直白一点,让读者直接能获取到关键的有价值的信息。什么是关键有价值的信息,那就是我作为读者想要直接能获得的信息。

看见过这么一句话:

“能用非技术的语言,简单的去描述一个复杂的技术问题,让一个初学者或者在校学生,甚至是门外汉都能够理解。”

颇受触动,这也是我写博客教程或写册子所追寻的目标。

流程图

我们开发搭建答题小程序,也是遵循软件开发的基本流程。大致如下图:


应用场景

不少企事业单位常常会举办一些主题知识竞赛,但是目前缺乏一套可靠、美观、简便的答题小程序。

因此我搭建了最新版的知识竞答小程序,提炼了典型的业务模型,它可以帮助你快速搭建各种形式的答题软件产品,帮助大家可以定期举办各类知识竞答活动。比如适用于网络安全知识答题、交通安全答题、 消防安全知识宣传、 安全生产知识学习等答题活动或有奖竞答。


相信不管你的需求是什么,本项目都能帮助到你。你可以从中获得微信小程序、云开发数据库、云函数、可视化CMS一整套闭环开发搭建技能,快速打造小而美的产品,并上线项目进行运营。

系统功能

通过需求分析,梳理提炼产品功能框架。

(1)小程序端主要包含七大页面,首页、注册登录页、个人中心页、答题页、答题结果页、积分排名页、关于程序页。

(2)后端云开发能力,主要包含云数据库、云存储、云函数。

(3)PC端CMS主要包含题库管理、用户管理、系统设置。



原型交互

通过产品功能框架,输出主功能的原型交互。



技术选型

基于微信原生小程序+云开发架构,采用前后端分离架构中的发送异步请求,能够进行高效开发。

(1)微信小程序使用了最新的前端技术栈,具有原生APP体验服务的小程序框架,小程序视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,响应的数据绑定,提供了丰富的基础组件和API。

(2)微信云开发提供了多个基础能力,比如数据库、存储、云函数等。开发者可在小程序内直接调用 API 进行非敏感数据的操作。数据库 API 包含增删改查的能力,使用 API 操作数据库只需三步:获取数据库引用、构造查询/更新条件、发出请求。

(3)内容管理是基于云开发搭建的可视化的内容管理平台,提供了丰富的内容管理功能,开通简单,独立于云控制台,无须编写代码即可使用,助力开发者提升开发效率。

实现思路

(1)角色设计:

①管理员:该类用户为小程序的最高内容管理者,可以是该小程序的运营单位,也可以是活动主办方等工作的部门。可以通过CMS管理题库、用户,通过小程序收集、统计用户及答题积分信息等。

②普通用户:用户可以通过该小程序答题学习、积分排名。

(2)基本实现:

①管理员可以通过PC端CMS内容管理系统对题库数据的增删查改或批量导出导入操作,对用户积分排名数据进行查询或者批量导出操作。

②用户操作微信小程序可以查看活动信息、积分排名等,也可以参与答题。这个实现思路是前端使用JavaScript通过云数据库的小程序端SDK操作云数据库并进行事务的执行。

项目目录

文件目录如图所示:


这里我对文件目录稍微加以说明一下吧。

├── project.config.json 项目配置文件
├── cloudfunctions 云函数目录
└── miniprogram 小程序目录
├── app.js 小程序全局入口文件
├── app.json 小程序全局配置文件
├── app.wxss 小程序全局样式文件
├── images 图片资源
├── style 公共样式
├── pages 页面目录
│ │── index 首页
│ │ ├── index.wxml 页面模板
│ │ ├── index.js 页面逻辑交互
│ │ ├── index.json 页面配置
│ │ └── index.wxss 页面样式
│ │── login 注册登录页
│ │── test 答题页
│ │── result 结果页
│ │── rank 积分排名页
│ │── my 个人中心页
│ └── about 关于程序页
└── utils 第三方工具

小程序前端开发

小程序端效果图:


用户答题操作流程:

PC端后台管理搭建

(1)题库管理

管理员可以对题目进行新增、查看、搜索、编辑、删除、批量导入、批量导出等操作。


(2)用户管理

管理员可以对用户进行查看、搜索、编辑、按照积分排序、按照注册时间排序、批量导出等操作。


部署上线

服务端的部署会教大家如何在云开发服务器环境下,建表和部署云函数,而前端的代码会通过微信开发者工具完成上传部署。

部署线上的前提条件是,需要你有一台云服务器,其实这个通过注册一个小程序账号,然后开通相关云服务器的服务。每个人都可以注册5个个人主体类型的小程序账号。

总结

世界上最聪明的人是借用别人撞的头破血流的经验作为自己的经验。

1 回复
回到顶部