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

丹國(guó)萍 陳新世

基金項(xiàng)目：2020年河南省職業(yè)教育教學(xué)改革研究項(xiàng)目；項(xiàng)目名稱：中職校園移動(dòng)應(yīng)用現(xiàn)狀與建設(shè)研究；項(xiàng)目編號(hào)：ZJB20173。2021年河南省工業(yè)學(xué)校職業(yè)教育教學(xué)改革研究項(xiàng)目；項(xiàng)目名稱：中職智慧校園建設(shè)背景下開放平臺(tái)在我校應(yīng)用實(shí)踐研究；項(xiàng)目編號(hào)：GXB2104。

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

摘要：近年來(lái)，微信小程序在各行各業(yè)廣泛應(yīng)用，鑒于微信小程序“不主動(dòng)打擾用戶”，又不額外占用手機(jī)空間的特點(diǎn)，微信小程序在教育行業(yè)也有著一定的應(yīng)用需求。各學(xué)校信息化發(fā)展水平不均衡，學(xué)校教師技術(shù)力量與企業(yè)相比相對(duì)薄弱，利用開源的Wordpress作為信息發(fā)布管理后臺(tái)，微慕開源小程序作為小程序的前臺(tái)，在此基礎(chǔ)上完成小程序的搭建是個(gè)可行的嘗試。文章介紹了一種運(yùn)用騰訊云服務(wù)器，利用寶塔面板作為L(zhǎng)inux服務(wù)器管理平臺(tái)，使用Nginx+MySQL+PHP提供應(yīng)用服務(wù)，最終通過(guò)Wordpress+微慕開源小程序?qū)崿F(xiàn)微信小程序前后臺(tái)的搭建。

關(guān)鍵詞：智慧校園；開源平臺(tái)；微信小程序

中圖分類號(hào)：TP311.1 文獻(xiàn)標(biāo)志碼：A

0 引言

微信小程序是一種全新的連接用戶與服務(wù)的方式，不需要下載安裝即可使用，實(shí)現(xiàn)了應(yīng)用“觸手可及”，用戶掃一掃或者搜一下即可打開應(yīng)用，也體現(xiàn)了“用完即走”的理念，用戶無(wú)需擔(dān)心安裝太多應(yīng)用的問(wèn)題［1］。對(duì)開發(fā)者而言，微信小程序開發(fā)門檻相對(duì)較低，難度不及原生應(yīng)用程序，能夠滿足簡(jiǎn)單的基礎(chǔ)應(yīng)用需求，適合服務(wù)類以及非剛需低頻的應(yīng)用。學(xué)校智慧校園建設(shè)具有與其他行業(yè)不同的特點(diǎn)，這為學(xué)校面向?qū)W生的信息化建設(shè)提供了一種思路，即小程序提供的服務(wù)供學(xué)生端使用，而教師則可以使用企業(yè)微信、釘釘?shù)溶浖M(jìn)行移動(dòng)化辦公［2］。本文以Wordpress為后臺(tái)，微慕開源小程序?yàn)榍芭_(tái)框架，詳細(xì)介紹智慧校園背景下學(xué)校微信小程序的搭建、應(yīng)用及應(yīng)注意事項(xiàng)等問(wèn)題。

1 微信小程序應(yīng)用的優(yōu)劣分析

微信小程序基于微信自身開發(fā)環(huán)境與開發(fā)語(yǔ)言，是微信內(nèi)的云端應(yīng)用，而不是原生應(yīng)用程序，通過(guò)WebSocket 雙向通信，實(shí)現(xiàn)了無(wú)須刷新的即時(shí)通信。在小程序中，圖片與UI 本地緩存降低了與服務(wù)器的交互延時(shí)，底層技術(shù)的優(yōu)化增強(qiáng)了體驗(yàn)感。在技術(shù)實(shí)現(xiàn)方面，微信小程序的運(yùn)行環(huán)境是微信基于瀏覽器內(nèi)核完全重構(gòu)的一個(gè)內(nèi)置解析器，針對(duì)小程序?qū)ｉT做了優(yōu)化，配合微信自定義的開發(fā)語(yǔ)言標(biāo)準(zhǔn)，提升了小程序的性能。在系統(tǒng)權(quán)限方面，微信小程序能夠通過(guò)微信獲得更多的系統(tǒng)權(quán)限，比如網(wǎng)絡(luò)通信狀態(tài)、數(shù)據(jù)緩存能力等。微信相當(dāng)于架在原有系統(tǒng)中的新的操作系統(tǒng)，小程序借助微信與系統(tǒng)間接交互，使其能夠擁有原生應(yīng)用程序的體驗(yàn)。

與公眾號(hào)、自建App相比，微信小程序的劣勢(shì)在于不能直接進(jìn)行信息的推送，無(wú)法將通知消息第一時(shí)間推送給用戶，符合“召之即來(lái)”的特點(diǎn)。另外，在物聯(lián)網(wǎng)應(yīng)用方面，小程序相比原生應(yīng)用程序在調(diào)用硬件API方面明顯也處于劣勢(shì)。

