微信小程序在校園資訊系統(tǒng)中的應(yīng)用

郭燦杰

（泉州經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院，福建 泉州362000）

0 引言

隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，信息的傳播方式不斷發(fā)生著改變，同時傳播與更新速度也越來越迅速。人們對網(wǎng)絡(luò)信息的接收也不再局限于PC端，輕巧便攜的移動設(shè)備受到人們越來越多的青睞。因而，應(yīng)用程序的開發(fā)從單一的PC端發(fā)展延伸到了移動設(shè)備。移動設(shè)備上的APP開發(fā)本身也從初期的原生APP、HTML5擴(kuò)展到基于微信平臺的微信公眾號、企業(yè)微信、微信小程序。特別是基于微信小程序的應(yīng)用開發(fā)具有開發(fā)周期短、流程簡單、測試時間少、跨平臺運(yùn)行等優(yōu)點(diǎn)，成為使用廣泛的移動應(yīng)用程序。

移動互聯(lián)網(wǎng)已成為學(xué)生們獲取學(xué)習(xí)資源、新聞、考試、就業(yè)等資訊的重要渠道，基于微信小程序開發(fā)的校園資訊系統(tǒng)為他們提供了豐富的移動資訊，充分滿足了學(xué)生們的需求。

1 開發(fā)技術(shù)

1.1 微信小程序

微信小程序（MiniProgram）是基于騰訊的微信APP構(gòu)建開發(fā)實(shí)現(xiàn)的Web應(yīng)用程序。小程序自2017年正式上線以來，就依托微信龐大的用戶群體，憑借自身無需下載、即用即走的便捷性、高安全性等特點(diǎn)，受到用戶的喜愛，被快速地傳播使用。[1]

微信小程序的前端開發(fā)框架MINA，主要包括視圖層、邏輯層、集成開發(fā)環(huán)境等三部分。視圖層采用WXML（Wei Xin Markup Language）、WXSS（Wei Xin Style Sheets）等語言，分別用于頁面結(jié)構(gòu)的組織和頁面整體樣式的控制。邏輯層使用Java Script語言編寫，提供豐富的API，以便提高開發(fā)效率。在集成開發(fā)環(huán)境中，使用微信提供的小程序開發(fā)工具進(jìn)行開發(fā)、預(yù)覽和調(diào)試，實(shí)現(xiàn)了代碼編寫、代碼調(diào)試、代碼上傳等功能。

1.2 PHP

PHP（Hypertext Preprocessor），中文全稱“超文本預(yù)處理器”，是一種混合C語言、Java語言和Perl語言，HTML嵌入式的服務(wù)器端腳本語言，因其具有完全免費(fèi)、簡單易學(xué)、源碼開放、運(yùn)行速度快、支持面向?qū)ο缶幊?、跨平臺操作、支持廣泛的數(shù)據(jù)庫等特點(diǎn)，成為了全球最普及、應(yīng)用最廣泛的Web編程語言。[2]

1.3 JSON數(shù)據(jù)

JSON（JavaScript Object Notation）是一種用于客戶端和服務(wù)器端之間傳輸數(shù)據(jù)的新型輕量級數(shù)據(jù)交互格式。它解析速度快、文檔小、易于讀寫、易于機(jī)器解析和生成，有利于提高網(wǎng)絡(luò)傳輸效率，支持C、Java、Python、C#、JavaScript等多種服務(wù)器端語言，廣泛應(yīng)用于互聯(lián)網(wǎng)。[3]

1.4 MySQL數(shù)據(jù)庫

MySQL數(shù)據(jù)庫具有體積小、運(yùn)行快、開源免費(fèi)、可移植性、支持查詢語言、安全穩(wěn)定等特點(diǎn)，是常用的小型關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，常與PHP組合廣泛應(yīng)用于Web開發(fā)。[4]

2 系統(tǒng)分析與設(shè)計

2.1 系統(tǒng)分析

本系統(tǒng)的核心功能是提供新聞資訊的瀏覽、搜索、評論等，由Web服務(wù)器和數(shù)據(jù)庫服務(wù)器提供服務(wù)功能。數(shù)據(jù)庫服務(wù)器承擔(dān)存儲信息數(shù)據(jù)功能，Web服務(wù)器負(fù)責(zé)調(diào)度微信小程序客戶端和數(shù)據(jù)庫服務(wù)器之間的數(shù)據(jù)傳輸及功能模塊實(shí)現(xiàn)。系統(tǒng)前臺客戶端采用微信小程序技術(shù)開發(fā)，Web服務(wù)器應(yīng)用程序采用PHP語言編寫，數(shù)據(jù)庫服務(wù)器使用MySQL數(shù)據(jù)庫。

根據(jù)系統(tǒng)的應(yīng)用需求，用戶角色有系統(tǒng)管理員、微信用戶。系統(tǒng)管理員登錄系統(tǒng)后臺服務(wù)器端，對新聞信息、新聞欄目、新聞評論信息、用戶信息進(jìn)行管理操作。微信用戶登錄系統(tǒng)前臺客戶端，能夠選擇不同類別的新聞資訊閱讀，對瀏覽過的新聞資訊發(fā)表個人評論，使用系統(tǒng)的搜索模塊查找自己所需的相關(guān)新聞信息以及修改個人資料。功能結(jié)構(gòu)如圖1所示。

圖1 系統(tǒng)功能結(jié)構(gòu)圖

2.2 界面設(shè)計

