微信小程序开发入门之共享账本（四）

接着上一篇

开始之前先说下版本管理

那版本管理是什么呢

众所周知，我们每天要写很多优秀的bug代码，在某一时刻你的项目可以完美运行，然后出于某种考虑，对代码进行了修改，然后因为某个bug导致整个项目当掉，这时候你想回到最近一个可以完美运行的阶段，怎么办？一个一个找出来自己改了哪些东西，然后，没有然后了

版本管理在这时候就可以派上用场了

在觉得项目到了一个稳定的阶段时，可以用版本管理工具记录一下当前的所有状况，相当于建立一个快照，在这之后如果改出问题了，可以立马回到这个快照所处的状态，再也用不着一个一个找自己改了什么东西了

打开开发者工具，点击右上方的版本管理

点开后选择初始化git库

然后先不继续，选择开通微信开发者

稍后再回来阅读，先点链接

然后用微信扫描二维码登录账号

选择初始化git账号信息

填入名称并配置ssh信息

选择添加ssh密钥

Ssh密钥要用ssh-keygen命令生成，回到控制台界面（windows快捷键win+r输入cmd打开，其它系统自行查找下）输入ssh-keygen，然后一路回车

然后打开.ssh目录（windows是C:\Users\你的用户名\.ssh，其他系统自行查询）

打开id_rsa.pub文件并复制其中内容，回到浏览器，粘贴密钥并输入一个名称

点击添加ssh密钥后就完成了密钥添加工作

然后点击左上角返回个人中心

选择项目

点击创建项目

填写项目信息

点击创建项目完成创建

然后再回到开发工具，点击确定

这时候版本管理工具（git）会将我们项目里的所有内容添加到暂存区，借用菜鸟教程上介绍git的一张图来说明什么是暂存区（可以到这上面学习git版本管理相关知识）

爱学习的人已经打开网址开始学习了

然后点开设置

编辑自己的信息，包括用户名和邮箱

选择远程，然后点击添加

在添加界面的下方可以看到我们刚刚创建的那个项目，点击项目名称进行选择

点击确定，至此完成版本管理的所有配置

初始化git库之后第一次没法在开发工具里提交代码（不知道为什么，有清楚的希望告知一下）这里先在终端处理第一次代码的提交，点击终端打开

在终端输入git push origin master

这样就完成了第一次代码提交，可以回到网页刷新一下，看看刚刚的项目有什么变化

可以看到所有代码都上传成功了，开发工具的历史里也有了一个提交记录

版本管理的目的时管理代码，所以代码还是要写的，今天要完成index页面的下面那部分，也就是footer，并且美化一下之前的页面，添加头像和背景

我们先创建两个虚拟用户，在index.js的data中添加partners

/**
* 页面的初始数据
*/
data: {
 billItems:[],
 partners:[]
}

然后在onLoad函数最前面添加生成虚拟用户的代码

//生成虚拟的用户
let mockPartnes = []
let p1 = {
avatarUrl: "https://6163-acctbook-ulude-1300405024.tcb.qcloud.la/avatars/IMG_8207.JPG?sign=32bccde1afe5412b0a60dbed76e3e4b9&t=1571235188",
balance: 666
}
let p2 = {
avatarUrl: "https://6163-acctbook-ulude-1300405024.tcb.qcloud.la/avatars/IMG_8208.JPG?sign=7235ee08a13b0e637ff05e7932f9b9c6&t=1571235203",
balance: 888
}
mockPartnes.push(p1, p2)
this.setData({
partners: mockPartnes
})

将之前生成虚拟账单的部分也改一下，加上用户头像信息

let index = 0
while (temp.length < 15) {
temp.push({
avatarUrl:mockPartnes[index%2].avatarUrl,
content: '这里显示记账内容'
})
index++
}
temp.push({
avatarUrl:'',
content: '这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的内容'
})

打开index.wxml,，将下面部分代码

<view class="balances">
<text>余额区</text>
</view>
<view class="menu">
<text>菜单区</text>
</view>

替换为

<view class="statistic-show">
<view
wx:for="{{partners}}"
wx:key="{{index}}"
class="statistic-item">
<view class="balance">
<text>{{item.balance}}</text>
<image class="avatar" src="{{item.avatarUrl}}"></image>
</view>
</view>
</view>
<view class="menus">
<button class="menu new-bill"></button>
</view>

修改一下账单显示部分的代码，给账单列表的头像加上，把

<image class="avatar" src="../../images/info.png"></image>
<view class="content">
<text>{{item}}</text>
</view>

修改为

<image class="avatar" src="{{item.avatarUrl}}"></image>
<view class="content">
<text>{{item.content}}</text>
</view>

别忘了添加相应的样式，打开index.wxss文件，删掉下面的样式

.menu, .balances {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.menu {
border-left: 1px solid rgba(0, 0, 0, 0.4);
}

添加新的样式

.footer .statistic-show {
width: 60%;
height: 100%;
display: flex;
justify-content: flex-start;
}
.statistic-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 20px;
}
.balance {
height: 90%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.avatar {
align-self: flex-start;
width: 70rpx;
height: 70rpx;
border-radius: 50%;
background-size: contain;
background-position: center;
}
.balance text{
font-size: 13px;
}
.footer .menus {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
width: 50%;
}
.menu {
border: 2px solid #333;
border-radius: 50%;
margin-right: 30rpx;
background-size: 70%;
background-position: center;
background-repeat: no-repeat;
}
.new-bill {
width: 96rpx;
height: 96rpx;
background-color: #00BFFF;
background-image: url("https://6163-acctbook-ulude-1300405024.tcb.qcloud.la/icon/add.png?sign=71c44994152444bfb950b149aad6b0b2&t=1571235501");
}

有点多，但是不复杂，主要是指定了显示余额和添加按钮的样式

给账单显示区添加一个背景图片，修改一下.container，添加背景图片

.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://746a-tj-tianji-1300186850.tcb.qcloud.la/bg1.jpg?sign=c2f8c41a7b64470605d28f378623e403&t=1570721234");
background-size: contain;
background-repeat: repeat-y;
background-position: top;
}

给.footer加上背景颜色

.footer {
flex: 1;
justify-content: space-around;
border-top: 1px solid rgba(0, 0, 0, 0.4);
background-color: rgba(255, 255, 255, 0.4);
}

调整下账单的边距

.billItem .avatar {
align-self: flex-start;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
margin: 0px 6px;
}
.billItem .content {
padding: 2px 6px;
word-wrap: break-word;
max-width: 61.8%;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 6px;
}

这次我们用到了几个图片，两个头像图片和一个添加按钮的图片，在小程序里可以选择引用云空间的图片或者本地图片，因为后续会涉及到上传自定义头像或背景，所以从一开始我们就选择使用云空间存储的图片，下面说下怎么上传图片到云空间然后引用

首先打开云开发