2 微信小程序服務(wù)器環(huán)境搭建

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

本文以騰訊云服務(wù)器的輕量應(yīng)用服務(wù)器為例，騰訊云會(huì)通過(guò)自動(dòng)化程序自動(dòng)為用戶安裝Linux環(huán)境的Centos7.8版本以及Linux管理平臺(tái)“寶塔面板”，依次選擇“輕量應(yīng)用服務(wù)器”“服務(wù)器”“選擇應(yīng)用管理”，就可以看到進(jìn)入寶塔面板的方法。通過(guò)云服務(wù)器，部署程序運(yùn)行環(huán)境主要包括以下幾個(gè)步驟：

（1）通過(guò)服務(wù)器應(yīng)用管理，查看應(yīng)用內(nèi)容軟件信息。

（2）按照面板首頁(yè)地址說(shuō)明，通過(guò)瀏覽器訪問(wèn)，跳轉(zhuǎn)到寶塔面板登錄界面。

（3）如初次登錄不知道用戶名和密碼，則可以通過(guò)“應(yīng)用內(nèi)軟件信息”中用戶名和密碼提示說(shuō)明，遠(yuǎn)程登錄服務(wù)器，再通過(guò)命令sudo /etc/init.d/bt default，修改默認(rèn)的寶塔Linux面板密碼。

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

利用寶塔面板將軟件運(yùn)行環(huán)境安裝完畢之后，還須對(duì)寶塔面板進(jìn)行設(shè)置。

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

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

（3）關(guān)閉多余端口。如已設(shè)置面板訪問(wèn)端口號(hào)、HTTPS端口號(hào)443以及應(yīng)用程序所需的其他端口號(hào)，出于安全考慮也需將一些不需要的端口關(guān)閉。

3 微信小程序服務(wù)器程序部署

微信小程序服務(wù)器程序的部署分為兩個(gè)步驟：（1）下載后臺(tái)服務(wù)器程序；（2）部署后臺(tái)服務(wù)程序。本文案例所用的小程序后臺(tái)服務(wù)程序?yàn)殚_源的Wordpress平臺(tái)。Wordpress提供了豐富的插件和二次開發(fā)接口，可適用于多個(gè)行業(yè)和應(yīng)用場(chǎng)景。為了和微慕開源小程序兼容性更好，須根據(jù)下載的微慕小程序版本選擇適配的Wordpress版本。（Wordpress下載地址如下：https：//cn.wordpress.org/，下載時(shí)注意選擇UTF-8版本）。

后臺(tái)服務(wù)程序Wordpress的部署步驟如下：

（1）在寶塔面板“網(wǎng)站”菜單，添加網(wǎng)站的站點(diǎn)名稱以及網(wǎng)站的域名。域名需要通過(guò)域名服務(wù)商購(gòu)買，按照提示填寫相應(yīng)內(nèi)容即可。

（2）將下載好的Wordpress程序解壓后，通過(guò)寶塔面板的文件菜單，上傳至wwwroot文件夾下的網(wǎng)站站點(diǎn)文件夾中。

（3）創(chuàng)建數(shù)據(jù)庫(kù)，并保存數(shù)據(jù)名、賬號(hào)和密碼等信息，以便于安裝Wordpress。

（4）以上準(zhǔn)備工作完成后，通過(guò)瀏覽器訪問(wèn)網(wǎng)站域名或網(wǎng)站的IP地址，根據(jù)Wordpress安裝界面提示逐步完成安裝。

4 微信小程序域名設(shè)置

由于小程序只能與指定的域名進(jìn)行網(wǎng)絡(luò)通信［3］，因此每個(gè)微信小程序需要事先設(shè)置通信域名。按照小程序規(guī)則獲取域名有3個(gè)步驟。

4.1 域名購(gòu)買

用戶可以在騰訊云、阿里云或者新網(wǎng)購(gòu)買域名。以在騰訊云購(gòu)買域名為例，首先進(jìn)入騰訊云網(wǎng)站首頁(yè)，選擇產(chǎn)品，在產(chǎn)品分類下找到“域名注冊(cè)”，進(jìn)入域名購(gòu)買頁(yè)面。域名購(gòu)買之后，需要進(jìn)行實(shí)名認(rèn)證或者企事業(yè)單位認(rèn)證，注意認(rèn)證通過(guò)的域名才能正常使用，否則會(huì)出現(xiàn)域名不通過(guò)的情況。

4.2 域名SSL認(rèn)證

域名SSL認(rèn)證即將傳統(tǒng)的HTTP域名升級(jí)為安全加密的HTTPS域名。

（1）選擇騰訊云首頁(yè)的SSL證書，進(jìn)入“我的證書”選項(xiàng)購(gòu)買證書，也可申請(qǐng)免費(fèi)的證書，免費(fèi)證書有效期為一年，且只支持單域名，申請(qǐng)方式按照說(shuō)明填寫即可。

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

