微信小程序獲取用戶信息的兩種方法wx.getUserInfo與open-data實(shí)例分析
本文實(shí)例講述了微信小程序獲取用戶信息的兩種方法wx.getUserInfo與open-data。分享給大家供大家參考，具體如下：
在此之前，小程序獲取微信的頭像，昵稱之類的用戶信息，我用的都是wx.getUserInfo，例如：
onLoad: function (options) {
var that = this;
//獲取用戶信息
wx.getUserInfo({
success: function (res) {
console.log(res);
that.data.userInfo = res.userInfo;
that.setData({
userInfo: that.data.userInfo
})
}
})
},
wx.getUserInfo需要用戶授權(quán)scope.userInfo，也就是那個(gè)授權(quán)彈窗。
但是！?。≈攸c(diǎn)來(lái)了，自從微信接口有了新的調(diào)整之后 這個(gè)wx.getUserInfo()便不再出現(xiàn)授權(quán)彈窗了，需要使用button做引導(dǎo)~
<!--wxml-->
<!-- 需要使用 button 來(lái)授權(quán)登錄 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權(quán)登錄</button>
<view wx:else>請(qǐng)升級(jí)微信版本</view>
js：
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 查看是否授權(quán)
wx.getSetting({
success: function(res){
if (res.authSetting['scope.userInfo']) {
// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
}
})
}
}
})
},
bindGetUserInfo: function(e) {
console.log(e.detail.userInfo)
}
})
這就是等于一步變兩步了~現(xiàn)在用button的話 可以在產(chǎn)品上多加引導(dǎo)，不會(huì)顯得那么突兀的出來(lái)一個(gè)彈窗了
然鵝，如果你僅僅只是想展示用戶信息的話，那便使用open-data 吧，如下：
<!-- 如果只是展示用戶頭像昵稱，可以使用 <open-data /> 組件 --> <open-data type="userAvatarUrl"></open-data> <open-data type="userNickName"></open-data>
只需要這兩行wxml的代碼，便可展示微信昵稱和頭像，是不是很驚喜！
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
innerHTML innerText textContent使用區(qū)別示例詳解
這篇文章主要為大家介紹了innerHTML innerText textContent使用區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
一個(gè)簡(jiǎn)單的js漸顯(fadeIn)漸隱(fadeOut)類
最近發(fā)現(xiàn)項(xiàng)目用的表單驗(yàn)證不好使，干脆一邊參考人家的一邊自己寫(xiě)了一個(gè)。在驗(yàn)證有錯(cuò)誤返回提示信息用到漸顯(fadeIn)漸隱(fadeOut)過(guò)渡(因?yàn)闉g覽器的效率實(shí)在太高了，一下就蹦了出來(lái)~~)；2010-06-06
Bootstrap每天必學(xué)之標(biāo)簽頁(yè)（Tab）插件
Bootstrap每天必學(xué)之標(biāo)簽頁(yè)（Tab）插件，通過(guò)這個(gè)插件您可以把內(nèi)容放置在標(biāo)簽頁(yè)或者是膠囊式標(biāo)簽頁(yè)甚至是下拉菜單標(biāo)簽頁(yè)中，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript實(shí)現(xiàn)的鼠標(biāo)跟隨特效示例【2則實(shí)例】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的鼠標(biāo)跟隨特效,結(jié)合2則實(shí)例形式分析了javascript針對(duì)鼠標(biāo)事件的響應(yīng)、計(jì)算、處理及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
JavaScript實(shí)現(xiàn)點(diǎn)擊自動(dòng)選擇TextArea文本的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊自動(dòng)選擇TextArea文本的方法,涉及javascript中focus()、select()方法的使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-07-07
JavaScript、jQuery與Ajax的關(guān)系
這篇文章主要介紹了 JavaScript、jQuery與Ajax的關(guān)系的相關(guān)資料,需要的朋友可以參考下2016-01-01
JavaScript數(shù)組去重的五種方法及其他細(xì)節(jié)和拓展
JavaScript數(shù)組去重這個(gè)問(wèn)題,經(jīng)常出現(xiàn)在面試題中,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重的五種方法及其他細(xì)節(jié)和拓展的相關(guān)資料,文中通過(guò)實(shí)例代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
使用JavaScript獲取Request中參數(shù)的值方法
下面小編就為大家?guī)?lái)一篇使用JavaScript獲取Request中參數(shù)的值方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
這是關(guān)于asp知識(shí)整理的第二份筆記，只有把最基礎(chǔ)的問(wèn)題搞清楚了，才能更好的學(xué)習(xí)ASP編程。2015-09-09
這篇文章主要介紹了JS仿iGoogle自定義首頁(yè)模塊拖拽特效的方法,實(shí)例分析了頁(yè)面的布局及拖拽的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02