第微信小程序?qū)崿F(xiàn)獲取用戶信息替換用戶名和頭像到首頁目錄?一、形成空白文件二、小程序頁面路徑配置三、修改小程序頁面四、與WXML玩耍1、插入文字2、插入圖片3、分割代碼五、與wxss玩耍1、處理圖片2、處理文字3、調(diào)整布局4、長度單位rpx（responsivepixel）:六、獲取用戶資料1、完善wxml2、結(jié)果輸出到界面3、優(yōu)化程序

?一、形成空白文件

1、點擊打開目錄

2、刪除除了project.config.json（項目配置文件）以外所有文件。

3、新建app.json

4、接下來我們在app.json中寫入配置

{}

5、保存，我們可以看到編譯器報錯，因為目前文件為空

二、小程序頁面路徑配置

1、首先在app.json中寫入

{

"pages":[

"pages/index/index"

}

第一個pages：指的是項目里面有哪些頁面；第二個pages：指的是pages目錄。

保存，一定要先保存要不然建好回車沒有反應(yīng)。

2、右擊pages新建目錄，命名為index，在index下新建pages命名為index

注意：需要在pages下新建目錄才能新建頁面。現(xiàn)在可以看到開發(fā)者工具新建的頁面，自動放入pages數(shù)組中。

在app.json中，pages數(shù)組是必填的。它規(guī)定小程序中所有頁面的地址，同時規(guī)定了小程序啟動時的首頁，就是pages數(shù)組的首位所指的頁面。

3、當(dāng)pages成功配置后，小程序就可以正常運行了（新建頁面文件后，小程序已經(jīng)正常運行無報錯了）。

但如果想要一些個性化配置，我們依然可以繼續(xù)修改app.json。

三、修改小程序頁面

修改app.json代碼如下：

{

"pages":[

"pages/index/index"

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":"#ff0000",

"navigationBarTitleText":"我的第一個小程序",

"navigationBarTextStyle":"white"

}

是不是看到變化了！

在app.json中，window用于設(shè)置小程序的狀態(tài)欄，導(dǎo)航條，標(biāo)題，窗口，背景色。

具體見/miniprogram/dev/reference/configuration/page.html

四、與WXML玩耍

1、插入文字

當(dāng)我們打開index文件夾下面的index.wxml文件，可以看到開發(fā)者工具在自動生成頁面的時候，默認(rèn)生成代碼如下。

pages/index/index.wxml

textpages/index/index.wxml/text

第一行是注釋，對代碼解釋說明。計算機(jī)執(zhí)行程序會自動跳過注釋編譯。第二行代碼前后都是由尖括號擴(kuò)起來部分中間即是pages/index/index.wxml。

在小程序中，text代表文字視覺組件。在它們中間插入的內(nèi)容，將會直接顯示在小程序的相應(yīng)位置中

試試：把中間改成helloWorld!保存運行

textHelloWorld/text

2、插入圖片

下面我們在小程序中插入一張圖片。

首先在index頁面下打開目錄

新建image文件夾，根目錄下創(chuàng)建

拖一張自己喜歡的圖片進(jìn)去，再回到開發(fā)者工具就回看到文件夾和圖片都出現(xiàn)在目錄下，與根目錄平行，一定要注意別建錯文件夾。

接下來我們在wxml中插入代碼

與一樣，image也是小程序的一個視覺組件，它代表在小程序里插入一張圖片。

imagesrc='/image/a.jpg'/image

效果如下：

3、分割代碼

在開發(fā)過程中把屏幕元素分割成不同部分，用獨立的樣式代碼提高編碼效率

例如我們用對元素部分進(jìn)行區(qū)分,增加。

這樣我們就可以統(tǒng)一處理圖片的樣式和其他操作。

五、與wxss玩耍

在頁面中打開index.wxss文件

1、處理圖片

從圖片開始處理，我們這樣設(shè)置image的屬性。

image{

width:400rpx;

height:150prx;

border-radius:50%;

}

看，他變圓了！

2、處理文字

text{

font-size:64rpx;

color:crimson;

}

查看文字的變化。

3、調(diào)整布局

添加屬性

view{

display:flex;

flex-direction:column;

align-items:center;

justify-content:space-around;

height:800rpx;

}

在屬性里面，我們首先用到的是flex，隨后我們用到的是flex-direction屬性，將中的視覺元素，按照縱向進(jìn)行排列，align-items屬性，它用于設(shè)定橫向排版模式。將align-items值設(shè)為center，就能讓視覺元素居中顯示，

justify-content:space-around將元素均勻地排布在頁面上，再后來設(shè)置view的高度，就像html布局中一個盒子的高度=view中所有元素的高度。

4、長度單位rpx（responsivepixel）:

可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。

建議：開發(fā)微信小程序時設(shè)計師可以用iPhone6作為視覺稿的標(biāo)準(zhǔn)。

六、獲取用戶資料

當(dāng)用戶對小程序有需求，我們是不是應(yīng)該添加按鈕或者對話框與用戶進(jìn)行交互，選擇性的滿足用戶不同需求。下面我們以添加按鈕事件為例。

在WXML文件中添加按鈕

pages/index/index.wxml

view

textHelloChina/text

imagesrc='/image/a.jpg'/image

buttonopen-type='getUserInfo'我是按鈕點我把/button

/view

接下來我們開始編寫js文件，接收微信傳給我我們的數(shù)據(jù)。

我們打開index.js，我們可以看到里面有開發(fā)者工具自動生成的生命周期函數(shù)，我們直接增加一個方法

像這樣

然后我們開始編寫一個用戶點擊按鈕反饋回去的數(shù)據(jù)。

新建函數(shù)getProfile當(dāng)這個函數(shù)接收到用戶資料后，就直接輸出到控制臺中。

//pages/index/index.js

Page({

getProfile(res){

console.log(res)

})

console.log()函數(shù)可以將變量、數(shù)據(jù)，寫入開發(fā)者工具的控制臺中

1、完善wxml

pages/index/index.wxml

view

textHelloChina/text

imagesrc='/image/a.jpg'/image

buttonopen-type='getUserInfo'bindgetuserinfo='getProfile'我是按鈕點我吧/button

/view

點擊按鈕后，查看控制臺

可以看到，在這么多的數(shù)據(jù)中，微信將用戶數(shù)據(jù)包裹在這個對象里的detail.userInfo中。嘗試輸出其中detail.userInfo的內(nèi)容，就可以看到干凈的用戶資料了。

在js文件中添加

Page({

getProfile(res){

console.log(res.detail.userInfo)

})

點擊按鈕查看控制臺信息

2、結(jié)果輸出到界面

接下來，我們就來嘗試將小程序界面中原本的默認(rèn)頭像和歡迎語，替換為用戶頭像和昵稱

在小程序中，界面層（WXML）和邏輯層（JS）之間有一種特殊的數(shù)據(jù)交換方式，名為「數(shù)據(jù)綁定」。WXML可以與JS中的特殊的變量進(jìn)行綁定，當(dāng)JS修改變量的時候，變化將會直接傳入界面層。

//pages/index/index.js

Page({

getProfile(res){

this.setData({

"profile":res.detail.userInfo

})

這里我們新建了一個變量profile，我們把用戶資料寫入變量中，接著可以利用Page()對象本身含有的setData()函數(shù)。回到index.js，就可以用setData()將用戶數(shù)據(jù)寫入變量。

接著我們在WXML文件中綁定這些變量，將用戶資料輸出到首頁。

pages/index/index.wxml

view

text{{profile.nickName}}/text

imagesrc='{{profile.avatarUrl}}'/image

buttonopen-type='getUserInfo'bindgetuserinfo='getProfile'我是按鈕點我吧/button

/view

到這我們再考慮一種因素，當(dāng)小程序剛啟動獲取我們的資料有延遲，這樣顯示的界面存在留白怎么處理？

3、優(yōu)化程序

我們設(shè)置一個默認(rèn)界面，給頁面加載寫入初始化數(shù)據(jù)

在js文件里面添加一個data對象

//pages/index/index.js

Page({

getProfile(res){

this.setData({

"profile":re