（3）打開寶塔面板，找到“網(wǎng)站”，在已創(chuàng)建的站點(diǎn)下點(diǎn)擊對(duì)應(yīng)站點(diǎn)的SSL證書進(jìn)行綁定，隨后在彈出的對(duì)話框中選擇“其他證書”選項(xiàng)，分別將已申請(qǐng)的Nginx文件夾中SSL證書后綴名為 .key和 .pem的文件內(nèi)容粘貼到對(duì)應(yīng)的方框內(nèi)，然后點(diǎn)擊“保存”完成網(wǎng)站域名的SSL綁定。

（4）進(jìn)入騰訊小程序開發(fā)平臺(tái)，依次進(jìn)入“開發(fā)”“開發(fā)管理”“開發(fā)設(shè)置”，依次點(diǎn)擊“服務(wù)器域名”“修改”，即可為小程序配置服務(wù)器域名，配置好服務(wù)器域名后，Wordpress后臺(tái)服務(wù)程序才可與小程序進(jìn)行網(wǎng)絡(luò)通信。

4.3 小程序平臺(tái)開發(fā)工具設(shè)置

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

5 微信小程序開發(fā)及部署

5.1 微信開發(fā)者工具設(shè)置

微信開發(fā)者工具部署完畢后，需要導(dǎo)入開源版微慕小程序（小程序下載地址如下：https：//www.watch-life.net/wordpress-weixin-app）。將開源小程序下載到本地并解壓，通過(guò)微信開發(fā)者工具的導(dǎo)入功能，將程序?qū)腴_發(fā)工具，并將微信小程序的APPID添加到開發(fā)者工具中，平臺(tái)會(huì)自動(dòng)加載在小程序平臺(tái)中設(shè)置的服務(wù)器配置信息，此時(shí)在開發(fā)者工具中可以實(shí)時(shí)看到小程序的效果。

5.2 微慕開源小程序開發(fā)

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

（1）全局搜索。點(diǎn)擊“搜索”按鈕，輸入要修改的內(nèi)容，點(diǎn)擊“查找”，在結(jié)果頁(yè)點(diǎn)擊可進(jìn)入對(duì)應(yīng)頁(yè)面，修改后保存即可。

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

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

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

（5）修改頁(yè)面信息。打開對(duì)應(yīng)頁(yè)面的JSON，輸入要修改的信息，如下所示：

{

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

“navigationBarBackgroundColor”：“#333333”，//頁(yè)面導(dǎo)航顏色

“navigationBarTitleText”：“微信接口功能演示”，//頁(yè)面導(dǎo)航標(biāo)題

“navigationBarTextStyle”：“white”，//導(dǎo)航標(biāo)題文字顏色支持black/white

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

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

}

5.3 小程序上線運(yùn)行

小程序開發(fā)完畢，在開發(fā)工具中點(diǎn)擊預(yù)覽生成二維碼，即可微信掃碼體驗(yàn)所有功能，確認(rèn)無(wú)誤后點(diǎn)擊右上角的“提交”并填寫版本信息后上傳提交審核。再次進(jìn)入微信小程序后臺(tái)，依次點(diǎn)擊“管理”“版本管理”選擇已提交的版本，填寫相應(yīng)信息，點(diǎn)擊“提交”審核。審核通過(guò)后需要提交上線，才可以公開給用戶使用。

6 微信小程序開發(fā)部署注意事項(xiàng)

在微信小程序開發(fā)部署過(guò)程中，有以下幾個(gè)問(wèn)題需要注意：

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

（2）小程序時(shí)間顯示有誤，可按照以下步驟處理：第一，關(guān)閉其他插件，切換默認(rèn)主題；第二，將Wordpress后臺(tái)設(shè)置的時(shí)區(qū)設(shè)置為上海時(shí)區(qū)。

（3）小程序沒(méi)有調(diào)取特色圖，可按照以下步驟處理：第一，關(guān)閉其他插件，切換默認(rèn)主題；第二，于電腦端前端檢查特色圖網(wǎng)址是否有特殊符號(hào)。

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

7 結(jié)語(yǔ)

本文以利用開源Wordpress程序搭建后臺(tái)、微慕小程序開源版搭建小程序前端為例進(jìn)行實(shí)踐研究，希望通過(guò)提供一系列的詳細(xì)步驟，為中職學(xué)校在開發(fā)部署微信小程序方面提供思路，為中職學(xué)校在利用微信小程序搭建自主移動(dòng)端發(fā)布平臺(tái)方面提供技術(shù)方案以供參考，也期望微信小程序能在中職學(xué)校智慧校園建設(shè)過(guò)程中發(fā)揮更好的作用。

參考文獻(xiàn)

［1］宋鶯，謝小玲，余文婷，等.智慧校園微信小程序云服務(wù)開發(fā)與構(gòu)建［J］.長(zhǎng)江信息通信，2022（4）：174-176.

［2］陳新世，丹國(guó)萍.中職數(shù)據(jù)中心建設(shè)趨勢(shì)研究［J］.中國(guó)有線電視，2019（7）：736-739.

［3］劉紅衛(wèi).微信小程序應(yīng)用探析［J］.無(wú)線互聯(lián)科技，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