基于微信小程序的微型咨訊系統的設計和實現

鞠宏軍 鐘超恒

摘要：《基于微信小程序的微型咨訊系統》采用了springboot+mybatis框架對系統進行快速搭建，前臺頁面使用的是node.js編寫的，后臺業務邏輯使用JAVA語言編寫，采用的數據庫是mysql，結合mvc設計模式快速完成微型咨訊系統。該系統主要功能有：各用戶查看文章，發表文章;管理發表的文章，為文章進行收藏還有評論回復;管理用戶自身發表的文章;修改用戶信息;刪除文章，刪除用戶，上傳視頻圖片等。

關鍵詞：微信小程序;node.js;springboot;微型咨訊

中圖分類號：TP311.52

文獻標識碼：A

文章編號：1009- 3044（2019）34-0093-04

1 背景

自改革開放以來，科技在日新月異的變化，國家也緊跟時代的進步，快速地得到發展，計算機的各種行業不斷發展。從以前的滴滴響的尋呼機到霸氣厚重的大哥大，再到輕巧功能簡單的小靈通再到加人多媒體的諾基亞手機，再到現在的集多元化功能于一身安卓蘋果智能手機，在它們的身影中無不看到了人們對社交的重視性，對外界通訊獲取外界信息的渴求。如今，無論是在地鐵或公交趕去上班的人，還是在家或學校的學生們都必須佩帶一臺手機，手機成了人們生活的必需品;與此同時，手機的app也不斷地得到多元化，但是隨著科技的進步，人們對于app有了更高的要求，app體積越來越大使容量小的手機更加難以承受。因此，小程序應運而生了，人們不再需要為app體積過大而煩惱了，僅僅需要在小程序上授權一下就可以享受更輕便的體驗。當人們遇到有趣的事時，便可以拿起手機進行隨性所欲的拍攝，分享給更多的人看，傳遞正能量，人們也可以在這小程序上各抒己見，暢所欲言。本文就是為此現象而開發的微信小程序，通過更輕便的小程序讓人們體現到無安裝的快感，使生活得快樂傳播得更廣，盡管小程序不能完全代替app，但是它在人們生活中也占有了重要的一席之地。

2 系統需求分析

2.1 用戶登陸授權功能需求

此功能是其他功能的基礎，需要通過授權獲取微信頭像用戶呢稱，從微信服務器端獲取openid作為唯一用戶的標識，存人數據庫，以便創建新用戶或者檢查用戶是否是已存在的用戶等。

2.2 管理個人信息需求

當用戶創建新用戶時，基本信息是空的，用戶可以查看信息，對于錯誤的自身信息和想要修改的信息也可以點擊修改，但是對于用戶頭像，用戶的openid是不能修改的。

2.3 微型咨訊需求

此功能是系統的主要功能之一，主界面采用flex布局設計，對頁面加載不能過于慢，能夠展示用戶頭像姓名，文章基本內容，并且能夠播放視頻，點擊圖片能夠放大預覽，對于發布的文章必須附帶視頻或者圖片其中一種，不能兩個同時存在。點擊發表按鈕時可以跳到發表的頁面，填寫內容可以選著圖片或者視頻，圖片最多可以選擇九張，同時可以取消已經選擇的視頻或者圖片;點擊按鈕能回到文章頂部;下拉操作時能夠對咨訊的展示頁面進行刷新，上拉時不斷加載文章，當文章數到底時需要進行提示，并且文章加載的順序是按最新發布的在前面。

2.4 互動需求

用戶可以對喜歡的文章進行點贊收藏，點贊收藏后該文章的數量需要發生改變，狀態也需要發生變化，同時用戶對于自己點贊收藏的文章也可以進行查看，或者取消收藏。在微訊主界面瀏覽文章時，點擊某一篇文章時可以進入文章查看詳細文章信息，查看詳細的用戶評論和回復;點擊輸入框時能夠出現蒙板層，遮擋部分文章內容，彈出鍵盤對文章進行評論發表;當點擊回復時也能彈出蒙板層，在輸入框內對文章的某條評論進行回復，同時文章相應的評論數目也要發生相應的變化。

2.5 管理用戶和文章需求

管理員通過密碼登陸可以進入管理界面，進入管理界面后能對用戶進行查看，并且可以修改所有用戶信息，點擊刪除用戶按鈕，會提示是否刪除該用戶，點擊確定時可以刪除該用戶，同時該用戶的所有文章基本資料等都會被刪除;管理文章功能，管理員可以查看所有文章，對有非法內容的文章可以進行刪除，同時點擊刪除所有文章按鈕時可以刪除所有文章，并且把所有文章信息刪除。

3 系統設計

3.1 功能設計

1）實現管理員登錄的功能。

2）實現管理員對文章還有用戶進行管理的功能。

3）實現文章能夠清晰展示，圖片預覽，視頻播放，分頁加載等功能。

4）實現文章能上傳視頻圖片功能。

5）實現用戶能查看評論，發表評論和回復，點贊收藏功能。

6）實現用戶能查看用戶信息并且修改個人信息功能。

7）實現用戶能管理自己發表的文章還有自己收藏的文章功能。

具體功能結構如圖1所示：

3.2 系統總E-R圖

系統總E-R圖如圖2所示。

4 系統實現

4.1 系統關鍵技術分析

本系統采用了springboot+mybatis框架搭建快速部署，通過springboot的輕量級框架，使用注解開發可以降低開發配置的復雜度，同時springboot自帶服務器，對于程序的運行調試提供了極大的幫助。持久化層使用mybatis，框架內置的大量sql語句可以省去大部分編寫sql語句的麻煩，同時也使用了動態sql提升系統的安全性。對于各種Jar包管理使用的是maven進行管理，不用像以前一樣因為缺失包而導致程序報錯等。客戶端使用的是微信小程序，比APP更加的輕便.同時適配機型調整難度也降低。

