//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.userInfo
this.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}代表組件屬性的可選值
這裏還有一個大佬寫的博客，很詳細，可以多看看