基于微信小程序的校園資訊平臺的頁面設計與實現

廖偉國 謝杰新 胡婉玲 盧曉惠

摘? 要：本設計結合當下移動互聯網的流行以及移動手機等智能終端與校園資訊的聯系越來越緊密，以及微信平臺具有的龐大用戶和微信小程序作為校園資訊平臺有著較大優勢，決定采用B/S設計模式，PHP后臺語言與基于微信小程序的前端平臺開發技術相結合，利用putty和lamp搭建服務器，設計出基于微信小程序的校園資訊平臺。

關鍵詞：微信小程序;校園資訊平臺;設計

中圖分類號：TP311? ? ? ? 文獻標志碼：A 文章編號：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 概述

互聯網已經成為人們快速獲取信息的渠道，而新聞資訊則是信息的重要內容之一。處在信息化高速發展的高等學院，其信息的傳遞對學校的發展尤其重要。校園資訊對提高學校的教學質量和學生的學習質量也起到了非常重要的作用。因此，學院十分重視校園資訊平臺的發展。

現如今，隨著智能手機進一步普及，手機網民越來越多。根據中國互聯網信息中心（CNNIC）發布的《中國互聯網絡發展狀況統計報告》顯示，截至2017年8月，中國網民規模達到7.51億，其中手機網民規模就已經達到7.24億，占比達到96.3%，這意味著手機上網已經成為人們上網行為的主要部分。而且微信已成為人們手機必不可少的軟件之一，說明微信平臺有著龐大的用戶基礎。

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

2 小程序MINA框架介紹

要開發一個微信小程序，就需要用到微信提供的開發框架。微信團隊為小程序提供的框架名為MINA應用架構。MINA框架通過封裝微信客戶端提供的文件系統、網絡通信、數據與安全等基礎功能，提供一系列的組件和API。視圖層描述語言主要用到WXML和WXSS。在主要頁面視圖層包括前端頁面，開發者使用WXML來搭建基礎的頁面。WXML類似于HTML標簽語言，通過大量使用view標簽來實現層疊包圍設計。WXSS類似CSS，使用WXSS文件來控制頁面的展現樣式，包括頁面位置，圖片大小，文字顏色等。邏輯層是MINA框架的核心，AppService應用邏輯層是MINA的服務中心，頁面渲染所需的數據、頁面交互處理邏輯都AppService中實現。MINA框架中的AppService使用JavaScript來編寫交互邏輯、網絡請求、數據處理。如圖1所示。

（1）官方提供經過封裝的組件和API，將一定程度上減少代碼量，降低開發難度。

（2）在邏輯層上有事件系統，開發者可以更加專注于邏輯上的開發。

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

3 軟件設計與實現

3.1 軟件整體功能設計

根據功能需求分析，該軟件主功能為前臺顯示模塊和后臺管理模塊。

（1）前臺顯示系統，一般用戶可以登錄，瀏覽不同的新聞;又可以對平臺進行意見反饋。

（2）后臺資訊管理系統，管理員可以對平臺進行資訊管理，文件管理，用戶反饋管理等。整體的功能結構圖如圖2。

3.2 軟件流程分析

本平臺分為前臺和后臺兩個部分。前臺部分不需要進行身份驗證，任何人都可以通過微信瀏覽信息。后臺系統的管理員首先輸入自己的賬號密碼，輸錯就會重新開始，然后進行資訊管理，文件管理，反饋管理，輸入相關操作后，數據庫將會進行邏輯處理，查看是否有滿足的數據，最后把數據反饋給管理員。流程如圖3所示。

3.3 數據庫設計

根據前面的功能結構設計得到的數據，可以設計出滿足于用戶需求的各種實體，實體-聯系圖是根據用戶的要求建立的概念性的數據模型，用于輔助用戶與管理員進行交流，如圖4所示。

3.4 關鍵技術實現

3.4.1 小程序部分

（1）從新聞列表正確跳轉到對應的詳情頁面。從新聞列表正確跳轉到詳情頁面，并不需要一頁一頁地去設置，用id來表示新聞列表，從而讓列表和詳情頁面正確對接，關鍵代碼如下

（2）加載更多新聞的實現，如圖5。

（3）網絡環境判斷的實現。為了讓用戶不在WiFi網絡的環境下，避免因為流量不足而不斷加載新聞，設置一個網絡環境的反饋判斷，當網絡處于WiFi環境時，沒提示。但網絡不處于WiFi環境時即2g、3g、4g網絡狀態下時，就會提示不在WiFi網絡下，會消耗流量，如圖6所示。

3.4.2 后臺管理的實現

管理員管理新聞則需要在服務器上安裝weiphp，安裝好weiphp在模型管理中新建cms插件，設計新聞包含字段標題，圖片，內容，時間，作者等，如圖7。

3.4.3 服務器的搭建方法

軟件開發需要考慮經濟性和實用性，騰訊云服務器簡單高效，價格便宜，安全可靠，因此服務器選擇租賃云服務器的方式，搭建工具選用putty和lamp相結合。本服務器的ip地址為119.29.176.117，利用putty連接服務器如圖8所示。

4 結束語

在互聯網的時代，傳統的宣傳方式已經漸漸淡化了大部分人的生活，手機網民的增長以及微信平臺龐大的用戶量說明了利用微信小程序搭建校園資訊平臺將有很大的市場前景。

基于微信小程序的校園資訊平臺，管理員可以通過后臺輕松高效地管理新聞信息，對重要的信息進行發布，讓師生第一時間了解校園動態，有利于校園數字化建設。

通過這次開發，我們學習了很多知識，基本掌握了小程序MINA架構從而理解Web前端語言，也掌握了后臺語言PHP以及服務器的搭建的理論，同時又能把所學的理論應用到開發實踐中，提高自己的實操能力。但由于時間和技術上的缺陷，該軟件還有以下不足：

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

（2）頁面布局還比較簡單，不夠完善。

參考文獻：

[1]劉紅衛.微信小程序應用探析[J].無線互聯科技，2016（23）：11-12+40.

[2]邱曉虹.基于.NET校園新聞管理系統的設計和實現[D].華東師范大學，2010.

[3]劉玉佳.微信“小程序”開發的系統實現及前景分析[J].信息通信，2017（01）：260-261.

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