?

//index.js

//index.js //獲取應用實例 const app = getApp()Page({data: {motto: 'diligent is the short cut',//**motto 格言的意思 這里是你要顯示在下面的東西userInfo: {},hasUserInfo: false,//**獲取到用戶信息標志canIUse: wx.canIUse('button.open-type.getUserInfo')//* boolean wx.canIUse(string schema) 判斷小程序的API，回調，參數，組件等是否在當前版本可用。//*string schema 使用 ${API }.${method }.${param }.${options } 方式來調用//*或者 ${component }.${attribute }.${option } 方式來調用 （這里用的是這個--> open-type屬性為getUserInfo的button組件},//事件處理函數//**在組件中綁定一個事件處理函數。//**如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。bindViewTap: function() {wx.navigateTo({/*wx.navigateTo(OBJECT) 保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。 */url: '../logs/logs'})},//**頁面加載之后立即執行一段 JavaScript：//即 一旦完全加載所有內容（包括圖像、腳本文件、CSS 文件等），就執行一段腳本。onLoad: function () {if (app.globalData.userInfo) {this.setData({/* app.globalData.userInfo 能獲取到些啥？ *//* 官方文檔上有詳情 https://developers.weixin.qq.com/miniprogram/dev/api/open.html#wxgetuserinfoobject*/userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回// 所以此處加入 callback 以防止這種情況app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在沒有 open-type=getUserInfo 版本的兼容處理wx.getUserInfo({//****************如果獲取用戶信息成功success: res => {app.globalData.userInfo = res.userInfo//******結果信息里 存入獲取到的用戶信息this.setData({//******************設置用戶信息userInfo: res.userInfo,hasUserInfo: true})}})}},//①function（e）傳值//②console.log(e)查看事件傳的值有哪些getUserInfo: function(e) {console.log(e)//console.log在console窗口輸出信息（用于輸出普通信息） 就是你編譯后下面窗口顯示的信息app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})} })

<!--index.wxml-->

<!--index.wxml--> <view class="container"><view class="userinfo"><!--在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：--> <!--當條件成立小程序頁面才會渲染這個button，否則就會在頁面上渲染下面的wx:else中的WXML代碼--> <!--因為需要用戶主動觸發才能打開 APP，所以該功能不由 API 來調用，需要用 open-type 的值設置為 getUserInfo 的 <button> 組件的點擊來觸發。--> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 點擊獲取頭像昵稱 </button><block wx:else> <!--wx:else前面有個block標簽，也很好理解，因為 wx:if/wx:else 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 <block/> 標簽將多個組件包裝起來由于wx:else里有2個標簽（image和text），所以需要用block包起來做為一個整體進行渲染，所以把block理解成塊級元素即可--><!--在組件中綁定一個事件處理函數--><!--如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數--><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block><!--</block>不是組件 僅僅是一個包裝元素--></view><!--usermotto 這個類就是wxss的 但是好像沒有獲取到用戶個性簽名啊這個不知道什么情況。。。知道了，是會有彈窗的，因為需要用戶授權你大爺的--><view class="usermotto"><!--測試區--><!--<button open-type="usermotto" bindgetuserinfo="usermotto"> 點擊更改簽名 </button>--> <!--測試區--><!--測試區原始數據--><text class="user-motto">{{motto}}</text><!--測試區原始數據--></view> </view>

/**index.wxss**/

/**index.wxss**/ .userinfo {/*用戶信息的顯示（也就是昵稱和頭像Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。*/display: flex;/*按列方向適應 那么你的頭像和昵稱 就是上下顯示*//*flex-direction: column;*/flex-direction: column;/*按列方向適應 那么你的頭像和昵稱 就是左右顯示*//*flex-direction: row;*//*居中*/align-items: center;/*（個人添加的） 讓 頭像和昵稱 兩端對齊，項目之間的間隔都相等*/justify-content: space-between; }/*****userinfo-avatar 是化身的意思 就是你的頭像margin 就是頁邊距的意思寫css圓形時總是直接設置border-radius為50%border-radius的值是百分比的話，就相當于盒子的寬度和高度的百分比我們知道在一個正方形內做一個面積最大的圓形，這個圓的半徑就為正方形邊長的一半。所以border-radius為50%時，則會形成圓。100%一樣是實心圓，具體百度*/ .userinfo-avatar {width: 160rpx;height: 160rpx;/*margin 看下面.usermotto里*/margin: 20rpx;/*border-radius: 50%; 這個就是原來的圓形*//*border-radius: 60px 60px 0 60px; 花瓣形狀*/border-radius: 100%; }/*****userinfo-nickname 是昵稱的意思昵稱的顏色可以百度*/ .userinfo-nickname {/*color: #FF88C2; 粉色*/color: #551A8B; }/*****你要顯示的格言（helloword）的上邊 很奇怪 這個不應該是獲取來的咩 距離上方200個像素。外邊距并不是當前內容與DIV盒子的邊距，而是與外面的（網頁邊框）的距離。 如果是padding-top:57px. 這就是內邊距，與當前DIV盒子的距離*/ .usermotto {margin-top: 200px;color: #C71585;/*這里其實也可以設置顏色*/ }/* 照理說 應該還有用戶的其他不是很重要的信息 一般的話 1.extend extend 里有.gender */

app.json 不好注釋就來個截圖吧

"enablePullDownRefresh":true,（你們自己復制添加進去，我就不多截圖了）

添加這個字段的話才可以看到

這個字段的設置"backgroundColor": "#eeeeee",

原因是background需要下拉才能顯示這片區域

?

"backgroundTextStyle": "light",（或者dark）

是使得下拉刷新的loading樣式發生了改變，可以自行嘗試

?

其余的沒什么好解釋的，大家可以看看。

wx.canIUse(String)

判斷小程序的API，回調，參數，組件等是否在當前版本可用。
String參數說明：?使用${API}.${method}.${param}.${options}或者${component}.${attribute}.${option}方式來調用，例如：

*${API}代表 API 名字

*${method}代表調用方式，有效值為return,?success,?object,?callback
?

*${param}代表參數或者返回值

*${options}代表參數的可選值

*${component}代表組件名字

*${attribute}代表組件屬性

*${option}代表組件屬性的可選值

這里還有一個大佬寫的博客，很詳細，可以多看看

https://blog.csdn.net/wlwlwlwl015/article/details/78868624

總結

以上是生活随笔為你收集整理的微信小程序 获取用户信息 官网例程 详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。