微信公众账号大全,公众号大全,微信公众号收录,微信公众号推广,公众号吸粉教程
ad
主页 > 公众号助手 >

极品调情师:基于Material—UI的企业微信应用的设计与实现

2019-01-08 10:04 来源:八窝网 对此文章感兴趣的有:

极品调情师:

  摘要:企业微信是腾讯公司专门为企业开发的一款,同时在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.

  【通联编辑:谢媛媛】


ad

 

(责任编辑:公众号助手



网站介绍

    八窝网-微信公众账号大全,公众号大全,微信公众号收录,微信公众号推广,公众号吸粉教程

ad
ad