智慧校園建設背景下微信小程序的搭建

丹國萍 陳新世

基金項目：2020年河南省職業教育教學改革研究項目；項目名稱：中職校園移動應用現狀與建設研究；項目編號：ZJB20173。2021年河南省工業學校職業教育教學改革研究項目；項目名稱：中職智慧校園建設背景下開放平臺在我校應用實踐研究；項目編號：GXB2104。

作者簡介：丹國萍（1986— ），女，河南鄭州人，助教，碩士；研究方向：人工智能，職業教育，教育信息化。

摘要：近年來，微信小程序在各行各業廣泛應用，鑒于微信小程序“不主動打擾用戶”，又不額外占用手機空間的特點，微信小程序在教育行業也有著一定的應用需求。各學校信息化發展水平不均衡，學校教師技術力量與企業相比相對薄弱，利用開源的Wordpress作為信息發布管理后臺，微慕開源小程序作為小程序的前臺，在此基礎上完成小程序的搭建是個可行的嘗試。文章介紹了一種運用騰訊云服務器，利用寶塔面板作為Linux服務器管理平臺，使用Nginx+MySQL+PHP提供應用服務，最終通過Wordpress+微慕開源小程序實現微信小程序前后臺的搭建。

關鍵詞：智慧校園；開源平臺；微信小程序

中圖分類號：TP311.1 文獻標志碼：A

0 引言

微信小程序是一種全新的連接用戶與服務的方式，不需要下載安裝即可使用，實現了應用“觸手可及”，用戶掃一掃或者搜一下即可打開應用，也體現了“用完即走”的理念，用戶無需擔心安裝太多應用的問題［1］。對開發者而言，微信小程序開發門檻相對較低，難度不及原生應用程序，能夠滿足簡單的基礎應用需求，適合服務類以及非剛需低頻的應用。學校智慧校園建設具有與其他行業不同的特點，這為學校面向學生的信息化建設提供了一種思路，即小程序提供的服務供學生端使用，而教師則可以使用企業微信、釘釘等軟件進行移動化辦公［2］。本文以Wordpress為后臺，微慕開源小程序為前臺框架，詳細介紹智慧校園背景下學校微信小程序的搭建、應用及應注意事項等問題。

1 微信小程序應用的優劣分析

微信小程序基于微信自身開發環境與開發語言，是微信內的云端應用，而不是原生應用程序，通過WebSocket 雙向通信，實現了無須刷新的即時通信。在小程序中，圖片與UI 本地緩存降低了與服務器的交互延時，底層技術的優化增強了體驗感。在技術實現方面，微信小程序的運行環境是微信基于瀏覽器內核完全重構的一個內置解析器，針對小程序專門做了優化，配合微信自定義的開發語言標準，提升了小程序的性能。在系統權限方面，微信小程序能夠通過微信獲得更多的系統權限，比如網絡通信狀態、數據緩存能力等。微信相當于架在原有系統中的新的操作系統，小程序借助微信與系統間接交互，使其能夠擁有原生應用程序的體驗。

與公眾號、自建App相比，微信小程序的劣勢在于不能直接進行信息的推送，無法將通知消息第一時間推送給用戶，符合“召之即來”的特點。另外，在物聯網應用方面，小程序相比原生應用程序在調用硬件API方面明顯也處于劣勢。

2 微信小程序服務器環境搭建

微信小程序環境的搭建包括服務器端后臺程序和前端的小程序。中職學校在服務器選擇方面有兩種方案，一種是學校自己建設數據中心機房，有足夠的服務器資源，校內帶寬滿足流量需求，可以用學校自有服務器；另一種是采用云服務器，需要另外購買服務器資源，譬如現在主流的云服務器廠商騰訊云、阿里云、華為云等。

本文以騰訊云服務器的輕量應用服務器為例，騰訊云會通過自動化程序自動為用戶安裝Linux環境的Centos7.8版本以及Linux管理平臺“寶塔面板”，依次選擇“輕量應用服務器”“服務器”“選擇應用管理”，就可以看到進入寶塔面板的方法。通過云服務器，部署程序運行環境主要包括以下幾個步驟：

（1）通過服務器應用管理，查看應用內容軟件信息。

（2）按照面板首頁地址說明，通過瀏覽器訪問，跳轉到寶塔面板登錄界面。

（3）如初次登錄不知道用戶名和密碼，則可以通過“應用內軟件信息”中用戶名和密碼提示說明，遠程登錄服務器，再通過命令sudo /etc/init.d/bt default，修改默認的寶塔Linux面板密碼。

