閱讀文本大概需要 8 分鐘。
通過上一講大家已經申請了小程序了，這一講我們主要講解三部分，小程序開發工具使用，客戶端代碼準備，和基礎的客戶端講解，並且運行第一預覽版本。
本文不會帶你從零搭建一個小程序，而是直接提供一個可預覽版本。總結小編自己的編程經歷，如果讓你從基本類型，控制語句，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。
我是浪漫的分割線
問答
如果您對本系列文章有興趣，歡迎置頂本訂閱號，第一時間獲取更新。
如果有任何問題，歡迎留言，小編很熱衷和大家一起討論技術問題。
-END-