快捷導(dǎo)航

小程序?qū)崿F(xiàn)新用戶(hù)判斷并跳轉(zhuǎn)激活的方法

更新時(shí)間：2019年05月20日 15:23:39 作者：極樂(lè)叔

這篇文章主要介紹了小程序?qū)崿F(xiàn)新用戶(hù)判斷并跳轉(zhuǎn)激活的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

上周接了一個(gè)小項(xiàng)目賺點(diǎn)外快，原以為很簡(jiǎn)單結(jié)果被卡在一個(gè)小坑爬了好半天

它是一個(gè)供電力局使用的報(bào)修小程序，需要特定用戶(hù)在第一次使用時(shí)進(jìn)行激活操作，通俗的說(shuō)就是當(dāng)某用戶(hù)打開(kāi)時(shí)，判斷此用戶(hù)是否激活過(guò)，若未激活則進(jìn)入激活頁(yè)面，若已經(jīng)激活則直接進(jìn)入首頁(yè)面。

邏輯上很簡(jiǎn)單，但是在實(shí)現(xiàn)上碰到坑了。

上圖為已激活用戶(hù)或不需要激活的用戶(hù)打開(kāi)小程序后進(jìn)入的第一個(gè)頁(yè)面，下圖為未激活用戶(hù)打開(kāi)小程序后進(jìn)入的第一個(gè)頁(yè)面。

思考過(guò)程

"pages": [ "pages/index/index", "pages/active/active", "pages/index/add", "pages/my/my", "pages/mylist/mylist", "pages/home/home", "pages/rating/rating", "pages/login/mylogin", "pages/login/login", "pages/detail/detail", "pages/mylist/list", "pages/mylist/mydetail" ],

而在app.json中必須引入全部的頁(yè)面，且第一個(gè)引入的頁(yè)面為首頁(yè)面。

但是判斷邏輯必須要在用戶(hù)一打開(kāi)小程序后就進(jìn)行，但事實(shí)是必須先打開(kāi)index頁(yè)面（即上圖），所以按照微信小程序的生命周期，我首先想到的辦法是將判斷邏輯寫(xiě)在index頁(yè)的onload函數(shù)中。

在加載過(guò)程中進(jìn)行判斷，從而跳轉(zhuǎn)。

var currentUser = Bmob.User.current();
var currentUserId = currentUser.id;
var User = Bmob.Object.extend("_User");
var queryUser = new Bmob.Query(User);
  queryUser.get(currentUserId, {
   success: function (result) {
    console.log(result)
var status = result.attributes.status;
var usertype = result.attributes.usertype;
if (status==null&& usertype == 1) {
     wx.navigateTo({
      url: '/pages/active/active?lineid=' + lineid
})
}
},
   error: function (object, error) {
}
});

以上代碼就是我寫(xiě)入onload中的判斷邏輯，先獲取當(dāng)前用戶(hù)的id，從而進(jìn)入數(shù)據(jù)庫(kù)查詢(xún)，獲取此用戶(hù)的status狀態(tài)和userType類(lèi)型，只有status為false且userType為1時(shí)，才進(jìn)行跳轉(zhuǎn)激活。

但是實(shí)際在測(cè)試時(shí)發(fā)現(xiàn)一個(gè)始料未及被忽視的問(wèn)題。

wx.login({
success: function (res) {
 user.loginWithWeapp(res.code).then(function (user) {
var openid = user.get("authData").weapp.openid;
  console.log(user, 'user', user.id, res);
if (user.get("nickName")) {
// 第二次訪(fǎng)問(wèn)
   console.log(user.get("nickName"), 'res.get("nickName")');
var currentUser = Bmob.User.current();
var currentUserId = currentUser.id;
var User = Bmob.Object.extend("_User");
var queryUser = new Bmob.Query(User);
   queryUser.get(currentUserId, {
    success: function (result) {
var status = result.attributes.status;
var usertype = result.attributes.usertype;
     console.log(status);
},
    error: function (object, error) {
     console.log(result);
}
});
} else {
   wx.setStorageSync('status', false),
   wx.setStorageSync('usertype', 1),
//保存用戶(hù)其他信息
   wx.getUserInfo({
    success: function (result) {
var userInfo = result.userInfo;
var nickName = userInfo.nickName;
var avatarUrl = userInfo.avatarUrl;
var u = Bmob.Object.extend("_User");
var query = new Bmob.Query(u);
// 這個(gè) id 是要修改條目的 id，你在生成這個(gè)存儲(chǔ)并成功時(shí)可以獲取到，請(qǐng)看前面的文檔
     query.get(user.id, {
      success: function (result) {
// 自動(dòng)綁定之前的賬號(hào)
       result.set('nickName', nickName);
       result.set("userPic", avatarUrl);
       result.set("openid", openid);
       result.set("isbind", 0);
       result.set("status", false);
       result.set("usertype", 1);
       result.save();
}
});
     wx.setStorageSync('openid', openid)
     wx.setStorageSync('username', user.get("username"))
     wx.setStorageSync('userpic', avatarUrl)
     wx.setStorageSync('nickname', nickName)
}
});
}

}, function (err) {
  console.log(err, 'errr');
});
}
});

