基于微信小程序的“庠序”課程表的設計與實現(xiàn)

李辰芳 劉小華 高怡欣 宋嘉雯

（西京學院 土木工程學院，陜西 西安710123）

智能終端的普及，預示著一個新的移動互聯(lián)網(wǎng)正在崛起，微信類移動通訊軟件脫穎而出，成為移動互聯(lián)網(wǎng)行業(yè)最具代表性的產(chǎn)品?！扳孕颉闭n程表是基于微信小程序，便于大學生了解課程信息，服務于大學生校園生活的一款小程序。

1 系統(tǒng)設計

1.1 功能設計

在“庠序”課程表小程序的功能設計上，登錄個人賬號進行使用，主要包括四種功能，即課程表的查詢，學術報告會查詢，公選課查詢，校園活動，在此基礎上實現(xiàn)云儲存和實時更新等。

（1）課程表查詢，登錄賬號，查詢自己的課程表，包括上課時間、上課地點、課任教師?？上螺d在此課程表，在此課程表上自行進行添加自己感興趣的課程和修改自己退選的課程?？筛鶕?jù)用戶需要為上課時間做出提醒。

（2）學術報告會查詢。登錄賬號，按學院分類，土木工程學院，會計學院等，可根據(jù)用戶需要進行選擇，查詢學術報告會時間地址。

（3）公選課查詢。登錄賬號，按模塊分類，

（4）校園活動。分為校園院線影片放映，校園演出，校際分享會，社會公益活動，校園兼職。

1.2 業(yè)務流程設計

在系統(tǒng)的業(yè)務流程設計上，主要是根據(jù)課程表的查詢，學術報告會查詢，公選課查詢，校園活動四個業(yè)務功能實現(xiàn)的流程設計，其中，這四種業(yè)務功能具有獨立性、又具有相關性。統(tǒng)一于云端儲存和實時更新上。

2 系統(tǒng)實現(xiàn)

在系統(tǒng)實現(xiàn)上，主要包括前端界面和后臺數(shù)據(jù)處理。

2.1 前端界面

在前端界面的編寫上借助微信小程序開發(fā)技術，學習處理支撐小程序運行的四種文件--“.json”后綴的JSON 配置文件，“.wxml”后綴的WXML 模板文件，“.wxss”后綴的WXSS 樣式文件以及“.js”后綴的JS 腳本邏輯文件——的編寫方式。

2.1.1 JSON 配置文件

JSON 并非編程語言，而是在小程序運行中扮演著靜態(tài)配置角色的一種數(shù)據(jù)格式。首先學習了解編寫JSON 文件的邏輯語法，以及相關注意事項。

（1）JSON 文件都是被包裹在一個大括號中 {}，通過key-value 的方式來表達數(shù)據(jù)。

（2）JSON 的Key 必須包裹在一個雙引號中。

（3）相關數(shù)據(jù)格式：①數(shù)字，包含浮點數(shù)和整數(shù)；②字符串，需要包裹在雙引號中；③Bool 值，true 或者false；④數(shù)組，需要包裹在方括號中[]；⑤對象，需要包裹在大括號中{}；⑥Null。

2.1.1.1 app.json 文件。在這一項目的根目錄中可以看到有一個app.json 文件，這是用來對小程序進行全局配置，并且通過編寫邏輯語言來實現(xiàn)對頁面文件路徑的設置、窗口表現(xiàn)的設置、網(wǎng)絡超時時間的設置、多tab 的設置。

借助《微信官方文檔·小程序部分》，可以查詢到如圖1 所示的包含部分常用配置選項的app.json 文件樣式，以此為基礎研究“庠序”課程表在app.json 部分的編寫。

圖1 常用配置選項app.json 文件樣式

其中pages 為頁面路徑列表，Window 為全局的默認窗口表現(xiàn)，tabBar 為底部tab 欄的表現(xiàn)，NetworkTimeout 為網(wǎng)絡超時時間，debug 為是否開啟debug 模式，圖1。

2.1.1.2 page.json 頁面配置文件。page.json 是用來表示pages/logs 目錄下的logs.json 這類和小程序頁面相關的配置。

以頁面顏色為例，如果準備將“庠序”課程表小程序的整個風格設計為淡藍色調，那么只需要app.json 里編入即可。但面對不同人群的審美需要，設計“庠序”課程表小程序風格的實際情況自然不可能為單一色調，且為了方便用戶區(qū)分不同功能分區(qū)，我們還應當設計多種色彩，這里就需要用到page.json，獨立定義每個頁面的一些屬性，包括色調與是否允許下拉刷新等。這一部分的編寫格式如圖2 所示。

