本系列教程是針對粉絲的變現教程，還不是粉絲的可以關注我并且到社區：https://bbs.csdn.net/topics/603436232

進行打卡，不是老粉的也可以獲取最終的技術變現學習，最終還有詳細的變現教程等你來。

前言

《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》
本系列文章參考《微信小程序開發實戰》
教程出完后將會有變現直播，請關注CSDN社區活動公告：https://bbs.csdn.net/forums/A757291228?spm=1001.2014.3001.6682&typeId=19380。

在社區中發文每周將會在活躍前十送出：

• 一本實物書籍
• 多份實物小禮品
• 每月送出機械鍵盤等獎勵。

教程所需

由于小程序開發需要一定的基礎，這些基礎需要提前掌握，本教程只對小程序開發進行零基礎說明。

• 微信小程序開發工具，下載鏈接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

• JavaScript基礎

• HTML基礎

目錄 持續更新：

小程序的 HelloWord 01《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》
小程序獲取頭像試試水 02《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》
小程序仿微信發現頁 03《 程序員變現指南之 微信&QQ 小程序 真的零基礎開發寶典》

一、簡單布局

現在開始寫一個獲取微信頭像的小程序，第一步需要對這個頁面布局。
顯示用戶頭像需要一個圖片顯示的區域，在小程序中需要使用<image>組件；顯示獲取的用戶的用戶名需要使用<text>組件；在此基礎上還需要一個按鈕，點擊按鈕獲取用戶信息，需要使用一個<button>組件。

我們回到 index.wxml 文件中，在文件中添加如下代碼：

<view>
<image></image>
<text></text>
<button>獲取用戶信息</button>
</view>

以上代碼中 view 標簽是類似于 div 的標簽，作為一個包裹容器。
保存后可以在預覽區看到頁面顯示效果：

這時我們回到代碼中，其中<image></image>用于顯示圖片，在此沒有任何信息，所以在預覽區中并無任何顯示，<text></text>標簽同樣如此；在按鈕標簽<button>獲取用戶信息</button>中已出現了與標簽內容一致的顯示效果。

接下來我們在 index.js 中為這個按鈕增加邏輯，在點擊后獲取用戶信息。

二、信息獲取

此時我們在按鈕上綁定一個事件：

<button bindtap="getUserProfile">獲取用戶信息</button>

以上代碼中 bindtap 表示為這個按鈕綁定一個點擊事件，響應的函數是 getUserProfile。

getUserProfile 是小程序的一個開放接口，用于獲取用戶信息（基礎庫 2.10.4 開始支持，低版本需做兼容處理。文檔位置：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html）。

但是這個接口需要我們傳遞某一些參數，如下圖所示：

其中desc是必傳參數，在此處沒必要搞清楚其它參數含義。
咱們需要在 index.js 中編寫此函數，以至于讓我們可以傳參和獲取用戶信息。

點擊 index.js 在 Page 代碼中增加我們需要的函數：

getUserProfile() {wx.getUserProfile({desc: '用戶注冊',success: res => {console.log("獲取用戶信息成功", res)},fail: res => {console.log("獲取用戶信息失敗", res)}})},

getUserProfile 函數中使用 wx.getUserProfile 表示調用公共接口，desc 為需要傳遞的參數，desc 所填寫的內容為為什么需要調用這個接口獲取信息，或者說我需要填寫的信息用于什么用途。在此處是用于“用戶注冊”。

接著使用 success 表示調用成功后，成功獲取用戶信息后需要執行的流程，在此使用 console.log 打印出接收到的用戶信息：

success: (res) => {console.log("獲取用戶信息成功", res)
},

其中success 所接收的 res 為獲取用戶信息后得到的結果。

既然有成功獲取信息的流程那么必然有失敗獲取用戶信息后所需要執行的流程，在此編寫了一個失敗后流程 fail：

fail: res => {console.log("獲取用戶信息失敗", res)
}

當然所接收的參數名 res 可以自己設定，例如如下示例：

success: userinfo => {console.log("獲取用戶信息成功", userinfo)
},
fail: failinfo => {console.log("獲取用戶信息失敗", failinfo)
}

