大学生记账本微信小程序

功能介绍:

1、 多种情景 账本,涵盖食品、交通、购物、宿舍、娱乐、学习、恋爱等各种针对学生的场景,满足不同时期的记账需要

2、提供 支出、收入、转账、余额、借贷 五大记账模块

3、可以实时查看自己的账户余额和所有账单记录

4、提供“ 附近银行 ”地图查询、 汇率计算 器功能、客服、学习充电

项目部署:

修改 project.config.json 中的 appid 替换为你自己的 appid;修改在app.js文件中对云开发进行初始化时的env参数

使用微信开发者工具,导入项目

项目效果

记一笔页面
大学生记账本微信小程序_第1张图片
账户记录页面
大学生记账本微信小程序_第2张图片
流水
大学生记账本微信小程序_第3张图片
我的
大学生记账本微信小程序_第4张图片
附近银行地图
大学生记账本微信小程序_第5张图片
汇率计算器
大学生记账本微信小程序_第6张图片
客服
大学生记账本微信小程序_第7张图片

<view class="top-img" style="padding-top:-{{statusBarHeight}}px"></view>

<van-notice-bar left-icon="volume" speed="30" backgroundColor="#ECF9FF" text="一个人一生能积累多少钱,不是取决于他能够赚多少钱,而是取决于他如何投资理财,人找钱不如钱找钱,要知道让钱为你工作,而不是你为钱工作。" />
<view class="container">
        <!-- 现金账户 -->
        <view class="cash commen">
                <view class="commen_text">现金账户</view>
                <view class="item" data-accountid="XJ" bindtap="navigateToDetail">
                        <image class="item_img" mode="widthFix" src="../../images/cash.png"></image>
                        <view class="item_cash">现金</view>
                        <view class="item_num">{{cashAccountBalance}}</view>
                        <image class="item_arrow" mode="widthFix" src="../../images/arrow.png"></image>
                </view>
                <van-divider hairline />
        </view>

        <!-- 信用卡账户 -->
        <view class="card commen">
                <view class="commen_text">信用卡账户</view>
                <block wx:for="{{cards_account}}" wx:for-item="cardItem" wx:key="index">
                        <view class="item" data-accountid="{{cardItem.accountid}}" bindtap="navigateToDetail">
                                <image class="item_img" mode="widthFix" src="{{cardItem.imgPath}}"></image>
                                <view class="item_cash">{{cardItem.name}}</view>
                                <view class="item_num">{{cardItem.balance}}</view>
                                <image class="item_arrow" mode="widthFix" src="../../images/arrow.png"></image>
                        </view>
                        <van-divider hairline />
                </block>
        </view>

        <!-- 金融账户 -->
        <view class="finance commen">
                <view class="commen_text">金融账户</view>
                <view class="item" data-accountid="bankcard" bindtap="navigateToDetail">
                        <image class="item_img" mode="widthFix" src="../../images/bank_card.png"></image>
                        <view class="item_cash">银行卡</view>
                        <view class="item_num">{{bankCardAccount}}</view>
                        <image class="item_arrow" mode="widthFix" src="../../images/arrow.png"></image>
                </view>
                <van-divider hairline />
        </view>

        <!-- 虚拟账户 -->
        <view class="virtual commen">
                <view class="commen_text">虚拟账户</view>
                <block wx:for="{{virtual_acount}}" wx:for-item="virtualItem" wx:key="index">
                        <view class="item" data-accountid="{{virtualItem.accountid}}" bindtap="navigateToDetail">
                                <image class="item_img" mode="widthFix" src="{{virtualItem.imgPath}}"></image>
                                <view class="item_cash">{{virtualItem.name}}</view>
                                <view class="item_num">{{virtualItem.balance}}</view>
                                <image class="item_arrow" mode="widthFix" src="../../images/arrow.png"></image>
                        </view>
                        <van-divider hairline />
                </block>
        </view>

</view>

项目采用云开发技术,仅提供学习。

想要源代码的留下联系方式。

+群免费获取源码:1084039861

谢谢观看

你可能感兴趣的:(零基础,云开发,小程序,css,后端)