▌项目背景

本项目由一人承担从后端到前端的构思以及开发，下面我就讲讲从教务助手小程序的构思到开发实现（基于云开发）。

1、灵感来源

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

加上本人很久以前就想实现开发一个类似的app，但app的开发对于开发小白不太友好，不知从何下手！幸好 小程序·云开发 的出现解决了我的需求，它的低入门门槛和免后端运维等优势让非科班出身的我也能快速动手开发一款应用类小程序。

2、构思

教务小程序需要核心就是： 成绩查询、课表查询、教务通知查询 ！那么问题来了，学校教务处只有网页版，教务小程序数据从何而来呢？经过一系列思考，百度各种问题，思路就来了：

后端模拟登陆——拿到页面数据——整理数据——反馈到小程序前端渲染

大概结构如下：

▌项目开发

1、后端

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

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

Router模块：

const cloud = require('tcb-admin-node');
//   npm  install tcb-router
const 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: 'https://api.weixin.qq.com/cgi-bin/token?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操作；

部分详细介绍如下：

① 课程表：

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

②主题全局替换：

支持自定义主题色，给用户自定义能力。

③校历：

利用了插件【极点日历】再加以美化。

▌感悟

一个从小白到从后端到前端到UI全部自己写的入门者参赛的心路历程就这么多了，目前源码暂不开放，对本小程序有疑问与建议均可在留言，同时希望大家能够利用好小程序实现自己的想法和创意！

源码地址

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

如果你想要了解更多关于云开发CloudBase相关的技术故事/技术实战经验，请扫码关注【腾讯云云开发】公众号～

用云开发制作教务助手小程序丨实战相关推荐

用云开发制作教务助手小程序
校园场景中,教务功能往往最为常用,本文将介绍云开发如何贯穿教务助手小程序从灵感到实现的全过程,助力需求的快速完成. ▌项目背景本项目从原型设计.前端到后端的构思以及开发,历时数月.下面我就讲讲从教务 ...
用小程序·云开发打造运动圈小程序丨实战
乒乓圈小程序和朋友合伙写了一个小程序,写了一个以共享乒乓信息和交流的平台---乒乓圈.我们使用了微信的云开发来完成数据和后台的作用.免去了租赁服务器. 我主要负责的是数据库的设计和云函数实现数据获取 ...
微信小程序｜基于小程序+云开发制作一个菜谱小程序
今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力. 一.小程序 1. 创建小程序
微信小程序｜基于小程序+云开发制作一个租房小程序
经济发展的同时伴随着大批人群的流动,租房需求一直是持久不衰的话题,如何租好房,好租房,跟随此文一起制作一个租房小程序,让租房不再困难. 一.小程序 1. 创建小程序 2. 首页 3. 房源列表页 4. ...
修复采集接口版云开发表情包微信小程序源码下载增加制作等功能
大家好,相信很多人对这个界面的表情包小程序肯定不陌生吧不错之前该款小程序是属于独立后端的,不管今天所发的这款是云开发的哟运营着这个表情包的用户应该发现了,最近很多表情包图片都失效了所以呢,今天小 ...
借助小程序·云开发制作校园导览小程序丨实战
背景当你刚上大学的时候,要想不迷失校园,除了依靠不怎么可靠的路边标识外,总会收到那么一张卡通绘制的校园地图: 这种静态图片可以让我们快速地了解到所需的地理位置信息,但使用和思考过后,会发现以下问题: ...
用小程序·云开发打造功能全面的博客小程序丨实战
用小程序·云开发将博客小程序常用功能"一网打尽" 本文介绍mini博客小程序的详情页的功能按钮如何实现,具体包括评论.点赞.收藏和海报功能,这里记录下整个实现过程和实际编码中的一些 ...
云开发表白墙微信小程序源码
这是一款云开发的表白墙微信小程序特点是云开发, 安装特别的简单首先呢小程序账号开通云开发权限然后把源码上传到微信开发者工具里面然后点击开发者工具软件上面的云开发,然后点击数据库在数据库里面创 ...
小程序源码：全新独家云开发微群人脉小程序源码下载社群空间站
今天给大家带来一款云开发版本的微群人脉小程序源码该版本属于采集版本(群二维码自动采集) 该版本属于云开发版本(免服务器和域名) 这是一款不怕封小程序版本 PS:支持用户自主发布那一款还是有点危险因为 ...

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