国产精品66福利在线观看_亚洲av日韩精品久久久久久大_yy11111光棍影院在线观看_亚洲另类精品小说_亚洲理伦片a中文字幕_无遮挡男女羞羞的视频网站_男人把女人桶到爽爆免费网站_久久精品视频网站_美女胸禁止18以下看视频硬看_欧美综合亚洲精品高清观看

首頁關(guān)于我們小程序案例小程序解決方案小程序資訊聯(lián)系我們

NAVIGATION×

在線咨詢

TEL：021-61554458

小程序資訊

首頁 > 小程序資訊 > 小程序常見問題

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

時(shí)間：2016-10-18 11:08:00

通過閱讀本課程你可以學(xué)到以下知識(shí)：

1.使用表單組件、表單驗(yàn)證、Alert警告框

2.實(shí)現(xiàn)列表頁并重寫單元格

3.保存與讀取數(shù)據(jù)到本地

4.頁面跳轉(zhuǎn)

先看一上效果圖

圖0-1

圖0-2

輸入圖片說明

一、創(chuàng)建項(xiàng)目并勾上quickStart

如圖1-1

二、首頁

首頁包含一個(gè)添加收支按鈕與所有條目的列表

1. 首頁布局

1.1 增加一個(gè)添加按鈕

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

1.2 設(shè)置按鈕按下高亮樣式hover-class

/**index.wxss**/
/** 修改默認(rèn)的navigator點(diǎn)擊態(tài) **/
.navigator-hover {
    color:#2297f1;
}

2. 添加頁面布局

依次新建一個(gè)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">標(biāo)題</view>
        <input bindinput="bindTitleInput" placeholder="內(nèi)容" 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="請輸入數(shù)字，不加正負(fù)號(hào)"/>
    </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;
}

                
                	
                    	
                        微信小程序開發(fā)系列分析《二》數(shù)據(jù)層                    
                    
                	
                        微信小程序把玩《二》：頁面生命周期，模塊化，數(shù)據(jù)綁定，view組件 ... ...