wx小程序(2) - 用戶登錄

在本篇文章所講的用戶登錄屈扎,包括以下三點(diǎn):

  • open-data獲取用戶某個信息
  • wx.getUserInfo獲取用戶基本信息
  • 調(diào)用微信wx.login接口禀挫,實(shí)現(xiàn)服務(wù)器端獲取openid登錄

用戶頭像和昵稱對于我們開發(fā)小程序幾乎算是剛需,那么我們應(yīng)該怎么樣正確高效的獲取&利用它們呢?

第一種:open-data獲取用戶某個信息

其實(shí)可以將open-data看作圖片或字符串,想要控制樣式在外層加上view標(biāo)簽以及相應(yīng)的class即可。

image.png

相比之前微信公眾號獲取用戶基本信息的方式帜消,這個方案還是比較走心的,如果一些小程序只是對用戶的頭像浓体、昵稱等基本信息中的某個有需求的話就可以直接拿到了泡挺,不需要和以前一樣大費(fèi)周章的調(diào)用授權(quán)去拿回來一堆用不上的東西。

還有就是這里有個小坑命浴,open-data標(biāo)簽是個行元素娄猫,如果要控制這個標(biāo)簽,例如說頭像的大小時咳促,就需要修改一下display屬性了

還有就是獲取手機(jī)號的方法了稚新,這個算是敏感數(shù)據(jù)吧,所以被小程序單獨(dú)弄出來了跪腹,
并且獲取微信用戶綁定的手機(jī)號褂删,需先調(diào)用wx.login接口。

因?yàn)樾枰脩糁鲃佑|發(fā)才能發(fā)起獲取手機(jī)號接口冲茸,所以該功能不由 API 來調(diào)用屯阀,需用 <button> 組件的點(diǎn)擊來觸發(fā)。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> </button> 

Page({ 
    getPhoneNumber: function(e) { 
        console.log(e.detail.errMsg) 
        console.log(e.detail.iv) 
        console.log(e.detail.encryptedData) 
    } 
}) 

微信小程序文檔提到
目前該接口針對非個人開發(fā)者轴术,且完成了認(rèn)證的小程序開放(不包含海外主體)难衰。需謹(jǐn)慎使用,若用戶舉報(bào)較多或被發(fā)現(xiàn)在不必要場景下使用逗栽,微信有權(quán)永久回收該小程序的該接口權(quán)限盖袭。
所以使用時還是要注意一下的

第二種:wx.getUserInfo獲取用戶基本信息

這個接口更新過可以直接使用了

wx.getUserInfo({
      success: function (res) {
        console.table(res)
      },
      fail: function (res) { },
      complete: function (res) { },
    })
image.png

因?yàn)槲⑿呕A(chǔ)庫更新,取消通過api調(diào)用getUserInfo的能力彼宠,并且不會出現(xiàn)授權(quán)彈框了鳄虱,如果需要,可以使用button組件的開放能力[open-type]去調(diào)用getUserInfo的文檔方法凭峡。

這個需要注意的是
請確保wx.login早于getUserInfo拙已,不僅是代碼執(zhí)行層面的早,最好是login回調(diào)成功之后才去getUserInfo摧冀,不然可能會出現(xiàn)后端解密失敗的情況倍踪,導(dǎo)致登錄失敗系宫。

第三種:調(diào)用微信wx.login接口,實(shí)現(xiàn)服務(wù)器端獲取openid登錄

wx.login({
  success: res => {
    console.log(res)
    // res = {errMsg: "login:ok", code: "×××××××××××××××××"}
    // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
    wx.request({
      url: '/wxapi/openid',
      data: {
        code: data.code
      },
      success: function (res) {
        console.log('拉取openid成功', res)
        wx.showModal({
          title: '獲取信息',
          content: JSON.stringify(res.data),
          showCancel: false,
          confirmText: '確定'
        })
        self.globalData.openid = res.data.openid
      },
      fail: function (res) {
        console.log('拉取用戶openid失敗建车,將無法正常使用開放接口等服務(wù)', res)
      }
    }
})

就可以獲取到openid了扩借,作為微信開發(fā)的都知道,微信的很多接口都需要以openid去作為參數(shù)請求接口的癞志。


image.png

還有就是關(guān)于接口的問題
弄個后臺 請求一下微信的接口

'https://api.weixin.qq.com/sns/jscode2session' + 
        '?appid=' + config.appid + 
        '&secret=' + config.secret + 
        '&js_code=' + code + 
        '&grant_type=authorization_code'

傳進(jìn)去一個code往枷,然后在加上自己的appid及密鑰就可以了

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市凄杯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌秉宿,老刑警劉巖戒突,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異描睦,居然都是意外死亡膊存,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進(jìn)店門忱叭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來隔崎,“玉大人,你說我怎么就攤上這事韵丑【糇洌” “怎么了?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵撵彻,是天一觀的道長钓株。 經(jīng)常有香客問我,道長陌僵,這世上最難降的妖魔是什么轴合? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮碗短,結(jié)果婚禮上受葛,老公的妹妹穿的比我還像新娘。我一直安慰自己偎谁,他們只是感情好总滩,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著搭盾,像睡著了一般咳秉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鸯隅,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天澜建,我揣著相機(jī)與錄音向挖,去河邊找鬼。 笑死炕舵,一個胖子當(dāng)著我的面吹牛何之,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播咽筋,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼溶推,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了奸攻?” 一聲冷哼從身側(cè)響起蒜危,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎睹耐,沒想到半個月后辐赞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡硝训,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年响委,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片窖梁。...
    茶點(diǎn)故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡赘风,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出纵刘,到底是詐尸還是另有隱情邀窃,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布彰导,位于F島的核電站蛔翅,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏位谋。R本人自食惡果不足惜山析,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望掏父。 院中可真熱鬧笋轨,春花似錦、人聲如沸赊淑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽陶缺。三九已至钾挟,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間饱岸,已是汗流浹背掺出。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工徽千, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人汤锨。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓双抽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親闲礼。 傳聞我的和親對象是個殘疾皇子牍汹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內(nèi)容