应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

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

发布时间:2024-01-01 00:00 浏览次数:29

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


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;


}

TAG标签:
阅读推荐