背景
本人作为一个混迹了5年的老程序员,说起来可笑,我的英语水平不咋地!这不每天都努力背单词学英语,然后总是找不到适合自己的背单词的软件,要不就直接叫我背四级单词,要不就直接叫我背六级单词,然后很难坚持下去,分析下原因,大概是因为没有做啥付出就这么简单的获得所需要背的单词,然后就很难坚持下去。这大概跟自己减肥比交钱去健身房减肥难度系数较高一样吧。
想着这样子,那不如自己开发一个背单词的小程序吧,作为一个程序员,应该是可以实现的才对,并且自己从0开始开发,付出了劳动,后面应该会坚持背单词的,说干就干!
架构
作为一个小小的背单词程序,当然用最简单的架构啊,后台一个https的应用,然后前端用微信小程序就可以了~
陋习
我这个程序员有一个很不好的习惯,就是喜欢从0开始,明明微信小程序市面上应该已经出了无数的精美的UI、框架、组件,我就喜欢从0开始,用自己蹩脚的样式脚本语言来一行行代码实现,作为一个没有学过美术欣赏以及设计审美的后台程序员来说,难以想象整体界面风格和体验交互该有多差。
小坑
下面列举一下开发这个”炼词”小程序开发过程总所遇到的一些难题!
1、对数据绑定模式的偏见
因为我的工作中比较少用到vue这些数据绑定类的,都是习惯于直接用js动态操作dom,然后js控制一切,当我需要对小程序也采取这种方式后,发现步步维艰,只能通过数据绑定,改变下大小样式都得提前定义好一个值变量,我真是服了,但是没办法,也得咬着牙做下去。
2、返回不了首页
我调用wx.navigateTo 和wx.redirectTo想着返回首页,但是一直报错,说不能返回一个tabbar页,我真是服了,后面才发现可以用wx.switchTab 跳转。
3、数据不刷新
因为背单词,所以有些已背单词的数目肯定会经常发生变化的,但是我发现我用wx.switchTab 跳转回首页后,那个已背单词数完全不刷新,这怎么搞,我知道浏览器又缓存,但是微信小程序这个缓存也太厉害了吧,后面只能无奈的把初始化的方法从onLoad挪到了onShow。
4、键盘监控完成事件
我的程序中又一个功能,叫做搜索单词,然后有一个输入框,一个搜素按钮,想着在移动端调起键盘来的时候直接点击键盘的完成就应该可以查找的,然后不管怎么试都不行,最后百度下原来要在input标签如如下属性:
bindconfirm="searchSubmit"
4、button标签样式
我发现,button这个标签我设置任何with和height仿佛没有用一样,不管怎样都不能按自己想的来,原来button这个比较奇怪,系统的默认样式优先级贼高,我自己想改的话得加上important,比如:
width:60rpx!important;
padding:10rpx!important;
才有效果~
总结
1、还是自己技术不够,对数据绑定的模式不太了解
2、应该在某些方面摒弃从0开始的这种强迫症,不要重复造轮子
3、等小程序上线后一定要好好背单词,争取最少突破到真仙境
话说,下面是小程序码,有空扫描看看,有多少BUG没有解决!