SangSir丨艺术界的一朵奇葩丨至一网络科技 - 文经课表
type: channel
link: https://www.sangsir.com/tag/%E6%96%87%E7%BB%8F%E8%AF%BE%E8%A1%A8/
items: 「文经课表」小程序分析总结
items: 「文经课表」当日课表界面实现方法

「文经课表」小程序分析总结
type: item
date: 2017-12-31T13:40:00+08:00
description: 前言今天是31号，明天就要迎来新的一年了呢。在最后一天里就分析总结一下初来乍到的文经课表。文经课表是我突然决定要做的一个想法，其实在这个想法萌生之前是有过许多铺垫的。比如说：《关于在项目总结中使用3W1H分析法》里面第一次出现课表查询，因为当时想在项目总结方面有一个规范，因此写出了这篇不成熟的文章，恰巧在烟大学长的博客中看到了学长开发的课表小程序，便将这个当作例子加在了文章中。后来《鸟枪换炮的课表数据处理》文章中提到自上大学以来我就想在学校的教务系统翻雨覆雨一番，最后用phpexcel处理了公开的课表数据。再加上今年决定想在设计或者前端方面有所造化，于是入门了Vue前端框架，写了《Vue-blog项目总结》，后来又看到小程序的开发文档，突然发现小程序的代码风格很像vue。刚好当时什么事情都没有，再加上手中掌握着课表数据，有着入门的前端经验，初生牛犊不怕虎，是不是天时地利人和？于是产生了文经课表。分析总结1.访问次数文经课表是在11月21日完成主体功能，在23日学生会公众号关联了小程序，便有了访问数据，也意味着文经课表真正诞生。在28号时访问量逼近7k5，这得益于学校官方公众号的关联，果然还是大佬的大腿壮实啊！不过用户留存量还是偏低，大部分用户都是访问一次后便不再访问，我认为原因有多个，一是用户不知道小程序从哪里再次进入，二是当时推广的时间不对，毕竟是学期末，课都快上完了都知道每周上什么课了，不需要再看课表，三是当时功能单一，只有查询学生和教师课表。并且很尴尬的是可以看到25/26号访问量骤降，其实不止这两天，在后面的运营中也可以看到12月的3/9/16/24号都会到一个最低点，其实并不是什么怪象，而是这几天都是周六或者周日，同学们基本上不需要上课，没有使用文经课表的需求，所以会出现这种现象。为了不让文经课表有“空窗期”，我在26号上线了空教室查询的功能，其目的就是为了让学生在周末也能够用到文经课表，毕竟上自习的同学们不在少数，所以可以看到30号周六这天的访问次数高于之前的周末访问次数，没有出现骤降的情况。2.访问页面在访问页面中我截选了排名前五的页面，令我没想到的是选择查询全部课表的用户居多，因为当时我所想的是小程序即开即用，那么当天要上什么课程，打开小程序-查询当日课表-完成，应该是这样一个流程，不过用户好像更喜欢查询全部的课表，这点到现在还是不太明白。排名老五的则是之后上线的空教室查询了，可见用户对空闲教室很热衷，不过其本质需求是找一个空教室上自习，也就是找自习教室，但查询出的空教室有时会突然借出所以导致信息不准，容易让用户产生不信任，这点是让我非常头疼的。可见文经课表还是有许多地方需要优化完善，要是教务开外网就好说了……咳咳。3.整体来源分布自小程序上线至今，公众号菜单和模板消息位居第一和第二，公众号菜单位居第一不无道理，毕竟用户对公众号菜单已经熟悉了，因此很容易通过公众号进入文经课表。模板消息则是公众号关联小程序时发出的通知，很多好奇的用户不知道这是什么，因此直接点击进去看一下，便在一开始打下了基础，位居第二。小程序历史列表、聊天顶部和系统桌面则是我加入使用帮助的功劳了，大部分用户对小程序不熟悉，不知道怎么找到，因此我在使用帮助中加入了这些操作，毕竟都是大学生，一教就会还是很让我欣慰的。用户画像1.性别及年龄分布难道说这就是大数据的魅力？通过数据可以窥探到一些秘密嘿嘿嘿。使用文经课表的女生占了55.7%，可见热爱学习的女生居多，年龄分布在18-24岁，属于大学生范围，文经课表的用户人群是正确的。40-49岁的人数也有一些，据我猜测这部分人群应该是老师，毕竟文经课表有教师课表查询功能。2.终端及机型分布有75%的用户使用安卓手机，可见安卓阵营的强大，这也是大学生的特征，如果说大部分用户是iPhone的话，那估计就不是大学生而是办公室人群了。机型方面占据大部分的是“未知”，估计是微信方面没有对这些UA进行匹配，导致无法正确显示出机型。不过在前十个机型中除了iPhone之外只有oppo和vivo，可见这两款手机品牌很受年轻人群欢迎，毕竟“柔光双摄，照亮你的美”。结语希望文经课表在新的一年有新的成绩、新的功能、新的发现，像累计访问用户数一样节节升高。

