本節書摘來自華章出版社《微信小程式：開發入門及案例詳解》一 書中的第2章，第2.2節，作者李駿 邊思，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
為了讓開發者更好地了解小程式架構運作機制，接下來将帶領大家“徒手”建立一個結構最簡單的小程式，這樣每個細節都是開發者自己完成的，這對了解小程式架構有很大幫助。步驟如下：
1）建立項目目錄，這裡以<code>e:\weixin\myproject</code>為例。
2）按圖2-2所示的目錄結建構立檔案：
3）打開app.json，寫入以下代碼：
4）打開<code>index.wxml</code>，寫入以下代碼：
<code><view bindtap="countclick">我是index頁面,你點選了{{count}}次</view></code>
5）打開<code>index.js</code>檔案，寫入以下代碼：
就這麼幾步，一個最簡單的小程式便搭建好了，項目中僅包含一個index頁面，這個目錄結構是最簡單、最基礎的小程式結構。接下來我們将它導入開發者工具中看看運作效果。
6）打開微信開發者工具，填寫appid和項目名稱，點選“選擇”按鈕添加項目，項目目錄選擇剛才建立的目錄<code>e:\weixin\myproject</code>，點選“添加項目”完成添加，如圖2-3所示：
7）導入項目後我們便能看到運作界面，當我們點選文字時，點選次數也會随之增加（如圖2-4所示）。
這就是最簡單的小程式，所有複雜的項目都是圍繞這個結構進行拓展的。當運作這個項目時，架構首先會解析配置檔案<code>app.json</code>，通過pages設定找到預設首頁頁面<code>mypages/index/index</code>（pages第一個路徑預設為首頁），然後加載<code>mypage/index</code>目錄中<code>index.wxml、index.wxss、index.js、index.json</code>這4個檔案進行頁面渲染。
在<code>index.wxml</code>檔案中，我們簡單使用了<code><view/></code>元件，頁面渲染時，架構将邏輯層中data的count屬性與視圖層的count進行了綁定，是以一打開頁面會顯示點選次數為0。當點選<code><view/></code>時，會觸發tap事件，這時視圖層根據<code><view/></code>元件bindtap屬性值，将綁定的countclick事件發送給邏輯層，邏輯層根據方法名找到對應的事件處理函數countclick并執行。countclick函數中，我們調用了setdata方法修改count值，并觸發視圖層渲染，是以頁面中的數字随着點選次數增加，這種視圖層和邏輯層之間互相通信的機制便是小程式的資料綁定和事件響應系統。
在一個完整的小程式中，檔案主要分為架構程式主體檔案和頁面檔案兩大類：
架構程式主體檔案是系統級别檔案，一個項目隻有一份，分别是<code>app.json</code>、<code>app.js</code>和<code>app.wxss</code>，它們分别控制小程式整體配置、邏輯和整體樣式，小程式啟動時隻會執行一次。這3個檔案必須放在項目根目錄，且檔案名必須是app，其中<code>app.json</code>和<code>app.js</code>是必須的。
一個小程式有一個或多個頁面，一個頁面由.wxml、.wxss、.js和json四個檔案組成，它們分别控制頁面的結構、樣式、邏輯和配置，其中.wxml檔案和.js檔案是必須的，按照架構規定，同一個頁面的這4個檔案必須具有相同的路徑和檔案名，是以在這個項目中我們将它們放置在<code>mypages/index</code>路徑下且檔案名統一為index，其中index目錄名可以和頁面檔案名不一緻，為了便于管理我們盡量将頁面目錄名和頁面檔案名保持一緻。
現在我們對小程式架構有個大緻的認識，下面，将分别為大家講解架構主體檔案和架構頁面的特性及使用方法。