濟南小程序開發公司小貓科技:專注微信開發,濟南小程序開發,濟南微信小程序定制開發等業務!
手機版手機網站二維碼 微信版 微信二維碼 業務咨詢電話:159-5318-4521

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

發表于:19-10-20 20:48 閱讀()

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

接著上一篇。眾所周知,共享賬本是一個需要登錄才能用的小程序,所以這次我們來加個登錄界面以及相應的功能。首先是寫一個登錄界面,像下面這個一樣的(最好別像這個一樣,我真的是一點都沒有藝術細胞啊…)

花錢要記賬小程序

別看他丑,我也花了不少功夫的,你看那標題幾個字,是不是還是有點不一樣的!閑話少說,開始上代碼

還是先建文件夾吧!新建一個目錄叫welcome(愛起啥名起啥名),然后在這個目錄下新建一個page

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

打開welcome.wxml文件,刪掉原有的,添加以下代碼

<view class="container">
 <button class="goBtn" open-type="getUserInfo" bindgetuserinfo="go"> 
 </button>
</view>

沒錯,就一個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頁面,并且彈出一條問候信息

記賬小程序開發

今日份開發到此結束




top
湖北快三技巧大全