在上一章 微信小程序開發(fā)入門實戰(zhàn) （一）準備階段與vant-ui使用 中靖苇，我們通過開發(fā)者工具快速創(chuàng)建了一個 QuickStart 項目骑晶。當你打開這個項目你會發(fā)現(xiàn)不同類型的文件:

• .json 后綴的 JSON 配置文件
• .wxml 后綴的 WXML 模板文件
• .wxss 后綴的 WXSS 樣式文件
• .js 后綴的 JS 腳本邏輯文件

你可以看到：小程序由配置代碼JSON文件匣吊、模板代碼 WXML 文件盒件、樣式代碼 WXSS文件以及邏輯代碼 JavaScript文件組成刽严。

接下來我們分別看看這4種文件的作用昂灵。

小程序代碼構成

JSON 配置

在小程序中，JSON扮演的靜態(tài)配置的角色。

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

小程序配置 app.json

app.json 是當前小程序的全局配置撑螺，包括了小程序的所有頁面路徑含思、界面表現(xiàn)、網絡超時時間甘晤、底部 tab 等含潘。QuickStart 項目里邊的 app.json 配置內容如下：

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

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

• pages字段 —— 用于描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄线婚。
• window字段 —— 定義小程序所有頁面的頂部背景顏色调鬓，文字顏色定義等。
  其他配置項細節(jié)可以參考文檔： 小程序的配置 app.json 酌伊。

我們可以通過一個例子弄懂它腾窝。

修改第 9 行為 "navigationBarTitleText": "MiniProgram" ，如圖：

修改 navigationBarTitleText

保存代碼居砖，開發(fā)者工具自動刷新后虹脯，注意到模擬器頂部 bar 的文本字段由 Wechat 變?yōu)榱?MiniProgram徙垫。

Wechat 變?yōu)榱?MiniProgram

工具配置 project.config.json

通常大家在使用一個工具的時候唧领，都會針對各自喜好做一些個性化配置倒堕，例如界面顏色窥妇、編譯配置等等党饮，當你換了另外一臺電腦重新安裝工具的時候吩跋，你還要重新配置苗分。

考慮到這點劈伴，小程序開發(fā)者工具在每個項目的根目錄都會生成一個 project.config.json咒精，你在工具上做的任何配置都會寫入到這個文件镶柱，當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包模叙，開發(fā)者工具就自動會幫你恢復到當時你開發(fā)項目時的個性化配置歇拆，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項范咨。

其他配置項細節(jié)可以參考文檔 開發(fā)者工具的配置 故觅。

頁面配置 page.json

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

如果你整個小程序的風格是藍色調渠啊，那么你可以在 app.json 里邊聲明頂部顏色是藍色即可输吏。實際情況可能不是這樣，可能你小程序里邊的每個頁面都有不一樣的色調來區(qū)分不同功能模塊替蛉，因此我們提供了 page.json贯溅，讓開發(fā)者可以獨立定義每個頁面的一些屬性拄氯，例如剛剛說的頂部顏色、是否允許下拉刷新等等盗迟。

其他配置項細節(jié)可以參考文檔 頁面配置 坤邪。

WXML 模板

WXML 全稱是 WeiXin Markup Language，是小程序框架設計的一套標簽語言罚缕，結合小程序的基礎組件艇纺、事件系統(tǒng)，可以構建出頁面的結構邮弹。

從事過網頁編程的人知道黔衡，網頁編程采用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構腌乡，CSS 用來描述頁面的樣子盟劫，JS 通常是用來處理這個頁面和用戶的交互。

同樣道理与纽，在小程序中也有同樣的角色侣签，其中 WXML 充當?shù)木褪穷愃?HTML 的角色。

WXML 文件后綴名是 .wxml 急迂，打開 pages/wxml/index.wxml 文件影所，有過 HTML 的開發(fā)經驗的讀者應該會很熟悉這種代碼的書寫方式，簡單的 WXML語句在語法上同 HTML 非常相似僚碎。

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image 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 非常相似猴娩，WXML 由標簽、屬性等等構成勺阐。但是也有很多不一樣的地方卷中，我們來一一闡述一下：

• 標簽名字有點不一樣，他們是小程序的標簽組件渊抽，小程序的 WXML 用的標簽是 view, button, text 等等蟆豫，這些標簽就是小程序給開發(fā)者包裝好的基本能力，我們還提供了地圖腰吟、視頻无埃、音頻等等組件能力。更多標簽組件看這里：小程序的標簽組件
• 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式毛雇，小程序采用了 MVVM 的開發(fā)模式（例如 React, Vue），提倡把渲染和邏輯分離侦镇。

如果你需要把一個 Hello World 的字符串顯示在界面上灵疮。WXML 是這么寫 :

<text>{{msg}}</text>

