微信小程序之简单记账本开发记录（七）

记账本已经可以实现添加和删除的功能

现在只需要将上述步骤重复一遍便可将另一个界面做出来。

大体上已制作完成，如果在细节上有变动会在这一篇更新

 总体来说，这个作业让我对微信小程序的开发有了更多地认识，大致主体程序和页面开发的一些手法也有了一个

较为详细地了解，对以后的学习也有了很大的帮助。

使用教程：千锋教育-微信程序开发

下面是小程序的大体代码

const app = getApp()

Page({
  data: {
    motto: 'Life is fantastic',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  onShow() {
   
  },
  onShareAppMessage() {
    return {
      title: '管家记账本',
      path: '/pages/index/index'
    }
  },
showTxet(){
  this.setData({
    motto:"生活充满精彩"
  })
}



 
})

{
  "navigationBarTitleText": "记账本",
  
  "usingComponents": {}
  
}

<view class="container" bindtap="showTxet">

  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>


<view class="btns">
<view class="btn btn-publish">
 <navigator url="/pages/publish/publish">收入</navigator>
 </view>
<view class="btn">
<navigator url="/pages/pro/pro">支出</navigator>
 </view>

</view>

/*.map-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 40px;
  left: 0;
background: greenyellow;
}
.map{
   100%;
  height: 100%
}*/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
   128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 100px;
  color: #aaa;
}

/*下方按钮*/
.btns {
  position: absolute;
  display: flex;
  left:0;
  right: 0;
  line-height: 40px;
  bottom: 0;
  background: #03bbd5;
}
.btn{
  flex: 1;
  text-align: center;
  color: #fff;
}
.btn-publish{
  background: #ff9700
}


.classname{
  100%;
 height: 100%;
 display: flex;
 justify-content: center;

}
.classname-publish{
    align-items: center;
}

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "记账",
    "navigationBarTextStyle": "black",
    "backgroundColor": "gray"
  },
  "debug": true
}

<view class="container">

    <form catchsubmit="formSubmit" >
      <view class="account-detail"> 
        <input placeholder="花销详情（内容加时间）" name="inputdetail"  type="text" />
      </view>

      <view class="account-amount"> 
        <input placeholder="花销金额" name="inputamount" type="number" />
      </view>
      
      <view class="add-one">
        <button formType="submit" type="primary" loading="{{buttonLoading}}"> 支出 </button>
      </view>
    </form>

    <view  class="account-list-text">
      <text>条目列表</text>
    </view>

     <view  class="account-list-all-amount">
      <text>总支出:{{accountTotal}}</text>
    </view>
    
    <block wx:for="{{accountDATA}}" >
      <view class="account-list">

       <view class="account-list-amount">
          {{item.amount}}
        </view>
        
        <view class="account-list-detail">
          {{item.detail}}
        </view>

        

        <view class="account-list-del">
            <button size="mini"  type="warn"  data-index-key="{{index}}"  bindtap="deleteRow" >删除</button>
        </view>

        </view>
    </block>

    

</view>

.account-detail{
    height: 100rpx;
    padding: 0 30rpx;
}

.account-amount{
    padding: 0 30rpx;
}

.add-one{
    margin-top: 20rpx;
}

.account-list-text{
    color:gray;
    margin:30rpx 0 0 30rpx;
}

.account-list-all-amount{
    color:gray;
    align-self: flex-end;
    padding-right: 25rpx;
}


.account-list{
    color:gray;
    margin:30rpx 0 0 30rpx;
    display: flex;
    flex-direction: row;
    background-color:wheat;
    line-height: 80rpx;
}


.account-list-detail{
    flex:1;
}


.account-list-amount{
     500rpx;
}

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "记账",
    "navigationBarTextStyle": "black",
    "backgroundColor": "gray"
  },
  "debug": true
}

另一个相似页面就不再重复贴了