小程序模板网

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

通过阅读本课程你可以学到以下知识:1.使用表单组件、表单验证、Alert警告框2.实现列表页并重写单元格3.保存与读取数据到本地4.页面跳转先看一上效果图图0-1输入图片说明图0-2输入图片说明一、创建项目并勾上quickSt ...

 
 
 
通过阅读本课程你可以学到以下知识:
 
1.使用表单组件、表单验证、Alert警告框
 
2.实现列表页并重写单元格
 
3.保存与读取数据到本地
 
4.页面跳转
 
先看一上效果图
 
图0-1
 

 
二、首页
 
首页包含一个添加收支按钮与所有条目的列表
 
1. 首页布局
 
1.1 增加一个添加按钮

 
    
 

  1. <!--index.wxml-->
  2. <view class="container">
  3. <navigator url="../item/item" hover-class="navigator-hover">添加收支</navigator>
  4. </view>
 
1.2 设置按钮按下高亮样式hover-class
 
 

  1. /**index.wxss**/
  2.  
  3. /** 修改默认的navigator点击态 **/
  4. .navigator-hover {
  5. color:#2297f1;
  6. }
2. 添加页面布局
 
依次新建一个item文件夹,item.wxml item.wxss item.js item.json
 
如图2-2-1
 

修改app.json
 
 

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/item/item"
  5. ],
  6. "window":{
  7. "backgroundTextStyle":"light",
  8. "navigationBarBackgroundColor": "#2297f1",
  9. "navigationBarTitleText": "灵犀账本",
  10. "navigationBarTextStyle":"white"
  11. }
  12. }
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
 
 

  1. .page {
  2. min-height: 100%;
  3. flex: 1;
  4. background-color: #FBF9FE;
  5. font-size: 32rpx;
  6. font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  7. overflow: hidden;
  8. }
  9.  
  10. .page input{
  11. padding: 20rpx 30rpx;
  12. background-color: #fff;
  13. }
  14.  
  15. .section{
  16. margin:40rpx 0;
  17. }
  18. .section_gap{
  19. padding: 0 30rpx;
  20. }
  21.  


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/22765.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询