JS 只需要管理狀態(tài)即可:

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

更多關于WXML的看這里：WXML、WXML 語法參考壳繁。

WXSS 樣式

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

• 新增了尺寸單位。在寫 CSS 樣式時蒿赢，開發(fā)者需要考慮到手機設備的屏幕會有不同的寬度和設備像素比润樱，采用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx 羡棵，開發(fā)者可以免去換算的煩惱壹若，只要交給小程序底層來換算即可，由于換算采用的浮點數(shù)運算皂冰，所以運算結果會和預期結果有一點點偏差店展。
• 提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同秃流，你可以寫一個 app.wxss 作為全局樣式赂蕴，會作用于當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效舶胀。
• 此外 WXSS 僅支持部分 CSS 選擇器

更詳細的文檔可以參考 WXSS 概说、WXSS 樣式

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 把獲取到的信息顯示到界面上芥驳。更多 API 可以參考文檔 小程序的API 。

在了解完這些基本的代碼構成后茬高，下面再了解一些基礎知識兆旬。

目錄結構

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。

一個小程序主體部分由三個文件組成怎栽，必須放在項目的根目錄丽猬，如下：

一個小程序頁面由四個文件組成宿饱，分別是：

注意：為了方便開發(fā)者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名脚祟。

允許上傳的文件

在項目目錄中谬以，以下文件會經過編譯，因此上傳之后無法直接訪問到：.js由桌、app.json为黎、.wxml、*.wxss（其中 wxml 和 wxss 文件僅針對在 app.json 中配置了的頁面）沥寥。除此之外碍舍，只有后綴名在白名單內的文件可以被上傳，不在白名單列表內文件在開發(fā)工具能被訪問到邑雅，但無法被上傳片橡。具體白名單列表如下：

• wxs
• png
• jpg
• jpeg
• gif
• svg
• json
• cer
• mp3
• aac
• m4a
• mp4
• wav
• ogg
• silk

小程序配置

全局配置

小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑淮野、窗口表現(xiàn)捧书、設置網絡超時時間、設置多 tab 等骤星。

完整配置項說明請參考小程序全局配置

以下是一個包含了部分常用配置選項的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

完整配置項說明請參考小程序全局配置

頁面配置

每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現(xiàn)進行配置经瓷，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

完整配置項說明請參考小程序頁面配置

例如：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

視圖層

WXML

上面我們簡單介紹了一下WXML洞难，接下來我們用簡單的例子來看看 WXML 具有什么能力：

數(shù)據(jù)綁定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

條件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模板

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

具體的能力以及使用方式在以下章節(jié)查看：
數(shù)據(jù)綁定舆吮、列表渲染、條件渲染队贱、模板色冀、引用

WXSS

WXSS 用來決定 WXML 的組件應該怎么顯示。

為了適應廣大的前端開發(fā)者柱嫌，WXSS 具有 CSS 大部分特性锋恬。同時為了更適合開發(fā)微信小程序，WXSS 對 CSS 進行了擴充以及修改编丘。

與 CSS 相比与学，WXSS 擴展的特性有：

• 尺寸單位
• 樣式導入

尺寸單位

• rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx嘉抓。如在 iPhone6 上索守，屏幕寬度為375px，共有750個物理像素抑片，則750rpx = 375px = 750物理像素蕾盯，1rpx = 0.5px = 1物理像素。

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

注意： 在較小的屏幕上不可避免的會有一些毛刺级遭，請在開發(fā)時盡量避免這種情況。

樣式導入

使用@import語句可以導入外聯(lián)樣式表渺尘，@import后跟需要導入的外聯(lián)樣式表的相對路徑挫鸽，用;表示語句結束。

示例代碼：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

內聯(lián)樣式

框架組件上支持使用 style鸥跟、class 屬性來控制組件的樣式丢郊。

• style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動態(tài)的樣式医咨，在運行時會進行解析枫匾，請盡量避免將靜態(tài)的樣式寫進 style 中，以免影響渲染速度拟淮。

<view style="color:{{color}};" />

• class：用于指定樣式規(guī)則干茉，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.很泊，樣式類名之間用空格分隔角虫。

<view class="normal_view" />

選擇器

目前支持的選擇器有：

全局樣式與局部樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面委造。在 page 的 wxss 文件中定義的樣式為局部樣式戳鹅，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器昏兆。

至此枫虏，小程序代碼構成與基礎知識就完成了，更多的內容請看：小程序開發(fā)框架

結語

提示：后面還有精彩敬請期待爬虱，請大家關注我的專題：web前端隶债。如有意見可以進行評論，每一條評論我都會認真對待饮潦。

下篇：微信小程序開發(fā)入門實戰(zhàn) （三）在熟悉vue的情況下燃异，快速切換為小程序開發(fā)