微信小程序之入門篇（一）
微信小程序之注冊篇（二）
微信小程序之開發初體驗（三）——開發工具使用和目錄結構
微信小程序之生命周期（四）
微信小程序之數據綁定（五）
微信小程序之觸控事件（六）
微信小程序之基礎組件篇——視圖容器（七）
微信小程序之基礎組件篇——基礎內容（八）
微信小程序之基礎組件篇——表單組件（九）
微信小程序之基礎組件篇——導航組件（十）
微信小程序之基礎組件篇——媒體組件（十一）
微信小程序之API篇——豆瓣圖書搜索（十二）
微信小程序之拓展篇——weui-wxss（十三）
萬事俱備，現在終于可以愉快的進行小程序的開發了~~有木有雞凍，內心是不是萬馬奔騰，躍躍欲試了。
首先本篇文章介紹兩點：
1.小程序開發工具的使用
2.微信小程序目錄結構
微信小程序開發工具使用介紹
下載安裝小程序
開發工具：
微信web開發者工具
官方demo下載
安裝完成后，打開微信web開發者工具。
1.掃碼二維碼登錄 微信web開發者工具
2.掃碼二維碼以后，進入添加項目或者導入已有項目界面
3.新建項目,導入官方提供的demo——quickstart
由于只有企業、組織、政府等非個人機構才有AppID,所以個人開發者選擇無AppID，有AppID的大神可以對應填寫。注冊企業公眾號和獲取AppID的方法具體參見微信小程序之注冊篇（二）
4.完成新建項目后，即可進入開發界面
挺多人說像chrome的調試界面，很久沒有做過前端的事情了，忘了。看官自評吧。。。
5.開發工具功能區域一覽
開發工具分為8個功能區域，分別是
1.代碼編輯區——代碼編寫需要切換到這個模式下進行。
2.代碼調試區——代碼完成后，對結果、錯誤信息、網絡信息等進行調試。
3.項目管理區——進行項目基本信息的管理，完成代碼的上傳等操作。
4.工具欄——有編譯、后臺、緩存、關閉等工具模塊。
5.手機設備切換區——可以模擬各種類型的手機機型，查看小程序在不同機型下的展示結果。
6.網絡環境切換區——分別可以模擬WIFI、2G、3G、4G等網絡環境下訪問小程序的效果。
7.效果展示區——模擬顯示小程序在相應的手機設備、相應網絡環境下的展示效果。
8.調試工具欄——可以查看小程序的輸出結果信息、錯誤信息、網絡等調試信息。
6.開發工具代碼編輯
小程序項目結構
-
文件結構
文件結構
小程序的文件結構由三個文件和文件夾組成，放在根目錄（即最外層目錄）下的三個文件，分別是：
app.js小程序邏輯,決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。
app.json小程序公共設置
app.wxss小程序公共樣式表
而在根目錄的文件夾內，則是由文件名相同但是后綴不同的四個文件組成，他們的后綴分為：
.js頁面邏輯
.wxml頁面結構，類似于HTML設計網頁結構。
.wxss頁面樣式表，如同CSS設計網頁的樣式。
.json頁面配置
注：
1.文件夾內四個文件必須同名。
例如首頁index.js、index.wxml、index.wxss、index.json。
2.一個框架頁面至少包含js、wxml、wxss三個文件類型。
- app.json配置
app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。每個屬性的內部設置參數，可參考 小程序配置。
app.json配置
代碼如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首頁"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 10000
},
"debug":true
}
到此，微信小程序的開發初體驗就結束了，非常的簡單。接下來需要去了解小程序的生命周期、開發組件、開發交互等方面的知識了。