4.2 用戶授權和管理員登陸

管理員登陸界面比較簡潔，此頁面作為小程序的首頁，首要用戶授權獲取頭像信息才能進入小程序。輸入賬戶和密碼，當點擊登陸按鈕之后會首先進行前端的校驗，如果校驗出現內容為空，則給出提示，并要求重新輸入。如果輸入結果不為空，則向服務器發送請求查詢是否有該用戶與對應的密碼，如果成功返回success，提示登錄成功;如果沒有找到對應賬戶則提示用戶名或密碼錯誤。

4.3 管理員管理文章和用戶模塊

在本模塊中，分為管理文章模塊和管理用戶模塊;文章管理模塊以列表的形式展示文章的簡單信息，包括發表人頭像，名字發表文章的內容部分，文章內容長度過長時會自動進行隱藏用省略號代替，點擊文章可以進入文章內部查看詳細信息;在每個文章列表的右邊會有一個刪除按鈕，點擊刪除按鈕會彈出提示框提示是否刪除，點擊確定文章就會刪除，同時為了方便操作，在文章列表的最下方也設計了一個刪除所有文章的按鈕，為了避免誤觸，該按鈕設置了隱藏，點擊向上按鈕時才會顯示;并且文章設置了下拉刷新加載，文章不會一次性地把所有文章加載出來，采用了分頁加載。

4.4 文章展示模塊

文章的內容不能超過255個字，當點擊圖片時圖片便可以放大預覽，圖片最多可以附帶九張，點擊視頻時視頻能夠流暢播放，但是視頻的長度不能超過15秒;在視頻下方設置了評論數顯示，點擊評論圖標或者點擊文章的頭部可以進入文章的詳細內容，查看文章的所有信息;視頻下方還設置了收藏按鈕，點擊收藏按鈕，收藏顯示發生變化，同時收藏數量也會發生變化，并且也會記錄到個人的收藏里面。

4.5 微訊主界面模塊

在本模塊中主要涉及多個文章的布局，及多個文章加載，還有用戶如何發表。因為采用了分頁加載的原理，加載速度比較快，下拉時刷新文章列表，重新加載文章，點擊視頻播放時也能達到流暢播放效果;由于文章列表可能會過長，所以設計了一個回到頂部的按鈕，用于快速跳到頭部給用戶更好的體驗;同時把發表按鈕設置成半透明顏色避免遮擋用戶視線。

4.6 評論回復模塊

此功能模塊主要涉及評論和回復，其中細節比較多。細節之一：當用戶點擊輸入框時，此時便會彈起輸入框蒙版層，半透明遮住文章內容，同時會觸發輸入框聚焦事件，設置輸入標志為評論，調用鍵盤進行輸入，此時輸入的內容為評論內容;當用戶想取消輸入評論，點擊蒙版層的灰暗透明處，蒙版顯示標志改變為false，蒙版便會消失，輸入框關閉。細節之二：當用戶想對某條評論進行回復時，只需要點擊該條評論，就會觸發聚焦事件，設置輸入標志為回復，改變蒙版顯示標志喚起輸入框，此時輸入的內容為回復。

4.7 個人管理模塊

此模塊主要是供用戶個人管理自身信息的模塊，主要設計對用戶收藏的整理，對用戶所發表的文章進行整理。對于自己的收藏可以進行查看詳細內容，同時可以取消收藏;對于白己發表過的文章可以進行刪除，點擊文章列表可以查看詳細的內容評論。并且可以對用戶信息進行修改，對于填入的必要部分信息會進行非空校驗，并且電話號碼格式也能進行校驗是否是真正的電話。圖8為個人管理模塊。

5 結束語

本小程序的主要目的是為了讓人們更方便的分享生活中的趣味事情，了解更多的咨訊，發表白己的看法，展現更好的自我，暢所欲言，無拘無束。在節奏緊張的時代中，這些信息快餐已經越來越受到人們的追捧，短小而精悍的微訊帶來了更多的收獲。盡管小程序不能完全代替app，但是它在人們生活中也占有了重要的一席之地。本系統基于微信小程序的平臺，開發了一款微型咨訊系統，實現了讓用戶體會到更簡短輕便的咨訊，同時通過微信小程序的平臺讓用戶體驗到免安裝的快感，對于個人管理，以及管理員管理端也更加的輕便快捷，為其他類似的系統提供良好的思路。

參考文獻：

[1]張帆.微信小程序開發零基礎入門[M].北京：電子工業出版社.2017.

[2]李剛.輕量級Java EE企業應用實戰[M].北京：電子工業出版社.2017.

[3]阮一峰.ES6標準入門[M].3版.北京：電子工業出版社，2017.

[4]埃克爾.Java編程思想[M].4版.北京：機械工業出版社，2007.

[5]周力.UML建模圖解教程[M].北京：人民郵電大學出版社，2009.

[6]王延平.21天精通微信小程序開發[M].北京：電子工業出版社，2017.

[7]扎卡斯.JavaScript高級程序設計[M].北京：人民郵電出版社，2006.

[8]高洪濤.從零開始學微信小程序開發[M].北京：電子工業出版社，2017.

【通聯編輯：謝媛媛】

收稿日期：2019-10-08

基金項目：華北科技學院教研基金資助項目（項目編號：JYGH201704）

作者簡介：鞠宏軍（1973-），男，吉林遼源人，華北科技學院計算機學院教授，碩士，研究方向為計算機應用;鐘超恒（1997-），男，廣東肇慶人，華北科技學院計算機學院學生，計算機科學與技術。