APP下载

基于微信小程序的“庠序”课程表的设计与实现

2020-05-12李辰芳刘小华高怡欣宋嘉雯

科学技术创新 2020年10期
关键词:课程表样式页面

李辰芳 刘小华 高怡欣 宋嘉雯

(西京学院 土木工程学院,陕西 西安710123)

智能终端的普及,预示着一个新的移动互联网正在崛起,微信类移动通讯软件脱颖而出,成为移动互联网行业最具代表性的产品。“庠序”课程表是基于微信小程序,便于大学生了解课程信息,服务于大学生校园生活的一款小程序。

1 系统设计

1.1 功能设计

在“庠序”课程表小程序的功能设计上,登录个人账号进行使用,主要包括四种功能,即课程表的查询,学术报告会查询,公选课查询,校园活动,在此基础上实现云储存和实时更新等。

(1)课程表查询,登录账号,查询自己的课程表,包括上课时间、上课地点、课任教师。可下载在此课程表,在此课程表上自行进行添加自己感兴趣的课程和修改自己退选的课程。可根据用户需要为上课时间做出提醒。

(2)学术报告会查询。登录账号,按学院分类,土木工程学院,会计学院等,可根据用户需要进行选择,查询学术报告会时间地址。

(3)公选课查询。登录账号,按模块分类,

(4)校园活动。分为校园院线影片放映,校园演出,校际分享会,社会公益活动,校园兼职。

1.2 业务流程设计

在系统的业务流程设计上,主要是根据课程表的查询,学术报告会查询,公选课查询,校园活动四个业务功能实现的流程设计,其中,这四种业务功能具有独立性、又具有相关性。统一于云端储存和实时更新上。

2 系统实现

在系统实现上,主要包括前端界面和后台数据处理。

2.1 前端界面

在前端界面的编写上借助微信小程序开发技术,学习处理支撑小程序运行的四种文件--“.json”后缀的JSON 配置文件,“.wxml”后缀的WXML 模板文件,“.wxss”后缀的WXSS 样式文件以及“.js”后缀的JS 脚本逻辑文件——的编写方式。

2.1.1 JSON 配置文件

JSON 并非编程语言,而是在小程序运行中扮演着静态配置角色的一种数据格式。首先学习了解编写JSON 文件的逻辑语法,以及相关注意事项。

(1)JSON 文件都是被包裹在一个大括号中 {},通过key-value 的方式来表达数据。

(2)JSON 的Key 必须包裹在一个双引号中。

(3)相关数据格式:①数字,包含浮点数和整数;②字符串,需要包裹在双引号中;③Bool 值,true 或者false;④数组,需要包裹在方括号中[];⑤对象,需要包裹在大括号中{};⑥Null。

2.1.1.1 app.json 文件。在这一项目的根目录中可以看到有一个app.json 文件,这是用来对小程序进行全局配置,并且通过编写逻辑语言来实现对页面文件路径的设置、窗口表现的设置、网络超时时间的设置、多tab 的设置。

借助《微信官方文档·小程序部分》,可以查询到如图1 所示的包含部分常用配置选项的app.json 文件样式,以此为基础研究“庠序”课程表在app.json 部分的编写。

图1 常用配置选项app.json 文件样式

其中pages 为页面路径列表,Window 为全局的默认窗口表现,tabBar 为底部tab 栏的表现,NetworkTimeout 为网络超时时间,debug 为是否开启debug 模式,图1。

2.1.1.2 page.json 页面配置文件。page.json 是用来表示pages/logs 目录下的logs.json 这类和小程序页面相关的配置。

以页面颜色为例,如果准备将“庠序”课程表小程序的整个风格设计为淡蓝色调,那么只需要app.json 里编入即可。但面对不同人群的审美需要,设计“庠序”课程表小程序风格的实际情况自然不可能为单一色调,且为了方便用户区分不同功能分区,我们还应当设计多种色彩,这里就需要用到page.json,独立定义每个页面的一些属性,包括色调与是否允许下拉刷新等。这一部分的编写格式如图2 所示。

图2 页面配置文件编写格式

