通過上一講大家已經申請了小程式了，這一講我們主要講解三部分，小程式開發工具使用，客戶端程式碼準備，和基礎的客戶端講解，並且執行第一預覽版本。
本文不會帶你從零搭建一個小程式，而是直接提供一個可預覽版本。總結小編自己的程式設計經歷，如果讓你從基本型別，控制語句，for迴圈開始學 JAVA，那麼可能幾個月以後你才能真正動手做專案，所以我們按照“拿來主義”，直接拿來就讀，讀懂就改，改完就上線。不過你不用擔心這樣學習的不徹底，因為開發過程中你已經融會貫通了。

程式碼準備

想必大家都用過Github吧，小編把每期的原始碼直接開源到了 Github，地址 https://github.com/codedrinker/jiuask

，並且為中途加入的小夥伴考慮，原始碼會按照每一章節打一個 Tag，所以本期的 Tag 是 V2。你可以選擇 fork 程式碼到你自己的 Github 倉庫，然後再克隆到本地。程式碼準備好我們就進行下一步下載工具執行開發了。

開發工具使用

首先介紹一下小程式官網文件地址
https://developers.weixin.qq.com/miniprogram/dev/index.html
這個你要存一個書籤，因為後面可能一直用的到。他包括簡要教程、框架、元件、API和工具，對了還有一個論壇，遇到一些標籤，API的用法這裡來這裡查詢，不過你在開發過程中遇到的問題，可以直接在小編建立的群裡討論，加群方式見文末。
現在我們下載開發工具，因為小程式開發是微信團隊自己開發的引擎，所以需要使用它們自己的工具。下載地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
下載完成以後進行安裝，安裝以後按照如下步驟匯入原始碼並執行。
首先我們需要掃碼登入，掃碼的微信是你註冊小程式的微信，你也可以通過開發者登入(通過公眾平臺->使用者身份->編輯新增開發者)。
其次我們需要選擇小程式選項，另一個是公眾號開發。
最後我們匯入原始碼，專案目錄選擇我們剛才克隆好的原始碼，會自動的關聯一個 AppID，這個ID 是我的小程式的，你需要去上一節你註冊好的賬號下面尋找，公眾平臺->設定->開發設定->AppID獲取自己的小程式ID並填寫到此處，最後修改名稱為你的名稱，點選確定即可。
匯入成功以後你就看到了如下介面。
我們按照下圖簡單講解一下使用，還是老的原則，我們就講馬上可能用到的功能。
1，模擬器，開啟左邊的實時預覽小程式的介面。
2，編輯器，開啟右邊編寫程式碼的介面。
3，偵錯程式，預設不開啟，相當於 Chrome 的控制檯。因為本身微信小程式的程式碼源於前端，所以他的除錯方式基本和 Web 的除錯方式一樣。
4，編譯，程式碼有修改以後點選一下會儲存編譯，或者你直接用 CTRL+S 儲存，也會自動編譯，同時更新左邊的模擬器。
5，預覽，編寫告一段落以後，想自己在手機上面看下，點選這個按鈕，掃碼檢視。
6，模擬器檢視。
7，編輯器檢視。
這時候你可以點選預覽，然後通過手機掃碼試一下，就可以看到自己的第一個小程式嘍。下面我們把目光回到編輯器。

專案結構

如圖，小編搭建了一個基礎的小程式架子：
images，存放一些圖片資源，目前就放了一個Logo。
pages，是小程式所有的功能頁面，目前只有一個首頁，另外pages是一個頂級目錄，如果有其他的模組需要區分不同的子目錄，這個具體我們後面開發過程中你就會理解。
pages/question， 每一個頁面目錄都有四個檔案，js是用於邏輯控制，json是一些基礎的配置，wxml可以直接理解為html頁面，用於呈現頁面，而wxss是我們熟知的 css檔案，一個目錄下面相同字首的會自動關聯到一起，所以這裡我們全部命名為index字首。
.gitignore，Git的忽略檔案。
app.js，是專案總的邏輯入庫檔案，比如我們想開啟APP的時候做一些資料的初始化，都在這個檔案，後面我們會詳細講解。
app.json，是專案整體配置檔案，裡面會包括小程式包含頁面的配置，小程式名稱，背景顏色，標題顏色等基礎配置。
app.wxss，是專案的整體樣式檔案，一些通用的樣式程式碼可以放在這裡。
project.config.json，這裡就是一些基本的配置，小程式庫的版本，包括我們剛才填寫的AppID都是在這裡配置。

首頁講解

下面我們回到我們最關心的首頁佈局。如圖，其實佈局起來還是比較簡單的，我們只要想好自己寫成什麼樣子就可以。小編的佈局比較簡單。
view 你可以直接理解成為 div，頁面的基礎佈局元素，同時他也是塊級元素。
如圖可以看出，小編通過 view 把首頁分成了上中下三個部分，簡介包括一個 image(img)標籤和一個text(span)，登入是一個 button標籤最後的社群規則是一個 view標籤。為了美觀小編簡單的調整了一下樣式，當然 css的語法和基礎的 web的語法是一樣的，我們在 wxml 檔案的標籤裡面定義 class，然後再 wxss裡面實現這個樣式就可以，如果你有CSS 基礎應該一看就懂，如果你不瞭解基礎的 HTML，CSS語法，請惡補一下。或者直接切換wxml和wxss檔案，對照一下就明白了。

作業

為了讓你更簡單的上手，小編自己給了你框架，但是你需要學會怎麼修改。所以這一節的作業是：
1，修改首頁左邊的 LOGO 為你的LOGO。
2，修改描述為你的描述。
3，修改社群規則為你的規則。
4，修改主色調為你的顏色，提示一下顏色的設定有三個檔案 app.wxss,app.json,pages/question/index.wxss。

問答

如果您對本系列文章有興趣，歡迎置頂本訂閱號，第一時間獲取更新。
如果有任何問題，歡迎加入下方交流群。請新增小編微信，切記備註“小程式”，小編拉你進去。【只討論技術，非誠勿擾】

關注

小編運營的訂閱號 “碼匠筆記”，就先後就職於 ThoughtWorks、阿里巴巴等網際網路公司的經驗分享，包含但不限於 JAVA、併發程式設計、效能優化、架構設計、小程式、開源軟體等。有興趣可以關注一波，一起學習、討論。