基于Material—UI的企业微信应用的设计与实现

柳海燕

摘要：企业微信是腾讯公司专门为企业开发的一款，同时在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&userid;=USERID，其中access_token参数为调用接口凭证，userid即前面获取的成员的userid。这时将返回成员名称、手机号码、部门id、职务信息、上级字段、性别等个人信息，以便我们划分角色设置不同功能。

3.2 Material-UI的安装与使用

Material-UI是以npm包的形式提供的，要在package.json依赖项中安装和保存Material-UI，我们只需执行命令npm install @material-ui/core即可。

Material-UI使用中的一大特点是它是按需加载的，即需要什么组件就引入相应组件即可，比如需要使用Checkbox，就通过语句import Checkbox from '@material-ui/core/Checkbox'；即可，使用其他组件与此方法一致。这有利于在bundle打包时，大大地减小bundle体积。在Material-UI官网上，不仅提供了若干组件的API，而且每种组件的使用都有代码演示，方便用户实现自己所需要的交互体验。

在该听课系统中，主要应用了AppBar、Toolbar、Button、Typography、InputAdornment、Slide等组件，并结合Material-UI的部分icons[3]，完成听课系统的界面设计与功能实现。该应用在电脑和手机上的适配界面如图1、图2所示。

4 结束语

企业微信在众多平台的良好适配，及丰富的API接口，使得越来越多的企业应用开发并接入自己所需要的应用程序。该文基于Google开源框架Material-UI设计并实现的听课系统，能良好适应多个平台的展示，有效提高了开发的效率与效果。

参考文献：

[1] 腾讯. 企业微信开发文档[EB/OL]. https：//work.weixin.qq.com/api/doc.

[2] Google. Material-UI官网[EB/OL]. https：//material-ui.com.

[3] Google. Material Design[EB/OL]. https：//material.io/tools/icons/？style=baseline.

【通联编辑：谢媛媛】