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