上篇文章我們已經一起成功建立了一個Hello World級別的微信小程式。

那麼這篇文章我們將詳細講解下這個例子中的相關程式碼部分。

程式碼構成

正如你所看到的，這個專案中生成了很多不同型別的檔案。

1. .json 字尾的 JSON 配置檔案
2. .wxml 字尾的 WXML 模板檔案 ———–可以理解成HTML頁面
3. .wxss 字尾的 WXSS 樣式檔案
4. .js 字尾的 JS 指令碼邏輯檔案

接下來我們分別看看這4種檔案的作用。

a. JSON 配置

我們可以看到在專案的根目錄有一個 app.json 和 project.config.json，此外在 pages/logs 目錄下還有一個 logs.json，我們依次來說明一下他們的用途。

小程式配置 app.json

app.json 是對當前小程式的全域性配置，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。

專案裡邊的 app.json 配置內容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat"
 
,
    "navigationBarTextStyle":"black"
  }
}

我們簡單說一下這個配置各個項的含義:

pages欄位 —— 用於描述當前小程式所有頁面路徑，這是為了讓微信客戶端知道當前你的小程式頁面定義在哪個目錄。
window欄位 ——小程式所有頁面的頂部背景顏色，文字顏色定義在這裡的。

Tips:
由於這裡專案比較簡單，我們先不細說，後期我們會慢慢講到，現在先大致瞭解下即可。貪多嚼不爛的道理要懂，我的建議時當我們開發需要用到時再去細看。

工具配置 project.config.json

通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如介面顏色、編譯配置等等，當你換了另外一臺電腦重新安裝工具的時候，你還要重新配置。

考慮到這點，小程式開發者工具在每個專案的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個檔案，當你重新安裝工具或者換電腦工作時，你只要載入同一個專案的程式碼包，開發者工具就自動會幫你恢復到當時你開發專案時的個性化配置，其中會包括編輯器的顏色、程式碼上傳時自動壓縮等等一系列選項。
project.config.json內容如下：

{
    "description": "專案配置檔案。",
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true
    },
    "compileType": "miniprogram",
    "libVersion": "1.9.91",
    "appid": "wx815293733672dd59",
    "projectname": "StudyHelloWorldApp",
    "isGameTourist": false,
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "game": {
            "currentL": -1,
            "list": []
        },
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

其他配置項細節可以參考文件 開發者工具的配置 。

頁面配置 page.json
這裡的 page.json 其實用來表示 pages/logs 目錄下的 logs.json 這類和小程式頁面相關的配置。

如果你整個小程式的風格是藍色調，那麼你可以在 app.json 裡邊宣告頂部顏色是藍色即可。實際情況可能不是這樣，可能你小程式裡邊的每個頁面都有不一樣的色調來區分不同功能模組，因此我們提供了 page.json，讓開發者可以獨立定義每個頁面的一些屬性，例如剛剛說的頂部顏色、是否允許下拉重新整理等等。
logs.json

{
“navigationBarTitleText”: “檢視啟動日誌”
}

b.WXML 模板

從事過網頁程式設計的人知道，網頁程式設計採用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和使用者的互動。

同樣道理，在小程式中也有同樣的角色，其中 WXML 充當的就是類似 HTML 的角色。開啟 pages/index/index.wxml，你會看到以下的內容:

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

和 HTML 非常相似，有標籤、屬性等等構成。但是也有很多不一樣的地方，我們來一一闡述一下：

標籤名字有點不一樣 往往寫 HTML 的時候，經常會用到的標籤是 div, p, span，開發者在寫一個頁面的時候可以根據這些基礎的標籤組合出不一樣的元件，例如日曆、彈窗等等。換個思路，既然大家都需要這些元件，為什麼我們不能把這些常用的元件包裝起來，大大提高我們的開發效率。 從上邊的例子可以看到，小程式的 WXML 用的標籤是 view, button, text 等等，這些標籤就是小程式給開發者包裝好的基本能力，我們還提供了地圖、視訊、音訊等等元件能力

更多詳細的元件講述參考下個章節 小程式的能力

