用云开发制作教务助手小程序

发布一下 0 0

校园场景中,教务功能往往最为常用,本文将介绍云开发如何贯穿教务助手小程序从灵感到实现的全过程,助力需求的快速完成。

▌项目背景

本项目从原型设计、前端到后端的构思以及开发,历时数月。下面我就讲讲从教务助手小程序从构思到开发实现。

用云开发制作教务助手小程序


1、灵感来源

教务小程序的灵感来源:用完即走,查个成绩和课表,无需下载app或去翻看公众号内的历史内容。

加上本人很久以前就想实现开发一个类似的app,但app的开发成本太高了。幸好小程序·云开发的出现解决了我的需求,它的优势能快速动手开发一款应用类小程序。

2、构思

教务小程序需要核心就是:成绩查询课表查询教务通知查询!那么问题来了,学校教务处只有网页版,教务小程序数据从何而来呢?
经过一系列思考,百度各种问题,思路就来了:
后端模拟登陆——拿到页面数据——整理数据——反馈到小程序前端渲染

▌项目开发

1、后端

后端的实现完全基于云开发
部分目录:


用云开发制作教务助手小程序


采用云开发后端node.js语言,主要利用模块有:

Router模块:

const cloud = require('tcb-admin-node');//   npm  install tcb-routerconst TcbRouter = require('tcb-router');cloud.init({  env: '//'})const db = cloud.database();const _ = db.command;// 云函数入口函数exports.main = async (event, context) => {  const app = new TcbRouter({ event });  /** 教务处登陆 eg*/  app.router('login', async (ctx, next) => {    const test = require('login/login.js');    ctx.body = test.main(event, context);  });  /**查取成绩*/  app.router('getpoint', async (ctx, next) => {    const logList = require('getpoint/index.js');    ctx.body = logList.main(event, context);  });  /**学术活动*/  app.router('academic', async (ctx, next) => {    const userList = require('schoolnews/academic.js');    ctx.body = userList.main(event, context);  });  app.router('xsxx', async (ctx, next) => {    const userList = require('schoolnews/xsxx.js');    ctx.body = userList.main(event, context);  });  return app.serve();}

Cherrio实现课表成绩等网页解析:

const cloud = require('tcb-admin-node')const rp = require('request-promise');var cheerio = require("cheerio");cloud.init()module.exports = {  main: async (event, context) => {    var url ='URL'    var res = await rp({method: 'get',uri: url,json: false}).then((body) => {      var academic = [];      var $ = cheerio.load(body);      $('.fl').find('dl').each(function (i, elem) {        //业务代码未写        /**          **/        academic.push({date: date,time:time,title:title,speaker:speaker,place:place,link:link})      });      return academic    }).catch(err => {      return err;    })    return res  }}

数据库access_token定时修改

// 云函数入口文件const cloud = require('wx-server-sdk'),rp = require('request-promise'),key=require('key.js')cloud.init({  env: "//"})//指定数据库环境const db = cloud.database({  env: "//"}), _ = db.command;// 云函数入口函数exports.main = async (event, context) => {  try {     var res = await rp(      {        method: 'get',        uri: url+'?grant_type=client_credential&appid=' + key.APPID + '&secret=' + key.APPSECRET,        qs: {},//参数        headers: {},//请求头        json: true  //是否json数据      }    ).then((body) => {      return body    }).catch(err => {      return {errmsg:"rp函数获取失败"}    })/*将获取的access_token存到数据库*/    console.log(res)    if (res.hasOwnProperty('access_token')) {      await db.collection('key').where({        type: "accesstoken"      }).update({        data: {          accesstoken: res.access_token,          datearray: _.unshift(new Date(new Date().getTime())),          num: _.inc(1)        }      })    } else {      console.log("err错误" + res)    }  } catch (err) {    console.log(err)  } }

此外还借助了其他模块实现登陆、数据处理(课表等数据格式化)、云开发数据库操作(用户信息储存,消息发布)、用户权限鉴定(确保后台信息安全)等,在此就不赘述。


2、前端


用云开发制作教务助手小程序

基本上就是“简单粗暴”的进行各种if、var操作;
部分详细介绍如下:

① 课程表:
实现了一键导入(其实课程表这一功能可以单独形成一个通用的小程序上线),每天一卡片形式在首页提醒:今天有什么课,上完没有?


用云开发制作教务助手小程序


②倒计时页面:
支持自定义添加倒计时项目,给用户自定义能力。

用云开发制作教务助手小程序

③校历:
利用了日历组件再加以美化。

用云开发制作教务助手小程序

④打卡:
获取步数,进行运动打卡。

用云开发制作教务助手小程序

④在线答题:
各专业各学科的考试题库、考研题库、教师资格证题库等。

......


更多功能,就不一一在这里细说了。


▌感悟

本项目从原型设计、前端到后端的构思以及开发,最后上线运营。同时希望大家能够利用好小程序实现自己的想法和创意!

版权声明:内容来源于互联网和用户投稿 如有侵权请联系删除

本文地址:http://0561fc.cn/68654.html