童敏 張文盛 張黎娜

摘要： 針對現(xiàn)有業(yè)務(wù)系統(tǒng)不能適配移動設(shè)備、入口多和信息孤島等問題，設(shè)計(jì)和實(shí)現(xiàn)安徽廣播電視大學(xué)微信平臺。本平臺依托安徽廣播電視大學(xué)微信公眾號，使用WeUI、jQuery、PHP、MVC等技術(shù)，設(shè)計(jì)和實(shí)現(xiàn)微信網(wǎng)站，主要包括微主頁、微平臺和微服務(wù)模塊；升級現(xiàn)有的多個業(yè)務(wù)系統(tǒng)，使之支持移動端和自適應(yīng)訪問，并集成到微信平臺中；利用微信身份認(rèn)證服務(wù)實(shí)現(xiàn)多個業(yè)務(wù)系統(tǒng)的單點(diǎn)登錄功能。應(yīng)用表明，安徽廣播電視大學(xué)微信平臺能夠滿足一站式業(yè)務(wù)辦理和信息查詢需求，顯著提高學(xué)校信息化服務(wù)和應(yīng)用水平。

關(guān)鍵詞：微信；手機(jī)網(wǎng)站；單點(diǎn)登錄；PHP

中圖分類號：TP391 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2018）14-0073-03

1 引言

安徽廣播電視大學(xué)是一所以現(xiàn)代信息技術(shù)為支撐，專門從事成人遠(yuǎn)程開放教育的高等學(xué)校。學(xué)校秉承學(xué)歷教育和非學(xué)歷教育并重的發(fā)展戰(zhàn)略，已經(jīng)建成幾十個學(xué)習(xí)平臺和業(yè)務(wù)系統(tǒng)。但這些平臺和系統(tǒng)都是單獨(dú)開發(fā)，彼此之間不能互通，成為信息孤島。此外，這些平臺和系統(tǒng)主要面向PC端開發(fā)，沒有適配移動端，隨著移動應(yīng)用全面普及，已經(jīng)不能滿足師生多樣的工作學(xué)習(xí)需要。目前學(xué)校正在向開放大學(xué)轉(zhuǎn)型，提出建設(shè)“一流信息化，一流開放大學(xué)”的雙一流建設(shè)目標(biāo)。一流信息化包括建設(shè)統(tǒng)一的開放大學(xué)學(xué)習(xí)和管理平臺，時間緊任務(wù)重。我們決定開展前期研究工作，在對現(xiàn)狀進(jìn)行全面分析的基礎(chǔ)上，建設(shè)安徽廣播電視大學(xué)微信平臺。本研究以移動應(yīng)用作為切入點(diǎn)，依托安徽廣播電視大學(xué)微信公眾號，采用WeUI、jQuery、PHP和MVC等技術(shù)，開發(fā)微信平臺，將其打造成安徽電大重要的互聯(lián)網(wǎng)宣傳窗口，為全省電大師生提供多終端、無縫和一站式的信息服務(wù)。

2 安徽廣播電視大學(xué)微信平臺設(shè)計(jì)

2.1 相關(guān)技術(shù)

安徽廣播電視大學(xué)微信平臺設(shè)計(jì)使用的相關(guān)技術(shù)包括微信公眾號自定義菜單、基于OpenID的單點(diǎn)登錄和終端自適應(yīng)。

在關(guān)注微信公眾號后，微信APP在下方顯示自定義菜單。用戶點(diǎn)擊菜單項(xiàng)，可進(jìn)入預(yù)先設(shè)置好的鏈接地址，比如手機(jī)網(wǎng)站。因此微信公眾號是理想的統(tǒng)一入口。

在關(guān)注微信公眾號時，騰訊會為用戶分配標(biāo)識信息，且在該公共號下唯一，即OpenID。業(yè)務(wù)系統(tǒng)使用騰訊提供的接口獲取OpenID，將其和本地賬戶綁定，即可實(shí)現(xiàn)單點(diǎn)登錄。

