微信小程序之简单记账本开发记录(七)
记账本已经可以实现添加和删除的功能
现在只需要将上述步骤重复一遍便可将另一个界面做出来。
大体上已制作完成,如果在细节上有变动会在这一篇更新
总体来说,这个作业让我对微信小程序的开发有了更多地认识,大致主体程序和页面开发的一些手法也有了一个
较为详细地了解,对以后的学习也有了很大的帮助。
使用教程:千锋教育-微信程序开发
下面是小程序的大体代码

1 const app = getApp() 2 3 Page({ 4 data: { 5 motto: 'Life is fantastic', 6 userInfo: {}, 7 hasUserInfo: false, 8 canIUse: wx.canIUse('button.open-type.getUserInfo') 9 }, 10 //事件处理函数 11 bindViewTap: function () { 12 wx.navigateTo({ 13 url: '../logs/logs' 14 }) 15 }, 16 onLoad: function () { 17 if (app.globalData.userInfo) { 18 this.setData({ 19 userInfo: app.globalData.userInfo, 20 hasUserInfo: true 21 }) 22 } else if (this.data.canIUse) { 23 // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 24 // 所以此处加入 callback 以防止这种情况 25 app.userInfoReadyCallback = res => { 26 this.setData({ 27 userInfo: res.userInfo, 28 hasUserInfo: true 29 }) 30 } 31 } else { 32 // 在没有 open-type=getUserInfo 版本的兼容处理 33 wx.getUserInfo({ 34 success: res => { 35 app.globalData.userInfo = res.userInfo 36 this.setData({ 37 userInfo: res.userInfo, 38 hasUserInfo: true 39 }) 40 } 41 }) 42 } 43 }, 44 getUserInfo: function (e) { 45 console.log(e) 46 app.globalData.userInfo = e.detail.userInfo 47 this.setData({ 48 userInfo: e.detail.userInfo, 49 hasUserInfo: true 50 }) 51 }, 52 onShow() { 53 54 }, 55 onShareAppMessage() { 56 return { 57 title: '管家记账本', 58 path: '/pages/index/index' 59 } 60 }, 61 showTxet(){ 62 this.setData({ 63 motto:"生活充满精彩" 64 }) 65 } 66 67 68 69 70 })

1 { 2 "navigationBarTitleText": "记账本", 3 4 "usingComponents": {} 5 6 }

1 <view class="container" bindtap="showTxet"> 2 3 <view class="userinfo"> 4 <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> 5 <block wx:else> 6 <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> 7 <text class="userinfo-nickname">{{userInfo.nickName}}</text> 8 </block> 9 </view> 10 <view class="usermotto"> 11 <text class="user-motto">{{motto}}</text> 12 </view> 13 </view> 14 15 16 <view class="btns"> 17 <view class="btn btn-publish"> 18 <navigator url="/pages/publish/publish">收入</navigator> 19 </view> 20 <view class="btn"> 21 <navigator url="/pages/pro/pro">支出</navigator> 22 </view> 23 24 </view>

1 /*.map-container { 2 position: absolute; 3 top: 0; 4 right: 0; 5 bottom: 40px; 6 left: 0; 7 background: greenyellow; 8 } 9 .map{ 10 width: 100%; 11 height: 100% 12 }*/ 13 .userinfo { 14 display: flex; 15 flex-direction: column; 16 align-items: center; 17 } 18 19 .userinfo-avatar { 20 width: 128rpx; 21 height: 128rpx; 22 margin: 20rpx; 23 border-radius: 50%; 24 } 25 26 .userinfo-nickname { 27 color: #aaa; 28 } 29 30 .usermotto { 31 margin-top: 100px; 32 color: #aaa; 33 } 34 35 /*下方按钮*/ 36 .btns { 37 position: absolute; 38 display: flex; 39 left:0; 40 right: 0; 41 line-height: 40px; 42 bottom: 0; 43 background: #03bbd5; 44 } 45 .btn{ 46 flex: 1; 47 text-align: center; 48 color: #fff; 49 } 50 .btn-publish{ 51 background: #ff9700 52 } 53 54 55 .classname{ 56 width: 100%; 57 height: 100%; 58 display: flex; 59 justify-content: center; 60 61 } 62 .classname-publish{ 63 align-items: center; 64 }

1 { 2 "pages": [ 3 "pages/index/index" 4 ], 5 "window": { 6 "backgroundTextStyle": "dark", 7 "navigationBarBackgroundColor": "#fff", 8 "navigationBarTitleText": "记账", 9 "navigationBarTextStyle": "black", 10 "backgroundColor": "gray" 11 }, 12 "debug": true 13 }

1 <view class="container"> 2 3 <form catchsubmit="formSubmit" > 4 <view class="account-detail"> 5 <input placeholder="花销详情(内容加时间)" name="inputdetail" type="text" /> 6 </view> 7 8 <view class="account-amount"> 9 <input placeholder="花销金额" name="inputamount" type="number" /> 10 </view> 11 12 <view class="add-one"> 13 <button formType="submit" type="primary" loading="{{buttonLoading}}"> 支出 </button> 14 </view> 15 </form> 16 17 <view class="account-list-text"> 18 <text>条目列表</text> 19 </view> 20 21 <view class="account-list-all-amount"> 22 <text>总支出:{{accountTotal}}</text> 23 </view> 24 25 <block wx:for="{{accountDATA}}" > 26 <view class="account-list"> 27 28 <view class="account-list-amount"> 29 {{item.amount}} 30 </view> 31 32 <view class="account-list-detail"> 33 {{item.detail}} 34 </view> 35 36 37 38 <view class="account-list-del"> 39 <button size="mini" type="warn" data-index-key="{{index}}" bindtap="deleteRow" >删除</button> 40 </view> 41 42 </view> 43 </block> 44 45 46 47 </view>

1 .account-detail{ 2 height: 100rpx; 3 padding: 0 30rpx; 4 } 5 6 .account-amount{ 7 padding: 0 30rpx; 8 } 9 10 .add-one{ 11 margin-top: 20rpx; 12 } 13 14 .account-list-text{ 15 color:gray; 16 margin:30rpx 0 0 30rpx; 17 } 18 19 .account-list-all-amount{ 20 color:gray; 21 align-self: flex-end; 22 padding-right: 25rpx; 23 } 24 25 26 .account-list{ 27 color:gray; 28 margin:30rpx 0 0 30rpx; 29 display: flex; 30 flex-direction: row; 31 background-color:wheat; 32 line-height: 80rpx; 33 } 34 35 36 .account-list-detail{ 37 flex:1; 38 } 39 40 41 .account-list-amount{ 42 width: 500rpx; 43 }

1 { 2 "pages": [ 3 "pages/index/index" 4 ], 5 "window": { 6 "backgroundTextStyle": "dark", 7 "navigationBarBackgroundColor": "#fff", 8 "navigationBarTitleText": "记账", 9 "navigationBarTextStyle": "black", 10 "backgroundColor": "gray" 11 }, 12 "debug": true 13 }
另一个相似页面就不再重复贴了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步