做者：知曉雲 - 小程序開發快人一步json
瞭解小程序開發必備的基礎知識以後，咱們就要開始本身動手，製做咱們本身的第一個小程序。小程序
這個小程序與開發者工具?默認新建的初始工程相似，會顯示用戶的頭像和名字，同時會向用戶顯示問候語。微信小程序
準備開發
在開始開發以前，咱們須要完成一系列準備工做。數組
在開發者工具中新建工程
在昨天的文章中，咱們已經談到如何在開發者工具中新建工程。咱們只需按照實際狀況，在開發者工具中新建項目便可。微信
注意，咱們須要在項目目錄中選擇一個徹底空白的目錄（最好直接新建），並取消最後的「創建普通快速啓動模板」勾選框。這樣，咱們就能新建空白的小程序項目。網絡
咱們會在本章中，一步步帶領你們一同徹底從零開始建立小程序文件。app
接下來，咱們就進入開發者工具中，新建幾個小程序必要的文件。編輯器
調整配置文件
熟悉 iOS 或 Android 開發的?開發者都知道，App 開發會有?名叫「清單文件」的東西，它記錄了 App 的圖標、名稱、兼容性等 App 的元信息，幫助系統更好地運行這個 App。工具
而在微信小程序中，也有功能相似的文件，就是 `app.json`。它記錄小程序一些基礎配置：學習
l 小程序的全部頁面路徑
l 小程序全局界面表現
l Tab 標籤頁配置
l 網絡超時
l 調試模式開啓或關閉
咱們能夠這樣新建一個 `app.json` 文件：在開發者工具的編輯器（一般在右上角）中，點擊左上方的「+」號，選擇 JSON，並命名爲 `app.json`。
新建文件後，咱們還得在 `app.json` 寫入配置，才能讓小程序正常工做。在此，咱們能夠直接輸入如下代碼直接保存。
{}
保存後，咱們能夠看到編輯器依然在報錯。這是由於 `app.json` 目前是空的。
小程序頁面路徑配置
接下來，在編輯器中新建「pages」文件夾，並對着文件夾點擊右鍵，新建「Page」起名爲 `welcome`。
保存後，`pages` 文件夾會多出幾個文件，而 `app.json` 也有相應變化：
{
"pages": [
"pages/welcome"
]
}
能夠看到，開發者工具已經自動地將咱們在 `pages` 文件夾中新建的 `welcome` 頁面路徑，放入到 `pages` 數組中。
在 `app.json` 中，`pages` 數組是必填的。它規定小程序中全部頁面的地址，同時規定了小程序啓動時的首頁，就是 `pages` 數組的首位所指的頁面。
當 `pages` 成功配置後，小程序就能夠正常運行了（新建頁面文件後，小程序已經正常運行無報錯了）。但若是想要一些個性化配置，咱們依然能夠繼續修改 `app.json`。
修改小程序頁面標題
咱們以修改小程序頁面的全局頁面標題爲例，瞭解 `app.json` 更多個性化設置。
在 `app.json` 中，全局頁面標題項目被分配在 `window` 大項中，名爲 `navigationBarTitleText`。修改後的 `app.json` 形如這樣：
{
"pages": [
"pages/welcome"
],
"window": {
"navigationBarTitleText": "我是標題"
}
}
保存後，咱們就能夠實時看到小程序已經應用修改。
除了頁面標題文字，相似標題欄顏色、Tab 欄內容等信息，均可以直接在 `app.json` 進行配置。
如今，咱們的 `app.json` 已經配置完畢。接下來，咱們就來爲小程序增長几個視覺元素。
瞭解 WXML
插入文字
咱們打開 index 文件夾下的 index.wxml 文件，能夠看到開發者工具在自動生成頁面的時候，默認生成的代碼。
<!--pages/welcome.wxml--> <text>pages/welcome.wxml</text>
沒錯，咱們在預覽區看到的「welcome.wxml」語句，即是由它進行控制的。
第一行的 <!--welcome.wxml-->，是一行註釋。計算機在編譯代碼的時候，會跳過註釋，不會對註釋代碼進行編譯。
使用註釋，咱們能夠對代碼的功能，進行一些說明，以便將來對代碼進行維護。
咱們看一下第二行的代碼。咱們看到，這句代碼的先後都是由尖括號包裹起來的部分，中間則是 index.wxml。
咱們試圖將中間的 index.wxml 修改爲 Hello World（固然，也能夠改爲你本身喜歡的短語）。修改後的代碼變成了這樣：
<!--pages/welcome.wxml--> <text>Hello World</text>
當咱們保存、編譯後，咱們能夠看到，預覽區域中原先寫着「index.wxml」的地方，已經變成了「Hello World」。
在小程序中，<text></text> 表明文字視覺組件。在它們中間插入的內容，將會直接顯示在小程序的相應位置中。
插入圖片
接下來，咱們試圖在咱們的小程序裏插入一張圖片。
首先，咱們在根目錄下建立一個 image 的文件夾。而後，咱們點擊咱們剛纔新建的 image 文件夾，點擊右邊的「...」按鈕，選擇「硬盤打開」。
這時，電腦會打開咱們的工程文件夾。咱們在文件夾裏，打開咱們剛纔新建的 image 文件夾，隨意將一張圖片放進文件夾裏面。
接着，開發者工具會自動探測到文件的變化，而後從新刷新工程目錄。刷新以後，咱們就能夠在 image 文件夾下，看到咱們剛纔放進去的文件。
以後，咱們回到 index.wxml，插入剛纔放入目錄中的圖片。
假設咱們放入 image 目錄的圖片文件名稱叫 avatar.jpg，那麼咱們須要在文件的底部插入這段代碼：
<image src='/image/avatar.jpg'></image>
插入這段代碼以後，index.wxml 文件看上去應該是這樣的：
<!--pages/welcome.wxml--> <text>Hello World</text> <image src='/image/image.jpg'></image>
保存後，咱們就能夠在模擬器中，看到總體效果了。
與 <text> 同樣，<image> 也是小程序的一個視覺組件，它表明在小程序裏插入一張圖片。
有所不一樣的是，<image> 組件內不該該插入任何內容。咱們應該在 <image> 組件的 src 屬性中，指定須要插入在小程序裏的圖片。
將代碼保存，開發者工具會自動刷新預覽。在預覽中，咱們能夠看到圖片雖然已經成功插入，可是比例彷佛不太正確。
這是由於 <image> 自己擁有幾種縮放、裁剪模式和尺寸大小，而默認尺寸爲 300×225 px，默認模式爲「完整填充」。
在 <image> 組件中，增長 `mode`，定義值爲 `widthFix`，它可讓圖片比例正常，並根據設定的寬度，自動按比例調整 <image> 元素的高度。
<image src='/image/avatar.jpg' mode='widthFix'></image>
保存後，能夠看到小程序的圖片顯示就正常了。
插給元素加「框」
在正式開發過程當中，咱們會將屏幕元素分隔成不一樣部分，每一個部分能夠套用相應樣式，使用獨立的樣式代碼，以提升編碼效率。
例如，在傳統 HTML 開發中，咱們會利用 <div> 框元素對不一樣部分進行區分。而在小程序中，咱們能夠利用 <view> 達成一樣的效果。它的使用方法與 <div> 幾乎沒有什麼不一樣
在這裏，咱們會將其中的文字、圖片元素「綁定」起來，做爲屏幕的組成部分。
<!--pages/welcome.wxml--> <view> <text>Hello World</text> <image src='/image/avatar.jpg' mode='widthFix'></image> </view>
這樣作，咱們就能夠統一處理文字和圖片的樣式和其餘操做。在下一章中，咱們將會對屏幕上的這些元素作一些「美化」操做，並將它們換成用戶的資料。
相關閱讀：
訪問「知曉雲」（cloud.minapp.com），學習更多小程序開發課程