我发现我得病了,拖延症。
就拿写推送这件事情来说吧,每当有一个点子,我都会拿起我的坚果Pro,用闪念胶囊把它记录下来,并且备注上预期的完成时间。结果呢,我会拿“工作太累回去以后什么也不想干”为借口,顺利的说服自己下次有时间再写。
所以,我决定做一个小程序(微信现在的下拉入口可以打开常用的小程序,真的太方便了),在我用别的小程序吃喝玩乐的时候,能提醒到我还有事情没有做完。
需求建立
在开始之前,我搜索了目前已发布的「待办事项」类小程序,有很多,其中不少是个人开发者所提供的。我依次体验了这些小程序,在体验上多多少少都有些不满足我的地方,还有一些功能很完善了,但是UI比较乱,不够简洁。
所以,在考量了这些“竞品”以后,我的目标也比较清晰了:
- 界面足够简洁
- 操作简单,Don't make users think
大致就是这样。
开发阶段
关于开发阶段,我不会从“下载微信开发者工具”开始,因为实在是太琐碎了,如果有需要的话可以去直接阅读《小程序开发者文档》,官方出品,必属精品。
这里只简单回顾一下开发过程中的一些比较常见的问题和细节。
用户信息
在小程序中,需要获取到用户的头像和昵称用来展示。在开发时,首次调用wx.getUserInfo会弹窗提示用户将自己的基本信息授权给当前小程序。
这里需要注意的是,用户有可能在第一次授权时,选择了“取消”,会导致小程序在使用过程中无法获取到用户的信息,所以在这种情况下,开发者需要做一下兼容处理,引导用户二次授权。
调用wx.getSetting接口检查用户是否授权,如果没有的话需要调用wx.openSetting打开小程序设置页,引导用户点击授权按钮。
前两天的官方发布公告,称为了优化用户体验,使用wx.getUserInfo接口直接弹出授权框的开发方式将逐步不再支持,开发者可以使用 button 组件配合 open-type 属性的方法和使用 open-data 的方法获取或展示用户信息,具体可参见官方文档。
数据存储
本人秉承保护用户隐私的原则,不会讲用户的数据保存在服务器上,采用本地存储的方案(快闭嘴吧,还不是因为买不起服务器)。
小程序提供了非常便捷的本地数据存储接口,并设有同步和异步两类,可以满足大多数需要本地化存储数据的开发场景。
其中,setStorage/getStorage/removeStorage/clearStorage是异步的操作,开发者可以根据需要设置回调函数。而setStorageSync/getStorageSync/removeStorageSync/clearStorageSync是同步操作。
这两组 API 与传统前端开发中的 localStorage 大同小异,只不过在小程序中提供了异步的方式。
值的一提的是,小程序还额外提供了getStorageInfo/getStorageInfoSync接口,可以获取到当前storage的相关信息:所有key值,占用的空间大小以及限制的空间大小,方便开发人员对小程序的本地存储进行空间上的控制。
数据传递
在开发过程中,需要实现一个简单的交互:在列表中点击某一项,进入对应这一项的详情页。
此时要做的就是一次数据的传递:
用户点击某一组件,触发事件,通过dataset将该组件上的数据传递到逻辑层,利用currentTarget获取到该组件上的数据,通过页面路径传参,在下个页面的onload函数中的options可直接获取到页面路径上的数据。
WXS
小程序中的 wxs 一套脚本语言,用于和 wxml 结合一起构建用户界面,说白了,它实现的功能,恰恰是 Vue 中计算属性的功能。
例如这个小程序中,在上方 banner 的位置,会对当前用户发出一个灵魂质问:今天事情做完了吗?问题的答案是由用户的待办事项列表中是否还有未完成的项目决定的。所以至此,运用 wxs 就能轻松的实现这一功能。
最后
遗憾的是,在我完成这个小程序的开发工作以后,官方已经不让个人开发者发布此类目的小程序了,所以目前只能作为demo来体验。如果你想体验的话,在后台发给我你的微信号,我会把你设置为体验者,这样就可以使用这个小程序了。
现在回过头看这个demo,依然存在一些可以继续做下去的优化,但是由于资源,方案(还没想明白或者可能还没来得及想)以及时间多方面原因,还没有做,比如:
待办事项时间因素(设置的时间 / 预计完成时间)
未完成项目提醒功能(因为穷,买不起服务器)
语音备忘功能(致敬闪念胶囊)
图片上传???
如果,我是说如果啊,这些东西都有了,这玩意可能就是最好用的待办事项小程序了哈哈哈(吹个牛逼,溜了溜了)
当然,如果你觉得文字和代码太过于生涩,戳这个链接腾讯工程师教你9小时搞定微信小程序开发 | 视频课程上新,只能帮你到这里了~
领取专属 10元无门槛券
私享最新 技术干货