這個(gè)教程適用對(duì)象：這篇文章適合所有的想學(xué)習(xí)微信小程序的新手們，需要你們有一點(diǎn)的html和css的基礎(chǔ)。如果你只是想了解下小程序的開發(fā)流程這篇文章也特別適合你。大神們可以直接跳過這篇文章了。

微信專門為小程序開發(fā)了一個(gè)ide叫做微信開發(fā)者工具。最新一版的微信開發(fā)者工具，把微信公眾號(hào)的調(diào)試開發(fā)工作也集成了進(jìn)去，可見微信對(duì)小程序多么的充滿信心。對(duì)于初學(xué)者來說，微信小程序的所有開發(fā)工作以后最好都在這個(gè)【微信開發(fā)者工具】上完成，編輯完了就可以調(diào)試真的很方便。微信給這個(gè)ide開發(fā)了window64、 window32 、mac三個(gè)版本，連window都開發(fā)了兩個(gè)版本，真的很佩服微信的用戶體驗(yàn)。ide大家可以去百度搜索下載

下載安裝完【微信開發(fā)者工具】打開ide看到的第一個(gè)畫面

圖1：

 

上面的按鈕是小程序調(diào)試，下面的按鈕是公眾號(hào)調(diào)試，今天就只講小程序了，公眾號(hào)以后再講或者直接略過了。

選擇“本地小程序項(xiàng)目”進(jìn)入第二個(gè)畫面，在這個(gè)畫面里填寫小程序的appid和項(xiàng)目名稱以及項(xiàng)目所在目錄。因?yàn)樾苄軟]有內(nèi)測資格，所以我沒有appid，這里就點(diǎn)擊第一個(gè)框的右下方綠顏色字“沒有appid”就行。然后填寫項(xiàng)目名稱，自己愛寫什么就寫什么好了，不過我建議大家不要隨意，最好按照標(biāo)準(zhǔn)的流程來，寫的正式一點(diǎn)，這是一個(gè)開發(fā)者的態(tài)度，我們應(yīng)該重視每一個(gè)項(xiàng)目即使是一個(gè)小的學(xué)習(xí)demo。最后選擇項(xiàng)目所在目錄，這里也一樣你可以選擇任何一個(gè)目錄，不過我還是希望大家能夠?yàn)檫@個(gè)項(xiàng)目專門做一個(gè)目錄。好了所有的都填完點(diǎn)擊右下角“添加項(xiàng)目”就可以了。

圖2：

 

接下來就進(jìn)入了項(xiàng)目的正式開發(fā)的界面了，現(xiàn)在來說下這個(gè)界面：

左邊是小程序的頁面效果展示界面，小程序的頁面結(jié)構(gòu)樣式等效果會(huì)在左邊顯示出來。

中間是項(xiàng)目的源文件結(jié)構(gòu)目錄。

最右邊是編碼窗口可以在這里編輯代碼。

我們新建的項(xiàng)目進(jìn)入以后什么都沒有是空的，需要我們一點(diǎn)一點(diǎn)的手動(dòng)編寫代碼。

圖3：

 

好了接下來就帶大家一步一步寫一個(gè)hello world。

編碼之前講一下小程序的開發(fā)規(guī)矩（擔(dān)心有些初學(xué)者理解不了姑且叫規(guī)矩吧）接下來的內(nèi)容很重要，仔細(xì)看哦！

小程序開發(fā)需要三個(gè)描述整體程序的app文件 和 一個(gè)描述多個(gè)頁面的 pages文件夾。

（1）三個(gè)app文件分別是app.js,app.json,app.wxss。

app.js文件是腳本文件處理一些公共的或者全局的邏輯。比如在這里定義全局變量處理登錄邏輯指定首頁等。

app.json文件是小程序的整體配置文件。我們必須要在這個(gè)文件中配置小程序是由哪些頁面組成的，我們還可以在這個(gè)文件中配置整個(gè)小程序的統(tǒng)一的窗口 背景色，導(dǎo)航條  樣式，默認(rèn)標(biāo)題。但是必須注意該文件不可添加任何注釋。

app.wxss文件是整個(gè)小程序的公共樣式表。我們可以在小程序子頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。也就是說在這個(gè)文件里定義的樣式在其他任何的子頁面中都可以使用。這個(gè)也是為了代碼的簡潔和整體風(fēng)格的統(tǒng)一。

（2）接下來說pages文件夾：

小程序的所有顯示的頁面都必須以子文件夾的形式存放在pages文件夾里面，包括首頁。項(xiàng)目展示多少個(gè)頁面，在pages文件夾下就要新建多少個(gè)子文件夾。每個(gè)頁面的子文件夾，必須包括這四個(gè)文件：*.js   ,  *.wxml   ,  *.wxss  和 *.json（* 表示文件名）。這四個(gè)文件的文件名必須和子文件夾的名字一樣。

