2019年9期
创新前沿
科技创新与应用
Technology Innovation and Application
基于小程序的校园资讯平台的页面设计与实现*
廖伟国，谢杰新，胡婉玲，卢晓惠，鄢利章，李晓美
（华南农业大学珠江学院，广东广州510900）
1概述
互联网已经成为人们快速获取信息的渠道，而新闻资
讯则是信息的重要内容之一。
处在信息化高速发展的高等学院，其信息的传递对学校的发展尤其重要。校园资讯对提高学校的教学质量和学生的学习质量也起到了非常重要的作用。因此，学院十分重视校园资讯平台的发展。
现如今，随着智能手机进一步普及，手机网民越来越
多。根据中国互联网信息中心（CNNIC ）发布的《中国互联网络发展状况统计报告》显示，截至2017年8月，中国网
民规模达到7.51亿，其中手机网民规模就已经达到7.24亿，占比达到96.3%，这意味着手机上网已经成为人们上网行为的主要部分。而且已成为人们手机必不可少的软件之一，说明平台有着庞大的用户基础。
目前关于校园资讯平台的开发，传统的网站编辑是通过一页一页地修改，然后上传到服务器，对于日益多变的大量的信息发展，显然已很难对付庞大的业务。所以利用
动态网页和数据库相结合才是发展趋势。
考虑到移动平台成为用户上网的主流平台，用户慢慢习惯了用手机APP 客户端实现各种应用。小程序不需要下载即免安装就能
php新闻发布管理系统
使用，实现了应用“触手可及”的梦想，用户扫一扫即可使
用，用完就走，且简单，轻便，占用内存小。因此，通过设计小程序的校园资讯平台，用户可以在这个平台上了解到自己校园的各方面包括官方，兼职，社团等信息，极大地丰富了师生了解校园动态的途径。
2小程序MINA 框架介绍要开发一个小程序，就需要用到提供的开发框架。团队为小程序提供的框架名为MINA 应用架
构。MINA 框架通过封装客户端提供的文件系统、网络通信、数据与安全等基础功能，提供一系列的组件和API 。视图层描述语言主要用到WXML 和WXSS 。在主要页面视图层包括前端页面，开发者使用WXML 来搭建基础的页面。WXML 类似于HTML 标签语言，通过大量使用view 标签来实现层叠包围
设计。WXSS 类似CSS ，使用WXSS 文件来控制页面的展现样式，包括页面位置，图片大小，文字颜等。逻辑层是MINA 框架的核心，AppService 应用逻辑层
是MINA 的服务中心，页面渲染所需的数据、
页面交互处理逻辑都在AppService 中实现。MINA 框架中的AppSer -vice 使用JavaScript 来编写交互逻辑、网络请求、数据处理。如图1所示。
图1小程序MINA 框架
与传统的web 前端技术，使用该框架有以下优点：（1）官方提供经过封装的组件和API ，将一定程度上减少代码量，降低开发难度。
（2）在逻辑层上有事件系统，开发者可以更加专注于逻辑上的开发。
摘要：本设计结合当下移动互联网的流行以及移动手机等智能终端与校园资讯的联系越来越紧密，以及平台具有的庞大用
户和小程序作为校园资讯平台有着较大优势，决定采用B/S 设计模式，PHP 后台语言与基于小程序的前端平台开发技术相结合，利用putty 和lamp 搭建服务器，设计出基于小程序的校园资讯平台。
关键词：小程序；校园资讯平台；设计中图分类号:TP311
文献标志码:A
文章编号:2095-2945(2019)09-0021-03
Abstract :This design combines the popularity of the current mobile Internet and mobile phones and other intelligent terminals
and campus information more and more closely linked,as well as WeChat platform has a huge number of users and WeChat Mini Program as a campus information platform has great advantages.It is decided to adopt B/S design pattern,PHP background language and front-end platform development technology based on WeChat Mini Program,use putty and lamp to build server,and design Cam ⁃
pus Information Platform based on WeChat Mini Program.
Keywords :WeChat Mini Program;Campus Information Platform;design
*基金项目:2017年度广东省级大学生创新创业训练计划项目“基于小程序的校园资讯发布平台”(编号:201712623016)阶段性成果
作者简介：廖伟国，男，汉族，工程硕士，华南农业大学珠江学院，
讲师，研究方向：计算
机应用。21--
2019年9期
创新前沿
科技创新与应用
Technology Innovation and Application
但同时也存在一些不足，组件和API 的数量有限，很多优秀的第三方插件不能直接使用，有待以后官方不断进行更新完善。
3软件设计与实现3.1软件整体功能设计根据功能需求分析，该软件主功能为前台显示模块和后台管理模块。
（1）前台显示系统，一般用户可以登录，浏览不同的新闻；又可以对平台进行意见反馈。
（2）后台资讯管理系统，管理员可以对平台进行资讯管理，文件管理，用户反馈管理等。整体的功能结构图如图2。
图2整体功能结构
3.2软件流程分析
本平台分为前台和后台两个部分。前台部分不需要进行身份验证，任何人都可以通过浏览信息。后台系统的管理员首先输入自己的账号密码，输错就会重新开始，然后进行资讯管理，文件管理，反馈管理，输入相关操作后，数据库将会进行逻辑处理，查看是否有满足的数据，最后把数据反馈给管理员。流程如图3所示。
图3后台管理系统流程
3.3数据库设计
根据前面的功能结构设计得到的数据，可以设计出满足于用户需求的各种实体，实体-联系图是根据用户的要求建立的概念性的数据模型，用于辅助用户与管理员进行交流，如图4所示。
3.4关键技术实现3.
4.1小程序部分（1）从新闻列表正确跳转到对应的详情页面。从新闻列表正确跳转到详情页面，并不需要一页一页地去设置，
用id 来表示新闻列表，从而让列表和详情页面正确对接，关键代码如下
<navigator url =“../../../pages/cms/detail/detail?id ={{id}}”//在列表页面设置id ，跳转到对应的详情页面
hover-class=“navigator-hover ”>（2）加载更多新闻的实现，如图5。
图5加载更多新闻
在新闻首页，默认加载5条数据，要想看更多的信息，则需要点击加载更多这个按钮，在js 文件夹中，li
mit 为新闻加载的数量；Id 的初始值为0，
设置按钮代码如下
loadData ：function （lastid ）{
//显示出加载中的提示this.setData （{loadHidden ：false }）var limit =5var that =this }
loadMore ：function （event ）{
var id=event.currentTarget.dataset.lastid /*点击当前事件*/
this.loadData （id ）;/*调用loaddata 加载数据*/（3）网络环境判断的实现。为了让用户不在WiFi 网络的环境下，避免因为流量不足而不断加载新闻，设置一个网络环境的反馈判断，当网络处于WiFi 环境时，没提示
。
图4软件设计ER
图
22--
2019年9期
创新前沿
科技创新与应用
Technology Innovation and Application
但网络不处于WiFi 环境时即2g 、3g 、4g 网络状态下时，就会提示不在WiFi 网络下，会消耗流量，如图6所示。
图6网络环境判断
实现这个效果，就要用到官方提供的设备网络状态NetworkType （OBJECT ），在wxml 页面设置一个按钮，再设置数据的初值data-isfirst ，isfirst 初始值为1；判断是否为wifi 环境和是否数据为第一次刷新的数据，代码如下
if （networkType!='wifi'&&isfirst=='1'）{
that.setData （{confirmHidden ：false}）
success ：function （res ）{
var networkType =resworkType //返回
网络类型2g ，3g ，4g ，wifi
if （networkType !='wifi'&&isfrist ==
'1'）{
that.setData （{confirmHidden ：false }）}}}）this.setData （{isfrist ：0}）this.loadData （id ）;3.4.2后台管理的实现
管理员管理新闻则需要在服务器上安装weiphp ，安装好weiphp 在模型管理中新建cms 插件，设计新闻包含字段标题，图片，内容，时间，作者等，如图7。
图7后台新闻设计
3.4.3服务器的搭建方法
软件开发需要考虑经济性和实用性，腾讯云服务器简
单高效，价格便宜，安全可靠，因此服务器选择租赁云服务器的方式，搭建工具选用putty 和lamp 相结合。本服务器的ip 地址为119.29.176.117，利用putty 连接服务器如图8所示。
图8putty 远程连接
然后输入相关命令安装lamp login as ：root //服务器账号
root@119.29.176.117's password ：//密码Last login ：Thu Jan 416：59：582018from 118.196.124.65//已连接上
[root@VM_0_15_centos ~]#wget -c http ：//soft.vpser/lnmp/lnmp1. &&tar zxf lnmp1. &&cd lnmp1.4&&./install.sh lnmp //安装lmnp
4结束语
在互联网的时代，传统的宣传方式已经渐渐淡化了大部分人的生活，手机网民的增长以及平台庞大的用户量说明了利用小程序搭建校园资讯平台将有很大的市场前景。
基于小程序的校园资讯平台，管理员可以通过后台轻松高效地管理新闻信息，对重要的信息进行发布，让师生第一时间了解校园动态，有利于校园数字化建设。
通过这次开发，我们学习了很多知识，基本掌握了小程序MINA 架构从而理解宰eb 前端语言，也掌握了后台语言PHP 以及服务器的搭建的理论，同时又能把所学的理论应用到开发实践中，提高自己的实操能力。但由于时间和技术上的缺陷，该软件还有以下不足：
（1）小程序功能不够丰富，如没有新闻搜索功能等。（2）页面布局还比较简单，不够完善。参考文献院
[1]刘红卫.小程序应用探析[J].无线互联科技，2016（23）：11-12+40.
[2]邱晓虹.基于.NET 校园新闻管理系统的设计和实现[D].华东师
范大学，2010.[3]刘玉佳.“小程序”开发的系统实现及前景分析[J].信息通
信，2017（01）：260-261.[4]刘增杰，张工厂，刘玉萍.php5.5从零开始学[M].清华大学出版社，
2014.
23--