「文经课表」当日课表界面实现方法
type: item
date: 2017-12-14T21:06:00+08:00
description: 前言先简单介绍一下「文经课表」：基于微信小程序MINA框架的WXML、WXSS、JS为代码语言进行开发，视图层采用Flex弹性布局，逻辑层采用模块化模式开发。发布一周累计用户人数1000+，烟台大学文经学院、烟台大学文经学院学生会等官方微信公众号主动关联小程序，更多介绍：https://lab.sangsir.com/kb/。为什么要单独说这个界面的实现方法，其实这与课表数据是分不开的。好，装逼完成，开始说一下当日课表界面的实现方法。分析先看一下我处理的课表数据，这是一个由上到下，由左到右进行的分组。每一大节课为1个数组，数组内包含8个数组，里面包含星期一到星期日的两小节的课程内容。嗯，有点绕，总之这样写有利于for循环出当日课表。因此这样一个for循环出来之后的数据是无法使用css选择器直接控制格式，可以看一下直出后的效果。所有内容都挤在了一行之中，那该怎么办？这样也未免太不注重用户体验了吧？每循环一次加一个 总可以了吧？不不不，前言中说了，微信小程序中的代码语言为WXML、WXSS、JS，意味着这并不是一个HTML页面， 标签并不存在。解决既然如此，先看一下输出规律。每一大节课包含8个数组，数组内包含两小节的课程内容，第一行的课程内容为课题，那么就简单了！可以每隔4个数组将显示出的标题加一个bold属性进行突出显示。 {{i[index][k]}}\n {{i[index][k]}}\n 因为有了{{index % 4 == 0}}的每隔四行加上bold属性与 中的\n换行符，便能将课题和其他内容区分开来，实现标题突出显示的功能，看下图效果。优化emmm...不错，但总感觉看起来找不到关键信息？或者关键信息有些少？我们看当日课表要看的是什么来着？第几节课+上什么课+上课地点，对吧！第几节课用符合小程序开发的主题色高亮显示了，上什么课也用加粗标注出来了，那么地点在标题下面看起来感觉好累啊！因为人眼已经将目光直接投射在了你所要关注的点上面了，这些关键点都已经用不同的方式凸显出来方便一眼看到，然而上课地点并没有安排在合适的地方一眼看到，毕竟这也是所要看到的关键信息之一，因此需要把它也凸显一下，我们把它放到右边如何？用开发者工具将这一段加上float: right，嗯，不错，这样效果就好多了，突出但不喧宾夺主，符合用户体验。那么……该怎么实现？聪明的你一定会想到刚刚提到的每隔N行加一个css属性，不过多个if可不是好现象，小程序设计指南中可是指出小程序要“减少等待，反馈及时”，既然我们的大标题已经有了bold属性，大标题的下一行就是上课地点，那能不能在css中动一下手脚？在翻css手册时我便看到了一个实现方法：CSS 相邻兄弟选择器怎么说？是不是很有趣？只能说我需要把前端方面的手册发送到kindle啃上几遍。ok，有了这个相邻兄弟选择器那就简单多了，完成之后的效果图则是前言中的附图了。总结一入前端深似海，此时不啃基础何时啃，文章干货不多，更多的是思路，希望以后多挖几个坑提升一下自己的技术。