账号簿（微信小程序）的开发过程

最近公司的业务比较繁忙，几乎停止了随笔的更新，反省下自己。

但还是利用两个周末开发了一个之前一直想做的小程序，idea 来自一位朋友，他想自己做一个记录账号密码的微信小程序给自己使用，他是位后端，即便学习了 Vue 的知识，但还是没开始这项工作，那就由我来完成吧。

会围绕这个小程序的开发过程写几篇系列随笔，主要是为了在以后开发小程序的过程中可以有所参考和改进。Github 代码，欢迎 star。

¶二、实现效果

¶2.1、微信扫码体验

¶2.2、小程序截图

¶2.3、云端数据截图

账号密码均为加密后的密文，无法查看明文

¶三、相关说明

¶3.1、功能点

[x] 标签管理
[x] 账号管理
[x] 安全密码
[x] 检查更新
[x] 指纹解锁
[x] 云同步及权限管理
[x] 分享、友情链接
[x] 代码开源
[x] 系列文章
[x] 账号密码自动同步
[x] 账号列表顶部模糊搜索框
[x] 随机密码生成器
[ ] 云同步记录

¶3.2、使用说明

开发者承诺不会自动上传账号密码到云端，仅在用户主动点击备份时才会**加密（AES 加密后再经过 BASE64 编码）**账号密码后上传到云端，数据库为腾讯云专门为微信小程序提供的云数据库，任何人无法查看账号密码的明文，均为加密后的密文。用户账号密码保存在手机本地数据中。
清除微信数据或微信缓存以及删除小程序都会丢失本地数据，建议进行这些操作前使用云同步功能备份账号密码。
开发『账号簿』的目的是方便个人密码的保存和查看，是为了保存个人账号密码而开发的，分享给有需要的人使用。
如遇到问题或想二次开发的，请联系开发者。邮箱：liuxy0551@qq.com
开发者尽最大可能保障数据安全，但不承担任何责任。

¶3.3、用途说明

『账号簿』用来记录个人的账号密码，数据保存在本地，清除微信数据或微信缓存以及删除小程序都会丢失本地数据。提供了云同步的功能，可以在更换手机前将数据加密（AES 加密后再经过 BASE64 编码）后备份到云端，更换手机后下载备份即可恢复。因云同步功能会使用云数据库读写次数，可以在支持开发者后联系开发者开通此功能。

如果对安全不放心，可以联系开发者进行私有化部署，让你拥有一个属于自己的账号管理小程序！

¶3.4、技术说明

基于 Taro 3.x 使用 React 语法和 Taro UI 的部分组件开发了“账号簿”微信小程序，使用到了微信小程序的云开发和云函数，免费版数据库读写次数有限。

¶3.5、代码结构

account-notebook
├─package.json
├─src
|  ├─app.config.js  公用配置项
|  ├─app.js  全局入口
|  ├─app.scss  全局样式
|  ├─index.html
|  ├─utils  工具方法
|  ├─pages
|  |   ├─tag
|  |   |  ├─list  标签列表页面
|  |   |  └─form  标签表单页面
|  |   ├─personal
|  |   |    ├─unlock  输入安全密码页面
|  |   |    ├─password  设置安全密码页面
|  |   |    ├─grid  个人页面
|  |   |    ├─cloudSync  云同步页面
|  |   |    └─about  关于页面
|  |   ├─home  首页
|  |   └─account
|  |        └─form  账号表单页面
|  ├─components
|  |     ├─TopBar  自定义状态栏组件
|  |     ├─Empty  空数据组件
|  |     └─ChangeLog  更新日志浮框
|  ├─assets
|  |   ├─style  样式文件
|  |   └─images  图片资源
├─config  配置文件
└─cloud  云开发
   └─getOpenId  云函数

¶四、开发

git clone https://github.com/liuxy0551/account-notebook.git
cd account-notebook
yarn
yarn dev:weapp

在微信开发者工具导入项目即可查看效果。

¶五、管理

¶5.1、云同步

在微信开发者工具 -> 云开发 -> 数据库 -> userList 中选择指定用户，添加字段isPay，boolean型，值为true即可为该用户开启云同步功能。

¶5.2、账号记录自动同步

在微信开发者工具 -> 云开发 -> 数据库 -> userList 中选择指定用户，确认isPay字段为true后，添加字段autoSync，boolean型，值为true即可为该用户开启账号记录自动同步功能。

知易行难