基于微信小程序的校園資訊平臺(tái)的頁(yè)面設(shè)計(jì)與實(shí)現(xiàn)

廖偉國(guó) 謝杰新 胡婉玲 盧曉惠

摘? 要：本設(shè)計(jì)結(jié)合當(dāng)下移動(dòng)互聯(lián)網(wǎng)的流行以及移動(dòng)手機(jī)等智能終端與校園資訊的聯(lián)系越來(lái)越緊密，以及微信平臺(tái)具有的龐大用戶(hù)和微信小程序作為校園資訊平臺(tái)有著較大優(yōu)勢(shì)，決定采用B/S設(shè)計(jì)模式，PHP后臺(tái)語(yǔ)言與基于微信小程序的前端平臺(tái)開(kāi)發(fā)技術(shù)相結(jié)合，利用putty和lamp搭建服務(wù)器，設(shè)計(jì)出基于微信小程序的校園資訊平臺(tái)。

關(guān)鍵詞：微信小程序;校園資訊平臺(tái);設(shè)計(jì)

中圖分類(lèi)號(hào)：TP311? ? ? ? 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：2095-2945（2019）09-0021-03

Abstract： This design combines the popularity of the current mobile Internet and mobile phones and other intelligent terminals and campus information more and more closely linked， as well as WeChat platform has a huge number of users and WeChat Mini Program as a campus information platform has great advantages. It is decided to adopt B/S design pattern， PHP background language and front-end platform development technology based on WeChat Mini Program， use putty and lamp to build server， and design Campus Information Platform based on WeChat Mini Program.

Keywords： WeChat Mini Program; Campus Information Platform; design

1 概述

互聯(lián)網(wǎng)已經(jīng)成為人們快速獲取信息的渠道，而新聞資訊則是信息的重要內(nèi)容之一。處在信息化高速發(fā)展的高等學(xué)院，其信息的傳遞對(duì)學(xué)校的發(fā)展尤其重要。校園資訊對(duì)提高學(xué)校的教學(xué)質(zhì)量和學(xué)生的學(xué)習(xí)質(zhì)量也起到了非常重要的作用。因此，學(xué)院十分重視校園資訊平臺(tái)的發(fā)展。

現(xiàn)如今，隨著智能手機(jī)進(jìn)一步普及，手機(jī)網(wǎng)民越來(lái)越多。根據(jù)中國(guó)互聯(lián)網(wǎng)信息中心（CNNIC）發(fā)布的《中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示，截至2017年8月，中國(guó)網(wǎng)民規(guī)模達(dá)到7.51億，其中手機(jī)網(wǎng)民規(guī)模就已經(jīng)達(dá)到7.24億，占比達(dá)到96.3%，這意味著手機(jī)上網(wǎng)已經(jīng)成為人們上網(wǎng)行為的主要部分。而且微信已成為人們手機(jī)必不可少的軟件之一，說(shuō)明微信平臺(tái)有著龐大的用戶(hù)基礎(chǔ)。

目前關(guān)于校園資訊平臺(tái)的開(kāi)發(fā)，傳統(tǒng)的網(wǎng)站編輯是通過(guò)一頁(yè)一頁(yè)地修改，然后上傳到服務(wù)器，對(duì)于日益多變的大量的信息發(fā)展，顯然已很難對(duì)付龐大的業(yè)務(wù)。所以利用動(dòng)態(tài)網(wǎng)頁(yè)和數(shù)據(jù)庫(kù)相結(jié)合才是發(fā)展趨勢(shì)?？紤]到移動(dòng)平臺(tái)成為用戶(hù)上網(wǎng)的主流平臺(tái)，用戶(hù)慢慢習(xí)慣了用手機(jī)APP客戶(hù)端實(shí)現(xiàn)各種應(yīng)用。微信小程序不需要下載即免安裝就能使用，實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶(hù)掃一掃即可使用，用完就走，且簡(jiǎn)單，輕便，占用內(nèi)存小。因此，通過(guò)設(shè)計(jì)微信小程序的校園資訊平臺(tái)，用戶(hù)可以在這個(gè)平臺(tái)上了解到自己校園的各方面包括官方，兼職，社團(tuán)等信息，極大地豐富了師生了解校園動(dòng)態(tài)的途徑。