業(yè)務(wù)系統(tǒng)可實(shí)現(xiàn)PC端和手機(jī)端兩套前臺界面，公用后臺業(yè)務(wù)邏輯代碼。用戶訪問業(yè)務(wù)系統(tǒng)時，系統(tǒng)通過某些特征（例如瀏覽器發(fā)送的UserAgent信息）判斷終端是手機(jī)還是普通

PC，并返回對應(yīng)界面，從而實(shí)現(xiàn)終端設(shè)備自適應(yīng)。

2.2 系統(tǒng)結(jié)構(gòu)

本微信平臺包括微主頁、微平臺和微服務(wù)三個模塊。微主頁是學(xué)校主頁的手機(jī)版，方便師生在手機(jī)端查詢學(xué)校概況、學(xué)校新聞、通知公告、分校之窗等內(nèi)容。微平臺是學(xué)校幾個大型學(xué)習(xí)平臺入口的索引頁面，包括國家開放大學(xué)學(xué)習(xí)網(wǎng)、安徽省高等學(xué)歷繼續(xù)教育在線平臺、中小學(xué)教師教育網(wǎng)、安徽省專技技術(shù)人員繼續(xù)教育在線平臺、安徽全民終生學(xué)習(xí)網(wǎng)等，方便學(xué)生進(jìn)入各個平臺學(xué)習(xí)。微服務(wù)是師生日常工作學(xué)習(xí)中要用到系統(tǒng)的索引頁面，包括微報名、微交費(fèi)、微測試、微活動、微點(diǎn)餐等功能。系統(tǒng)結(jié)構(gòu)如圖1所示。

為了降低成本和提高效率，安徽電大微信平臺開發(fā)遵循最小化原則，即如果對現(xiàn)有業(yè)務(wù)系統(tǒng)升級即可滿足需求，就不需要重構(gòu)。對業(yè)務(wù)現(xiàn)狀和系統(tǒng)需求進(jìn)行分析，結(jié)果如表1所示。

主頁系統(tǒng)是學(xué)校門戶，地位重要，必須在微信平臺展示。微信平臺采用PHP技術(shù)，主頁系統(tǒng)采用Node.js+.net技術(shù)，兩者技術(shù)架構(gòu)差別很大。主頁系統(tǒng)是由公司開發(fā)的，在其上實(shí)現(xiàn)微主頁功能有難度，決定在微信平臺中實(shí)現(xiàn)。微主頁模塊直接訪問主頁數(shù)據(jù)庫，和主頁系統(tǒng)共享數(shù)據(jù)，實(shí)現(xiàn)無縫對接。

網(wǎng)上報名系統(tǒng)實(shí)現(xiàn)求學(xué)者的預(yù)約報名、正式報名、網(wǎng)上審核、網(wǎng)上交費(fèi)和在線入學(xué)測試等功能，為學(xué)員提供網(wǎng)上一站式的報名服務(wù)。該系統(tǒng)具有不受時間限制、全天候、全流程的特點(diǎn)，為求學(xué)者提供便利，也促進(jìn)安徽電大招生工作的開展。

學(xué)生交費(fèi)系統(tǒng)實(shí)現(xiàn)學(xué)生在網(wǎng)上完成交學(xué)分費(fèi)、交教材費(fèi)、歷史查詢等功能，能夠提高效率，節(jié)省時間，降低成本。

學(xué)生活動平臺是為豐富全省電大學(xué)生校園文化生活，進(jìn)一步增強(qiáng)學(xué)生對校園的歸屬感，提高學(xué)校知名度，推動招生報名等工作而開發(fā)的系統(tǒng)。目前已經(jīng)在平臺上成功開展過歌手大賽和書畫攝影大賽等活動，收到師生的一致好評。

入學(xué)測試系統(tǒng)完成新生的入學(xué)測試任務(wù)。開放教育要求對新生進(jìn)行入學(xué)測試，對其知識技能大致了解，為將來的個性化學(xué)習(xí)支持服務(wù)提供參考。入學(xué)測試系統(tǒng)可單獨(dú)使用，也能夠和網(wǎng)上報名系統(tǒng)對接。