圖2 頁面配置文件編寫格式

其中，navigationBarBackgroundColor 為導航欄背景顏色，編撰格式為“#000000”，navigationBarTextStyle 為導航欄標題顏色，圖2 所示即為黑色導航欄標題，navigationBarTitleText 為導航欄標題文字內容，backgroundColo 為窗口的背景色，編撰格式為“#000000”，backgroundTextStyle 為下拉loading 的樣式，圖2 所示即為“l(fā)ight”樣式。

2.1.2 WXML 模板文件

WXML 由標簽、屬性等構成，相當于是網(wǎng)頁編程采用的HTML，用來描述當前頁面的結構。如圖3 所示，打開pages/index/index.wxml，會呈現(xiàn)以下內容。

圖3 WXML 模板文件頁面結構

在WXML 寫入對應的組件標簽名字就可以把該組件顯示在界面上，如圖3 所示的圖像覆蓋，獲取昵稱等功能。

2.1.3 WXSS 樣式文件

WXSS 相當于網(wǎng)頁編程中的CSS，并且具備了CSS 大部分的特性，json 文件中區(qū)分app，page 的概念相同，可以寫一個app.wxss 作為“庠序”課程表的全局樣式——作用于“庠序”課程表的所有頁面，或者選擇局部頁面樣式page.wxss 對“庠序”課程表地某一個頁面進行設置。

2.1.4 JS 腳本邏輯文件

JS 腳本是專門適用于互聯(lián)網(wǎng)交互特性的部分，讓“庠序”課程表可以與用戶做交互，響應用戶的點擊而非單純展示信息。

首先設置一個交互按鍵button 按鈕，如圖4 所示。

圖4 交互按鈕

2.2 后臺數(shù)據(jù)處理

2.2.1 訪問數(shù)量

通過查看最近訪問數(shù)量，并進行橫向對比，我們可以得出用戶對“庠序”課程表的訪問是有一定規(guī)律的。通過對其的分析，即可把握住“庠序”課程表的發(fā)展方向，為其良好存活與發(fā)展奠定基礎。

2.2.2 推廣效果

若說訪問數(shù)量的時間分布說明了推廣的最佳時期，那么如何推廣，這是后臺數(shù)據(jù)分析需要關注的另一個方面。

增長的用戶是否是因為我們的推廣而選擇使用“庠序”課程表，這是需要關注的問題。

無論是小程序碼，還是分享到群，或者在大V 的公眾號中做了公關。假如用戶快速增加，我們首先要做的是通過“來源分析”分析以上的推廣方法，哪一種是最好的，不僅節(jié)約經(jīng)濟成本，同時還提高了效用率，做到最高效的推廣。

2.2.3 用戶粘性

這是“庠序”課程表能否長久存活的最關鍵數(shù)據(jù)，若是“庠序”課程表的用戶粘性不強，那么用戶增長再快再多那也只是鏡中花。

在這一方面，主要通過以下幾個方面進行分析，新增留存，訪問時長以及訪問頁面。

2.2.3.1 新增留存。新增留存：表征了用戶訪問小程序以后的再次訪問的概率。這個指標最能直觀表現(xiàn)小程序對用戶的吸引力，通過新增留存我們可以分析出“庠序”課程表是否真正吸引到了用戶群體，是否在同行競爭中具有優(yōu)勢。

2.2.3.2 訪問時長。代表了用戶對“庠序”課程表的喜愛程度，停留時間越長，表示“庠序”課程表對用戶得吸引力越大。

2.2.3.3 訪問頁面。訪問頁面數(shù)據(jù)是指小程序各個頁面的訪問人數(shù)，這個指標中給出的數(shù)據(jù)包含的信息量非常大，通過分析能夠更加直觀感受到產(chǎn)生用戶粘性的是哪一個板塊，有針對性的對板塊進行更新優(yōu)化，有利于保持用戶粘性，并且可以以此為宣傳，發(fā)展新用戶。

3 結論

當前，高校課程表并未完全實現(xiàn)現(xiàn)代化、信息化，“庠序”課程表的構建有助于彌補這一空白區(qū)。該應用從實際出發(fā)，切實了解大學生及大學教師對課程表的需求，以課程查詢、學術報告會查詢、公選課查詢、校園活動查詢?yōu)樗拇蠡A模塊，公益活動、校園社區(qū)、兼職信息等為待補充模塊，涵蓋師生對校園信息的日常需要。同時，“庠序”課程表緊扣“好的大學沒有圍墻”的理念，充分利用高校課程資源，搭建信息庫，將信息進行有效傳遞，讓班級之間、專業(yè)之間、學院之間、學校之間再無信息屏障。