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

▌项目背景

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

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相关的技术故事/技术实战经验，请扫码关注【腾讯云云开发】公众号～