第一个 个人微信小程序 《北师教务助手》 关于它的一些总结

想法来源

去年(2017 年)的年初,在刷 36Kr 无意间关注到了小龙哥和他的团队开了场发布会,发布了一个全新产品:微信小程序。

在强烈好奇心的促使下,便马上去看了微信小程序的文档。一看发现,咦这开发模式好像当时正在学习使用的 Vue.js 啊!一番尝试后,就被项目组安排去做别的项目了。从那时起,许多小程序也开始刷屏微信群。

再次勾起我对微信小程序的兴趣的事件,是美团技术团队发布了一款基于 Vue.js 开发小程序的框架MpVue。这意味着我不需要有额外的学习成本即可开发小程序了。

此时参差不齐的课表 APP 在校内流行,但他们都有个共同特点就是:有着令人难以接受如牛皮癣般的小广告。

于是就产生了开发一个课表小程序的想法。

开发框架选择,小程序的逻辑

根据以上理由,这个小程序采用 MpVue 编写,因为逻辑简单,也不需要使用额外的状态管理。

我希望这是一个让大家可以很方便查看自己的课表的小程序。

小程序逻辑:

  • 用户首次登陆,请求后端服务器,获得该学期课程信息(参考之前的 Node.js 模拟登陆篇)。
  • 获得用户与课程信息后,小程序通过 wx.setStorage API 储存在本地缓存中。
  • 小程序启动后通过 wx.getStorage API 获取本地缓存,查看是否含有课程信息,如无,则进入登录界面。
  • 小程序在每次 onShow 生命周期会获取实时时间,判断当前时间为第几节课,控制课程卡片的显示和隐藏。
  • 主页只会展示当天正在上或还未上的课,当天已上完的课会被自动从渲染数组中清除。
  • 后端还调用了天气 API,小程序每次启动会获取天气状况。

界面设计 / 动效设计

小程序在设计上并没有花费太多时间,更多考虑的是交互性方面,秉持着微信小程序的官方产品逻辑:用完就走

登录界面

主页设计/动效

滑动背景颜色变化的动效参考了 Dribbble 上的一个 Shot(找不到地址了…)

背景色渐变实现

这是我觉得这个小程序唯一比较好玩的一个地方。

首先在最外层 Wrapper 绑定了一个 Style 属性,通过计算属性 computed 绑定,然后给 Swiper 绑定滑动事件,具体属性可参考官方文档,具体代码如下。

1
2
3
.index_wrapper {
transition: all linear 0.4s;
}
1
2
3
4
5
6
7
8
9
<!-- 伪代码 -->
<div class="index_wrapper" :style="changeBGColor">
...
</div>

...
<swiper @change="swiperChange($event)">
...
</swiper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//关键部分代码
computed: {
changeBGColor() {
return "background:" + this.wrapperBGColor;
}
}

methods :{
swiperChange(event) {
this.wrapperBGColor = this.colorGroup[event.mp.detail.current];
wx.setNavigationBarColor({
frontColor: "#ffffff",
backgroundColor: this.colorGroup[event.mp.detail.current],
animation: {
duration: 400,
timingFunc: "linear"
}
});
},
}

如你所见,在这个过程中还调用了 wx.setNavigationBarColor 这个 API 来改变导航栏背景色,设置 duration:400 以配合 transition: all linear 0.4s ,完成无缝的渐变过渡。

遇到的问题

MpVue 不支持部分复杂的 JavaScript 渲染表达式

在给 Div 绑定样式控制逻辑时,有一个地方始终无法生效,一开始以为是自己的编码有误,找了很久的原因都没找到,正准备去 GitHub 提 issue 了,翻阅文档突然看到这么一句话: 不支持部分复杂的 JavaScript 渲染表达式

破案了!

Vue 不能检测的变动数组操作

在一次课表数组处理过程中,发现更改的数据没有更新到 DOM 上,几番 Google 后,得到原因,原因如下:

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

  • 1.当利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

  • 2.当修改数组的长度时,例如:vm.items.length = newLength

啊啊啊,原来以前就遇到过这个问题!这次过后彻底记住了!!!

收获

当时完成这个小程序纯粹是为了体验尝试下 MpVue 这个框架,没想到这个小程序在同学之间传播的还蛮迅速的,没几天就满 2000 用户了,最近的日活也能保持在 1600+

真是意外之喜!也有很多小伙伴私聊我表示对小程序的喜欢!

感谢小伙伴们的支持!

要继续努力! :)