微信小程序開發（一）之Hello World!

一、工欲善其事，必先利其器——搭建開發環境

首先，到官方網站上下載一個開發工具，根據自己電腦的操作系統平臺下載相應的版本。安裝完成后運行開發工具，此時，需要用微信掃描上面的二維碼才能繼續后面的操作……
開發工具下載地址

二、創建工程項目——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之間的關系就容易得多了
【歡迎各位大神批評指正，轉載請保留鏈接……謝謝！】