小程式開發之【前端開發】【學習第二節】【一】
學習前必須瞭解的：
得了解到小程式檢視層WXML，WXSS，以及邏輯層JS，這些是小程式開發的核心內容。
小程式框架將整個系統劃分為檢視層和邏輯層，檢視層由框架設計的標籤語言（WeiXin Markup Language）和用於描述WXML元件樣式的WXSS（WeiXin Style Sheets）組成，它們的關係就像HTML和CSS的關係。WXML和WXSS在渲染時會被框架解析為不同端的本地渲染檔案，這樣就能保證一套程式碼能在多處執行，並且能最大化地接近原生App。渲染原理和RN（React Native）、Weex相近。小程式邏輯層是一套執行在本地JavaScript引擎的JavaScript程式碼，在此基礎上框架實現了一套模組化機制，讓每個JS檔案有獨立的作用域和模組化能力，這套模組化機制CommonJS規範。
如果不太瞭解JS模組化，有個知乎問答上講的很清楚https://www.zhihu.com/question/39825164，模組化寫法http://www.ruanyifeng.com/blog/2012/10/javascript_module.html，不瞭解CommonJS，AMD，CMD區別的，也有一篇文章講的比較清楚https://www.jianshu.com/p/09ffac7a3b2c
小程式整體開發流程非常接近前端HTML+CSS+JavaScript開發模式，與其不同的是，小程式沒有DOM的概念（什麼是DOM：https://www.zhihu.com/question/34219998），在本地的JavaScript引擎中也沒有window、document物件，我們則不能通過操作DOM來操作頁面，小程式的檢視層和邏輯層的互動是通過資料繫結和事件響應實現的，這是一種單項繫結的機制。這套機制需要首先將邏輯層和檢視層的資料和事件繫結，當需要修改頁面時，邏輯層只需要呼叫特定的setData方法修改已繫結的資料，這時框架會自動觸發WXML重新渲染，達到邏輯層對檢視層的控制，當框架收到使用者互動操作時，也是如此，只不過是根據繫結的事件，來達到邏輯層對檢視層的控制。
大概的圖例就是：
檢視層
丨使用者互動行為 ↑ 邏輯層呼叫setData()
丨呼叫邏輯層相 丨 觸發檢視層渲染
↓ 關事件方法 丨
邏輯層
手打的圖例。。。自行體會
通過例項瞭解檢視層與邏輯層的關係：
我們在index.wxml中寫上一句
<view bindtap="countClick">測試例項，你點選了{{count}}次</view> 我們再在index.js中加入事件 data: { motto: 'Hello World', userInfo: {}, //加入的變數 count:0, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, //加入的計算點選次數函式 countClick: function(){ this.setData({ count:this.data.count+1 }) },
放在Page中
效果圖就是這樣：
這樣，當我們點選文字時，點選次數也會增加。這就是最簡單的小程式，所有複雜的專案都是圍繞這個結構展開的。有人可能會問，那app.json是幹什麼的？這是專案的配置檔案，當執行這個專案時，框架首先是解析配置檔案，通過pages設定找到預設首頁mypages/index/index（pages第一個路徑預設為首頁），然後載入mypages/index目錄中index.wxml、index.wxss、index.js、index.json這四個檔案進行頁面渲染。
在index.wxml檔案中，我們簡單使用了<view/>元件，頁面渲染時，框架將邏輯層中data的count屬性與檢視層的count進行了繫結，所以一開啟頁面會顯示點選次數為0，點選<view/>時，則會觸發tap事件，這時檢視層根據<view/>元件bindtap屬性值，將繫結的countClick事件傳送給邏輯層，邏輯層根據方法名找到對應事件處理函式countClick並執行。我們再呼叫setData方法修改count值，然後重新渲染檢視層，所以頁面數字點選次數增加。這就是小程式的資料繫結和事件響應系統。
這裡說的比較詳細，就是為了理解這種響應機制，如果有一點前端開發基礎，很容易就能理解，之後這種機制不會再細說了。
這裡還需要解釋一下，一個完整的小程式分為框架程式主題檔案和頁面檔案：框架主體檔案只有一份，app.json、app.js、app.wxss，它們分別控制小程式整體配置，邏輯和樣式。小程式啟動時只會執行一次。
頁面檔案：小程式每個頁面都會有：.wxml、.wxss、.js和json四個檔案。它們分別控制結構、樣式、邏輯和配置。其中.wxml、.wxss是必須得。框架規定，同一個頁面的這4個檔案必須具有相同的路徑和檔名，所以在這個專案重我們將它們放置在pages/index路徑下，且檔名統一為index。
框架主體檔案：
app.json：小程式公共設定，配置小程式全域性設定
app.js：小程式邏輯檔案，主要用於註冊小程式全域性例項，編譯時會和其他頁面邏輯檔案打包成一份JavaScript檔案
app.wxss：小程式公共樣式表，對所有頁面的佈局檔案都有效。
app.json和app.js是必須存在的，app.wxss不是必須建立的。
配置檔案（app.json）：
app.json是小程式配置檔案，編寫時要遵循json格式規範。app.json在程式載入時載入，負責對小程式的全域性配置。它的配置項包括pages（設定頁面路徑）、window（設定預設頁面的視窗表現）、tabBar（設定tab的表現，tab導航欄，可以放置於頂部或底部，用於不同功能頁面的切換，有篇部落格介紹得很好http://blog.csdn.net/lecepin/article/details/54380814）networkTimeout（設定網路超時時間）
pages配置：
這就不介紹了。。。很簡單，需要提醒的就是不需要填寫字尾名，渲染頁面時框架會自動尋找路徑。
window配置：
負責小程式狀態列、導航條、標題、視窗背景色等系統樣式。屬性什麼的，網上輕鬆能搜到。不過，我還是寫一下。
navigationBarBackgroundColor：導航欄背景顏色，值為HexColor（十六進位制顏色值），如#ff83fa，預設值為#000000
navigationBarTextStyle：導航欄標題顏色，僅支援black/white，預設為white
navigationBarTitleText：導航欄標題文字內容
backgroundColor：視窗背景色，值為HexColor（十六進位制顏色值），如#ff83fa，預設值為#ffffff
backgroundTextStyle：下拉背景字型、Loading圖的樣式，僅支援dark/light
enablePullDownRefresh：是否開啟下拉重新整理，預設為false，開啟後，當用戶下拉時，會觸發頁面onPullDownRefresh事件
tabBar配置：
小程式頂部或者底部需要選單欄時，我們可以通過配置tabBar快速實現，tabBar是個非必填的專案。
可配置的屬性：
color：tab上的文字預設顏色，值為HexColor（十六進位制顏色值），必填項。
selectedColor：tab上的文字選中時的顏色，HexColor。必填
backgroundColor：tab的背景色，HexColor，必填。
borderStyle：tabbar上邊框顏色，僅支援black/white，預設值為black。
list：tab的列表，必填。值為一個數組，最少2個，最多5個tab，陣列中每個項是一個物件，代表一個tab的相關配置，每項配置：
pagePath：頁面路徑，頁面跳轉，必須在pages中先定義，必填項。
text：tab上按鈕的文字，必填
iconPath：tab上icon圖片相對路徑。大小限制40Kb，必填
selectedIconPath：選中時圖片的相對路徑，icon同上
position：tab在頂部還是底部顯示，可選值為bottom，top，預設為bottom
一個例子，我們將app.json的配置檔案改寫成
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar":{
"color":"#000000",
"selectedColor":"#ff7f50",
"backgroundColor":"#ffffff",
"borderStyle":"black",
"list":[
{
"iconPath":"images/1.png",
"selectedIconPath":"images/1.png",
"pagePath":"pages/index/index",
"text":"首頁"
},
{
"iconPath": "images/1.png",
"selectedIconPath": "images/1.png",
"pagePath": "pages/index/index",
"text": "搜尋"
}
]
}
}
效果圖（其中的icon...）：
networkTimeout配置：
小程式各種網路請求API的超時時間只能通過networkTimeout統一設定，不能在API中單獨設定。
deug配置：
配置項是否開啟debug模式，預設關閉。開啟debug模式後，在開發者工具的控制面板，除錯資訊info的形式輸出，其中資訊有page的註冊，頁面路由，資料更新，事件觸發，可以幫助開發者快速定位一些常見問題。
以上就是app.json的5類配置項。這些配置項是全域性的，當路由到對應頁面時，頁面配置檔案的配置項會覆蓋全域性配置。