admin 管理员组文章数量: 1086019
2024年6月17日发(作者：solr使用步骤)
2019年9期
TechnologyInnovationandApplication
科技创新与应用
创新前沿
基于微信小程序的校园资讯平台的页面设计与实现
*
廖伟国
，
谢杰新
，
胡婉玲
，
卢晓惠
，
鄢利章，李晓美
（华南农业大学珠江学院，广东广州510900）
摘要：本设计结合当下移动互联网的流行以及移动手机等智能终端与校园资讯的联系越来越紧密
，
以及微信平台具有的庞大用
决定采用
B/S设计模式
，
户和微信小程序作为校园资讯平台有着较大优势
，
PHP后台语言与基于微信小程序的前端平台开发技术相结
合，利用putty和lamp搭建服务器，设计出基于微信小程序的校园资讯平台。
设计
关键词：微信小程序；校园资讯平台
；
中图分类号院TP311文献标志码院A文章编号院2095-2945渊2019冤09-0021-03
andcampusinformationmoreandmorecloselylinked,aswellasWeChatplatformhasahugenumberofusersandWeChatMini
cidedtoadoptB/Sdesignpattern,PHPbackgroundlanguage
pusInformationPlatformbasedonWeChatMiniProgram.
Keywords:WeChatMiniProgram;CampusInformationPlatform;design
andfront-endplatformdevelopmenttechnologybasedonWeChatMiniProgram,useputtyandlamptobuildserver,anddesignCam鄄
Abstract:ThisdesigncombinesthepopularityofthecurrentmobileInternetandmobilephonesandotherintelligentterminals
1概述
互联网已经成为人们快速获取信息的渠道
，
而新闻资
处在信息化高速发展的高等
讯则是信息的重要内容之一
。
学院，其信息的传递对学校的发展尤其重要。
校园资讯对
提高学校的教学质量和学生的学习质量也起到了非常重
要的作用。因此，学院十分重视校园资讯平台的发展
。
现如今
，
随着智能手机进一步普及
，
手机网民越来越
（
CNNIC）多。根据中国互联网信息中心发布的《中国互联
显示，
网络发展状况统计报告》截至2017年8月
，
中国网
民规模达到7.51亿
，
其中手机网民规模就已经达到7.24
亿，占比达到96.3%，这意味着手机上网已经成为人们上网
行为的主要部分。而且微信已成为人们手机必不可少的软
件之一
，
说明微信平台有着庞大的用户基础
。
目前关于校园资讯平台的开发，传统的网站编辑是通
过一页一页地修改
，
然后上传到服务器，对于日益多变的
大量的信息发展，显然已很难对付庞大的业务。所以利用
考虑到移动平台
动态网页和数据库相结合才是发展趋势
。
成为用户上网的主流平台
，
用户慢慢习惯了用手机APP客
户端实现各种应用。微信小程序不需要下载即免安装就能
“
触手可及
”
使用，实现了应用的梦想
，
用户扫一扫即可使
用，用完就走
，
且简单
，
轻便
，
占用内存小
。因此，
通过设计
微信小程序的校园资讯平台
，
用户可以在这个平台上了解
到自己校园的各方面包括官方，兼职，社团等信息，极大地
丰富了师生了解校园动态的途径
。
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）在逻辑层上有事件系统
，
开发者可以更加专注于
逻辑上的开发。
*基金项目院2017年度广东省级大学生创新创业训练计划项目野基于微信小程序的校园资讯发布平台冶渊编号院2冤阶段性成果
讲师，研究方向：计算机应用。
作者简介：廖伟国，男，汉族，工程硕士，华南农业大学珠江学院，
-21-
创新前沿
TechnologyInnovationandApplication
科技创新与应用
2019年9期
但同时也存在一些不足，组件和API的数量有限，很
多优秀的第三方插件不能直接使用，有待以后官方不断进
行更新
3
完善
。
3.1
软件
根据
软
功
件
设计与
能
整
需
体功
实现
求分析
能设计
，
该软件主功能为前台显示模块和
后台管理模块
。
（1）前台显示系统
，
一般用户可以登录
，
浏览不同的新
闻；又可以对平台进行意见反馈
。
（2）后台资讯管理系统
，
管理员可以对平台进行资讯
管
2。
理，文件管理，用户反馈管理等。整体的功能结构图如图
3.2
图2整体功
本平
软
台
件
分为
流程分析
能结构
前台和后台两个部分
。前台部分不需要进
行身份验证
，
任何人都可以通过微信浏览信息
。后台系统
的管理员首先输入自己的账号密码
，
输错就会重新开始
，
然后进行资讯管理，文件管理，反馈管理，输入相关操作
后，数据库将会进行逻辑处理，查看是否有满足的数据
，
最
后把数据反馈给管理员。流程如图3所示。
3.3
根据
数据
前面的
库设计
图3后台管理系统流程
功能结构设计得到的数据
，
可以设计出满
足于用户需求的各种实体
，
实体-联系图是根据用户的要
求建立的概念性的数据模型
，
用于辅助用户与管理员进行
交流
，
3.4
如图
关
4所示
。
（
3.4.1
1）从
小
键
新
程
技术实现
闻
序
列
部
表
分
正确跳转到对应的详情页面。
从新闻
列表正确跳转到详情页面，并不需要一页一页地去设置，
-22-
图4软件设计ER图
用id来表示新闻列表
，
从而让列表和详情页面正确对接
，
关键代码如下
//在
列表页面设置 url=“ id ../../../pages/cms/detail/detail?id ，跳转到对应的详情页 ={{id}}” （ hover-class= 2）加载更多 “ 新 navigator-hover 闻的实现，如图 ”> 面 5。 图5加载更多新闻 在新闻首页，默认加载5条数据，要想看更多的信息， 则需要点击加载更多这个按钮 ， 在js文件夹中，limit为新 闻加载的数量 ； Id的初始值为0， 设置 loadData 按钮 // ： 代 function 码如下 a 显示出加载 （lastid）{ var （{ 中的提 loadHidden 示 ：false } var limit }） that= = this 5 loadMore：function（event 事件*/ varid= ）{ /*点击当前 （3） ta 网络环境判断 （id） 的 ;/* 实现 调用 。 为 loaddata 了让用 加载 户不 数据 在WiFi */ 网络 的环境下 ， 避免因为流量不足而不断加载新闻 ， 设置一个 网络环境的反馈判断 ， 当网络处于WiFi环境时，没提示 。 2019年9期 TechnologyInnovationandApplication 科技创新与应用 创新前沿 但网络不处于WiFi环境时即2g、3g、4g网络状态下时，就 会提示不在WiFi网络下 ， 会消耗流量 ， 如图6所示 。 图6网络环境判断 API 实现 按钮， workType 这个效果，就 再设置数据的初 （ 要用到 值 OBJECT 官方提供的设备网络状态 data-isfirst ），在 ， wxml isfirst 页 初 面 始 设置一个 值为1；判 断是否为wifi环境和是否数据为第一次刷新的数据 ， 代码 如下 if（networkType! workType a ='wifi' （{confirmHidden &&isfirst=='1' ：false} ）{ ） success：function （{ 网络类型2g，3g varnetworkType （res = ） kType { //返回 '1'）{ if ，4g （ ， networkType wifi !='wifi'&&isfrist== } a（{confirmHidden：false}） a }） } （{isfrist 3.4.2 ta（id） ：0}） 管理员 后 管 台 理 管 新 理的 ; 闻则需 实现 要在服务器上安装weiphp，安装 好weiphp在模型管理中新建cms插件 ， 设计新闻包含字段 标题 ， 图片 ， 内容 ， 时间 ， 作者等 ， 如图7。 3.4.3服务器的 图 搭建 7后 方 台 法 新闻设计 软件开发需要考虑经济性和实用性，腾讯云服务器简 单高效，价格便宜 ， 安全可靠 ， 因此服务器选择租赁云服务 器的方式，搭建工具选用putty和lamp相结合。本服务器 的ip地址为119.29.176.117，利用putty连接服务器如图8 所示 。 图8putty远程连接 然 login 后输入相关命令安装lamp root@119.29.176.117's as：root//服 password 务器账号 ：//密码 118.196.124.65 Lastlogin： // Thu 已 Jan416：59：582018from net/lnmp/ [root@VM_0_15_centos 连接上 lnmp1.4 && ~ tar ]# zxf wget-chttp：//. 4 &&.///安装 lmnp &&cd 在 结 互 束语 联网的时代 ， 传统的宣传方式已经渐渐淡化了大 部分人的生活，手机网民的增长以及微信平台庞大的用户 量说明了利用微信小程序搭建校园资讯平台将有很大的 市场前景 。 基于微信小程序的校园资讯平台 ， 管理员可以通过后 台轻松高效地管理新闻信息 ， 对重要的信息进行发布 ， 让 师生第一时间了解校园动态 ， 有利于校园数字化建设 。 通过这次开发 ， 我们学习了很多知识 ， 基本掌握了小 程序MINA架构从而理解宰eb前端语言 ， 也掌握了后台语 言PHP以及服务器的搭建的理论 ， 同时又能把所学的理论 应用到开发实践中，提高自己的实操能力。但由于时间和 技术上的缺陷 ， 该软件还有以下不足 ： （1）小程序功能不够丰富，如没有新闻搜索功能等。 （2）页面布局还比较简单 ， 不够完善 。 参考文献 [1]刘红卫. 院 12+40. 微信小程序应用探析[J].无线互联科技 ， 2016（23）：11- [2] 范 邱晓虹.基于.NET校园新闻管理系统的设计和实现[D].华东师 [3] 大 信 [4] ， 刘 学， 2017 玉佳 2010. （01 .微信“小程序”开发的系统实现及前景分析[J].信息通 社， 刘 2014. 增杰，张 ）： 工 260-261. 厂，刘玉萍.php5.5从零开始学[M].清华大学出版 -23-
版权声明：本文标题：基于微信小程序的校园资讯平台的页面设计与实现 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1718611510a724547.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论