微信小程序開發入門之共享賬本5
接著上一篇
眾所周知，共享賬本是一個需要登錄才能用的小程序，所以這次我們來加個登錄界面以及相應的功能
首先是寫一個登錄界面，像下面這個一樣的（最好別像這個一樣，我真的是一點都沒有藝術細胞啊…）
別看他醜，我也花了不少功夫的，你看那標題幾個字，是不是還是有點不一樣的！
閒話少說，開始上代碼
…
還是先建文件夾吧！
新建一個目錄叫welcome（愛起啥名起啥名），然後在這個目錄下新建一個page
打開welcome.wxml文件，刪掉原有的，添加以下代碼
沒錯，就一個view和一個button，在此之前只需要掉一個系統函數就可以彈窗請求用戶授權，但是現在不行了，官方要求必須要用戶點擊了一個open-type="getUserInfo"的按鈕才可以彈窗詢問，應該是為了增加用戶體驗吧
另外還要用bindgetuserinfo="go"來聲明用哪個函數來處理獲取用戶授權信息的事件
然後看看這次要增加那些樣式，打開welcome.wxss文件，增加下面這些樣式
Page {
width: 100%;
height: 100%;
background-color: white;
}
.container{
width: 100%;
height: 100%;
background-color: #aac4d5;
background-image: url('https://6163-acctbook-ulude-1300405024.tcb.qcloud.la/backgrounds/welcom_top.jpg?sign=476f7d231fc91109134ef3262a1ce593&t=1571553179'), url('https://6163-acctbook-ulude-1300405024.tcb.qcloud.la/backgrounds/welcom_bottom.jpg?sign=dbcc8cf56e6d8dde672d97abb58e397d&t=1571557522');
background-size: contain,60%;
background-position: top center, bottom center;
background-repeat: no-repeat;
}
.goBtn{
width: 256rpx;
height: 256rpx;
border-radius: 50%;
border: 1px solid black;
position: absolute;
top: 35%;
left: 50%;
margin-left: -128rpx;
background-color: white;
background-image: url('https://6163-acctbook-ulude-1300405024.tcb.qcloud.la/icon/goBtn.jpg?sign=0864daa96fdc071bcbfaec1821a2fab4&t=1571555170');
background-size: 90%;
background-repeat: no-repeat;
background-position: center;
}
這裡的圖片鏈接都是存在我的雲存儲空間的，可以根據前面講過的雲存儲的方式自行進行替換
其中樣式.container用了兩個背景圖片，一個放在頂部，一個放在底部；.goBtn用left: 50%;和margin-left: -128rpx;（數值為自身寬度的一半）來實現水平居中，其餘的都是普通樣式了
有一點要說一下，每次我們新建page時，系統都會將新page的路徑默認放到app.json的pages的最後面
這個pages裡面描述了我們所有頁面的路徑，其中第一個就是主界面，所以我們在調試界面的過程中可以把要調試的界面放在第一個，這樣每次一打開就是這個界面了，app.json下面還有關於window的配置，暫時就用默認的就行
把pages裡的路徑調換一下順序
最後再看下welcome.js文件，因為這個頁面就一個功能——引導用戶授權，所以用不著data和各個生命週期函數，統統刪掉就行
然後添加我們需要的代碼，就一個函數
函數里就判斷了用戶是否進行授權，如果授權成功就跳轉到之前寫的index界面
還有對應index.js也要改動一下，首先把onLoad函數里的代碼提到一個新的函數里，如mockData（圖片沒有截完，跟之前代碼一樣）
然後在onLoad函數里添加新的邏輯，對用戶是否授權進行判斷，如果授權成功就生成模擬數據並彈窗一條歡迎信息，否則就跳轉到welcome界面
onLoad: function (options) {
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: res => {
//新建用戶信息或者查詢已有信息
this.mockData()
wx.showToast({
title: "歡迎你," + res.userInfo.nickName,
image:'/images/smile.png'
})
}
})
} else {
wx.redirectTo({
url: '../welcome/welcome',
})
}
}
})
}
wx.getSetting是獲取所有授權信息的系統函數，比如用戶信息，地理位置，手機號等，然後再判斷是否已經授權使用用戶信息
別忘了把app.json的pages順序改回來
編譯運行，不出意外會跳轉到welcome界面，然後點擊GO按鈕，會彈出詢問是否授權
拒絕就會停留在這個界面，允許的話就會跳轉到index頁面，並且彈出一條問候信息
今日份開發到此結束
關鍵字: background-image 賬本 雲存儲