綜上，微報名、微交費(fèi)、微活動和微測試，都在原系統(tǒng)的基礎(chǔ)上升級開發(fā)完成。微點(diǎn)餐是全新功能，放在微信平臺中實(shí)現(xiàn)。

微信平臺和主頁等系統(tǒng)在物理上是平行關(guān)系，互相對等，相對獨(dú)立。但在邏輯上是上下層關(guān)系，有鏈接，也有數(shù)據(jù)庫直接訪問，以及數(shù)據(jù)交換（OpenID）。為了便于區(qū)分，定義圖1中分割線以上模塊組成的系統(tǒng)稱為小微信平臺，定義圖1中所有模塊包含在內(nèi)的系統(tǒng)稱為大微信平臺，默認(rèn)情況下指小微信平臺。

2.3 技術(shù)架構(gòu)

微信平臺基于B/S模式開發(fā)，采用Windows2008+IIS7（fastCGI）+PHP7（OPcache）+MYSQL5.6運(yùn)行環(huán)境。IIS7內(nèi)置FastCGI模塊，可以運(yùn)行FastCGI模式的腳本引擎。在fastCGI模式下，PHP最高效和最安全，能夠支持大并發(fā)量和高負(fù)載。PHP7內(nèi)置的OPcache模塊，能夠緩存中間代碼，節(jié)省編譯時間，優(yōu)化執(zhí)行。MYSQL5.6屬于輕量型數(shù)據(jù)庫產(chǎn)品，支持絕大多數(shù)SQL特性，性能完全滿足需求。PDO（Php Data Object）接口是PHP為數(shù)據(jù)庫操作開發(fā)的抽象接口，與具體數(shù)據(jù)庫無關(guān)，具體數(shù)據(jù)庫需要提供驅(qū)動，方便解耦。微信平臺通過PDO_MYSQL驅(qū)動連接MYSQL數(shù)據(jù)庫，通過PDO_SQLSRV驅(qū)動連接MSSQL數(shù)據(jù)庫。微信平臺技術(shù)架構(gòu)如圖2所示。

微信平臺包括客戶端前臺和服務(wù)器后臺，客戶端前臺是用戶可見部分，主要由HTML，CSS和JS組成，服務(wù)器后臺只對程序員可見，主要是PHP代碼和數(shù)據(jù)庫?？蛻舳饲芭_又包括普通用戶前臺和管理員前臺，普通用戶前臺是在手機(jī)上上看到的頁面集合，管理員前臺是管理員管理系統(tǒng)的頁面集合。微信平臺采用多種成熟的框架進(jìn)行開發(fā)來提高開發(fā)效率。普通用戶前臺采用WeUI，WeUI+和jQuery WeUI等前端庫。管理員前臺采用DWZ框架。服務(wù)器后臺基于MVC模型，采用國人研制的禪道框架（Zentao Framework）開發(fā)。

2.4 界面設(shè)計(jì)

移動互聯(lián)網(wǎng)時代，應(yīng)用層出不窮，如果界面不能符合業(yè)界規(guī)范和吸引人，很容易被拋棄，因此界面設(shè)計(jì)對于移動端非常重要。安徽電大微信平臺采用許多成熟和優(yōu)秀的前端框架進(jìn)行界面設(shè)計(jì)。

WeUI是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開發(fā)量身設(shè)計(jì)，可以令用戶的使用感知更加統(tǒng)一。

WeUI+是Zepto1.2、weui.js、WeUI0.44/1.1以及上百個組件開發(fā)而成，兼容IOS和Android平臺，主要用于微信/手機(jī)網(wǎng)站開發(fā)，是WeUI的增強(qiáng)版，樣例豐富。

WeUI目前只包含 CSS 代碼，官方短期內(nèi)不會出JS版本，并且官方組件太少根本不夠用。jQuery WeUI也是WeUI的增強(qiáng)版，除此之外還包含大量拓展組件，使用方便。