接下來點擊獲取用戶信息將會提示是否允許，點擊允許：

接著就會在 console 中打印出用戶信息：

此時我們可以從信息中發現，在整個結果 res 中，userInfo 節點是用戶信息，那么只需要在console.log 中使用 res.userInfo 便可以獲取到 userinfo 的信息：

console.log("獲取用戶信息成功", res.userInfo);

此時我們可以在 index.js 中創建一個變量存儲該 userInfo 的值，如下圖黃色框選位置，接著在 success 的流程中對該變量進行賦值：

data: {userInfo: null},getUserProfile() {wx.getUserProfile({desc: '用戶注冊',success: res => {console.log("獲取用戶信息成功", res.userInfo);this.setData({userInfo: res.userInfo});},fail: res => {console.log("獲取用戶信息失敗", res);}})},

以上代碼中 data:{} 表示設置變量，userInfo 是其中的變量，該變量的初始值為 null，接著再到流程中使用 this.setData 表示設置當前文件中的變量值，在 setData 中設置 userInfo的值為 res 結果中的 userInfo 節點值，此時就獲得了userInfo 值，再將該值與在前端進行獲取即可。

此時我們保存后測試數據，將會得到 userInfo 的信息：

三、綁定數據

接下來我們需要修改一下 index.wxml 文件的標簽：

<view><image src="{{userInfo.avatarUrl}}"></image><text>{{userInfo.nickName}}</text><button bindtap="getUserProfile">獲取用戶信息</button>
</view>

此時在前端頁面中新增了上圖框選的代碼。從以上 {{userInfo.avatarUrl}} 代碼可知 userInfo 是index.js 文件中的變量，而 avatarUrl 是 userInfo 變量所保存的那個節點中的一個數據；由此可知，獲取后臺數據只需要使用兩對花括號中使用變量加一個小數點便可以獲取對應的值；在此 avatarUrl 表示一個所獲取到的用戶頭像值，nickName 表示用戶的昵稱，由此就獲取到了用戶的信息。

在代碼 <image src="{{userInfo.avatarUrl}}"></image> 中，src 屬性表示這個圖片的來源，直接賦值后即可顯示頭像。

運行后的效果如下：

四、樣式布局

此時我們覺得整個頁面并不好看，可以在 wxss 中添加一些樣式給整個布局更加美觀。

此時先調節圖片大小，在 index.wxss 中添加如下樣式：

我們需要要注意的是 10vh 中的 vh 是視窗高度的意思。在微信小程序中 1vh 表示視窗高度的 1%；1vw表示一個視窗寬度的 1%。你可能問我為什么寬度不設置成 10vw？那是因為寬度高度肯定是不一致的，不是用同一個相同的度量去設置寬度我此時的圖片就肯定不是一個圓。隨后我設置了 border-radius 表示圓角設置，50% 會讓我的圖片變成圓角，這樣就是圓形頭像了。

效果如下：

接著在 wxss 中創建一個類樣式 .flestyle：

.flexstyle{height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
}

以上 flexstyle 中主要設置了一個彈性伸縮盒，其中 height：100vh 表示這個 view 高度占滿 100% 視窗； display:flex 表示將對象作為彈性伸縮盒顯示；flex-direction: column; 表示確定主軸方向為垂直，可以理解為這個 view 中的布局為垂直布局；align-items: center; 表示其中的元素與交叉軸的中點對齊，由于當前布局為 column 垂直布局可以理解 align-items: center; 為居中對齊；justify-content: space-between; 表示元素都等間距顯示。

接著在前端代碼處使用 class 對其引用：

顯示結果如下：

發現并不好看，此時我們可以選擇 justify-content 的屬性值為 space-around，表示每個項目兩側的間隔相等，效果如下：

感覺好了很多，此時可以更改一下頭像大小，或者字體大小使頁面更美觀。
完整樣式如下：

image{width: 40vw;height: 40vw;border-radius: 50%;
}text{font-size: 70rpx;
}.flexstyle{height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
}

效果如下：