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