智慧校园建设背景下微信小程序的搭建

丹国萍 陈新世

基金项目：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