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

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

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

圖1：

 

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

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

圖2：

 

接下來就進入了項目的正式開發的界面了，現在來說下這個界面：

左邊是小程序的頁面效果展示界面，小程序的頁面結構樣式等效果會在左邊顯示出來。

中間是項目的源文件結構目錄。

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

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

圖3：

 

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

編碼之前講一下小程序的開發規矩（擔心有些初學者理解不了姑且叫規矩吧）接下來的內容很重要，仔細看哦！

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

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

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

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

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

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

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

*.js文件是當前頁面腳本文件，也是業務邏輯的處理文件，當前頁面的所有和后端服務器接口的交互，請求數據的邏輯都在這個文件完成，是核心文件，必須創建。

*.wxml文件是搭建當前頁面元素的文件。負責搭建當前頁面的結構和布局，相當于網頁開發中的*.html文件，這個文件中存放一些類似于div  span  form  input  sectiond等布局代碼，必須創建。

*.wxss文件是當前頁面的樣式文件。負責調整當前頁面的樣式，元素之間的間距，字體的大小，字體顏色，背景圖等，相當于網頁開發中的css文件，需要時創建。

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

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

手冊截圖，圖4：

 

說了這么多，現在要正式開發啦：

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

圖5

 

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

圖6：

 

3、頁面結構現在已經完成了，該有的頁面也有了。但是，此時此刻頁面上居然什么也沒有顯示，當然了，因為我們還沒寫代碼呢！

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

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

<text>hello world!</text>

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

如圖7：

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

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

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

{

"pages": [

"pages/index/index"

]

}

圖8：

 

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