微信小程序實現獲取用戶信息替換用戶名和頭像到首頁

Posted on by

一、形成空白文件

1、點擊打開目錄

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

3、新建“app.json”

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

{}

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

二、小程序頁面路徑配置

1、首先在app.json中寫入

{
  "pages": [
    "pages/index/index"
  ]
}

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

保存，一定要先保存要不然建好回車沒有反應。

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

註意：需要在pages下新建目錄才能新建頁面。現在可以看到開發者工具新建的頁面，自動放入pages數組中。

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

3、當 pages 成功配置後，小程序就可以正常運行瞭（新建頁面文件後，小程序已經正常運行無報錯瞭）。

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

三、修改小程序頁面

修改app.json代碼如下：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTitleText": "我的第一個小程序",
    "navigationBarTextStyle": "white"
  }
}

是不是看到變化瞭！

在app.json中，window用於設置小程序的狀態欄，導航條，標題，窗口，背景色。

具體見 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

四、與WXML玩耍

1、插入文字

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

pages/index/index.wxml
<text>pages/index/index.wxml</text>

第一行是註釋，對代碼解釋說明。計算機執行程序會自動跳過註釋編譯。第二行代碼前後都是由尖括號擴起來部分中間即是pages/index/index.wxml。

在小程序中， <text>代表文字視覺組件。在它們中間插入的內容，將會直接顯示在小程序的相應位置中

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

<text>Hello World</text>

2、插入圖片

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

首先在index頁面下打開目錄

新建image文件夾，根目錄下創建

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

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

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

<image src='/image/a.jpg'></image>

效果如下：

3、分割代碼

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

例如我們用對元素部分進行區分,增加。

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

五、與wxss玩耍

在頁面中打開index.wxss文件

1、處理圖片

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

image {
  width: 400rpx;
  height: 150prx;
  border-radius: 50%;
}

看，他變圓瞭！

2、處理文字

text{
  font-size: 64rpx;
  color:crimson;
}

查看文字的變化。

3、調整佈局

添加屬性

view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 800rpx;
}

在屬性裡面，我們首先用到的是flex，隨後我們用到的是flex-direction 屬性，將中的視覺元素，按照縱向進行排列，align-items 屬性，它用於設定橫向排版模式。將 align-items 值設為 center，就能讓視覺元素居中顯示，
justify-content: space-around 將元素均勻地排佈在頁面上，再後來設置view的高度，就像html佈局中一個盒子的高度=view中所有元素的高度。

4、長度單位rpx（responsive pixel）:

可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建議：開發微信小程序時設計師可以用iPhone6作為視覺稿的標準。

六、獲取用戶資料

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

在WXML文件中添加按鈕

pages/index/index.wxml
<view>
<text>Hello China</text>
<image src='/image/a.jpg'></image>
<button open-type='getUserInfo'>我是按鈕點我把</button>
</view>

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

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

像這樣

然後我們開始編寫一個用戶點擊按鈕反饋回去的數據。
新建函數 getProfile當這個函數接收到用戶資料後，就直接輸出到控制臺中。

// pages/index/index.js
Page({
  getProfile(res){
    console.log(res)
  }
})

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

1、完善wxml

pages/index/index.wxml
<view>
<text>Hello China</text>
<image src='/image/a.jpg'></image>
<button open-type='getUserInfo' bindgetuserinfo='getProfile'>我是按鈕點我吧</button>

</view>

點擊按鈕後，查看控制臺

可以看到，在這麼多的數據中，微信將用戶數據包裹在這個對象裡的 detail.userInfo 中。嘗試輸出其中 detail.userInfo 的內容，就可以看到幹凈的用戶資料瞭。

在js文件中添加

Page({
  getProfile(res){
    console.log(res.detail.userInfo)
  }
})

點擊按鈕查看控制臺信息

2、結果輸出到界面

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

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

// pages/index/index.js
Page({
  getProfile(res){
    this.setData({
      "profile": res.detail.userInfo
    })
    
  }
})

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

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

pages/index/index.wxml
<view>
  <text>{{profile.nickName}}</text>
  <image src='{{profile.avatarUrl}}'></image>
  <button open-type='getUserInfo' bindgetuserinfo='getProfile'>我是按鈕點我吧</button>
</view>

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

3、優化程序

我們設置一個默認界面，給頁面加載寫入初始化數據

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

// pages/index/index.js
Page({
  getProfile(res){
    this.setData({
      "profile": res.detail.userInfo
    })
    
  },
  data:{
    "profile":{
      nickName:"HELLO CHINA"
    }
  }
})

保存初始化頁面：當然你可以加圖片哈，我這主要突出一個效果

點擊按鈕後界面

小程序初始化進入的界面是默認界面，點擊按鈕後獲取到用戶資料並自動替換。

到此這篇關於微信小程序實現獲取用戶信息替換用戶名和頭像到首頁的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：