DWZ富客戶端框架（jQuery RIA framework），是中國人自己開發(fā)的基于jQuery實(shí)現(xiàn)的Ajax RIA開源框架。 DWZ富客戶端框架設(shè)計(jì)目標(biāo)是簡單實(shí)用、擴(kuò)展方便、快速開發(fā)、RIA思路、輕量級。DWZ適合開發(fā)管理員前臺。

除了大量使用前端庫外，還請專業(yè)人事設(shè)計(jì)背景圖片和圖標(biāo)，美化界面。

手機(jī)界面設(shè)計(jì)需要在形式和內(nèi)容上尋找平衡。PC顯示器可以呈現(xiàn)大量內(nèi)容，相比之下手機(jī)屏幕限制很多。如何將PC端顯示的頁面移植到手機(jī)端，是值得研究的。一般的做法是在符合規(guī)范的前提下，將內(nèi)容壓縮和重排，必要時甚至要拆分成多個頁面。具體到每個頁面如何設(shè)計(jì)則要具體分析，不能一刀切。

2.5 模塊設(shè)計(jì)

主頁新聞存放在主頁數(shù)據(jù)庫的gCms_posts表中。微主頁主要顯示新聞，直接訪問該表并顯示即可。微主頁主要有兩種頁面類型：新聞列表和新聞詳情。新聞列表要支持分頁，且能滑動加載。jQuery WeUI支持滑動加載功能，加入相關(guān)代碼即可。新聞列表中每條新聞后面要顯示新聞縮略圖片，gCms_posts表中有新聞圖片信息，是一個URL接口，微主頁直接調(diào)用即可。但顯示的圖片是原始尺寸，適合PC端，手機(jī)加載會很慢，且耗流量。經(jīng)過研究，發(fā)現(xiàn)該接口可以接收尺寸參數(shù)，并將縮放后的圖片返回。傳遞合適的圖片尺寸參數(shù)給接口，將其封裝成函數(shù)，直接調(diào)用。用戶查看新聞時，需要增加瀏覽次數(shù)，修改gCms_posts表的ViewCount字段。主頁系統(tǒng)非常重要，需要嚴(yán)格保護(hù)。微主頁模塊要訪問主頁數(shù)據(jù)庫，必須執(zhí)行權(quán)限分配最小化原則，只授予表級讀權(quán)限甚至列級權(quán)限，即gCms_posts表可select，gCms_posts表的ViewCount字段可update，其他表無權(quán)訪問。

其他模塊設(shè)計(jì)主要包括界面和業(yè)務(wù)邏輯，業(yè)務(wù)邏輯對應(yīng)系統(tǒng)已經(jīng)實(shí)現(xiàn)，因此重點(diǎn)是界面設(shè)計(jì)，界面設(shè)計(jì)前面已經(jīng)涉及，不再贅述。微信平臺和其他系統(tǒng)相對獨(dú)立，其他模塊的數(shù)據(jù)安全由各個系統(tǒng)自己控制和保護(hù)。

2.6 單點(diǎn)登錄

OpenID是理想的單點(diǎn)登錄憑據(jù)，但一個公眾號只能配置一個授權(quán)域名，在授權(quán)域名下的網(wǎng)站才能獲取OpenID。大微信平臺包含多個系統(tǒng)，每個系統(tǒng)都有自己的域名，例如小微信平臺域名是m.ahtvu.ah.cn，報名系統(tǒng)域名是bm.ahtvu.ah.cn。必須解決OpenID在多個系統(tǒng)之間共享問題，方法是采用中間服務(wù)，由中間服務(wù)代理其他系統(tǒng)獲取OpenID，工作原理如圖3所示。

中間服務(wù)由小微信平臺（m.ahvu.ah.cn）完成。假設(shè)用戶用微信APP訪問報名系統(tǒng)（bm.ahtvu.ah.cn），報名系統(tǒng)判斷是微信訪問（UserAgent包含MicroMessenger字符串），開始上述請求過程，獲取OpenID。然后報名系統(tǒng)在本地用戶表里查詢OpenID是否有綁定，如果是，則執(zhí)行自動登錄，否則彈出綁定界面，提醒用戶完成綁定操作。

3 安徽廣播電視大學(xué)微信平臺實(shí)現(xiàn)

