柳海燕

摘要：企業(yè)微信是騰訊公司專門為企業(yè)開發(fā)的一款，同時在IOS、Android、Windows、Mac四個平臺推出的高效辦公平臺。該平臺提供了豐富的API接口，以便于企業(yè)開發(fā)并接入自己的應用。文章基于企業(yè)微信的授權登錄及實現(xiàn)了Material Design設計規(guī)范的react組件庫Material-UI，設計并實現(xiàn)了企業(yè)微信應用程序聽課系統(tǒng)，該應用能夠適應企業(yè)微信應用在不同平臺的顯示與使用，方便用戶使用。

關鍵詞：企業(yè)微信；授權登錄；Material-UI；React；組件庫

中圖分類號：TP311.1 文獻標識碼：A 文章編號：1009-3044（2018）29-0274-02

1 背景

2016年4月，騰訊公司在IOS、Android、Windows、Mac四個平臺同時推出企業(yè)微信1.0版[1]。企業(yè)微信作為一款辦公溝通工具，除了具有類似微信的聊天功能，還提供了通訊錄管理、應用管理、消息推送、身份驗證、OA數(shù)據(jù)接口、企業(yè)支付、電子發(fā)票等API接口，我們可以使用這些API，為企業(yè)開發(fā)和接入更多個性化的辦公應用。

Material-UI[2]是Google開源的一個實現(xiàn)了Google的Material Design設計規(guī)范的React組件庫，庫里的組件涵蓋了單頁面應用必備的UI組件，這些UI組件開箱即用，除了基本的菜單、按鈕、單選框、復選框等外，它還提供了日歷組件及常用圖標。

Material-UI的官方網(wǎng)站為https：//material-ui.com，該文檔提供了npm包、SVG圖標等的安裝方法，提供了常規(guī)布局、組件等的效果演示與源代碼，同時還提供了組件API，開發(fā)人員可根據(jù)需要完成基本功能或功能定制，可以快速搭建出令人滿意的響應式應用界面。特別值得一提的是，這一切都是開源的，你可以任意使用這個開源的框架。

該文將Material-UI設計引入項目開發(fā)，結(jié)合企業(yè)微信的身份驗證接口和通訊錄管理接口，設計并開發(fā)了一款同時適應IOS、Android、Windows、Mac四個平臺的教師聽課記錄系統(tǒng)軟件。

2 聽課系統(tǒng)的設計

該聽課系統(tǒng)主要目的是方便教師及時記錄聽課情況，但同時可以方便管理部門查詢、統(tǒng)計教師的聽課狀況。

在添加頁面，主要記錄授課教師、教師所在部門、課程名稱、授課班級、授課日期、授課學時、授課地點、授課內(nèi)容、意見與建議等字段。在該頁面，同時提供了對教師授課情況的打分，包括對專業(yè)知識與專業(yè)技能、課堂管理、職業(yè)道德與作風、舉止與禮儀等多方面的考核。

在查詢頁面，主要讓系部主任根據(jù)該部門教師姓名查詢教師的聽課情況，不同部門之間不能相互查看。

在統(tǒng)計頁面，主要讓系部主任統(tǒng)計該部門教師的聽課學時數(shù)，以驗證是否達到聽課學時要求。

為簡化操作，根據(jù)登錄人的身份，判斷是否顯示查詢、統(tǒng)計按鈕。普通教師只能添加記錄，對已經(jīng)添加的記錄可以刪除和修改。而部門主任可以看見并使用查詢和統(tǒng)計功能。

3 聽課系統(tǒng)的實現(xiàn)

3.1 企業(yè)微信身份驗證

企業(yè)微信提供了OAuth的授權登錄方式，可以讓從企業(yè)微信終端打開的網(wǎng)頁獲取成員的身份信息，從而免去登錄的環(huán)節(jié)。該系統(tǒng)采用網(wǎng)頁授權登錄的靜默授權方式，以簡化教師操作，自動獲取教師的個人信息，無需登錄。

由于該應用的部分功能有角色區(qū)分，要根據(jù)登錄人的身份判斷是否顯示查詢、統(tǒng)計按鈕，所以該系統(tǒng)又結(jié)合了通訊錄管理接口中的讀取成員，以進一步獲取成員信息。首先第一步構造鏈接來獲取code參數(shù)，根據(jù)code參數(shù)獲得員工的userid。接著通過通訊錄管理接口中的讀取成員，以進一步獲取成員信息。請求方式為GET，請求地址為https：//qyapi.weixin.qq.com/cgi-bin/user/get？access_token=ACCESS_TOKEN&userid;=USERID，其中access_token參數(shù)為調(diào)用接口憑證，userid即前面獲取的成員的userid。這時將返回成員名稱、手機號碼、部門id、職務信息、上級字段、性別等個人信息，以便我們劃分角色設置不同功能。

3.2 Material-UI的安裝與使用

Material-UI是以npm包的形式提供的，要在package.json依賴項中安裝和保存Material-UI，我們只需執(zhí)行命令npm install @material-ui/core即可。

Material-UI使用中的一大特點是它是按需加載的，即需要什么組件就引入相應組件即可，比如需要使用Checkbox，就通過語句import Checkbox from '@material-ui/core/Checkbox'；即可，使用其他組件與此方法一致。這有利于在bundle打包時，大大地減小bundle體積。在Material-UI官網(wǎng)上，不僅提供了若干組件的API，而且每種組件的使用都有代碼演示，方便用戶實現(xiàn)自己所需要的交互體驗。

在該聽課系統(tǒng)中，主要應用了AppBar、Toolbar、Button、Typography、InputAdornment、Slide等組件，并結(jié)合Material-UI的部分icons[3]，完成聽課系統(tǒng)的界面設計與功能實現(xiàn)。該應用在電腦和手機上的適配界面如圖1、圖2所示。

4 結(jié)束語

企業(yè)微信在眾多平臺的良好適配，及豐富的API接口，使得越來越多的企業(yè)應用開發(fā)并接入自己所需要的應用程序。該文基于Google開源框架Material-UI設計并實現(xiàn)的聽課系統(tǒng)，能良好適應多個平臺的展示，有效提高了開發(fā)的效率與效果。

參考文獻：

[1] 騰訊. 企業(yè)微信開發(fā)文檔[EB/OL]. https：//work.weixin.qq.com/api/doc.

[2] Google. Material-UI官網(wǎng)[EB/OL]. https：//material-ui.com.

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

【通聯(lián)編輯：謝媛媛】