（4）打開寶塔面板菜單欄“軟件商店”，在應用分類處選擇“運行環境”，就可以看到Wordpress運行所需的軟件環境，如Apache，Nginx，MySQL，PHP等，Wordpress為PHP語言開發。選擇PHP環境，PHP的運行環境搭建一般有兩種搭配模式可供選擇，一種是Nginx+MySQL+PHP，另外一種是Apache+MySQL+PHP的模式。相比Apache Web應用服務器，Nginx具有輕量級、比Apache占用更少的內存及資源、支持更多的并發連接、處理靜態請求時的速度更快等優勢（本案例詳細的軟件版本為Nginx1.20.1+Mysql5.6.50+PHP7.4）。

利用寶塔面板將軟件運行環境安裝完畢之后，還須對寶塔面板進行設置。

（1）修改隱私信息。打開面板首頁的“面板設置”，可對面板的別名、默認端口、安全入口、用戶和密碼等進行修改。

（2）設置安全防火墻。打開面板首頁“安全”模塊下的防火墻規則，按照規則設置防火墻。

（3）關閉多余端口。如已設置面板訪問端口號、HTTPS端口號443以及應用程序所需的其他端口號，出于安全考慮也需將一些不需要的端口關閉。

3 微信小程序服務器程序部署

微信小程序服務器程序的部署分為兩個步驟：（1）下載后臺服務器程序；（2）部署后臺服務程序。本文案例所用的小程序后臺服務程序為開源的Wordpress平臺。Wordpress提供了豐富的插件和二次開發接口，可適用于多個行業和應用場景。為了和微慕開源小程序兼容性更好，須根據下載的微慕小程序版本選擇適配的Wordpress版本。（Wordpress下載地址如下：https：//cn.wordpress.org/，下載時注意選擇UTF-8版本）。

后臺服務程序Wordpress的部署步驟如下：

（1）在寶塔面板“網站”菜單，添加網站的站點名稱以及網站的域名。域名需要通過域名服務商購買，按照提示填寫相應內容即可。

（2）將下載好的Wordpress程序解壓后，通過寶塔面板的文件菜單，上傳至wwwroot文件夾下的網站站點文件夾中。

（3）創建數據庫，并保存數據名、賬號和密碼等信息，以便于安裝Wordpress。

（4）以上準備工作完成后，通過瀏覽器訪問網站域名或網站的IP地址，根據Wordpress安裝界面提示逐步完成安裝。

4 微信小程序域名設置

由于小程序只能與指定的域名進行網絡通信［3］，因此每個微信小程序需要事先設置通信域名。按照小程序規則獲取域名有3個步驟。

4.1 域名購買

用戶可以在騰訊云、阿里云或者新網購買域名。以在騰訊云購買域名為例，首先進入騰訊云網站首頁，選擇產品，在產品分類下找到“域名注冊”，進入域名購買頁面。域名購買之后，需要進行實名認證或者企事業單位認證，注意認證通過的域名才能正常使用，否則會出現域名不通過的情況。

4.2 域名SSL認證

域名SSL認證即將傳統的HTTP域名升級為安全加密的HTTPS域名。

（1）選擇騰訊云首頁的SSL證書，進入“我的證書”選項購買證書，也可申請免費的證書，免費證書有效期為一年，且只支持單域名，申請方式按照說明填寫即可。

（2）申請通過的SSL證書可以下載，該證書為壓縮包，解壓后得到Apache，IIS，Nginx，Tomcat幾個文件夾，根文件夾下還有3個文件，后綴分別為.csr，.key，.pem等。

（3）打開寶塔面板，找到“網站”，在已創建的站點下點擊對應站點的SSL證書進行綁定，隨后在彈出的對話框中選擇“其他證書”選項，分別將已申請的Nginx文件夾中SSL證書后綴名為 .key和 .pem的文件內容粘貼到對應的方框內，然后點擊“保存”完成網站域名的SSL綁定。

（4）進入騰訊小程序開發平臺，依次進入“開發”“開發管理”“開發設置”，依次點擊“服務器域名”“修改”，即可為小程序配置服務器域名，配置好服務器域名后，Wordpress后臺服務程序才可與小程序進行網絡通信。

4.3 小程序平臺開發工具設置

配置完小程序的域名和服務器端程序后，還需要下載小程序開發專用的開發平臺——微信開發者工具（載地址如下：https：//developers.weixin.qq.com/miniprogram/dev/devtools/stable.html）。下載完畢后進行安裝并用綁定微信開發平臺的微信名登錄，即可看到已注冊的小程序。

5 微信小程序開發及部署

5.1 微信開發者工具設置

