三週學會小程序第二講：客戶端代碼準備和基礎功能講解

經過上一講你們已經申請了小程序了，這一講咱們主要講解三部分，小程序開發工具使用，客戶端代碼準備，和基礎的客戶端講解，而且運行第一預覽版本。
本文不會帶你從零搭建一個小程序，而是直接提供一個可預覽版本。總結小編本身的編程經歷，若是讓你從基本類型，控制語句，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、併發編程、性能優化、架構設計、小程序、開源軟件等。有興趣能夠關注一波，一塊兒學習、討論。