用戶界面是系統(tǒng)與用戶之間交互操作、信息交換的窗口。應(yīng)用程序只有提供布局合理、內(nèi)容清晰、操作便捷的用戶界面才能吸引更多的用戶，程序才能被需要使用。

微信小程序提供了諸如view組件、form組件、基礎(chǔ)內(nèi)容組件、頁面鏈接的導(dǎo)航組件等一系列UI組件。它們構(gòu)成了視圖層基本的組成單元。小程序組件之間通過WXML和WXSS的編寫來完成界面布局設(shè)計和數(shù)據(jù)渲染，構(gòu)造良好的用戶體驗(yàn)。

隨著移動互聯(lián)網(wǎng)高速發(fā)展和各類移動智能終端設(shè)備（手機(jī)、平板電腦）層出不窮，原有的頁面布局無法滿足各種尺寸、類型的屏幕，于是出現(xiàn)了Flex（響應(yīng)式）布局。在WXCSS將display屬性設(shè)置為Flex，可以輕松完成頁面元素的排列、對齊、換行，實(shí)現(xiàn)Flex布局，以適配不同屏幕大小、不同顯示設(shè)備，適用于移動端頁面設(shè)計。

2.3 數(shù)據(jù)庫設(shè)計

系統(tǒng)采用PHP技術(shù)連接后臺數(shù)據(jù)庫，對數(shù)據(jù)庫信息進(jìn)行增加、刪除、更改和查詢等操作。

數(shù)據(jù)庫設(shè)計是程序開發(fā)中十分重要的步驟，在系統(tǒng)需求分析的基礎(chǔ)上，使用常用工具實(shí)體-關(guān)系（E-R）圖法建立本系統(tǒng)的數(shù)據(jù)庫概念模型，實(shí)體間有三種聯(lián)系即一對一聯(lián)系、一對一多聯(lián)系、多對多聯(lián)系[5]，具體如圖2所示。

圖2 數(shù)據(jù)庫E-R圖

2.4 功能實(shí)現(xiàn)

2.4.1 瀏覽實(shí)現(xiàn)

系統(tǒng)首頁包含各類新聞欄目，欄目下對應(yīng)不同的新聞資訊。當(dāng)點(diǎn)擊切換欄目頁簽，可以瀏覽相應(yīng)類別的新聞列表頁。列表頁中顯示標(biāo)題、作者、發(fā)布時間、縮略圖等新聞相關(guān)的信息。在小程序中通過向后臺服務(wù)器發(fā)起網(wǎng)絡(luò)請求，獲得JSON數(shù)據(jù)，從JSON數(shù)據(jù)解析出新聞列表。[6]

關(guān)鍵代碼：

運(yùn)行結(jié)果如圖3所示。

圖3 新聞列表

點(diǎn)擊新聞列表中的標(biāo)題或縮略圖跳轉(zhuǎn)到新聞資訊詳情頁，即可瀏覽新聞詳細(xì)信息。詳情頁面接收從列表頁面?zhèn)鬟f來的新聞編號參數(shù)，根據(jù)傳遞參數(shù)請求服務(wù)器從數(shù)據(jù)庫提取新聞標(biāo)題和新聞詳細(xì)內(nèi)容等相關(guān)信息。

關(guān)鍵代碼：

onLoad：function（options）{

運(yùn)行結(jié)果如圖4所示。

圖4 新聞詳情

2.4.2 搜索實(shí)現(xiàn)

在輸入框中鍵入搜索關(guān)鍵詞，可以查看包含關(guān)鍵詞的新聞資訊。使用wx.request（）函數(shù)，傳遞用戶輸入的關(guān)鍵詞作為查詢條件，向服務(wù)器端的API接口發(fā)起請求，服務(wù)器響應(yīng)用戶請求，接收查詢參數(shù)，執(zhí)行數(shù)據(jù)庫查詢操作，將查詢結(jié)果轉(zhuǎn)為JSON數(shù)據(jù)返回系統(tǒng)前端。在視圖層的組件上通過wx：for屬性將JSON數(shù)組中的元素渲染到組件。

關(guān)鍵代碼：

運(yùn)行結(jié)果如圖5所示。

圖5 搜索新聞

2.4.3 評論實(shí)現(xiàn)

在新聞下面評論區(qū)的輸入框中填寫評論內(nèi)容，點(diǎn)擊發(fā)送按鈕，微信小程序?qū)⒃u論內(nèi)容、當(dāng)前用戶信息等相關(guān)數(shù)據(jù)發(fā)送至服務(wù)器。服務(wù)器接收數(shù)據(jù)并存儲到后臺數(shù)據(jù)庫。前臺客戶端從數(shù)據(jù)庫獲取最新添加的評論信息，渲染到頁面上。

關(guān)鍵代碼：

運(yùn)行結(jié)果如圖6所示。

圖6 新聞評論

3 結(jié)語

本文針對校園資訊的需要，采用WXML、WXSS、PHP等程序語言及MySQL數(shù)據(jù)庫設(shè)計開發(fā)基于微信小程序的校園資訊系統(tǒng)。用戶可以及時獲取新聞資訊，快速搜索所需的新聞資訊，表達(dá)自己對新聞資訊的感受。管理員可以對新聞欄目、新聞資訊、用戶資料等信息進(jìn)行增刪改查等操作。當(dāng)然，系統(tǒng)在安全性、內(nèi)容涵蓋面、用戶交互性等方面還需要進(jìn)一步完善和優(yōu)化，從而使其功能更加豐富全面。