上一篇我們簡單介紹了一下微信小程式的IDE(微信小程式購物商城系統開發系列-工具篇)，相信大家都已經蠢蠢欲試建立一個自己的小程式，去完成一個獨立的商城網站。
先彆著急我們一步步來，先嚐試下寫一個自己的小demo.
這一篇文章我們主要的是介紹一下小程式的一些目錄結構，以及一些語法，為我們後面的微信小程式商城系統做鋪墊。
首先我們來了解下小程式的目錄結構
Pages 我們新建的一些頁面將儲存在這個資料夾下面，每一個小程式頁面是由同路徑下同名的四個不同字尾檔案的組成，如：index.js、index.wxml、index.wxss、index.json。.js字尾的檔案是指令碼檔案，.json字尾的檔案是配置檔案，.wxss字尾的是樣式表檔案，.wxml字尾的檔案是頁面結構檔案。
Utils 我們寫的一些公共的工具js可以放裡面。
app.js 是小程式的指令碼程式碼。我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。呼叫框架提供的豐富的 API，如本例的同步儲存及同步讀取本地資料。
app.json 是對整個小程式的全域性配置。我們可以在這個檔案中配置小程式是由哪些頁面組成，配置小程式的視窗背景色，配置導航條樣式，配置預設標題。
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
注：app.json中是對整個小程式的全域性設定，當然每個頁面也有自己的json檔案。每個頁面下的json檔案只能對window 進行設定，所以頁面json檔案下只需寫入window的配置即可
{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }
app.wxss 是整個小程式的公共樣式表。我們可以在頁面元件的 class 屬性上直接使用 app.wxss 中宣告的樣式規則。
每個頁面中也可以定義自己的wxss。Wxss也就是微信所提供的css樣式表，裡面的寫法幾乎和css差不多。不過他支援的選擇器相對比較少。在寫的時候我們以前的一些專案的css 基本可以拿過來用，不過除了下面這些選擇器外，你使用了其他的選擇器，可能使整個頁面報錯!
Index.whtml wxml字尾的資料夾也就是微信小程式提供給我們的頁面結構文件，就相當於我們以前的web頁面的html 差不多，只不過他自定義了一些自己的標籤。
接下來我們就新建一個頁面來嘗試下
在pages 下新建頁面test 注意新建的.js,.json,.xml,.wxss。和page 下定義的 test資料夾名稱保持一致，微信微信小程式會自動讀取這些檔案，並生成小程式例項。
首先我們要在app.json下配置好我們剛新建的頁面
注意:頁面配置先後的順序，在實際操作中發現，第一個配置的為首頁。
配置好後我們就可以編寫我們的頁面程式碼。
大家可以看到，我們在app.json 頁面可以直接配置當前頁面的一些window屬性
Wxml 中我們可以編寫一些我們頁面展示的結構，也就是我們以前寫html一樣。這中間我們使用到了 <view> 標籤，他就相當於我們以前用的div 差不多。
Wxss 大家看到是不是和我們以前寫的css 差不多。這邊是個我們之前定義的 .box 加一個樣式。
test.js 是頁面的指令碼檔案，在這個檔案中我們可以監聽並處理頁面的生命週期函式、獲取小程式例項，宣告並處理資料，響應頁面互動事件等。
這邊我們使用bintap給view綁一個點選事件然後再彈出一個提示框。
注意：這邊js的寫法和我們以前的寫法完全一樣，只不過這裡面不能使用window物件和document物件，同樣的也不能使用jquery ,zepto等框架，因為這些框架中會使用到window和document 物件。
好啦！今天只是給大家簡單介紹下小程式的目錄結構和簡單的使用了下，下一節我們會來開始我們商城系統的編寫。
版權宣告：本系列文章基於“閃酷SAAS微信小程式商城系統【酷客多】”歸納整理，可自由轉發，但需要保留智慧財產權，否則保留追究法律程式權利。