城院新闻微信小程序的设计与制作

潘婷婷，王 浩，华锦君

(无锡城市职业技术学院，江苏 无锡 214000)

0 引言

随着小程序的普及，很多学校也开始开发属于自己的校园小程序，原因很简单，不管是什么类型的学校，都需要做好学校形象的宣传，只有学校的形象得到人们的肯定，才可以招纳更多的优秀教师，同时招收更多的学生，从而更好地进行学校各方面建设，给学校师生带来更好的学习环境。因此，校园小程序制作是必不可少的，它是宣传学校形象的必备工具。通过校园以及教学片的介绍，可以很清楚地让家长了解学校的实际情况，安心地把孩子交给学校。小程序作为目前比较流行的一种宣传方式，可以更好地表达出宣传的内容，因此，开发一款校园新闻微信小程序，有利于学校的推广与宣传，能够吸引学生的眼球，使学生热爱校园，同时让更多人都能够体验到学院的特色，也让学生更以学院为荣。

1 开发环境

本系统主要采用了牛刀云平台进行制作，牛刀云是低代码开发云，高效全栈开发、跨端App开发，自由发布，灵活部署，它提供开发、测试、部署、运维的一体化支持，真正低代码、高效率的DevOps开发运维一体化平台，具备独创的全可视化设计，应用的基本架构、后端服务、前端页面、组件体系等，全部实现可视化和代码的自由切换，实现前所未有的低代码开发效率[1]。牛刀云提供了丰富组件和详细的属性选项，拖拽组件和设置选项就能完成大部分制作，较复杂的逻辑可以用画代码实现，同时也提供代码模式。

2 功能设计

“城院新闻”微信小程序主要包括了两个功能模块，分别是新闻、视频。功能结构如图1所示。

图1 功能结构

2.1 新闻版块

在新闻版块可以查看学校的最新动态、相关的就业信息、各学院的教学信息、学校师生的名人风采(见图2)。

图2 新闻页面展示

2.2 视频版块

视频版块包括了学校的文娱、体育、美食等信息，由于小视频的普及，学生都很喜欢通过这样的方式更好地了解学院的动态。

3 详细设计

3.1 设计思路

小程序采用了仿网易新闻的样式，利用牛刀云平台搭建，主要的对象是全校的师生，让师生能够及时了解学校动态。打开小程序后，直接就可以查看相关新闻信息。主界面的布局采用了上中下结构，最上方是5个子版块功能的导航，中间内容的设置采用了3种不同的布局方式，提升用户的视觉效果，最下面是2个主功能模块的导航按钮。

3.2 新闻主界面

新建空白主页面，切换到数据制作区，添加“新闻分类”动态数据集，数据分类为“头条”“动态”“就业”“教学”“风采”这5类[2]。页面中使用动态列表绑定数据选项，展现主页面最上端的5个导航按钮。中间使用“幻灯片”组件添加“轮播图”，并通过“幻灯片”数据集，添加轮播图片。通过轮播图片，提升视觉效果。新闻展示部分，主要以新闻媒体方式展现，通过点击可以进入到相应新闻的详情部分。

3.3 新闻详情页面设计

添加新的空白页面，在面板中添加标签、富文本等组件绑定动态数据集“新闻”中的相关数据，在数据集中完成新闻信息的具体内容的编写[3]。在新闻主页面中添加跳转事件，完成从新闻页面跳转到详情页面的链接。具体的显示效果如图3所示。

图3 新闻详情页面

3.4 视频页面

视频页面及视频详情页面的制作与新闻页面类似，这里就不再重复，具体显示效果如图4所示。

图4 视频页面和视频详情页面

4 结语

校园微信小程序制作是以学校的整体形象为主线来策划的，主要通过版面设计和图片插入，将学校的全貌，领导组成班子、师资力量、学校教学质量以及教学硬件设施等全面地展现出来。它可以通过多种形式进行学校形象宣传：一是生动有效；二是信息量大；三是媒体发布，可以作为信息根据需要随意做成一个小程序在微信公众号上发布，在学校招生、宣传上更是发挥着独一无二的推广作用。