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

可以啊，欢迎转载~~

项目背景

笔者是个非常健忘的人，经常会忘记一些重要的事情，比如银行卡密码什么的，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哈哈~，因为采用的是前端加解密技术，不存在数据泄露的事情，至于原理我就不班门弄斧，相信咱作为程序员都懂得，哈哈。并没有什么高深的技术。

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

@couxiaozi1983 RichText

@lsc993 加载多少数据是后端自己控制的，而不是前端控制的。

@jd_444cdac22e074 taro转换后的weapp代码（其他代码也一样）基本不具有可读性，与人类的思维不一样。除非你是js大神级别的高手，否则难度很大。

@1222445 css3

不知道从哪个版本起，taro init 后从github拉取下来的项目package.json变成了pkg文件，需要手动把文件名改成package.json，在手动install下就OK了。

Taro有支持微信直播live-pusher与live-player的计划吗？

急！！官方示例中有引入@tarojs/mobx-common这个包，请问这个包的作用是什么？是必须要引入吗？