在上一章中，我們通過開發者工具快速創建了一個 QuickStart 項目。你可以留意到這個項目里邊生成了不同類型的文件:
.json后綴的JSON配置文件.wxml后綴的WXML模板文件.wxss后綴的WXSS樣式文件.js后綴的JS腳本邏輯文件
接下來我們分別看看這4種文件的作用。
【1】JSON 配置
JSON 是一種數據格式，並不是編程語言，在小程序中，JSON扮演的靜態配置的角色。
我們可以看到在項目的根目錄有一個 app.json 和 project.config.json，此外在 pages/logs 目錄下還有一個 logs.json，我們依次來說明一下它們的用途。
（1）小程序配置 app.json
app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。QuickStart 項目里邊的 app.json 配置內容如下：
{ "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json" }
我們簡單說一下這個配置各個項的含義:
pages字段 —— 用於描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等。
（2）配置文件可以分為全局和單個頁面設置
①全局配置：小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。
{ /*string，必填項，頁面路徑列表*/ "pages": [ "pages/index/index", "pages/logs/logs" ], /*Object，非必填，全局的默認窗口表現*/ "window": { /*string，默認值dark，下拉背景字體、loading 圖的樣式，僅支持 dark和light*/ "backgroundTextStyle": "light", /*HexColor，默認值#000000，導航欄背景顏色，如 #000000*/ "navigationBarBackgroundColor": "#fff", /*string，默認為空，導航欄標題文字內容*/ "navigationBarTitleText": "小田博客", /*navigationBarTextStyle，string，默認white，導航欄標題顏色，僅支持 black 和white*/ "navigationBarTextStyle": "black" }, /*指明 sitemap.json 的位置；默認為 'sitemap.json' 即在 app.json 同級目錄下名字的 sitemap.json 文件*/ "sitemapLocation": "sitemap.json" }
②頁面配置：每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。（）
（3）全局配置屬性
小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置。文件內容為一個 JSON 對象，有以下屬性：
配置項
pages：
用於指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑（含文件名） 信息。文件名不需要寫文件后綴，框架會自動去尋找對於位置的 .json, .js, .wxml, .wxss 四個文件進行處理。數組的第一項代表小程序的初始頁面（首頁）。小程序中新增/減少頁面，都需要對 pages 數組進行修改。如開發目錄為：
window
用於設置小程序的狀態欄、導航條、標題、窗口背景色。
| 屬性 | 類型 | 默認值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色，如 #000000 |
|
| navigationBarTextStyle | string | white | 導航欄標題顏色，僅支持 black / white |
|
| navigationBarTitleText | string | 導航欄標題文字內容 | ||
| navigationStyle | string | default | 導航欄樣式，僅支持以下值：default 默認樣式custom 自定義導航欄，只保留右上角膠囊按鈕。參見注 2。 |
微信客戶端 6.6.0 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | string | dark | 下拉 loading 的樣式，僅支持 dark / light |
|
| backgroundColorTop | string | #ffffff | 頂部窗口的背景色，僅 iOS 支持 | 微信客戶端 6.5.16 |
| backgroundColorBottom | string | #ffffff | 底部窗口的背景色，僅 iOS 支持 | 微信客戶端 6.5.16 |
| enablePullDownRefresh | boolean | false | 是否開啟全局的下拉刷新。 詳見 Page.onPullDownRefresh |
|
| onReachBottomDistance | number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離，單位為 px。 詳見 Page.onReachBottom |
|
| pageOrientation | string | portrait | 屏幕旋轉設置，支持 auto/ portrait / landscape 詳見 響應顯示區域變化 |
2.4.0 (auto) / 2.5.0(landscape) |
- 注 1：HexColor（十六進制顏色值），如"#ff00ff"
- 注 2：關於
navigationStyle- 客戶端 7.0.0 以下版本，
navigationStyle只在app.json中生效。 - 客戶端 6.7.2 版本開始，
navigationStyle: custom對 web-view 組件無效 - 開啟 custom 后，低版本客戶端需要做好兼容。開發者工具基礎庫版本切到 1.7.0（不代表最低版本，只供調試用）可方便切到舊視覺
- 客戶端 7.0.0 以下版本，
sitemapLocation
默認為 'sitemap.json' 即在 app.json 同級目錄下名字的 sitemap.json 文件，配置示例
{ "pages": ["pages/index/index", "pages/logs/index"], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首頁" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true, "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"] }
（4）以下是一個包含了部分常用配置選項的 app.json ：
{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首頁" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true, "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] }
（5）頁面配置
每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現進行配置。頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。文件內容為一個 JSON 對象，有以下屬性：
| 屬性 | 類型 | 默認值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色，如 #000000 |
|
| navigationBarTextStyle | string | white | 導航欄標題顏色，僅支持 black / white |
|
| navigationBarTitleText | string | 導航欄標題文字內容 | ||
| navigationStyle | string | default | 導航欄樣式，僅支持以下值：default 默認樣式custom 自定義導航欄，只保留右上角膠囊按鈕 |
微信客戶端 7.0.0 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | string | dark | 下拉 loading 的樣式，僅支持 dark / light |
|
| backgroundColorTop | string | #ffffff | 頂部窗口的背景色，僅 iOS 支持 | 微信客戶端 6.5.16 |
| backgroundColorBottom | string | #ffffff | 底部窗口的背景色，僅 iOS 支持 | 微信客戶端 6.5.16 |
| enablePullDownRefresh | boolean | false | 是否開啟當前頁面下拉刷新。 詳見 Page.onPullDownRefresh |
|
| onReachBottomDistance | number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離，單位為px。 詳見 Page.onReachBottom |
|
| pageOrientation | string | portrait | 屏幕旋轉設置，支持 auto/ portrait / landscape 詳見 響應顯示區域變化 |
2.4.0 (auto) / 2.5.0(landscape) |
| disableScroll | boolean | false | 設置為 true 則頁面整體不能上下滾動。只在頁面配置中有效，無法在 app.json 中設置 |
|
| disableSwipeBack | boolean | false | 禁止頁面右滑手勢返回 | 微信客戶端 7.0.0 |
| usingComponents | Object | 否 | 頁面自定義組件配置 | 1.6.3 |
注意：頁面配置中只能設置 app.json 中 window 對應的配置項，以決定本頁面的窗口表現，所以無需寫 window 這個屬性。
配置示例
{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }
（6）工具配置 project.config.json
通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等等，當你換了另外一台電腦重新安裝工具的時候，你還要重新配置。
考慮到這點，小程序開發者工具在每個項目的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個文件，當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。
{ "description": "項目配置文件",
/*packOptions，數據類型Object，打包配置選項*/ "packOptions": { "ignore": [] }, "setting": {/*項目設置*/ "urlCheck": true,/*urlCheck，Boolean，是否檢查安全域名和 TLS 版本*/ "es6": true,/*es6，Boolean，是否啟用 es6 轉 es5*/ "postcss": true,/*postcss，Boolean，上傳代碼時樣式是否自動補全*/ "minified": true,/*minified，Boolean，上傳代碼時是否自動壓縮*/ "newFeature": true,/*支持新功能*/ "autoAudits": false,/**/ "coverView": true /*coverView Boolean 是否使用工具渲染 CoverView*/ }, "compileType": "miniprogram",/*編譯類型，miniprogram為普通小程序項目，plugin為小程序插件項目*/ "libVersion": "2.7.2",/*基礎庫版本*/ "appid": "wxb464782172dc5b0a",/*項目的appid，只在新建項目時讀取*/ "projectname": "test-project",/*項目名字，只在新建項目時讀取*/ "debugOptions": {/*用於配置在對項目進行調試時的選項*/ "hidedInDevtools": []/*用於配置調試時於調試器Sources面板源代碼的文件*/ }, "isGameTourist": false,/*微信小游戲*/ "simulatorType": "wechat",/*模擬器類型*/ "simulatorPluginLibVersion": {},/*模擬器插件庫版本*/ "condition": {/*編譯模式，增加編譯模式時，會添加到下面的對應數組*/ "search": {/*搜索*/ "current": -1, "list": [] }, "conversation": {/*會話*/ "current": -1, "list": [] }, "game": {/*小游戲*/ "currentL": -1, "list": [] }, "miniprogram": {/*小程序*/ "current": -1, "list": [] } } }
（7）頁面配置 page.json
這里的 page.json 其實用來表示 pages/logs 目錄下的 logs.json 這類和小程序頁面相關的配置。
如果你整個小程序的風格是藍色調，那么你可以在 app.json 里邊聲明頂部顏色是藍色即可。實際情況可能不是這樣，可能你小程序里邊的每個頁面都有不一樣的色調來區分不同功能模塊，因此我們提供了 page.json，讓開發者可以獨立定義每個頁面的一些屬性，例如剛剛說的頂部顏色、是否允許下拉刷新等等。
（8）JSON 語法
（9）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}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>
和 HTML 非常相似，WXML 由標簽、屬性等等構成。但是也有很多不一樣的地方，我們來一一闡述一下：
-
標簽名字有點不一樣
往往寫 HTML 的時候，經常會用到的標簽是
div,p,span，開發者在寫一個頁面的時候可以根據這些基礎的標簽組合出不一樣的組件，例如日歷、彈窗等等。換個思路，既然大家都需要這些組件，為什么我們不能把這些常用的組件包裝起來，大大提高我們的開發效率。從上邊的例子可以看到，小程序的
WXML用的標簽是view,button,text等等，這些標簽就是小程序給開發者包裝好的基本能力，我們還提供了地圖、視頻、音頻等等組件能力。 -
多了一些
wx:if這樣的屬性以及這樣的表達式在網頁的一般開發流程中，我們通常會通過
JS操作DOM(對應HTML的描述產生的樹)，以引起界面的一些變化響應用戶的行為。例如，用戶點擊某個按鈕的時候，JS會記錄一些狀態到JS變量里邊，同時通過DOMAPI 操控DOM的屬性或者行為，進而引起界面一些變化。當項目越來越大的時候，你的代碼會充斥着非常多的界面交互邏輯和程序的各種狀態變量，顯然這不是一個很好的開發模式，因此就有了 MVVM 的開發模式（例如 React, Vue），提倡把渲染和邏輯分離。簡單來說就是不要再讓JS直接操控DOM，JS只需要管理狀態即可，然后再通過一種模板語法來描述狀態和界面結構的關系即可。小程序的框架也是用到了這個思路，如果你需要把一個
Hello World的字符串顯示在界面上。
WXML 是這么寫 :
<text>{{msg}}</text>
JS 只需要管理狀態即可:
this.setData({ msg: "Hello World" })
語法把一個變量綁定到界面上，我們稱為數據綁定。僅僅通過數據綁定還不夠完整的描述狀態和界面的關系，還需要 if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來表達。
（10）WXSS 樣式
①樣式導入
使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。示例代碼
/*index.wxss*/ .usermotto { margin-top: 200px; } @import "../logs/logs.wxss"; /*logs.wxss*/ .usermotto { margin-top: 600px; }
最終編譯結果
②內聯樣式
框架組件上支持使用 style、class 屬性來控制組件的樣式。
- style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。
/*index.wxml*/ <view style="color:{{color}};">{{userName}}</view> /*index.js*/ Page({ data: { userName:'666' color:'red' } })
- class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上
.，樣式類名之間用空格分隔。
/*index.wxml*/ <view class="normal_view">{{userName}}</view> <view class="normal_view1">{{userName}}</view> /*index.wxss*/ .normal_view{ color:blue; font-size: 10px; } .normal_view1{ color:blue; font-size: 20rpx; }
渲染結果：
從上面可以看出字體大小一樣，此時選擇的機型為iphone6
③選擇器
目前支持的選擇器有：
| 選擇器 | 樣例 | 樣例描述 |
|---|---|---|
| .class | .intro |
選擇所有擁有 class="intro" 的組件 |
| #id | #firstname |
選擇擁有 id="firstname" 的組件 |
| element | view |
選擇所有 view 組件 |
| element, element | view, checkbox |
選擇所有文檔的 view 組件和所有的 checkbox 組件 |
| ::after | view::after |
在 view 組件后邊插入內容 |
| ::before | view::before |
在 view 組件前邊插入內容 |
④全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作用於每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。
（11）JS 邏輯交互
一個服務僅僅只有界面展示是不夠的，還需要和用戶做交互：響應用戶的點擊、獲取用戶的位置等等。在小程序里邊，我們就通過編寫 JS 腳本文件來處理用戶的操作。
/*index.wxml*/ <view>{{ msg }}</view> <button bindtap="clickMe">點擊我</button>
點擊 button 按鈕的時候，希望把界面上 msg 顯示成 "修改后顯示信息"，於是我們在 button 上聲明一個屬性: bindtap ，在 JS 文件里邊聲明了 clickMe 方法來響應這次點擊操作：
/*index.wxml*/ <view>{{ msg }}</view> <button bindtap="clickMe">點擊我</button>
/*index.js*/ Page({ data:{ msg:'原始顯示信息' }, clickMe: function () { this.setData({ msg: "修改后顯示信息" }) } })
響應用戶的操作就是這么簡單，更詳細的事件可以參考文檔 WXML - 事件 。
此外你還可以在 JS 中調用小程序提供的豐富的 API，利用這些 API 可以很方便的調起微信提供的能力，例如獲取用戶信息、本地存儲、微信支付等。在前邊的 QuickStart 例子中，在 pages/index/index.js 就調用了 wx.getUserInfo 獲取微信用戶的頭像和昵稱，最后通過 setData 把獲取到的信息顯示到界面上。更多 API 可以參考文檔 小程序的API 。
通過這個章節，了解了小程序涉及到的文件類型以及對應的角色，之后章節，我們把這一章所涉及到的文件通過 “小程序的框架” 給 “串” 起來，讓他們都工作起來。
.