2 小程序MINA框架介紹

要開(kāi)發(fā)一個(gè)微信小程序，就需要用到微信提供的開(kāi)發(fā)框架。微信團(tuán)隊(duì)為小程序提供的框架名為MINA應(yīng)用架構(gòu)。MINA框架通過(guò)封裝微信客戶(hù)端提供的文件系統(tǒng)、網(wǎng)絡(luò)通信、數(shù)據(jù)與安全等基礎(chǔ)功能，提供一系列的組件和API。視圖層描述語(yǔ)言主要用到WXML和WXSS。在主要頁(yè)面視圖層包括前端頁(yè)面，開(kāi)發(fā)者使用WXML來(lái)搭建基礎(chǔ)的頁(yè)面。WXML類(lèi)似于HTML標(biāo)簽語(yǔ)言，通過(guò)大量使用view標(biāo)簽來(lái)實(shí)現(xiàn)層疊包圍設(shè)計(jì)。WXSS類(lèi)似CSS，使用WXSS文件來(lái)控制頁(yè)面的展現(xiàn)樣式，包括頁(yè)面位置，圖片大小，文字顏色等。邏輯層是MINA框架的核心，AppService應(yīng)用邏輯層是MINA的服務(wù)中心，頁(yè)面渲染所需的數(shù)據(jù)、頁(yè)面交互處理邏輯都AppService中實(shí)現(xiàn)。MINA框架中的AppService使用JavaScript來(lái)編寫(xiě)交互邏輯、網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)處理。如圖1所示。

（1）官方提供經(jīng)過(guò)封裝的組件和API，將一定程度上減少代碼量，降低開(kāi)發(fā)難度。

（2）在邏輯層上有事件系統(tǒng)，開(kāi)發(fā)者可以更加專(zhuān)注于邏輯上的開(kāi)發(fā)。

但同時(shí)也存在一些不足，組件和API的數(shù)量有限，很多優(yōu)秀的第三方插件不能直接使用，有待以后官方不斷進(jìn)行更新完善。

3 軟件設(shè)計(jì)與實(shí)現(xiàn)

3.1 軟件整體功能設(shè)計(jì)

根據(jù)功能需求分析，該軟件主功能為前臺(tái)顯示模塊和后臺(tái)管理模塊。

（1）前臺(tái)顯示系統(tǒng)，一般用戶(hù)可以登錄，瀏覽不同的新聞;又可以對(duì)平臺(tái)進(jìn)行意見(jiàn)反饋。

（2）后臺(tái)資訊管理系統(tǒng)，管理員可以對(duì)平臺(tái)進(jìn)行資訊管理，文件管理，用戶(hù)反饋管理等。整體的功能結(jié)構(gòu)圖如圖2。

3.2 軟件流程分析

本平臺(tái)分為前臺(tái)和后臺(tái)兩個(gè)部分。前臺(tái)部分不需要進(jìn)行身份驗(yàn)證，任何人都可以通過(guò)微信瀏覽信息。后臺(tái)系統(tǒng)的管理員首先輸入自己的賬號(hào)密碼，輸錯(cuò)就會(huì)重新開(kāi)始，然后進(jìn)行資訊管理，文件管理，反饋管理，輸入相關(guān)操作后，數(shù)據(jù)庫(kù)將會(huì)進(jìn)行邏輯處理，查看是否有滿(mǎn)足的數(shù)據(jù)，最后把數(shù)據(jù)反饋給管理員。流程如圖3所示。

3.3 數(shù)據(jù)庫(kù)設(shè)計(jì)

根據(jù)前面的功能結(jié)構(gòu)設(shè)計(jì)得到的數(shù)據(jù)，可以設(shè)計(jì)出滿(mǎn)足于用戶(hù)需求的各種實(shí)體，實(shí)體-聯(lián)系圖是根據(jù)用戶(hù)的要求建立的概念性的數(shù)據(jù)模型，用于輔助用戶(hù)與管理員進(jìn)行交流，如圖4所示。

3.4 關(guān)鍵技術(shù)實(shí)現(xiàn)