微信開發者工具部署完畢后，需要導入開源版微慕小程序（小程序下載地址如下：https：//www.watch-life.net/wordpress-weixin-app）。將開源小程序下載到本地并解壓，通過微信開發者工具的導入功能，將程序導入開發工具，并將微信小程序的APPID添加到開發者工具中，平臺會自動加載在小程序平臺中設置的服務器配置信息，此時在開發者工具中可以實時看到小程序的效果。

5.2 微慕開源小程序開發

微慕的開源小程序開發具體修改步驟如下：

（1）全局搜索。點擊“搜索”按鈕，輸入要修改的內容，點擊“查找”，在結果頁點擊可進入對應頁面，修改后保存即可。

（2）批量替換。使用Sublime text文本工具可以批量查找替換。

（3）修改主題顏色。使用批量替換色值。

（4）修改圖片圖標。小程序所有的圖標都在images目錄下。

（5）修改頁面信息。打開對應頁面的JSON，輸入要修改的信息，如下所示：

{

“enablePullDownRefresh”：true，//是否可以下拉刷新

“navigationBarBackgroundColor”：“#333333”，//頁面導航顏色

“navigationBarTitleText”：“微信接口功能演示”，//頁面導航標題

“navigationBarTextStyle”：“white”，//導航標題文字顏色支持black/white

“backgroundColor”：“#CCCCCC”，//窗口的背景色

“backgroundTextStyle”：“dark”//下拉 loading 的樣式，僅支持 dark / light

}

5.3 小程序上線運行

小程序開發完畢，在開發工具中點擊預覽生成二維碼，即可微信掃碼體驗所有功能，確認無誤后點擊右上角的“提交”并填寫版本信息后上傳提交審核。再次進入微信小程序后臺，依次點擊“管理”“版本管理”選擇已提交的版本，填寫相應信息，點擊“提交”審核。審核通過后需要提交上線，才可以公開給用戶使用。

6 微信小程序開發部署注意事項

在微信小程序開發部署過程中，有以下幾個問題需要注意：

（1）小程序端圖片無法顯示，可按照以下步驟處理：第一，登錄Wordrpress后臺，先關閉其他插件，切換默認主題，關閉防盜鏈，關閉CDN ；第二，檢查服務器或OSS是否有防盜鏈設置，白名單添加https：//servicewechat.com 。添加圖片服務器允許referer訪問。第三，檢查主題或插件是否使用懶加載，如有使用需關閉。第四，檢查SSL證書是否配置正確。

（2）小程序時間顯示有誤，可按照以下步驟處理：第一，關閉其他插件，切換默認主題；第二，將Wordpress后臺設置的時區設置為上海時區。

（3）小程序沒有調取特色圖，可按照以下步驟處理：第一，關閉其他插件，切換默認主題；第二，于電腦端前端檢查特色圖網址是否有特殊符號。

（4）插入音樂和視頻。第一，視頻支持.MP4和騰訊視頻，音頻支持.mp3；第二，在寫文章時點擊文本模式，直接輸入視頻代碼；第三，以.MP4結尾的視頻：。

7 結語

本文以利用開源Wordpress程序搭建后臺、微慕小程序開源版搭建小程序前端為例進行實踐研究，希望通過提供一系列的詳細步驟，為中職學校在開發部署微信小程序方面提供思路，為中職學校在利用微信小程序搭建自主移動端發布平臺方面提供技術方案以供參考，也期望微信小程序能在中職學校智慧校園建設過程中發揮更好的作用。

參考文獻

［1］宋鶯，謝小玲，余文婷，等.智慧校園微信小程序云服務開發與構建［J］.長江信息通信，2022（4）：174-176.

［2］陳新世，丹國萍.中職數據中心建設趨勢研究［J］.中國有線電視，2019（7）：736-739.

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

（編輯 王雪芬）

Abstract： In recent years， WeChat mini programs have been widely used in all walks of life， in view of the characteristics of WeChat mini programs that “do not actively disturb users” and do not occupy additional mobile phone space， WeChat mini programs also have certain application needs in the education industry. The level of informatization development of each school is uneven， the technical strength of school teachers is relatively weak compared with enterprises， the use of open source Wordpress as the information release management background， Weimu open source mini programs as the front end of the mini program， on this basis to complete the construction of the mini program is a feasible attempt. This paper introduces a practical study on the use of Tencent Cloud Server， the use of Pagoda Panel as a Linux server management platform， the use of Nginx+MySQL+PHP to provide application services， and finally the realization of WeChat mini programs front-end and back-end construction through Wordpress+ Weimu open source mini programs.

Key words： smart campus; open source platform; WeChat mini programs