零基礎！小白也可以開發自己的小程序！

GIF/25K

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

準備材料：

小程序模擬器：微信小程序官方模擬器（發送「小程序模擬器」到第九程序公眾號獲取下載地址）

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

初始化配置

登錄成功後選擇「添加項目」。接下來會進入初始化界面。

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

項目名稱這裡我們填：FirstApp， 項目目錄選擇一個常用的目錄即可，記得勾選「在當前目錄中創建quick start 項目」（選中後系統會為我們生成一個簡單的頁面，否則什麼也不生成）。接著點擊「添加項目」。

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

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

中間是當前工作的項目目錄，這裡我們會發現模擬器已經自動幫我們生成了一些初始化的代碼。待會我們再來一一介紹這些文件分別是用來幹什麼的。

右邊就是我們的代碼編輯區，這裡就是我們敲代碼的地方啦。

快速上手

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

編輯完後保存，這時你會看到右邊預覽界面發生了變化。

接下來我們打開 index.js，在這個文件中我們可以監聽並處理頁面的生命周期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。

logs 頁面使用 控制標籤來組織代碼，在 上使用 wx:for-items 綁定 logs 數據，並將 logs 數據循環展開節點

運行的結果可以在右邊頁面看到

美化ActionBar

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

美化頁面我們用到了 wxml 和 wxss文件

為了程序代碼結構簡潔

我們需要在跟目錄下創建一個新文件夾 名字隨意，我們這裡叫pages

然後在pages文件夾里再創建新文件夾 名字隨意 這裡我們叫 index

然後我們創建index.wxml文件然後在裡面寫入以下代碼

然後創建index.wxss文件然後在裡面寫入以下代碼

然後我們創建 index.js文件

在文件中輸入如下代碼（輸入Page IDE會有提示）

最後就是配置首頁

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

其中index的含義 其實就是指index.js文件

這裡需要說明一點 pages 裡面的路徑其實是指向js文件的

如果一個目錄下沒有該名稱的js文件是會報錯的！

手機預覽（只有獲得AppId的才有許可權預覽）

開發者工具左側菜單欄選擇"項目"，點擊"預覽"，掃碼後即可在微信客戶端中體驗。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！