多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表示式 在網頁的一般開發流程中，我們通常會通過 JS 操作 DOM (對應 HTML 的描述產生的樹)，以引起介面的一些變化響應使用者的行為。例如，使用者點選某個按鈕的時候，JS 會記錄一些狀態到 JS 變數裡邊，同時通過 DOM API 操控 DOM 的屬性或者行為，進而引起介面一些變化。當專案越來越大的時候，你的程式碼會充斥著非常多的介面互動邏輯和程式的各種狀態變數，顯然這不是一個很好的開發模式，因此就有了 MVVM 的開發模式(例如 React, Vue)，提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態即可，然後再通過一種模板語法來描述狀態和介面結構的關係即可。 小程式的框架也是用到了這個思路，如果你需要把一個 Hello World 的字串顯示在介面上。 WXML 是這麼寫 :

<text></text>

JS 只需要管理狀態即可:

this.setData({ msg: "Hello World" })

通過 {{ }} 的語法把一個變數繫結到介面上，我們稱為資料繫結。僅僅通過資料繫結還不夠完整的描述狀態和介面的關係，還需要 if/else, for等控制能力，在小程式裡邊，這些控制能力都用 wx: 開頭的屬性來表達。 更詳細的文件可以參考 WXML

c. WXSS 樣式

WXSS 具有 CSS 大部分的特性，小程式在 WXSS 也做了一些擴充和修改。

1. 新增了尺寸單位。在寫 CSS 樣式時，開發者需要考慮到手機裝置的螢幕會有不同的寬度和裝置畫素比，採用一些技巧來換算一些畫素單位。WXSS 在底層支援新的尺寸單位 rpx，開發者可以免去換算的煩惱，只要交給小程式底層來換算即可，由於換算採用的浮點數運算，所以運算結果會和預期結果有一點點偏差。
2. 提供了全域性的樣式和區域性樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作為全域性樣式，會作用於當前小程式的所有頁面，區域性頁面樣式 page.wxss 僅對當前頁面生效。
3. 此外 WXSS 僅支援部分 CSS 選擇器

更詳細的文件可以參考 WXSS

d. JS 互動邏輯

一個服務僅僅只有介面展示是不夠的，還需要和使用者做互動：響應使用者的點選、獲取使用者的位置等等。在小程式裡邊，我們就通過編寫 JS 指令碼檔案來處理使用者的操作。

<view>{{ msg }}</view>
<button bindtap="clickMe">點選我</button>

點選 button 按鈕的時候，我們希望把介面上 msg 顯示成 “Hello World”，於是我們在 button 上宣告一個屬性: bindtap ，在 JS 檔案裡邊聲明瞭 clickMe 方法來響應這次點選操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

應使用者的操作就是這麼簡單，更詳細的事件可以參考文件WXML - 事件

此外你還可以在 JS 中呼叫小程式提供的豐富的 API，利用這些 API 可以很方便的調起微信提供的能力，例如獲取使用者資訊、本地儲存、微信支付等。在前邊的 QuickStart 例子中，在 pages/index/index.js 就呼叫了 wx.getUserInfo 獲取微信使用者的頭像和暱稱，最後通過 setData 把獲取到的資訊顯示到介面上。

總結下：
當我們學習完這節內容你應該會大致發現，

1. .json 字尾的 JSON 配置檔案
2. .wxml 字尾的 WXML 模板檔案 ———–可以理解成HTML頁面
3. .wxss 字尾的 WXSS 樣式檔案
4. .js 字尾的 JS 指令碼邏輯檔案

.json 模組相當於我們常用的xml配置檔案
.WXML 相當於以前學習過的HTML
.WXSS相當於以前學習過的CSS
.js 處理業務邏輯響應使用者請求

這些新型標籤和我們之前學習的不同之處在於微信針對常用的一些元件和樣式進行了封裝，來幫我們開發者們加速微信小程式的開發，而微信小程式開發的難點其實也就在於我們如何儘快熟悉這些封裝的標籤和元件。

所以微信小程式如果你的前端知識比較穩固的話，相信學習起來將會更加輕鬆。

本篇文章大致分析了下專案程式碼結構，和各個模組程式碼的功能和作用，其他細節和頁面樣式調整將不再做多解釋。

好了，本篇博文也該到了和大家說再見的時候，但我相信愛學習的你肯定不滿足於這樣簡單的一個Demo，那麼下篇博文讓我們來一起學習一個帶有後臺的微信小程式。