*.js文件是當(dāng)前頁面腳本文件，也是業(yè)務(wù)邏輯的處理文件，當(dāng)前頁面的所有和后端服務(wù)器接口的交互，請(qǐng)求數(shù)據(jù)的邏輯都在這個(gè)文件完成，是核心文件，必須創(chuàng)建。

*.wxml文件是搭建當(dāng)前頁面元素的文件。負(fù)責(zé)搭建當(dāng)前頁面的結(jié)構(gòu)和布局，相當(dāng)于網(wǎng)頁開發(fā)中的*.html文件，這個(gè)文件中存放一些類似于div  span  form  input  sectiond等布局代碼，必須創(chuàng)建。

*.wxss文件是當(dāng)前頁面的樣式文件。負(fù)責(zé)調(diào)整當(dāng)前頁面的樣式，元素之間的間距，字體的大小，字體顏色，背景圖等，相當(dāng)于網(wǎng)頁開發(fā)中的css文件，需要時(shí)創(chuàng)建。

*.json文件是當(dāng)前頁面的配置文件。配置當(dāng)前頁面的窗口背景色，導(dǎo)航條樣式，默認(rèn)標(biāo)題等，需要時(shí)創(chuàng)建不需要千萬不要?jiǎng)?chuàng)建，這里我發(fā)現(xiàn)一個(gè)bug，就是如果創(chuàng)建了這個(gè)配置文件，但是配置文件中沒有任何內(nèi)容，那么頁面渲染的時(shí)候什么也顯示不出來，所以如果創(chuàng)建了這個(gè)文件，那么就必須在這個(gè)文件里寫點(diǎn)什么即使寫“{}”也行，要不然就不要?jiǎng)?chuàng)建。（個(gè)人猜測：是如果json文件為空，小程序在加載的時(shí)候就認(rèn)為這個(gè)json配置是錯(cuò)的，頁面渲染終止。我已經(jīng)把這個(gè)bug提交給微信官方了?。。。?/p>

以上這四個(gè)文件只作用于當(dāng)前的頁面，不作用于整體和其他頁面

手冊(cè)截圖，圖4：

 

說了這么多，現(xiàn)在要正式開發(fā)啦：

1、點(diǎn)擊 目錄窗口 右上角的 + 號(hào)，創(chuàng)建一個(gè)pages文件夾和app.js，app.json，app.wxss文件。創(chuàng)建完成以后就是下面這個(gè)樣子：

圖5

 

2、此時(shí)pages文件夾下還沒有任何的頁面，現(xiàn)在我們的項(xiàng)目需要一個(gè)首頁，那么就需要在pages目錄下新建首頁的子文件夾，點(diǎn)擊 pages那行的最右邊的 +號(hào)創(chuàng)建index子文件夾，然后點(diǎn)擊index那行的最右邊的+號(hào)，在這個(gè)子文件夾里把那3個(gè)文件創(chuàng)建完（鑒于上文發(fā)現(xiàn)的bug，這里就先不創(chuàng)建index.json文件，需要時(shí)再創(chuàng)建）。這里要注意，3個(gè)文件必須和目錄同名。完成以后，就是下面這樣

圖6：

 

3、頁面結(jié)構(gòu)現(xiàn)在已經(jīng)完成了，該有的頁面也有了。但是，此時(shí)此刻頁面上居然什么也沒有顯示，當(dāng)然了，因?yàn)槲覀冞€沒寫代碼呢！

好吧，接下來，開始敲~~~代~~~碼~~~~

上面已經(jīng)說了，wxml是搭建頁面元素的文件。我從子頁面的wxml文件開始，來一點(diǎn)一點(diǎn)的編寫。寫下第一行代碼：

<text>hello world!</text>

寫完了，crtl+s保存就行。今天子頁面的代碼編寫工作已經(jīng)完成了，是不是很驚悚，很難以置信。今天，子頁面就寫這一行代碼。

如圖7：

4、首頁頁面雖然我們寫好了，但是現(xiàn)在小程序的頁面上還是什么都沒有顯示。

別著急！這是因?yàn)槲覀冞€沒有配置。如果想要頁面顯示出來，就必須在app.json中配置小程序的頁面，參數(shù)為pages。pages是一個(gè)數(shù)組，其中的每個(gè)元素都是每個(gè)頁面的相對(duì)根目錄的路徑+文件名，文件名不需要寫后綴，小程序運(yùn)行的時(shí)候會(huì)自動(dòng)去尋找.json  .wxml .wxss .js四個(gè)文件。數(shù)組的第一項(xiàng)表示小程序的初始頁面，也就是首頁，小程序的每個(gè)頁面都需要在數(shù)組中配置，并且以后小程序頁面增加或者減少都需要修改pages數(shù)組。

現(xiàn)在我們?cè)赼pp.json中寫下我們的配置信息，我們把index做為小程序的初始頁面，代碼如下：

{

"pages": [

"pages/index/index"

]

}

圖8：

 

注意：配置文件的編寫遵循json的格式，參數(shù)需要用雙引號(hào)""括起來，配置文件的開始和末尾需要用大括號(hào)"{""}"包含。