前言
我为什么要记账？月光、明明自己不怎么花钱、钱钱去哪儿了？
年轻人现在的消费方式大多都是月光族，一个月下来根本存不了什么钱，我觉得记账就是非常好的一个方式来让年轻人知道自己把钱花在哪里，改变消费方式。记账并不会让我变得更节省，积攒更多的钱。 但它让我知道自己的钱花在了哪，每个月自己在哪方面花钱最多，这个月比上个月花钱的增减情况，从而窥见数字背后的意义。
于是作为程序猿，那不得自己写一个玩一下。说干就干，想着小程序云开发前后端都可以自己来，云开发无需搭建服务器，可快速构建小程序、公众号，免登录、免鉴权调用微信开放服务，按量计费，成本更低，这不是前端同学的首选吗？本文写的是一个已经开了流量主，没加广告的小程序。
战术准备
- 后端：微信云开发（云函数、云数据库）
- 前端：原生微信小程序开发
动员前的准备
- 一个小程序账号，开通云开发（按量计费，有免费额度）
- 下载微信开发者工具
Ready Go 战吧
1.小程序没有设计怎么办？
没有UI，只能自己来了，来先学习一下其他优秀小程序怎么设计的。 下图参考来微信记账本、柚子记账小程序，在微信中搜搜，我大概看了10多款记账小程序，读书人都喜欢借鉴～
2.规划自己的小程序工具页面、功能
- 首页展示、banner位、功能区、导航栏、意见反馈、更多（个人中心）；
- 账单记录得要一个，提供一个快捷日期分类（本周、本月、半年、一年、全部）；
- 收入/支出的图表统计来一个；
- 个人中心、添加修改收入/支出的记账页面； 最开始没有首页，只有账单记录、统计、记账页面，自己开发就没有画原型，大抵是懒吧 😁
3.小程序使用到的Icon图标哪里有？
正式战役
一、小程序前端部分
直接用微信开发者工具生成一个mp-mybook项目，创建对应Page页面。小程序对应配置详情，这部分可以参考官方文档。小程序前端部分没啥可说的，直接上代码。
保卫战-app配置
码上掘金顺序分别是：app.json、app.wxss、app.js
地址：https://code.juejin.cn/pen/7118230227301449759
首页Code片段
攻坚战-首页
index.wxml
<view class="container">
<image src="{{banner}}" class="banner" data-type="main" bindtap="tipToast" alt=""></image>
<view class="lists">
<view style="background: {{item.background}}" class="list" wx:for="{{list}}" wx:for-item="item" wx:key="type">
<view class="item-block" data-type="{{item.type}}" bindtap="{{item.click}}">
<image style="width:{{item.width}};height: {{item.height}};opacity: {{item.opacity ? 0.4: 1}};" src="{{item.icon}}" class="icon" alt=""></image>
<view class="name {{item.opacity ? 'pic' : ''}}">{{item.name}}</view>
</view>
</view>
</view>
<view class="footer">
<view class="feedback">
<button open-type="feedback">意见反馈</button>
<view>意见反馈</view>
</view>
<view class="vertical">|</view>
<view class="guide" bindtap="tipToast">更多</view>
</view>
</view>
码上掘金-首页Code
wxss和js的代码比较多，就不直接放入文章中了。想要的同学可以在CodePen上看详细代码吧，因为用的小程序代码，无法正常展示，代码已注释，右边展示为小程序截图，可以复制代码到微信开发者工具中。
地址：https://code.juejin.cn/pen/7117931889356177439
首页Code片段
攻坚战-授权页面
因为需要存储账单记录和用户头像相关信息，为了安全存储，通过云函数获取用户openId和Code
index.wxml
<!--index.wxml-->
<view class="container">
<view class='page-center'>
<view class='logo-wrapper'>
<image class='logo' src='../../images/logo.png'></image>
<text class='name'>记账喵</text>
</view>
<!-- 需要使用 button 来授权登录 -->
<button class='button' bindtap="getUserProfile">
<text class='button-text'>开启我的记账喵</text>
</button>
</view>
</view>
码上掘金-授权页Code
地址：https://code.juejin.cn/pen/7118259996617343007
授权页Code片段
攻坚战-记账列表页面
index.wxml
<page>
<view class="book-main">
<view class='tcenter balance-wrapper'>
<text class='fontblod'>{{data.diffCount}}</text>
<text class='block balance-text'>余额</text>
</view>
<view class='flex month-wrapper'>
<view class='tcenter balance-wrapper width0 flex1'>
<text class='fontblod'>{{data.income}}</text>
<text class='block '>收入</text>
</view>
<view class='vdivider flex0'></view>
<view class='tcenter balance-wrapper width0 flex1'>
<text class='fontblod'>{{data.expenditure}}</text>
<text class='block '>支出</text>
</view>
</view>
</view>
<view class="flex tab-box">
<view class="tcenter tab" style="color:{{type=='week'?'#07c160':''}}" bindtap="handleTypeChange" data-type='week'>本周</view>
<view class="tcenter tab" style="color:{{type=='month'?'#07c160':''}}" bindtap="handleTypeChange" data-type='month'>本月</view>
<view class="tcenter tab" style="color:{{type=='halfyear'?'#07c160':''}}" bindtap="handleTypeChange" data-type='halfyear'>近半年</view>
<view class="tcenter tab" style="color:{{type=='year'?'#07c160':''}}" bindtap="handleTypeChange" data-type='year'>近一年</view>
<view class="tcenter tab" style="color:{{type=='all'?'#07c160':''}}" bindtap="handleTypeChange" data-type='all'>全部</view>
</view>
<view wx:if="{{records.length<=0}}" class='no-data'>暂无数据，赶紧去记账吧</view>
<scroll-view wx:else scroll-y="true" style="height: calc(100vh - 194px);" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" >
<view class='record-list'>
<view wx:for="{{records}}" wx:key="date" wx:for-index="outerIndex">
<view class='record-date flex'>
<view>{{item.date}}</view>
<view class="textright">
<text wx:if="{{item.income>0}}">收入：{{item.income}}</text>
<text wx:if="{{item.expenditure>0}}" class='date-expenditure'>支出：{{item.expenditure}}</text>
</view>
</view>
<view wx:for="{{item.records}}" wx:key="_id" class='item' bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" data-outer="{{outerIndex}}">
<view class='list-item__small flex tright' style="{{item.txtStyle}}">
<view class='item-content'>
<view class='record-left'>
<view>
<text class='record-type v-center ' style="background-color:{{item.typeValue==1?'#07c160':'#07c160'}};">{{item.typeText}}</text>
<text class='record-income v-center '>{{item.incomeName}}</text>
</view>
<text wx:if="{{item.desc}}" class='record-desc v-center'>备注：{{item.desc}}</text>
</view>
<view class='record-right'>
<text class='record-count' style="color:{{item.typeValue==1?'#f0b63b':'#333'}};">{{item.typeValue==1?'+' : '-'}}{{ filter.toFixed(item.count)}}</text>
</view>
</view>
</view>
<view class='item-update' bindtap='updateItem' data-index="{{index}}" data-outer="{{outerIndex}}">
<text>修改</text>
</view>
<view class='item-del' bindtap='delItem' data-index="{{index}}" data-outer="{{outerIndex}}">
<text>删除</text>
</view>
</view>
</view>
</view>
</scroll-view>
<view class="add-btn" bindtap='addData'>
<image src="../../images/add-btn.png" alt="" />
</view>
</page>
码上掘金-记账列表页Code
地址：https://code.juejin.cn/pen/7118262383880962062
记账列表页Code片段
攻坚战-添加/修改记账页面
<view class="book-add">
<form bindsubmit="formSubmit">
<!-- 类别 -->
<view class="book-types">
<view wx:for="{{types}}" wx:key="value" wx:for-index="index"
class="{{item.value === typeValue ? 'types-item active' : 'types-item'}}" bindtap="bindTypeChange"
data-value='{{item.value}}' data-text='{{item.name}}'>
<view class="type-name">{{item.name}}</view>
</view>
</view>
<!-- 类型 -->
<view class="book-income">
<scroll-view scroll-y="true" style="height: 210rpx;" scroll-top="0">
<view wx:for="{{incomeTypes}}" bindtap="bindIncomeChange" wx:for-index="index" wx:key="_id" data-value="{{index}}"
class="income-item {{typeValue === 1 ? 'type1' : 'type2'}} {{index === incomeIndex? 'active': ''}}">
<view>{{item.name}}</view>
</view>
</scroll-view>
</view>
<!-- 日期 -->
<view class='input-item '>
<picker name="date" mode="date" bindchange="bindDateChange" value="{{date}}">
<view class="picker flex">
<label class=' input-label'>时间:</label>
<text class='flex1 input-text'>{{date}}</text>
<image class='input-icon' src='../../images/rightarrow.png'></image>
</view>
</picker>
</view>
<!-- 金额 -->
<view class='input-item flex'>
<label class=' input-label'>金额:</label>
<input value='{{count}}' placeholder='请输入金额' class='flex1 input-text' type="digit" name="count"></input>
</view>
<!-- 备注 -->
<view class='input-item flex flex-textarea'>
<label class="textarea-label input-label">备注:</label>
<textarea name="desc" placeholder-class='textarea-placeholder' class='flex1 input-text input-textarea'
value='{{desc}}' placeholder="如：餐饮" />
</view>
<button disabled='{{!submitEnable}}' class='button button-save' form-type="submit">
<text class='button-text'>保存</text>
</button>
</form>
</view>
码上掘金-添加/修改记账页面
地址：https://code.juejin.cn/pen/7118265320791506980
添加/修改记账页面Code片段
攻坚战-统计页面
码上掘金-统计页面
地址：https://code.juejin.cn/pen/7118284378723057694
统计页面Code片段
攻坚战-我的页面
码上掘金-我的页面
地址：https://code.juejin.cn/pen/7118284769867071519
我的页面Code片段
云开发代码，持续更新中...
「原生微信小程序+云开发，源码给你们多久能开流量主？（中）」
「原生微信小程序+云开发，源码给你们多久能开流量主？（下）」
关注点赞评论一条龙，超过预期，提供所有代码，教你快速开流量主，赚钱 小程序流量主日入100不是梦！
「我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿」
