微信小程序開發(fā)（一）之Hello World!

一、工欲善其事，必先利其器——搭建開發(fā)環(huán)境

首先，到官方網(wǎng)站上下載一個(gè)開發(fā)工具，根據(jù)自己電腦的操作系統(tǒng)平臺下載相應(yīng)的版本。安裝完成后運(yùn)行開發(fā)工具，此時(shí)，需要用微信掃描上面的二維碼才能繼續(xù)后面的操作……
開發(fā)工具下載地址

二、創(chuàng)建工程項(xiàng)目——Hello World

具體操作步驟如下圖所示，很簡單，在此就不在贅述了。

創(chuàng)建項(xiàng)目.png

三、開始寫代碼

1、點(diǎn)擊開發(fā)工具左側(cè)的菜單項(xiàng)“編輯”，我們就可以看到我們剛剛創(chuàng)建的工程目錄結(jié)構(gòu)
2、在"pages"目錄下創(chuàng)建一個(gè)目錄“hello”。然后在“hello”目錄下創(chuàng)建如下幾個(gè)文件：hello.js，hello.json，hello.wxml，hello.wxss。最終效果圖如下：

目錄結(jié)構(gòu).png

3、終于可以寫代碼了
hello.js文件代碼如下（注冊頁面）：

Page({
    data:{
        hello:"我的第一個(gè)微信小程序……"
    }
})

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”數(shù)組下添加JSON代碼“pages/hello/hello”，也就是我們創(chuàng)建的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、點(diǎn)擊左側(cè)菜單“編譯”即可運(yùn)行我們的程序了，運(yùn)行效果圖如下：

結(jié)果.png

四、總結(jié)：

盡管我們已經(jīng)成功運(yùn)行了我們的“Hello World”程序，但我相信大家還是一頭霧水，比如：我們創(chuàng)建的那幾個(gè)文件和其他文件是什么關(guān)系，為什么要那樣修改代碼……接下來，我們就總結(jié)下吧

1、微信小程序系統(tǒng)分為兩塊：視圖層（View）和邏輯層（App Service）

視圖層描述語言是WXML和WXSS，邏輯層框架語言是基于 JavaScript 的。在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。文件關(guān)系圖如下：

關(guān)系圖.png

2、WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng).js文件里 Page()函數(shù)里 的 data，如下圖：

bind.png

3、app.json是小程序的全局配置文件，在此配置頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。如下圖：

appjson.png

4、當(dāng)創(chuàng)建好工程后我們可以按如下步驟模式 來完成編碼：

（1）在pages目錄下新建頁面目錄，如上面的hello目錄
（2）在新建好的目錄下（如hello目錄）新建.js，.wxml，.wxss，.json四個(gè)文件，如上面的hello.js，hello.wxml，hello.wxss，hello.json
（3）在全局配置文件app.json里添加剛剛新建的頁面路由信息，即在JSON數(shù)組“pages”里添加剛剛新建頁面的路徑，如上面的“pages/hello/hello”。如要添加更多設(shè)置則繼續(xù)添加其他JSON信息，如網(wǎng)絡(luò)請求，tab窗口等，詳細(xì)配置信息指南請自行查看官方文檔
（4）在.wxml文件里面編寫視圖布局代碼，如上面的hello.wxml；在.wxss文件里編寫CSS樣式代碼，這里的樣式代碼將作用于.wxml里面視圖的顯示樣式
（5）用App()函數(shù)注冊程序，該函數(shù)接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。如開發(fā)工具自動生成的app.js文件
（6）用Page()函數(shù)注冊頁面，該函數(shù)接受一個(gè) object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。也就是在.js文件里編寫代碼，如上面的hello.js
（7）在.json文件里編寫JSON數(shù)據(jù)，如當(dāng)前頁面的標(biāo)題，標(biāo)題欄背景等
其實(shí)，只要理清楚.wxml，.wxss，.js，.json這4個(gè)文件彼此之間的邏輯關(guān)系，及其與app.js，app.json，app.wxss之間的關(guān)系就容易得多了
【歡迎各位大神批評指正，轉(zhuǎn)載請保留鏈接……謝謝！】