小程序開發(fā)真的有那么難吧？其實也不見得，今天第九程序就教大家如何開發(fā)小程序，簡單到連程序小白都能夠開發(fā)！

準備材料：

小程序模擬器：微信小程序官方模擬器（發(fā)送“小程序模擬器”到第九程序公眾號獲取下載地址）

材料非常的簡單，只需要下載官方提供的模擬器（根據(jù)自己電腦的版本下載），下載安裝完畢以后所有的環(huán)境就搭建完成了，不需要再配置其他依賴，不得不說大廠考慮的還是比較周全的。

初始化配置

下載完畢后啟動文件，會出現(xiàn)一個二維碼，用任意的微信賬號掃碼登錄即可。

登錄成功后選擇“添加項目”。接下來會進入初始化界面。

第一項AppID可以暫時選擇不填（部分API受限但并不影響我們本次試驗），如果你是個人開發(fā)者的話，當然如果有公測賬號可以選擇輸入自己的AppID。

項目名稱這里我們填：FirstApp， 項目目錄選擇一個常用的目錄即可，記得勾選“在當前目錄中創(chuàng)建quick start 項目”（選中后系統(tǒng)會為我們生成一個簡單的頁面，否則什么也不生成）。接著點擊“添加項目”。

接下來就進入到小程序模擬器的主界面：

界面左邊是當前正在運行的程序的預(yù)覽視圖，每次我們編輯完代碼按 ctrl/ command + s 保存，預(yù)覽視圖就會自動刷新至最新狀態(tài)。

中間是當前工作的項目目錄，這里我們會發(fā)現(xiàn)模擬器已經(jīng)自動幫我們生成了一些初始化的代碼。待會我們再來一一介紹這些文件分別是用來干什么的。

右邊就是我們的代碼編輯區(qū)，這里就是我們敲代碼的地方啦。

快速上手

每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結(jié)構(gòu)文件。可以在index.wxss插入一下代碼試試效果。

編輯完后保存，這時你會看到右邊預(yù)覽界面發(fā)生了變化。

接下來我們打開 index.js，在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗?，聲明并處理?shù)據(jù)，響應(yīng)頁面交互事件等。

 logs 頁面使用 <block/> 控制標簽來組織代碼，在 <block/> 上使用 wx:for-items 綁定 logs 數(shù)據(jù)，并將 logs 數(shù)據(jù)循環(huán)展開節(jié)點

運行的結(jié)果可以在右邊頁面看到

美化ActionBar

json文件負責配置ActionBar顏色，我們只需要在里面添加如下代碼即可，下圖有參數(shù)說明！美化頁面

美化頁面我們用到了 wxml 和 wxss文件
為了程序代碼結(jié)構(gòu)簡潔
我們需要在跟目錄下創(chuàng)建一個新文件夾 名字隨意，我們這里叫pages
然后在pages文件夾里再創(chuàng)建新文件夾 名字隨意 這里我們叫 index
然后我們創(chuàng)建index.wxml文件然后在里面寫入以下代碼

然后創(chuàng)建index.wxss文件然后在里面寫入以下代碼

然后我們創(chuàng)建 index.js文件
在文件中輸入如下代碼（輸入Page IDE會有提示）

最后就是配置首頁

Json文件負責配置頁面路徑,所以我們在里面加入如下代碼

其中index的含義 其實就是指index.js文件
這里需要說明一點 pages 里面的路徑其實是指向js文件的
如果一個目錄下沒有該名稱的js文件是會報錯的！

手機預(yù)覽（只有獲得AppId的才有權(quán)限預(yù)覽）

開發(fā)者工具左側(cè)菜單欄選擇"項目"，點擊"預(yù)覽"，掃碼后即可在微信客戶端中體驗。