3.4.1 小程序部分

（1）從新聞列表正確跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁(yè)面。從新聞列表正確跳轉(zhuǎn)到詳情頁(yè)面，并不需要一頁(yè)一頁(yè)地去設(shè)置，用id來(lái)表示新聞列表，從而讓列表和詳情頁(yè)面正確對(duì)接，關(guān)鍵代碼如下

（2）加載更多新聞的實(shí)現(xiàn)，如圖5。

（3）網(wǎng)絡(luò)環(huán)境判斷的實(shí)現(xiàn)。為了讓用戶(hù)不在WiFi網(wǎng)絡(luò)的環(huán)境下，避免因?yàn)榱髁坎蛔愣粩嗉虞d新聞，設(shè)置一個(gè)網(wǎng)絡(luò)環(huán)境的反饋判斷，當(dāng)網(wǎng)絡(luò)處于WiFi環(huán)境時(shí)，沒(méi)提示。但網(wǎng)絡(luò)不處于WiFi環(huán)境時(shí)即2g、3g、4g網(wǎng)絡(luò)狀態(tài)下時(shí)，就會(huì)提示不在WiFi網(wǎng)絡(luò)下，會(huì)消耗流量，如圖6所示。

3.4.2 后臺(tái)管理的實(shí)現(xiàn)

管理員管理新聞則需要在服務(wù)器上安裝weiphp，安裝好weiphp在模型管理中新建cms插件，設(shè)計(jì)新聞包含字段標(biāo)題，圖片，內(nèi)容，時(shí)間，作者等，如圖7。

3.4.3 服務(wù)器的搭建方法

軟件開(kāi)發(fā)需要考慮經(jīng)濟(jì)性和實(shí)用性，騰訊云服務(wù)器簡(jiǎn)單高效，價(jià)格便宜，安全可靠，因此服務(wù)器選擇租賃云服務(wù)器的方式，搭建工具選用putty和lamp相結(jié)合。本服務(wù)器的ip地址為119.29.176.117，利用putty連接服務(wù)器如圖8所示。

4 結(jié)束語(yǔ)

在互聯(lián)網(wǎng)的時(shí)代，傳統(tǒng)的宣傳方式已經(jīng)漸漸淡化了大部分人的生活，手機(jī)網(wǎng)民的增長(zhǎng)以及微信平臺(tái)龐大的用戶(hù)量說(shuō)明了利用微信小程序搭建校園資訊平臺(tái)將有很大的市場(chǎng)前景。

基于微信小程序的校園資訊平臺(tái)，管理員可以通過(guò)后臺(tái)輕松高效地管理新聞信息，對(duì)重要的信息進(jìn)行發(fā)布，讓師生第一時(shí)間了解校園動(dòng)態(tài)，有利于校園數(shù)字化建設(shè)。

通過(guò)這次開(kāi)發(fā)，我們學(xué)習(xí)了很多知識(shí)，基本掌握了小程序MINA架構(gòu)從而理解Web前端語(yǔ)言，也掌握了后臺(tái)語(yǔ)言PHP以及服務(wù)器的搭建的理論，同時(shí)又能把所學(xué)的理論應(yīng)用到開(kāi)發(fā)實(shí)踐中，提高自己的實(shí)操能力。但由于時(shí)間和技術(shù)上的缺陷，該軟件還有以下不足：

（1）小程序功能不夠豐富，如沒(méi)有新聞搜索功能等。

（2）頁(yè)面布局還比較簡(jiǎn)單，不夠完善。

參考文獻(xiàn)：

[1]劉紅衛(wèi).微信小程序應(yīng)用探析[J].無(wú)線(xiàn)互聯(lián)科技，2016（23）：11-12+40.

[2]邱曉虹.基于.NET校園新聞管理系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)[D].華東師范大學(xué)，2010.

[3]劉玉佳.微信“小程序”開(kāi)發(fā)的系統(tǒng)實(shí)現(xiàn)及前景分析[J].信息通信，2017（01）：260-261.

[4]劉增杰，張工廠，劉玉萍.php5.5從零開(kāi)始學(xué)[M].清華大學(xué)出版社，2014.