1、實(shí)例目錄結(jié)構(gòu)

2、實(shí)例文件說明及源碼

一個(gè)小程序包含一個(gè)app（主體部分）和多個(gè)page（頁面）

（1）app是用來描述整體程序的，由三個(gè)文件組成，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，必須放在項(xiàng)目的根目錄。

app.js是小程序的腳本代碼（必須），可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量，調(diào)用框架提供的豐富的 API。

app.json是對整個(gè)小程序的全局配置（必須），用來對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。接受一個(gè)數(shù)組，每一項(xiàng)都是字符串，來指定小程序由哪些頁面組成。微信小程序中的每一個(gè)頁面的【路徑+頁面名】都需要寫在app.json的pages中，且pages中的第一個(gè)頁面是小程序的首頁。

app.wxss是整個(gè)小程序的公共樣式表（非必須）。

（2）page是用來描述頁面，一個(gè)頁面由四個(gè)文件組成，這里以首頁index為例，每一個(gè)小程序頁面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結(jié)構(gòu)文件。

index.js 是頁面的腳本文件（必須），在這個(gè)文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù)，響應(yīng)頁面交互事件等。

index.wxss是頁面樣式表文件（非必須），當(dāng)有頁面樣式表時(shí)，頁面的樣式表中的樣式規(guī)則會層疊覆蓋app.wxss中的樣式規(guī)則。如果不指定頁面的樣式表，也可以在頁面的結(jié)構(gòu)文件中直接使用app.wxss中指定的樣式規(guī)則。

index.json是頁面配置文件（非必須），當(dāng)有頁面的配置文件時(shí)，配置項(xiàng)在該頁面會覆蓋app.json的window中相同的配置項(xiàng)。如果沒有指定的頁面配置文件，則在該頁面直接使用app.json中的默認(rèn)配置。這里無需指定。

Tips：

a.為了方便開發(fā)者減少配置項(xiàng)，小程序規(guī)定描述頁面的這四個(gè)文件必須具有相同的路徑與文件名

b.小程序提供了豐富的API，可以根據(jù)自己需求選擇（https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715）

四、測試小程序?qū)嵗?/strong>

1、打開微信web開發(fā)者工具，選擇“本地小程序項(xiàng)目”。

2、填寫小程序的AppID，項(xiàng)目名稱，選擇第三步寫好的小程序?qū)嵗募A，點(diǎn)擊“添加項(xiàng)目”。

3、如果出現(xiàn)如下效果，那么恭喜你，你的第一個(gè)小程序項(xiàng)目已經(jīng)編寫成功了！點(diǎn)擊左側(cè)邊欄“編輯”，還可以在右側(cè)編輯窗口直接對代碼進(jìn)行修改，保存（CTRL+S）后刷新（F5）即可生效。

4、如果想看小程序項(xiàng)目在手機(jī)上的效果，點(diǎn)擊左側(cè)邊欄“項(xiàng)目”，點(diǎn)擊“預(yù)覽”生成二維碼，打開微信掃描，就可以看到了。

?