摘要：本文介紹了小程式的使用的前端語言，以及小程式開發過程中需要知道的頁面基礎知識。

1. 介紹

搭建後端伺服器完畢以後，我們接下來準備小程式前端頁面的基礎知識。

由於微信前後端是分離的，我們開發時一般可以使用分塊開發的模式，即前端和後端程式碼分離，使用JavaScript編寫資料繫結和相關通訊程式碼。由於微信整個框架只有兩層：檢視層和邏輯層。因此很明顯可以看出，檢視層的大部分內容為前端頁面展示程式碼，而邏輯層處理前後端的互動。因此，大部分的功能屬於比較簡單的功能，可以先在前端頁面上預留好相應的介面，在完成檢視開發以後，繼續編寫與後端伺服器通訊的程式碼。簡而言之，表示如下：

只要把這三個層級的所有程式碼編寫好，就能完成一個完整的小程式應用，當然，每一塊框架的內容想要掌握核心還是很難的。不過沒關係，我們要求不高，憑藉以前的開發經驗，我想還是能完成這個任務的！

千里之行，始於足下，我們今天來搞定第一塊檢視層的基礎知識。

2.檔案結構

通常來說，一個完整的微信小程式檔案結構目錄是這樣的：

一個小程式主體部分由三個檔案組成，必須放在專案的根目錄，如下：

每個單獨的小程式頁面由四個檔案組成，分別是：

除此以外，utils.js為自行定義的function, 自行編寫的公共函式可以放在這個檔案中，然後在每個單獨頁面的.js檔案中，使用require()引用。如果不需要這些一些函式的功能，可以把util.js這個檔案刪除。

以上就是小程式執行所必須的所有元件。具體的內容，根據詳細的開發框架，完成需要製作的程式即可。為了方便開發者減少配置項，我們規定描述頁面的這四個檔案必須具有相同的路徑與檔名。

3. 深入理解檢視層的功能

框架的檢視層由 WXML 與 WXSS 編寫，由元件來進行展示。將邏輯層的資料反應成檢視，同時將檢視層的事件傳送給邏輯層，也就是說：

4. wxml 功能

資料繫結

首先，在每個頁面單獨的js檔案中Page({ data:{} })中，在data的中括號內定義變數名，在wxml中，用雙大括號引用該變數，可以完成檢視層和特定資料繫結的功能。

//test.js
Page({

  data: {
      message: 'MINA!'
    }
  })

//test.wxml
<view> hello world {{message}}! </view>

5. wxss功能

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的元件樣式。用來決定 WXML 的元件應該怎麼顯示。

為了適應廣大的前端開發者， WXSS 具有 CSS 大部分特性。 同時為了更適合開發微信小程式，我們對 CSS 進行了擴充以及修改。

在這裡要介紹一個rpx的概念，rpx（responsive pixel）是為了應對不同手機長寬比不同而提出的響應式佈局的解決方案，使用rpx作為元件長度和寬度的單位，可以根據手機螢幕寬度進行自適應。無論手機尺寸為多少，總是規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。

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

注意： 在較小的螢幕上不可避免的會有一些毛刺，請在開發時儘量避免這種情況。

更多wxss的知識，請看關於wxss官方文件的介紹。

5.元件

框架為開發者提供了一系列基礎元件，開發者可以通過組合這些基礎元件進行快速開發。

什麼是元件？

元件是檢視層的基本組成單元。
元件自帶一些功能與微信風格的相似的樣式。
一個元件通常包括開始標籤和結束標籤，屬性用來修飾這個元件，內容在兩個標籤之內。

簡單來說，元件就是寫在wxml中的一系列標籤，原來html中使用的<div> <p>等標籤，用另外的名字來替代，以適應微信小程式中的開發風格。

基礎元件分為以下七大類：

1. 檢視容器

2. 基礎內容

3. 表單

4. 導航

5. 多媒體

6.地圖

7. 畫布

8. 客服會話

更多關於元件的知識，點這裡看官方文件的介紹。

好啦，說了這麼多，關於小程式檢視頁面的基礎知識想必也學得差不多了。如果有前端基礎的話，只要找幾個現有的例子稍作練習，這方面的知識很快就會掌握的。