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

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

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

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

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

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

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

下面是小程序的大体代码

 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:"生活充满精彩"
   })
 }

 })

index.js

 {
   "navigationBarTitleText": "记账本",

   "usingComponents": {}

 }

index.json

 <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>

index.wxml

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

 .userinfo-avatar {
   width: 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{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;

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

index.wxss

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

pro.json

 <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>

pro.wxml

 .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{
     width: 500rpx;
 }

pro.wxss

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

pro.js

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