https://beta.w2solo.com/ccsulzf en-us <h2 id="斑马账本 - 微信记账小程序">斑马账本 - 微信记账小程序</h2> <p>大家好，今天我来介绍我的个人作品 - 斑马账本</p> <h2 id="为什么要做这么一个小程序？">为什么要做这么一个小程序？</h2> <p>我看了很多记账软件，但是都没找到<strong>商店</strong>和<strong>位置</strong>这两个维度。首先来说<strong>商店</strong>，我记账之所以想要这个维度，是想统计一下，我在某个店花了多少钱，比如说我在优衣库到底花了多少钱买衣服，但是一般的记账软件，只会知道【<strong>衣服</strong>】这个类别我花了多少钱，然后再来说<strong>位置</strong>，我觉得位置最重要的是用来回顾，我在哪里花了这笔钱。这是我做这个小程序的初衷，在记账上多加了两个维度</p> <h2 id="这个小程序有什么？">这个小程序有什么？</h2><h3 id="多账本">多账本</h3> <p>多账本这个主要是用来进行区分你的消费种类，在这个系统中，类别都是属于某个账本的。比如说你喜欢钓鱼，你可以建立一个【<strong>钓鱼账本</strong>】，然后你在钓鱼账本下，新建一个类别，比如鱼竿，比如说饵料，你就可以很直观的看到，在这个钓鱼上总共花了多少钱，然后钓鱼下面的各个类别又花了多少钱</p> <h3 id="2000+ Emoji">2000+ Emoji</h3> <p>大概有 2000+ emoji 供用户进行选择，你不用再纠结这个类别要用什么来进行标识，我看一般的记账小程序提供的图标种类真的太少了</p> <h3 id="流水明细">流水明细</h3> <p>流水明细我们提供了两种视图</p> <ul> <li><p>月度汇总 每个月首先汇总，然后才是这个月下面的记账明细数据</p></li> <li><p>自定义日期汇总 可以自己选一个开始日期 - 结束日期进行汇总</p></li> </ul> <h3 id="丰富的过滤条件">丰富的过滤条件</h3> <p>基本上所有的记账信息，你都可以通过过滤条件来进行查询，获取你想要的数据</p> <h3 id="报表分析">报表分析</h3> <p>暂时只提供了月度分析报表，报表包括</p> <ul> <li>每个账户的收支，方便进行对账</li> <li>支出和收入 6 个月的趋势</li> <li>账本和类别饼图，每个账本所占的比例，然后点击账本，可以查看账本下面每个类别所对应的比例</li> <li>前 5 收入和支出的单比记账数据</li> <li>商店的汇总数据</li> </ul> <h3 id="灵活的数据管理">灵活的数据管理</h3> <p>可以将类别移动到其他账本，可以进行类别间的合并，商店也是可以进行合并的</p> <h3 id="位置">位置</h3> <p>自动定位，然后也可以进行具体位置的选择，相信这个对大家对某一条记账数据进行回顾时，应该是有很大的好处的</p> <h2 id="这个小程序目前没做什么？">这个小程序目前没做什么？</h2><h3 id="资产管理">资产管理</h3> <p>大概了解了一下，资产管理太复杂了，这个要好好想一下</p> <h3 id="预算管理">预算管理</h3> <p>这个暂时也没想好，怎么和当前进行契合</p> <h3 id="数据迁移">数据迁移</h3> <p>这个暂时也没想好，可能会开发一个小的网页系统来专门进行数据迁移</p> <h2 id="这个小程序目前哪里不好？">这个小程序目前哪里不好？</h2><h3 id="报表">报表</h3> <p>报表还是有点粗糙的，不够精细，感觉呈现的东西有点少了</p> <h3 id="支出去向/收入来源的选择">支出去向/收入来源的选择</h3> <p>特别是支出去向，记账一段时间，支出去向就会很多，我要经常搜索，造成用户操作繁琐，也占用时间，这个是接下来优化的重点</p> <h3 id="界面">界面</h3> <p>界面不够精细，有些地方用户体验还是不怎么好，毕竟作为搞前端写代码的，对于 UI 有些力不从心，但是也在了解 UI，用户体验，排版这个方面，这个肯定是会进行优化的</p> <h2 id="总结">总结</h2> <p>其实我也一直在纠结，是不是放出来，总感觉自己做的不够好，还有很多地方也需要优化，但是如果不放出来的话，我接触不到真实的用户需求，怕自己走进了死胡同，所以说还是鼓起勇气来写下这篇宣传文案。毫不否认，我只是一个独立开发者，一个人的力量总归有限，在很多地方肯定有做的不好的，希望大家该批评的批评，该提建议的请大胆提出来，我都会虚心接受，采纳和改进。</p> <h2 id="宣传">宣传</h2> <p><img src="https://img.way2solo.com/photo/ccsulzf/e58a935d-8f51-47af-ab06-803522101ca5.png?imageView2/2/w/1920/q/100" title="" alt=""> <img src="https://img.way2solo.com/photo/ccsulzf/6ec084d3-73f5-4a45-9d17-28f887a080a5.png?imageView2/2/w/1920/q/100" title="" alt="">![] <img src="https://img.way2solo.com/photo/ccsulzf/352bbcc7-35f0-4d08-a07b-e0d93baefbba.png?imageView2/2/w/1920/q/100" title="" alt=""> <img src="https://img.way2solo.com/photo/ccsulzf/98464df6-cbbb-4d18-beb5-9f61fc50b02a.png?imageView2/2/w/1920/q/100" title="" alt=""> <img src="https://img.way2solo.com/photo/ccsulzf/b8a2799e-564a-4892-a7f1-eb1e61255bd6.png?imageView2/2/w/1920/q/100" title="" alt=""></p> <h2 id="小程序码">小程序码</h2> <p><img src="https://img.way2solo.com/photo/ccsulzf/78a39e21-44f4-454d-8c20-8b4c47b06a47.jpg?imageView2/2/w/1920/q/100" title="" alt=""></p> <h2 id="群二维码">群二维码</h2> <p>如果有兴趣，可以加入微信群进行交流 <img src="https://img.way2solo.com/photo/ccsulzf/eaef3953-58cf-464a-9828-70153c9a8348.jpeg?imageView2/2/w/1920/q/100" title="" alt=""></p> ccsulzf Fri, 16 Sep 2022 10:33:18 +0800 https://beta.w2solo.com/topics/3556 https://beta.w2solo.com/topics/3556 <h2 id="我做了什么？">我做了什么？</h2> <p>开发了一个微信小程序，主要是通过地图交互来查询省市县｜区的相关信息，小程序通过省-&gt;市-&gt;县｜区点击，进行地图的绘画和百度百科的信息展示</p> <h2 id="我怎么做的？">我怎么做的？</h2> <ul> <li><p>获取高德地图 Geo 数据</p></li> <li><p>获取每个省市县，存储到数据库</p></li> <li><p>获取每个省市县的百度百科词条信息，存储到数据库</p></li> </ul> <h2 id="技术栈？">技术栈？</h2><h3 id="前端">前端</h3> <ul> <li><p>使用阿里出的基于 react 的小程序开发框架<a href="https://remaxjs.org/" rel="nofollow" target="_blank" title="">Remax</a></p></li> <li><p>使用<a href="https://github.com/ecomfe/echarts-for-weixin" rel="nofollow" target="_blank" title="">echart for weixin</a>进行地图的渲染</p></li> </ul> <h3 id="后端">后端</h3> <ul> <li><p>使用<a href="https://docs.nestjs.com/" rel="nofollow" target="_blank" title="">nestjs</a>构建服务端应用</p></li> <li><p>使用<a href="https://github.com/bda-research/node-crawler" rel="nofollow" target="_blank" title="">crawler</a>对百度百科词条信息进行爬取</p></li> </ul> <h2 id="这个小程序学到了什么？">这个小程序学到了什么？</h2> <ul> <li><p>remax 好用，完全可以使用 react 无缝开发，但是体积有点偏大</p></li> <li><p>小程序上做这种图表显示不尽人意，交互基本上不怎么好做</p></li> <li><p>nestjs 写起来挺舒服的，写过 java 的应该很容易上手，搭配 typeorm 操作数据库也非常的方便</p></li> </ul> <h2 id="分享几条有趣的省市信息">分享几条有趣的省市信息</h2> <ul> <li><p>全国铁西区有三个，两个在辽宁省，一个在吉林省</p></li> <li><p>有些地名和越南，朝鲜，韩国，日本重名，和<a href="http://www.360doc.com/content/16/1113/12/8456313_606181096.shtml" rel="nofollow" target="_blank" title="">越南的特别多</a>，比如说山西太原市,越南太原省</p></li> <li><p>设立市辖区的地级市 (嘉峪关市,东莞市,中山市,三沙市,儋州市)</p></li> <li><p><a href="https://baike.baidu.com/item/%E7%9C%81%E7%9B%B4%E8%BE%96%E5%8E%BF%E7%BA%A7%E8%A1%8C%E6%94%BF%E5%8D%95%E4%BD%8D/6903180?fr=aladdin" rel="nofollow" target="_blank" title="">省直辖县级行政单位</a></p></li> </ul> <h2 id="这篇文章的目的">这篇文章的目的</h2> <ul> <li><p>总结一下</p></li> <li><p>希望大家能体验一下，然后说说自己的体验和想法</p></li> </ul> <h2 id="预览效果和小程序码">预览效果和小程序码</h2> <p>预览效果如下：</p> <p><img src="https://p.pstatp.com/origin/pgc-image/dedd9c0ab0ec4bcabb7fe8bcb73b7900" title="" alt="深圳地图及信息"></p> <hr> <p>小程序体验码如下：(也可以微信搜索省市信息大全)</p> <p><img src="https://p.pstatp.com/origin/pgc-image/07a44b081f584e5abafdc7327bb50c02" title="" alt="小程序码"></p> ccsulzf Sat, 25 Sep 2021 16:38:42 +0800 https://beta.w2solo.com/topics/2797 https://beta.w2solo.com/topics/2797