基于Material—UI的企業(yè)微信應(yīng)用的設(shè)計(jì)與實(shí)現(xiàn)

柳海燕

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

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

中圖分類號(hào)：TP311.1 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）29-0274-02

1 背景

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

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

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

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

2 聽課系統(tǒng)的設(shè)計(jì)

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

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

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

在統(tǒng)計(jì)頁面，主要讓系部主任統(tǒng)計(jì)該部門教師的聽課學(xué)時(shí)數(shù)，以驗(yàn)證是否達(dá)到聽課學(xué)時(shí)要求。

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

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

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

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

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

3.2 Material-UI的安裝與使用

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

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

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

4 結(jié)束語

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

參考文獻(xiàn)：

[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)編輯：謝媛媛】