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

首页 > 小程序资讯 > 小程序常见问题

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

时间：2016-10-18 11:08:00

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

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

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

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

4.页面跳转

先看一上效果图

图0-1

图0-2

输入图片说明

一、创建项目并勾上quickStart

如图1-1

二、首页

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

1. 首页布局

1.1 增加一个添加按钮

<!--index.wxml-->
<view class="container">
    <navigator url="../item/item" hover-class="navigator-hover">添加收支</navigator>
</view>

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

<!--item.wxml-->
<view class="page">
    <view class="section">
        <view class="section__title">标题</view>
        <input bindinput="bindTitleInput" placeholder="内容" value="{{title}}" />
    </view>
    <view class="section">
        <view class="section__title">类型</view>
        <radio-group class="radio-group" bindchange="radioChange">
            <label class="radio">
                <radio class="radio" value="income" checked="true"/>收入
            </label>
            <label class="radio">
                <radio class="radio" value="cost"/>支出
            </label>
        </radio-group>
    </view>
    <view class="section">
        <view class="section__title">金额</view>
        <input bindinput="bindAccountInput" type="number" placeholder="请输入数字，不加正负号"/>
    </view>
    <button class="button" type="primary">添加</button>
</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;
}

                
                	
                    	
                        微信小程序开发系列分析《二》数据层                    
                    
                	
                        微信小程序把玩《二》：页面生命周期，模块化，数据绑定，view组件 ... ...