微信小程序開發入門之共享賬本(四)

微信小程序開發入門之共享賬本(四)

接著上一篇

微信小程序開發入門之共享賬本(四)

開始之前先說下版本管理

那版本管理是什麼呢

微信小程序開發入門之共享賬本(四)

眾所周知,我們每天要寫很多優秀的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,,將下面部分代碼

餘額區


菜單區

替換為



{{item.balance}}







 

修改一下賬單顯示部分的代碼,給賬單列表的頭像加上,把



{{item}}

修改為



{{item.content}}

 

別忘了添加相應的樣式,打開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;
}

這次我們用到了幾個圖片,兩個頭像圖片和一個添加按鈕的圖片,在小程序裡可以選擇引用雲空間的圖片或者本地圖片,因為後續會涉及到上傳自定義頭像或背景,所以從一開始我們就選擇使用雲空間存儲的圖片,下面說下怎麼上傳圖片到雲空間然後引用

首先打開雲開發

微信小程序開發入門之共享賬本(四)

點擊雲存儲

微信小程序開發入門之共享賬本(四)

點擊新建文件夾

微信小程序開發入門之共享賬本(四)

我們創建avatars,icons,backgrounds三個文件夾,分別放頭像,圖標和背景圖片

微信小程序開發入門之共享賬本(四)

然後點開相應的文件夾,點擊上傳圖片,選擇要上傳的圖片完成並等待完成上傳,然後點擊上傳成功的文件名,會在右邊彈出詳細信息,找到下載地址信息,點擊後面的複製圖標複製地址

微信小程序開發入門之共享賬本(四)

這個地址就是我們小程序中可以引用的地址,將對應圖片的地址複製到相應位置(index.wxss裡有背景圖片和添加按鈕的圖標地址,index.js裡有頭像的地址,分別替換掉)

編譯運行結果如下

微信小程序開發入門之共享賬本(四)

然後別忘了提交代碼,打開版本管理,勾選全部文件

微信小程序開發入門之共享賬本(四)

在下面填寫這次提交的內容描述,然後點擊提交按鈕完成代碼提交

微信小程序開發入門之共享賬本(四)

今日份開發到此結束

微信小程序開發入門之共享賬本(四)


分享到:


相關文章: