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

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

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

圖1：

 

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

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

圖2：

 

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

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

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

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

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

圖3：

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

手冊截圖，圖4：

 

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

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

圖5

 

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

圖6：

 

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

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

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

<text>hello world!</text>

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

如圖7：

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

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

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

{

"pages": [

"pages/index/index"

]

}

圖8：

 

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