首頁>技術>

先建資料夾吧!

新建一個目錄叫welcome(愛起啥名起啥名),然後在這個目錄下新建一個page

開啟welcome.wxml檔案,刪掉原有的,新增以下程式碼

<view>

<button 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也要改動一下,首先把函式裡的程式碼提到一個新的函式裡,如mockData(圖片沒有截完,跟之前程式碼一樣)

: function (options) {

wx.getSetting({

success: res => {

if (res.authSetting['scope.userInfo']) {

wx.getUserInfo({

success: res => {

//新建使用者資訊或者查詢已有資訊

this.mockData()

wx.showToast({

image:'/images/smile.png'

})

}

})

} else {

wx.redirectTo({

url: '../welcome/welcome',

})

}

}

})

}

wx.getSetting是獲取所有授權資訊的系統函式,比如使用者資訊,地理位置,手機號等,然後再判斷是否已經授權使用使用者資訊

別忘了把app.json的pages順序改回來

拒絕就會停留在這個介面,允許的話就會跳轉到index頁面,並且彈出一條問候資訊。

最新評論
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • Hunt Framework 2.2.0 釋出,穩定性得到全面提升