因?yàn)槲以赼pp.js中進(jìn)行了微信登錄，即獲取到了用戶(hù)授權(quán)信息后，將用戶(hù)的微信名、頭像以及初始化的userType和status寫(xiě)入數(shù)據(jù)庫(kù)中。以上為此邏輯的代碼。

故在用戶(hù)授權(quán)前，數(shù)據(jù)庫(kù)中此用戶(hù)的userType和status是空的，而這時(shí)候按照微信小程序的生命周期，第一個(gè)首頁(yè)面已經(jīng)加載完畢并顯示，即onload在判斷時(shí)，此用戶(hù)的userType和status狀態(tài)為空，則認(rèn)為此用戶(hù)無(wú)需激活。而用戶(hù)點(diǎn)完授權(quán)后，即使存入正確的userType和status已經(jīng)于事無(wú)補(bǔ)。

用戶(hù)第一次打開(kāi)小程序，可見(jiàn)此時(shí)頁(yè)面已經(jīng)加載完畢，但是用戶(hù)還未授權(quán)微信登錄

而這時(shí)候的用戶(hù)數(shù)據(jù)均為空

用戶(hù)點(diǎn)擊確定授權(quán)后才會(huì)寫(xiě)入數(shù)據(jù)，但這時(shí)候頁(yè)面的onload早已執(zhí)行完畢

只能再尋找其它的解決辦法。

解決過(guò)程

總結(jié)了一下剛才失敗的原因，是因?yàn)樵趫?zhí)行onload時(shí)，邏輯判斷語(yǔ)句并沒(méi)有取到正確的參數(shù)。所以要想辦法在onload函數(shù)執(zhí)行前，就傳入正確的參數(shù)。

于是嘗試另外一種方法，使用本地緩存進(jìn)行傳值判斷。

即用戶(hù)在一打開(kāi)小程序加載app.js時(shí)，先在本地緩存中將用戶(hù)的userType和status值存入，然后在index頁(yè)面的onLoad函數(shù)中使用判斷，這樣就不存在微信登錄授權(quán)的時(shí)間差。

于是需要在用戶(hù)第一次使用時(shí)進(jìn)行初始化參數(shù)并存入緩存以供onload函數(shù)判斷，而用戶(hù)如果不是第一次使用，則直接從數(shù)據(jù)庫(kù)中查找到此用戶(hù)并將此用戶(hù)的userType和status取出存入本地緩存，供onLoad函數(shù)判斷。

于是首先在app.js中加入以下兩行代碼進(jìn)行新用戶(hù)初始化緩存存入

wx.setStorageSync('status', false),
wx.setStorageSync('usertype', 1),

加入以下兩行代碼進(jìn)行老用戶(hù)獲取參數(shù)進(jìn)行緩存存入

queryUser.get(currentUserId, {
  success: function (result) {
var status = result.attributes.status;
var usertype = result.attributes.usertype;
   wx.setStorageSync('status', status)
   wx.setStorageSync('usertype', usertype)
   console.log(status);
},
  error: function (object, error) {
   console.log(result);
}
});

然后在index的onload函數(shù)中寫(xiě)入以下邏輯，進(jìn)行判斷。

var status = wx.getStorageSync('status')
var usertype = wx.getStorageSync('usertype')
// console.log(usertype)
if (!status &&!usertype) {
  wx.navigateTo({
   url: '/pages/active/active?lineid=' + lineid
})
} else if (status ==false && usertype == 1) {
  wx.navigateTo({
   url: '/pages/active/active?lineid=' + lineid
})
}

這里要注意，因?yàn)榭紤]到了緩存溢出的情況，多加了判斷status和userType非空的操作。

于是至此這個(gè)坑被完美的填了，從入坑到找坑到爬坑耗時(shí)兩小時(shí)。

總結(jié)

還是像上一篇文章說(shuō)的，這是一個(gè)填坑的過(guò)程，第一個(gè)吃螃蟹的人不光要被夾，還得告訴后人怎么撬開(kāi)螃蟹殼。

以上所述是小編給大家介紹的小程序?qū)崿F(xiàn)新用戶(hù)判斷并跳轉(zhuǎn)激活的方法詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: