微信小程序登錄與注冊功能的實現(xiàn)詳解
小程序中的登錄
在小程序中有一個概念叫openid，這個相當于登錄小程序用戶的唯一標識，每個微信用戶都不同。那要如何拿到用戶的唯一標識呢？在微搭低代碼中是通過調(diào)用系統(tǒng)的api來獲取的
let userinfo = await app.utils.getWXContext()
我們通過這行代碼的調(diào)用來獲取到用戶的唯一標識，獲取到之后我們其他頁面也需要使用，那就需要把他存起來。全局變量的作用域是所有頁面都可見，所以我們需要在變量中定義一個全局變量叫openid
在低碼編輯器中如果需要使用全局變量的，是需要通過變量的路徑來訪問，我們這里的路徑是
$app.dataset.state.openid
既然變量已經(jīng)定義了，我們就可以將獲取到的用戶信息賦值給全局變量
app.dataset.state.openid = userinfo.OPENID
賦值語句是用=號來表達，=號左邊的是需要賦值的變量，右邊是賦予的具體的值。我們這里的userinfo是一個對象，使用了.的語法來獲取其中的一個屬性，OPENID 來賦值給全局變量。
拿到openid其實就算實現(xiàn)了用戶的登錄，然后我們可以使用openid作為查詢條件，去我們的用戶數(shù)據(jù)源去加載數(shù)據(jù)。如果加載到了，我們就將獲取到的用戶信息再賦值給全局變量。目的是如果已經(jīng)注冊過的用戶不再繼續(xù)往數(shù)據(jù)源里寫入數(shù)據(jù)，而是直接展示。
const result = await app.cloud.callModel({
name: 'user_ev6j94p',
methodName: 'wedaGetRecords',
params: {
"where": [
{
"key": "openid",
"rel": "eq",
"val": app.dataset.state.openid
}
]
}
})上邊代碼的意思是，訪問user_ev6j9rp數(shù)據(jù)源，調(diào)用數(shù)據(jù)源的wedaGetRecords方法，入?yún)⑹莖penid=全局變量獲取到的openid。key是你的查詢條件，eq表示做相等匹配，匹配的值是從全局變量里獲取。
那如何來判斷是否找到了呢？方法執(zhí)行的返回結(jié)果是一個對象，它有一個屬性叫total，表示查詢到多少條數(shù)據(jù)。我們就可以通過判斷這個記錄總數(shù)是否大于等于1來判斷用戶是否已經(jīng)存在了。
if (result.total >= 1) {
app.dataset.state.imageurl = result.records[0].imageUrl
app.dataset.state.userid = result.records[0]._id
app.dataset.state.islogin = true
}
如果存在，那么我就給全局變量賦值，分別給用戶的頭像賦值，用戶的數(shù)據(jù)標識賦值，還有就是給是否注冊賦予為真的結(jié)果。這三個全局變量的定義如下：
還有就是考慮上述的代碼在哪執(zhí)行，因為我們一打開小程序就要加載用戶信息，所以應(yīng)該是在全局生命周期函數(shù)里執(zhí)行
我們需要有兩個地方都執(zhí)行加載，一個是小程序一啟動時候，onAppLanch，另外一個就是小程序再次打開的時候onAppShow方法中。全部代碼如下：
/**
* 可通過 app 獲取或修改全局應(yīng)用的 變量 狀態(tài) 等信息
* 具體可以console.info 在編輯器Console面板查看更多信息
* 如果需要 async-await，請在方法前 async
**/
//import updateManager from './common/updateManager';
export default {
async onAppLaunch(launchOpts) {
//console.log('---------> LifeCycle onAppLaunch', launchOpts)
let userinfo = await app.utils.getWXContext()
app.dataset.state.openid = userinfo.OPENID
const userInfo = await $app.auth.getUserInfo();
console.log('openid:', app.dataset.state.openid);
const result = await app.cloud.callModel({
name: 'user_ev6j94p',
methodName: 'wedaGetRecords',
params: {
"where": [
{
"key": "openid",
"rel": "eq",
"val": app.dataset.state.openid
}
]
}
})
if (result.total >= 1) {
app.dataset.state.imageurl = result.records[0].imageUrl
app.dataset.state.userid = result.records[0]._id
app.dataset.state.islogin = true
}
console.log('total:', result.total);
},
async onAppShow(appShowOpts) {
//console.log('---------> LifeCycle onAppShow', appShowOpts)
//updateManager();
let userinfo = await app.utils.getWXContext()
app.dataset.state.openid = userinfo.OPENID
const userInfo = await $app.auth.getUserInfo();
console.log('openid:', app.dataset.state.openid);
const result = await app.cloud.callModel({
name: 'user_ev6j94p',
methodName: 'wedaGetRecords',
params: {
"where": [
{
"key": "openid",
"rel": "eq",
"val": app.dataset.state.openid
}
]
}
})
if (result.total >= 1) {
app.dataset.state.imageurl = result.records[0].imageUrl
app.dataset.state.userid = result.records[0]._id
app.dataset.state.islogin = true
}
console.log('total:', result.total);
},
onAppHide() {
//console.log('---------> LifeCycle onAppHide')
},
onAppError(options) {
//console.log('---------> LifeCycle onAppError', options)
},
onAppPageNotFound(options) {
//console.log('---------> LifeCycle onAppPageNotFound', options)
},
onAppUnhandledRejection(options) {
//console.log('---------> LifeCycle onAppUnhandledRejection', options)
}
}用戶注冊
用戶登錄的問題解決了之后，就是要考慮用戶的注冊問題。在微搭低代碼獲取用戶信息提供了對應(yīng)的組件，我們可以往頁面中添加相應(yīng)的組件
這個組件使用的時候要注意右側(cè)的屬性面板里的信息用途必須填寫，否則點擊按鈕無法彈出授權(quán)按鈕來。
要想讓用戶信息寫入數(shù)據(jù)源中，我們需要給組件綁定事件，我們這里綁定的是用戶授權(quán)信息成功這個事件
綁定的時候要選擇自定義方法
這個方法要我們自己定義，主要是將用戶的授權(quán)信息寫入數(shù)據(jù)源中
export default async function({event, data}) {
console.log(event.detail.avatarUrl)
const result = await app.cloud.callModel({
name:'user_ev6j94p',
methodName:'wedaCreate',
params:{
openid:app.dataset.state.openid,
nickName:event.detail.nickName,
imageUrl:event.detail.avatarUrl
}
})
$app.dataset.state.imageurl = event.detail.avatarUrl
$app.dataset.state.userid = result._id
console.log($app.dataset.state.userid)
$app.dataset.state.islogin = true
}寫入方法本身不復雜，粉絲在照著教程做的時候最大的問題是發(fā)現(xiàn)，點擊授權(quán)按鈕時候按鈕不自動消失，可以反復注冊。第二個是頭像沒有自動顯示。
要解決上邊的問題，首先需要給注冊按鈕綁定條件展示。我們在登錄功能里定義了一個全局變量islogin。如果未注冊之前，這個變量的值是false，注冊之后就變成了true。我們給注冊按鈕的條件展示綁定表達式，對islogin取一下反就可以
!app.dataset.state.islogin
用戶的頭像我們可以直接從全局變量里綁定
用戶信息修改
當把用戶信息寫入之后，后續(xù)可能還有修改的需求，這就要求在頁面點擊修改按鈕時候?qū)⒂脩舻臄?shù)據(jù)標識傳入修改頁面
數(shù)據(jù)綁定的時候我們從全局變量里選擇。有的粉絲可能會有疑問，你這個userid是怎么有值呢？分為兩種情況，第一種是用戶剛注冊的時候就直接點修改，這個時候我們是在注冊的自定義方法呢獲取的用戶的數(shù)據(jù)標識
$app.dataset.state.userid = result._id
第二種情況是在下一次啟動小程序我們在全局生命周期里加載的用戶的數(shù)據(jù)標識
app.dataset.state.userid = result.records[0]._id
這樣就保證點擊修改信息時候有值。當然還有一種情況是用戶不點擊注冊按鈕直接點擊修改個人信息，這種情況數(shù)據(jù)庫是不允許提交的，報一個錯也行。
然后就是在修改界面我們可以直接使用表單容器來實現(xiàn)個人信息的修改
這里注意的是我們的數(shù)據(jù)標識是綁定我們頁面定義的參數(shù)變量即可
總結(jié)
我們本篇詳細的分解了一下用戶的登錄及注冊功能，這兩個場景在小程序開發(fā)中還是挺常見的，關(guān)鍵是要概念清晰，設(shè)置準確。把這個搭建好了，后邊結(jié)合角色授權(quán)的功能就可以按照自己的需要進行功能拓展了。如果覺得有用，點贊、關(guān)注加評論呀。
到此這篇關(guān)于微信小程序登錄與注冊功能的實現(xiàn)詳解的文章就介紹到這了,更多相關(guān)小程序登錄與注冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)文字向下滾動的方法,以一個完整實例形式詳細分析了html頁面布局、css樣式及對應(yīng)的js滾動功能實現(xiàn)技巧,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)文字滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)文字滾動的效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
xmlplus組件設(shè)計系列之路由（ViewStack)（7）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設(shè)計系列之路由，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
動態(tài)添加js事件，主要是不用具體指定位置的事件，這種動態(tài)添加事件的方法比較方便，并可以擴展等。2009-03-03
這篇文章主要介紹了JS引用傳遞與值傳遞的區(qū)別與用法,結(jié)合實例形式較為詳細的對比分析了javascript引用傳遞與值傳遞的原理、區(qū)別、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)圖片輪播組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本篇文章主要介紹了js實現(xiàn)延遲加載的幾種方法，js的延遲加載有助與提高頁面的加載速度，主要介紹了3種方法，有興趣的可以了解一下2017-04-04
這篇文章主要為大家詳細介紹了JavaScript表單驗證，重點介紹了E-mail驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了JavaScript的9種繼承實現(xiàn)方式歸納,本文講解了原型鏈繼承、原型繼承（非原型鏈）、臨時構(gòu)造器繼承、屬性拷貝、對象間繼承等繼承方式,需要的朋友可以參考下2015-05-05