一、工欲善其事，必先利其器——搭建開發環境
首先，到官方網站上下載一個開發工具，根據自己電腦的操作系統平臺下載相應的版本。安裝完成後運行開發工具，此時，需要用微信掃描上面的二維碼才能繼續後面的操作……
開發工具下載地址
二、創建工程項目——Hello World
具體操作步驟如下圖所示，很簡單，在此就不在贅述了。
創建項目.png
三、開始寫代碼
1、點擊開發工具左側的菜單項“編輯”，我們就可以看到我們剛剛創建的工程目錄結構
2、在"pages"目錄下創建一個目錄“hello”。然後在“hello”目錄下創建如下幾個文件：hello.js，hello.json，hello.wxml，hello.wxss。最終效果圖如下：
目錄結構.png
3、終於可以寫代碼了
hello.js文件代碼如下（註冊頁面）：
Page({
data:{
hello:"我的第一個微信小程序……"
}
})hello.json文件代碼如下：
{
"navigationBarTitleText":"首頁"}hello.wxml文件代碼如下：
<view> <view class="hello">`hello`</view></view>
hello.wxss文件代碼如下：
.hello{ color:blue; font-size:28rpx; margin-left: 20rpx; margin-top: 20rpx;
}4、在app.json文件裏“pages”數組下添加JSON代碼“pages/hello/hello”，也就是我們創建的hello頁面的路徑；並修改“navigationBarBackgroundColor”鍵的值爲：“#13b7f6”，“navigationBarTextStyle”的值修改爲：“white”。app.json文件裏最終代碼如下：
{
"pages":[ "pages/hello/hello", "pages/index/index", "pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#13b7f6",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"white"
},
"debug":true}5、點擊左側菜單“編譯”即可運行我們的程序了，運行效果圖如下：
結果.png
四、總結：
儘管我們已經成功運行了我們的“Hello World”程序，但我相信大家還是一頭霧水，比如：我們創建的那幾個文件和其他文件是什麼關係，爲什麼要那樣修改代碼……接下來，我們就總結下吧
1、微信小程序系統分爲兩塊：視圖層（View）和邏輯層（App Service）
視圖層描述語言是WXML和WXSS，邏輯層框架語言是基於 JavaScript 的。在視圖層與邏輯層間提供了數據傳輸和事件系統，可以讓開發者可以方便的聚焦於數據與邏輯上。文件關係圖如下：
關係圖.png
2、WXML 中的動態數據均來自對應.js文件裏 Page()函數裏 的 data，如下圖：
bind.png
3、app.json是小程序的全局配置文件，在此配置頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。如下圖：
appjson.png
4、當創建好工程後我們可以按如下步驟模式 來完成編碼：
（1）在pages目錄下新建頁面目錄，如上面的hello目錄
（2）在新建好的目錄下（如hello目錄）新建.js，.wxml，.wxss，.json四個文件，如上面的hello.js，hello.wxml，hello.wxss，hello.json
（3）在全局配置文件app.json裏添加剛剛新建的頁面路由信息，即在JSON數組“pages”裏添加剛剛新建頁面的路徑，如上面的“pages/hello/hello”。如要添加更多設置則繼續添加其他JSON信息，如網絡請求，tab窗口等，詳細配置信息指南請自行查看官方文檔
（4）在.wxml文件裏面編寫視圖佈局代碼，如上面的hello.wxml；在.wxss文件裏編寫CSS樣式代碼，這裏的樣式代碼將作用於.wxml裏面視圖的顯示樣式
（5）用App()函數註冊程序，該函數接受一個 object 參數，其指定小程序的生命週期函數等。如開發工具自動生成的app.js文件
（6）用Page()函數註冊頁面，該函數接受一個 object 參數，其指定頁面的初始數據、生命週期函數、事件處理函數等。也就是在.js文件裏編寫代碼，如上面的hello.js
（7）在.json文件裏編寫JSON數據，如當前頁面的標題，標題欄背景等
其實，只要理清楚.wxml，.wxss，.js，.json這4個文件彼此之間的邏輯關係，及其與app.js，app.json，app.wxss之間的關係就容易得多了
【歡迎各位大神批評指正，轉載請保留鏈接……謝謝！】