校园场景中,教务功能往往最为常用,本文将介绍云开发如何贯穿教务助手小程序从灵感到实现的全过程,助力需求的快速完成。
▌项目背景
本项目从原型设计、前端到后端的构思以及开发,历时数月。下面我就讲讲从教务助手小程序从构思到开发实现。
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操作;
部分详细介绍如下:
① 课程表:
实现了一键导入(其实课程表这一功能可以单独形成一个通用的小程序上线),每天一卡片形式在首页提醒:今天有什么课,上完没有?
②倒计时页面:
支持自定义添加倒计时项目,给用户自定义能力。
③校历:
利用了日历组件再加以美化。
④打卡:
获取步数,进行运动打卡。
④在线答题:
各专业各学科的考试题库、考研题库、教师资格证题库等。
......
更多功能,就不一一在这里细说了。
▌感悟
本项目从原型设计、前端到后端的构思以及开发,最后上线运营。同时希望大家能够利用好小程序实现自己的想法和创意!
版权声明:内容来源于互联网和用户投稿 如有侵权请联系删除