摘要：企业微信是腾讯公司专门为企业开发的一款，同时在IOS、Android、Windows、Mac四个平台推出的高效办公平台。该平台提供了丰富的API接口，以便于企业开发并接入自己的应用。文章基于企业微信的授权登录及实现了Material Design设计规范的react组件库Material-UI，设计并实现了企业微信应用程序听课系统，该应用能够适应企业微信应用在不同平台的显示与使用，方便用户使用。
　　关键词：企业微信；授权登录；Material-UI；React；组件库
　　中图分类号：TP311.1 文献标识码：A 文章编号：1009-3044（2018）29-0274-02
　　1 背景
　　2016年4月，腾讯公司在IOS、Android、Windows、Mac四个平台同时推出企业微信1.0版[1]。企业微信作为一款办公沟通工具，除了具有类似微信的聊天功能，还提供了通讯录管理、应用管理、消息推送、身份验证、OA数据接口、企业支付、电子发票等API接口，我们可以使用这些API，为企业开发和接入更多个性化的办公应用。
　　Material-UI[2]是Google开源的一個实现了Google的Material Design设计规范的React组件库，库里的组件涵盖了单页面应用必备的UI组件，这些UI组件开箱即用，除了基本的菜单、按钮、单选框、复选框等外，它还提供了日历组件及常用图标。
　　Material-UI的官方网站为https：//material-ui.com，该文档提供了npm包、SVG图标等的安装方法，提供了常规布局、组件等的效果演示与源代码，同时还提供了组件API，开发人员可根据需要完成基本功能或功能定制，可以快速搭建出令人满意的响应式应用界面。特别值得一提的是，这一切都是开源的，你可以任意使用这个开源的框架。
　　该文将Material-UI设计引入项目开发，结合企业微信的身份验证接口和通讯录管理接口，设计并开发了一款同时适应IOS、Android、Windows、Mac四个平台的教师听课记录系统软件。
　　2 听课系统的设计
　　该听课系统主要目的是方便教师及时记录听课情况，但同时可以方便管理部门查询、统计教师的听课状况。
　　在添加页面，主要记录授课教师、教师所在部门、课程名称、授课班级、授课日期、授课学时、授课地点、授课内容、意见与建议等字段。在该页面，同时提供了对教师授课情况的打分，包括对专业知识与专业技能、课堂管理、职业道德与作风、举止与礼仪等多方面的考核。
　　在查询页面，主要让系部主任根据该部门教师姓名查询教师的听课情况，不同部门之间不能相互查看。
　　在统计页面，主要让系部主任统计该部门教师的听课学时数，以验证是否达到听课学时要求。
　　为简化操作，根据登录人的身份，判断是否显示查询、统计按钮。普通教师只能添加记录，对已经添加的记录可以删除和修改。而部门主任可以看见并使用查询和统计功能。
　　3 听课系统的实现
　　3.1 企业微信身份验证
　　企业微信提供了OAuth的授权登录方式，可以让从企业微信终端打开的网页获取成员的身份信息，从而免去登录的环节。该系统采用网页授权登录的静默授权方式，以简化教师操作，自动获取教师的个人信息，无需登录。
　　由于该应用的部分功能有角色区分，要根据登录人的身份判断是否显示查询、统计按钮，所以该系统又结合了通讯录管理接口中的读取成员，以进一步获取成员信息。首先第一步构造链接来获取code参数，根据code参数获得员工的userid。接着通过通讯录管理接口中的读取成员，以进一步获取成员信息。请求方式为GET，请求地址为https：//qyapi.weixin.qq.com/cgi-bin/user/get？access_token=ACCESS_TOKEN