实战教程：记账应用开发

通过阅读本课程你可以学到以下知识：

1.使用表单组件、表单验证、Alert警告框

2.实现列表页并重写单元格

3.保存与读取数据到本地

4.页面跳转

先看一上效果图

图0-1

图0-2

输入图片说明

一、创建项目并勾上quickStart

如图1-1

二、首页

首页包含一个添加收支按钮与所有条目的列表

1. 首页布局

1.1 增加一个添加按钮

添加收支

1.2 设置按钮按下高亮样式hover-class

/**index.wxss**/

/** 修改默认的navigator点击态 **/

.navigator-hover {

color:#2297f1;

}

2. 添加页面布局

依次新建一个item文件夹，item.wxml item.wxss item.js item.json

如图2-2-1

修改app.json

{

"pages":[

"pages/index/index",

"pages/item/item"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#2297f1",

"navigationBarTitleText": "灵犀账本",

"navigationBarTextStyle":"white"

}

}

item.wxml

1. <!--item.wxml-->
2. <view class="page">
3. <view class="section">
4. <view class="section__title">标题</view>
5. <input bindinput="bindTitleInput" placeholder="内容" value="{{title}}" />
6. </view>
7. <view class="section">
8. <view class="section__title">类型</view>
9. <radio-group class="radio-group" bindchange="radioChange">
10. <label class="radio">
11. <radio class="radio" value="income" checked="true"/>收入
12. </label>
13. <label class="radio">
14. <radio class="radio" value="cost"/>支出
15. </label>
16. </radio-group>
17. </view>
18. <view class="section">
19. <view class="section__title">金额</view>
20. <input bindinput="bindAccountInput" type="number" placeholder="请输入数字，不加正负号"/>
21. </view>
22. <button class="button" type="primary">添加</button>
23. </view>

item.wxss

.page {

min-height: 100%;

flex: 1;

background-color: #FBF9FE;

font-size: 32rpx;

font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;

overflow: hidden;

}

.page input{

padding: 20rpx 30rpx;

background-color: #fff;

}

.section{

margin:40rpx 0;

}

.section_gap{

padding: 0 30rpx;

}