其中,navigationBarBackgroundColor 为导航栏背景颜色,编撰格式为“#000000”,navigationBarTextStyle 为导航栏标题颜色,图2 所示即为黑色导航栏标题,navigationBarTitleText 为导航栏标题文字内容,backgroundColo 为窗口的背景色,编撰格式为“#000000”,backgroundTextStyle 为下拉loading 的样式,图2 所示即为“light”样式。

2.1.2 WXML 模板文件

WXML 由标签、属性等构成,相当于是网页编程采用的HTML,用来描述当前页面的结构。如图3 所示,打开pages/index/index.wxml,会呈现以下内容。

图3 WXML 模板文件页面结构

在WXML 写入对应的组件标签名字就可以把该组件显示在界面上,如图3 所示的图像覆盖,获取昵称等功能。

2.1.3 WXSS 样式文件

WXSS 相当于网页编程中的CSS,并且具备了CSS 大部分的特性,json 文件中区分app,page 的概念相同,可以写一个app.wxss 作为“庠序”课程表的全局样式——作用于“庠序”课程表的所有页面,或者选择局部页面样式page.wxss 对“庠序”课程表地某一个页面进行设置。

2.1.4 JS 脚本逻辑文件

JS 脚本是专门适用于互联网交互特性的部分,让“庠序”课程表可以与用户做交互,响应用户的点击而非单纯展示信息。

首先设置一个交互按键button 按钮,如图4 所示。

图4 交互按钮

2.2 后台数据处理

2.2.1 访问数量

通过查看最近访问数量,并进行横向对比,我们可以得出用户对“庠序”课程表的访问是有一定规律的。通过对其的分析,即可把握住“庠序”课程表的发展方向,为其良好存活与发展奠定基础。

2.2.2 推广效果

若说访问数量的时间分布说明了推广的最佳时期,那么如何推广,这是后台数据分析需要关注的另一个方面。

增长的用户是否是因为我们的推广而选择使用“庠序”课程表,这是需要关注的问题。

无论是小程序码,还是分享到群,或者在大V 的公众号中做了公关。假如用户快速增加,我们首先要做的是通过“来源分析”分析以上的推广方法,哪一种是最好的,不仅节约经济成本,同时还提高了效用率,做到最高效的推广。

2.2.3 用户粘性

这是“庠序”课程表能否长久存活的最关键数据,若是“庠序”课程表的用户粘性不强,那么用户增长再快再多那也只是镜中花。

在这一方面,主要通过以下几个方面进行分析,新增留存,访问时长以及访问页面。

2.2.3.1 新增留存。新增留存:表征了用户访问小程序以后的再次访问的概率。这个指标最能直观表现小程序对用户的吸引力,通过新增留存我们可以分析出“庠序”课程表是否真正吸引到了用户群体,是否在同行竞争中具有优势。

2.2.3.2 访问时长。代表了用户对“庠序”课程表的喜爱程度,停留时间越长,表示“庠序”课程表对用户得吸引力越大。

2.2.3.3 访问页面。访问页面数据是指小程序各个页面的访问人数,这个指标中给出的数据包含的信息量非常大,通过分析能够更加直观感受到产生用户粘性的是哪一个板块,有针对性的对板块进行更新优化,有利于保持用户粘性,并且可以以此为宣传,发展新用户。

3 结论

当前,高校课程表并未完全实现现代化、信息化,“庠序”课程表的构建有助于弥补这一空白区。该应用从实际出发,切实了解大学生及大学教师对课程表的需求,以课程查询、学术报告会查询、公选课查询、校园活动查询为四大基础模块,公益活动、校园社区、兼职信息等为待补充模块,涵盖师生对校园信息的日常需要。同时,“庠序”课程表紧扣“好的大学没有围墙”的理念,充分利用高校课程资源,搭建信息库,将信息进行有效传递,让班级之间、专业之间、学院之间、学校之间再无信息屏障。

猜你喜欢

课程表样式页面
CPMF-I 取样式多相流分离计量装置
刷新生活的页面
CPMF-I 取样式多相流分离计量装置
答案
取样式多相流分离计量装置
让Word同时拥有横向页和纵向页
中国注册会计师协会2019年注册会计师培训课程表
课程表
这是巴黎发布的新样式
黑马学院2015年下半年超级课程表