第三章：手把手，動手編寫一個簡單小程序（下）

做者：知曉雲 - 小程序開發快人一步

界面美化與樣式調整

在上一節，咱們已經初步瞭解在小程序中增長視覺元素的方法。而在這一節，咱們將會學習編寫小程序的樣式表，爲咱們的歡迎小程序「美化」一下。

修改元素屬性

上一章中，咱們已經初步掌握 WXSS 的語法。此次，咱們就來嘗試使用 WXSS，來調整文字和圖片大小、顏色等等屬性。

找到工程中 pages/welcome.wxss 文件並打開，咱們就能夠頁面元素，進行調整。先從圖片開始吧：

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

複製代碼

將這段加進去並保存，能夠看到圖片的大小已經被調整，圖片形狀也變成圓形。

調整文字字號，也能夠用一樣的方法進行。

text{
  font-size: 64rpx;
}
複製代碼

保存後，能夠看到字號修改的結果。

調成元素排布

如今，咱們的小程序已經有了初步形態，但它們的排布明顯是不正常的。咱們但願能夠將視覺元素以必定方法進行排列，而不是如今這樣被隨意放置在屏幕上。

這時候，咱們就須要用到 Flex。什麼是 Flex 呢？它是 HTML 中被普遍應用的一種視覺元素排版、排布方法，可以靈活地根據咱們所需，對頁面視覺元素進行排布。

使用 Flex 以前，須要進行簡單的聲明。還記得咱們在上一節中，爲 和 元素「套」上的 嗎？如今就要請它出場了。

view{
  display: flex;
}
複製代碼

將它添加進 welcome.wxss 文件中並保存，咱們就能夠盡情使用 Flex 了。

首先，咱們須要讓視覺元素按照「從上至下」的順序進行排列，須要用到 flex-direction 屬性，將 中的視覺元素，按照縱向進行排列。

view{
  display: flex;
  flex-direction: column;
}
複製代碼

接着，咱們但願元素可以居中顯示，這時候咱們就須要用到 align-items 屬性，它用於設定橫向排版模式。將 align-items 值設爲 center，就能讓視覺元素居中顯示。

view{
  display: flex;
  flex-direction: column;
  align-items: center;
}
複製代碼

另外，咱們但願元素能夠均勻地排布在頁面上，而不是像如今這樣「擠」在界面頂部。這時，咱們就須要用到 justify-content 屬性了。

