秀杰实战教程系列《一》：记账应用开发

通过写作本课程你可以教给以下科学知识：

1.采用表单组件、表单检验、Alert警告侧边

2.同时实现列表页并改写单元格

3.留存与读取数据至本地

4.页面重定向

先看看一上效果图

图0-1

图0-2

输出图片说明

一、建立项目并管吻quickStart

例如图1-1

二、首页

首页涵盖一个嵌入收支按钮与所有条目的列表

1. 首页布局

1.1 减少一个嵌入按钮

嵌入收支

1.2 设置按钮按下CT8325BBP样式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

标题

类型

总收入

开支

金额

嵌入

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;

}