小程序模板網(wǎng)

秀杰實戰(zhàn)教程系列《一》：記賬應用開發(fā)

發(fā)布時間：2018-03-20 12:19 所屬欄目：小程序開發(fā)教程

通過閱讀本課程你可以學到以下知識：1.使用表單組件、表單驗證、Alert警告框2.實現(xiàn)列表頁并重寫單元格3.保存與讀取數(shù)據(jù)到本地4.頁面跳轉先看一上效果圖圖0-1輸入圖片說明圖0-2輸入圖片說明一、創(chuàng)建項目并勾上quickSt ...

 
 
 
通過閱讀本課程你可以學到以下知識：
 
1.使用表單組件、表單驗證、Alert警告框
 
2.實現(xiàn)列表頁并重寫單元格
 
3.保存與讀取數(shù)據(jù)到本地
 
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點擊態(tài) **/
  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="請輸入數(shù)字，不加正負號"/>
  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.  


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.u-renovate.com/wxmini/doc/course/22765.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢
QQ在線咨詢