view{
 display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
複製代碼

此次保存，咱們發現小程序界面並無變化。先別急，咱們先爲 指定一個高度試試看。

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

保存後，咱們就能夠看到界面終於有了變化。

爲何爲要爲 指定高度呢？由於默認狀況下， 的高度只會與其中包裹的元素高度一致，也就是其中的文字+圖片的高度。

而爲 添加高度後， 裏的元素就會按照 justify-content: space-around; 屬性的指示，讓元素均勻地鋪在整個固定高度了的 中。

除了這些屬性以外，Flex 還有許多能定義的屬性和值。你能夠查閱相關資料，瞭解 Flex 的更多實用用法。

長度單位 RPX

也許你已經注意到，咱們在 WXSS 中所用的長度單位並不是 PX（Pixel，像素），而是 RPX。RPX 全稱爲 responsive pixel（直譯爲「動態像素」），它是微信提出的一種?元素計量單位。

在 RPX 中，全部手機的屏幕寬度都會被固定爲 750 rpx，實際像素以寬度 750 rpx 爲標準進行調整。開發者不須要關心用戶使用什麼設備，只需使用 rpx 單位定義寬度，微信就能在編譯時自動根據屏幕尺寸來處理元素。

微信官方提供的最佳實踐是，在小程序設計過程當中，使用 iPhone 6 的屏幕尺寸做爲設計稿標準。這樣，開發者在開發過程當中，只需直接對尺寸除以 2，就能正確地配置視覺元素的尺寸。

爲小程序加入邏輯

如今，咱們的小程序已經初具雛形。接下來，咱們就要爲它添加邏輯，讓小程序能夠讀取用戶的暱稱和頭像，直接放到小程序中，變成問候語。

瞭解小程序獲取用戶資料的機制

在小程序中獲取用戶資料，方法有些特殊。咱們須要先在小程序中設置一個按鈕，讓用戶點擊；而後?創建一個函數，當用戶點擊該按鈕的時候，這個函數將會接收用戶資料。

不一樣於其餘利用接口調用用戶資料的作法，微信爲小程序設計這樣略顯奇怪的步驟，是由於微信但願當用戶主動要求的時候，小程序再去請求用戶資料，避免出現「剛啓動小程序就要求受權」的狀況。

新建按鈕元素

回到 index.wxml 文件。咱們在文件中加入 < button > 元素，而後給按鈕寫一個引導文字。

<!--pages/welcome.wxml-->
<view>
  <text>Hello World</text>
  <image src='/image/avatar.jpg' mode='widthFix'></image>
  <button>點擊獲取資料</button>
</view>
複製代碼

保存後，咱們能夠看到按鈕已經在界面上了。可是當咱們點擊它，小程序是不會有任何反應的，由於微信不知道咱們須要獲取用戶資料，放入圖片和文字中。

從微信獲取用戶資料

想讓按鈕能夠獲取用戶資料，咱們首先要讓微信知道，當用戶點擊按鈕時，微信須要將用戶資料給咱們。

這時，咱們須要給 < button > 組件添加 open-type=getUserInfo 屬性，用以聲明按鈕點擊的事件是獲取用戶資料。

<!--pages/welcome.wxml-->
<view>
  <text>Hello World</text>
  <image src='/image/avatar.jpg' mode='widthFix'></image>
  <button open-type='getUserInfo'>點擊獲取資料</button>
</view>
複製代碼

接下來，咱們就要正式用上 JS 文件，接收微信傳給咱們的數據。?

咱們打開 welcome.js，能夠看到微信已經自動爲咱們生成一些生命週期函數。咱們能夠直接刪除其中自動生成的空白函數，只留下 Page() 一個函數。

// pages/welcome.js
Page({

})
複製代碼

接下來，咱們要新建一個接收用戶資料的函數，名爲 getProfile。當這個函數接收到用戶資料後，就直接輸出到控制檯中。

// pages/welcome.js
Page({
  getProfile(res){
    console.log(res) // console.log() 函數能夠將變量、數據，寫入開發者工具的控制檯中。
  }
})
複製代碼

函數建好保存文件，咱們還要回到 welcome.wxml 文件，繼續修改按鈕的代碼，讓微信將數據傳入咱們寫好的函數中。

<!--pages/welcome.wxml-->
<view>
  <text>Hello World</text>
  <image src='/image/avatar.jpg' mode='widthFix'></image>
  <button open-type='getUserInfo' bindgetuserinfo='getProfile'>點擊獲取資料</button>
</view>
複製代碼

一切就緒！保存代碼以後，咱們在預覽區嘗試點擊按鈕。點擊後，開發者工具會向咱們請求受權。

點擊「贊成」，在調試器（開發者工具的右下角區域）的 Console 標籤中，就能夠看到咱們已經成功獲取用戶數據。

能夠看到，在這麼多的數據中，微信將用戶數據包裹在這個對象裏的 detail.userInfo 中。嘗試輸出其中 detail.userInfo 的內容，就能夠看到乾淨的用戶資料了。

// pages/welcome.js
Page({
  getProfile(res){
    console.log(res.detail.userInfo)
  }
})
複製代碼

將數據處理結果放到界面

接下來，咱們就來嘗試將小程序界面中本來的默認頭像和歡迎語，替換爲用戶頭像和暱稱。

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

在 JS 中，想要將數據放入可在界面層展現的變量，能夠利用 Page() 對象自己含有的 setData() 函數。回到 welcome.js，就能夠用 setData() 將用戶數據寫入變量。

// pages/welcome.js
Page({
  getProfile(res){
    this.setData({
      "profile": res.detail.userInfo
    })
  }
})
複製代碼

在 wx.setData() 函數中，咱們須要傳入一個 JS 對象，其中以鍵值對的方式，設置所需的變量。本例中，咱們將用戶資料，直接寫入到 profile 變量中。

運行一下代碼，再點擊一次按鈕，咱們發現「Console」控制檯再也不輸出獲取到的用戶數據（由於 console.log() 函數已經被刪除）。那麼，咱們怎麼知道 setData() 寫入成功與否呢？

點擊調試器的「App Data」標籤，咱們能夠看到頁面對象 Page 中，全部的變量。嘗試從新編譯小程序，點擊按鈕再過一會，就會發現 profile 變量已經寫入成功了。

接下來，咱們須要在 WXML 文件中，?綁定這些變量，以便將用戶資料顯示在界面上。在 WXML 中，咱們須要用到「雙花括號」的語法，對 JS 中的變量進行綁定操做。「雙花括號」不只能夠用在小程序的 組件中，任何可被自由插入字符串的位置都能使用。

<!--pages/welcome.wxml-->
<view>
  <text>{{ profile.nickName }}</text>
  <image src='{{ profile.avatarUrl }}' mode='widthFix'></image>
  <button open-type='getUserInfo' bindgetuserinfo='getProfile'>點擊獲取資料</button>
</view>
複製代碼

從新編譯小程序，再點擊按鈕，能夠看到小程序已經成功展現用戶暱稱和頭像。

設置資料缺失時的顯示

到這裏，小程序已經能夠很好地實現功能，但咱們依然須要進行額外優化。

例如，當用戶剛啓動小程序時，因爲小程序沒有獲取到咱們的資料，導致整個小程序頁面會是空白一片。

接下來，咱們就要着手繼續優化小程序，爲它設置「默認數據」。讓小程序獲取到資料前，顯示一個默認的歡迎語和圖片。

若是想要在頁面加載時寫入初始化數據，除了利用 setData() 函數以外，咱們還能夠直接創建 data 對象並寫入數據。這樣，在加載時，data 對象將會自動生效。

咱們在 welcome.wxml 中，新增 data，並初始化 profile 對象。在 profile 對象中，咱們能夠寫入一些初始數據。

// pages/welcome.js
Page({
  getProfile(res) {
    this.setData({
      "profile": res.detail.userInfo
    })
  },
  data:{
    "profile":{
      nickName: 'Hello World',
      "avatarUrl": '/image/avatar.jpg'
    }
  }
})

複製代碼

保存代碼並編譯，就能夠看到小程序剛啓動時會自動載入初始數據。點擊按鈕，歡迎語和圖片將會自動替換爲用戶資料。

相關閱讀

第一章：一文了解小程序

第二章：手把手，動手編寫一個簡單小程序（上）

訪問「知曉雲」（cloud.minapp.com），學習更多小程序開發課程