3.1 關(guān)鍵代碼

騰訊提供接口和樣例代碼獲取OpenID等信息，將其封裝成getWxInfo函數(shù)，相關(guān)代碼入下：

public function getWxInfo（）

{

if （！$this->session->wx） {//沒有token

if （！$this->session->wxcode） {//沒有code

//重新獲取code

return false；

} else {//獲取token

$token = $this->weixin->getAccessToken（$this->session->wxcode）；

session_unset（）；

if （！$token） die（'getAccessToken failed'）；

$userinfo = $this->weixin->getUserInfo（$token->access_token， $token->openid）；

if （！$userinfo） die（'getUserInfo failed'）；

$wx = new stdClass（）；

$wx->token = $token；

$wx->userinfo = $userinfo；

$wx->stamp = time（） - 60；

$this->session->set（'wx'， $wx）；

}

} else {//有token

$wx = $this->session->wx；

if （$this->session->wx->stamp + $this->session->wx->token->expires_in < time（）） {

//token過期，刷新

$token = $this->weixin->refreshToken（$wx->token->refresh_token）；

if （！$token） {session_unset（）； return false； }

$userinfo = $this->weixin->getUserInfo（$token->access_token， $token->openid）；

if （！$userinfo） die（'getUserInfo failed'）；

$wx = new stdClass（）； $wx->token = $token；

$wx->userinfo = $userinfo； $wx->stamp = time（） - 60；

$this->session->set（'wx'， $wx）；

}

}

return true；

}

終端自適應(yīng)代碼如下：

//判斷是否手機(jī)訪問

public function isMobile（）

{

$s1 = $this->server->http_accept；

$s2 = $this->server->http_user_agent；

if （stripos（$s1， "wap"） ！== false || stripos（$s2， "android"） ！== false || stripos（$s2， "iphone"） ！== false） {//請求包含特征字符，表明是手機(jī)

return true；

}

return false；

}

public function srok（）

{

//省略其他代碼

if （！$this->student->isMobile（）） {

$this->display（）；//不是手機(jī)訪問，則渲染并顯示PC界面

} else {

$this->display（'student'， 'srok.wx'）；//否則渲染并顯示手機(jī)界面

}

}

3.2 系統(tǒng)截圖

微主頁、微平臺、微交費(fèi)和微點(diǎn)餐如圖4所示。

管理員前臺如圖5所示。

4 結(jié)束語

針對安徽廣播電視大學(xué)微信平臺的建設(shè)問題，從設(shè)計(jì)和實(shí)現(xiàn)兩個方面進(jìn)行詳細(xì)研究，確保平臺開發(fā)成功并投入運(yùn)行。本研究采用折衷路線，力求成本最小，效果最快，基本達(dá)到預(yù)期目標(biāo)?，F(xiàn)在高校都存在信息系統(tǒng)眾多、信息孤島現(xiàn)象短期難以消除，但又希望在移動互聯(lián)網(wǎng)方面有所突破和完善的矛盾。本文對此做出了有益的探索，為相似背景和需求的單位提供了參考。微信平臺建設(shè)是一個嘗試，建成統(tǒng)一的學(xué)習(xí)管理平臺，完成流程再造、統(tǒng)一數(shù)據(jù)和系統(tǒng)重構(gòu)，才是開放大學(xué)建設(shè)的內(nèi)涵，還需要做進(jìn)一步研究。

參考文獻(xiàn)：

[1] 白浩，郝晶晶.微信公眾平臺在高校教育領(lǐng)域中的應(yīng)用研究[J].中國教育信息化，2013（4）：78-81.

[2] 閆小坤，周濤.微信公眾平臺應(yīng)用開發(fā)從入門到精通[M].北京：清華大學(xué)出版社，2015.

[3] Brett McLaughlln. PHP&MySQL;實(shí)戰(zhàn)手冊[M].2版. 北京：中國電力出版社，2014.

[4] 閆曉甜，李玉斌.微信平臺支持下的高校微課程設(shè)計(jì)與應(yīng)用研究[J].中國遠(yuǎn)程教育，2015（7）.