摘要：什么是小程序先引用小龍哥的一句話來看看啥是小程序小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用觸手可及的夢(mèng)想，用戶掃一掃或者搜一下即可打開應(yīng)用。也體現(xiàn)了用完即走的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題。

先引用小龍哥的一句話來看看啥是小程序？

小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題。應(yīng)用將無處不在，隨時(shí)可用，但又無需安裝卸載。   - Allen Zhang（張小龍）

從程序猿的角度來說：小程序就是依賴于微信平臺(tái)，利用小程序框架提供視圖層描述語言WXML、WXSS，以及JavaScript來實(shí)現(xiàn)一個(gè)具備原生體驗(yàn)的Web應(yīng)用。微信小程序相當(dāng)于基于微信平臺(tái)造了一個(gè)React Native的輪子，通過JS的跨平臺(tái)性實(shí)現(xiàn)了一套代碼跨平臺(tái)部署、運(yùn)行。

首先，我們先通過微信web開發(fā)者工具新建一個(gè)項(xiàng)目，項(xiàng)目建成后會(huì)自動(dòng)生成下列文件。下文全部圍繞這個(gè)新建的項(xiàng)目來簡(jiǎn)單的介紹一下小程序。

可以看出整個(gè)工程包括app.js、app.json、app.wxss，以及pages和utils目錄，后面我們一次介紹各個(gè)文件和目錄的作用。

其中app.js、app.json、app.wxss最為重要，他們?yōu)閷?duì)整個(gè)小程序進(jìn)行全局配置。

app.js，聲明小程序的整個(gè)生命周期、定義全局變量

app.json，對(duì)整個(gè)小程序起全局配置的作用，規(guī)定小程序包括哪些頁(yè)面、窗口的樣式、底部tab欄的樣式、網(wǎng)絡(luò)超時(shí)事件、是否開啟debug模式

app.wxss，這里的wxss類似于CSS，只不過是針對(duì)微信做了一部分拓展，定義了小程序的全局樣式

而pages目錄下面每一子目錄都代表了小程序中的一個(gè)頁(yè)面，而每一個(gè)頁(yè)面都由*.js、*.json、*.wxml、*.wxss組成，這里又出現(xiàn)了一個(gè)新的后綴wxml，同時(shí)再次出現(xiàn)了wxss，后面會(huì)解釋他倆是啥用的。先解釋一下，頁(yè)面中的這四種文件是干啥用的？

*.js，處理頁(yè)面的邏輯

*.json，處理頁(yè)面的配置

*.wxml，處理頁(yè)面的結(jié)構(gòu)

*.wxss，處理頁(yè)面的樣式

為了減少配置同一個(gè)頁(yè)面目錄中的文件都需要以同一個(gè)名字命名，例如個(gè)人習(xí)慣將所有頁(yè)面目錄下面的文件都用index命名。

上面有提到app.json可以配置頁(yè)面的全局配置，而pages目錄下*.json則可以配置對(duì)應(yīng)頁(yè)面window選項(xiàng)（窗口的樣式），那么我們到底可以配置哪些具體內(nèi)容呢？

// app.json
{
    // 定義小程序中有哪些頁(yè)面
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    
    // 窗口的樣式
    "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Demo",
        "navigationBarTextStyle":"black",
        "enablePullDownRefresh": true
    },
    
    // 底部tab的內(nèi)容和樣式
    "tabBar": {
        // tab的具體內(nèi)容
        "list": [
            {
              "pagePath": "pages/index/index",
              "text": "首頁(yè)"
            }, 
            {
              "pagePath": "pages/logs/logs",
              "text": "日志"
            }
        ]
    },
    
    // 設(shè)置不同請(qǐng)求的網(wǎng)絡(luò)超時(shí)
    "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
    },
    
    // 是否開啟debug模式，開啟debug模式之后可以在微信開發(fā)者工具的控制臺(tái)中看到整個(gè)APP，以及每個(gè)頁(yè)面的生命周期日志
    "debug": true
}

常用的配置都在這里了，根據(jù)配置的命名其實(shí)已經(jīng)可以猜個(gè)大概啦，如果猜不出來可以參考文檔“配置”

工程中出現(xiàn)了一個(gè)新的后綴*.wxml，而WXML(Weixin Markup Language)是微信小程序框架設(shè)計(jì)出來的一種標(biāo)簽語言，你可以直接把他理解成是微信定義了一套帶有特殊事件、效果、屬性的標(biāo)簽，但本質(zhì)上和