空闲时间,用taro给自己撸了一个小程序
-
项目背景
笔者是个非常健忘的人,经常会忘记一些重要的事情,比如银行卡密码什么的,O(∩_∩)O哈哈~为此经常遭到老婆大人的嘲笑。偶尔有一天突然萌生了一个想法,为啥不做一个保存密码的小程序呢。“我的云密码”就此诞生。老婆再也不能嘲笑我密码记不住了
这里我要毫无节操地插播一下广告哈。
说做就做,从开始构思到发版上线一共花了一个月左右(晚上),因为白天要正常上班,呵呵。上线那天还是有点小激动的。从头到尾一个人完成,同时兼任了产品、设计、开发、测试、运维、推广软文等一系列的工作。哈哈。。。。着实过了一把全栈的瘾。。
下面是一些记录,请看图:
出自一位非专业产品的手,原型图-v1版,哈哈~~太丑了,
v1版原型总结一句话就是:思路有点乱+想的有点多~。深思熟虑后,决定对原型进行大刀阔斧的改动,于是v2改良版,Duang的一声诞生啦~~
最后,感觉还没有v1好,好吧,就这样吧,这实在不是我的强项,但好呆对产品有了一个初略的感觉,这种感觉就像隔着一层纱,看不清摸不着。
好了原型图有了,赶紧去找设计师出图吧。。喂,醒醒,醒醒,设计狮不就是你自己吗。好吧,对PS一窍不通的我,这个时候想起了一句话,内事不决找百度,外事不决找阿里。嘿嘿,最后我用了阿里图标fonticon,收集了一些好用图标,就完事了,是挺草率的,O(∩_∩)O哈哈~
至此,设计的事算搞完了。哦,差点忘了(瞧我这记性),还差了一个Icon,本来想搞个美国队长的盾牌的,但想想现在美国对我们不太友好,还是算了,最后选了个盾牌的标记,黄色代表轻松+愉快(其实是因为笔者喜欢黄色)
产品和设计的事都搞定了,那就开始正儿八经的开发吧。本着对产品负责任的态度(实际是对之前自己画的原型图极度不自信),开发过程中又对产品进行了大刀阔斧的优化,该砍的砍,该调整的调整,总算是将业务的流程搞顺了,一些流程进行了简化处理,加强了安全性的方面的考虑。
抱着能偷懒就偷懒的精神,后台功能与接口开发直接在github上找了一个开源的框架,在此基础上开发,省去了大量时间,因为这部分工作没有灵魂,O(∩_∩)O哈哈~,无非就是一些增删改查罢了。。
虽说没有灵魂,但还是要感谢一下开源博主,确实帮了大忙。若依,开源地址:https://gitee.com/y_project/RuoYi, 框架非常简单好用,再次感谢若依大神。
前面写了这么多内容,接下来才是真正的主菜,Taro前端代码开发。
使用的技术taro + mobx + cryptojs
代码结构如图:
自定义组件:
页面结构:
以下是功能图,相比原型,功能做了大胆的简化,更符合用户使用习惯。
1、首页。我保存的密码,置顶、删除。
2、创建密码。常用APP选择、通用图标选择
3、其他功能
经过反反复复修改打磨,最终效果,貌似还不错,应该比原型图强一点哈。。其实后面还有一些服务器部署、发布上线的事这里就一笔略过。。
最最后面再强调一点,我的云密码小程序系统设计是安全可靠地,这点就跟笔者是一样的,O(∩_∩)O哈哈~,因为采用的是前端加解密技术,不存在数据泄露的事情,至于原理我就不班门弄斧,相信咱作为程序员都懂得,哈哈。并没有什么高深的技术。
最后照例还是搞个技术交流群把,大家一起交流交流,如果您有什么好的意见和建议,请务必提出。
-
@ab_xy163 强大呀,可否转载到「Taro 社区」 公众号?
-
可以啊,欢迎转载~~
-
灵魂画手,这原型,爱了
-
@jd_40246345c79d1 感觉产品总监已经拖着40米大砍刀缓缓而来~~