空闲时间,用taro给自己撸了一个小程序



  • 项目背景

    笔者是个非常健忘的人,经常会忘记一些重要的事情,比如银行卡密码什么的,O(∩_∩)O哈哈~为此经常遭到老婆大人的嘲笑。偶尔有一天突然萌生了一个想法,为啥不做一个保存密码的小程序呢。“我的云密码”就此诞生。老婆再也不能嘲笑我密码记不住了😀

    这里我要毫无节操地插播一下广告哈。

    扫码_搜索联合传播样式-标准色版.jpg

    说做就做,从开始构思到发版上线一共花了一个月左右(晚上),因为白天要正常上班,呵呵。上线那天还是有点小激动的。从头到尾一个人完成,同时兼任了产品、设计、开发、测试、运维、推广软文等一系列的工作。哈哈。。。。着实过了一把全栈的瘾。。

    下面是一些记录,请看图:

    出自一位非专业产品的手,原型图-v1版,哈哈~~太丑了,

    微信图片_20200605214015.jpg

    微信图片_20200605214042.jpg

    v1版原型总结一句话就是:思路有点乱+想的有点多~。深思熟虑后,决定对原型进行大刀阔斧的改动,于是v2改良版,Duang的一声诞生啦~~

    微信图片_20200605214107.jpg

    微信图片_20200605214114.jpg

    最后,感觉还没有v1好,好吧,就这样吧,这实在不是我的强项,但好呆对产品有了一个初略的感觉,这种感觉就像隔着一层纱,看不清摸不着。

    好了原型图有了,赶紧去找设计师出图吧。。喂,醒醒,醒醒,设计狮不就是你自己吗。好吧,对PS一窍不通的我,这个时候想起了一句话,内事不决找百度,外事不决找阿里。嘿嘿,最后我用了阿里图标fonticon,收集了一些好用图标,就完事了,是挺草率的,O(∩_∩)O哈哈~

    025975cf-aa8d-42ef-bd54-d236a5235a6e-image.png

    至此,设计的事算搞完了。哦,差点忘了(瞧我这记性),还差了一个Icon,本来想搞个美国队长的盾牌的,但想想现在美国对我们不太友好,还是算了,最后选了个盾牌的标记,黄色代表轻松+愉快(其实是因为笔者喜欢黄色)

    安全.png

    产品和设计的事都搞定了,那就开始正儿八经的开发吧。本着对产品负责任的态度(实际是对之前自己画的原型图极度不自信),开发过程中又对产品进行了大刀阔斧的优化,该砍的砍,该调整的调整,总算是将业务的流程搞顺了,一些流程进行了简化处理,加强了安全性的方面的考虑。

    抱着能偷懒就偷懒的精神,后台功能与接口开发直接在github上找了一个开源的框架,在此基础上开发,省去了大量时间,因为这部分工作没有灵魂,O(∩_∩)O哈哈~,无非就是一些增删改查罢了。。

    虽说没有灵魂,但还是要感谢一下开源博主,确实帮了大忙。若依,开源地址:https://gitee.com/y_project/RuoYi, 框架非常简单好用,再次感谢若依大神。

    前面写了这么多内容,接下来才是真正的主菜,Taro前端代码开发。

    使用的技术taro + mobx + cryptojs

    代码结构如图:

    f350c6ba-c16d-4ed4-b2f9-f11370493fd8-image.png

    自定义组件:

    54fa2607-6cd2-4474-83ba-fb449ac1ed08-image.png

    页面结构:

    e98fe6e6-a16f-4b82-8457-8d4a6a8a036e-image.png

    以下是功能图,相比原型,功能做了大胆的简化,更符合用户使用习惯。

    1、首页。我保存的密码,置顶、删除。

    微信图片_20200605225223.jpg

    微信图片_20200605224752.jpg

    2、创建密码。常用APP选择、通用图标选择

    微信图片_20200605224927.jpg 微信图片_20200605224922.jpg 微信图片_20200605224901.jpg 微信图片_20200605224857.jpg 微信图片_20200605224852.jpg 微信图片_20200605224846.jpg 微信图片_20200605224841.jpg 微信图片_20200605224837.jpg 微信图片_20200605224826.jpg 微信图片_20200605224821.jpg 微信图片_20200605224812.jpg

    3、其他功能

    微信图片_20200605224938.jpg 微信图片_20200605224933.jpg

    经过反反复复修改打磨,最终效果,貌似还不错,应该比原型图强一点哈。。其实后面还有一些服务器部署、发布上线的事这里就一笔略过。。

    最最后面再强调一点,我的云密码小程序系统设计是安全可靠地,这点就跟笔者是一样的,O(∩_∩)O哈哈~,因为采用的是前端加解密技术,不存在数据泄露的事情,至于原理我就不班门弄斧,相信咱作为程序员都懂得,哈哈。并没有什么高深的技术。

    最后照例还是搞个技术交流群把,大家一起交流交流,如果您有什么好的意见和建议,请务必提出。

    宇宙警备队群二维码.png



  • @ab_xy163 强大呀,可否转载到「Taro 社区」 公众号?



  • 可以啊,欢迎转载~~



  • 灵魂画手,这原型,爱了



  • @jd_40246345c79d1 感觉产品总监已经拖着40米大砍刀缓缓而来~~


登录后回复