一、建立小程式例項（主要是定義、配置及頁面執行關聯）（不是必要）。

即編寫3個app字首的檔案，它們共同描述了整個小程式的主體邏輯、生命週期及頁面的構成、樣式等。建立的例項將由appServer執行。若使用微信官方開發工具的話，建立專案時會自動建立app.js、app.json、app.wxss三個帶有app字首的檔案。

二、建立頁面

在小程式中一個完整的頁面是由.js、.json、.wxml、.wxss四個檔案組成，如圖2，每個介面的.js和.wxml是必須要有的，其他兩項是可選項。小程式頁面由view執行緒執行。

小程式中的每一個頁面的“路徑+頁面名”都需要寫在app.json的“pages[]”屬性中，而且”pages[]”裡的第一個頁面路徑就為小程式的首頁。這裡有個小竅門建立新的頁面，在”pages[]”直接輸入路徑+頁面名，然後按ctrl+S儲存，那麼微信小程式開發工具將會自動建立頁面所需要的4個檔案.

三、小程式結構拆解

與大多數程式一樣，為了更好的瞭解小程式，可將小程式分為邏輯層、檢視層和資料層。

1. 邏輯層
   顧名思義，邏輯層就是程式處理邏輯的地方，包括什麼時候需要幹什麼，怎麼幹等。在小程式中，邏輯層的程式碼都寫在.js檔案中，小程式的邏輯層將資料進行處理後傳送給檢視層，檢視層顯示資料，同時接受檢視層的事件反饋，如按鈕點選等。小程式的邏輯層由javaScript編寫，但由於不是單純執行在瀏覽器中，因此在web中的一些能力都將無法使用，如document、window等。

2. 檢視層
   檢視層即為使用者看到的東西，由WXML(WeiXin Markup Language)和WXSS（WeiXin Style Sheet）編寫。檢視層程式碼都寫在.wxml和.wxss檔案中.
   其中.wxml檔案用於描述頁面的結構，.wxss檔案用於描述頁面的樣式。檢視層主要將邏輯層傳遞的資料展示出來，同時會將使用者操作的事件反饋給邏輯層處理。

3. 資料層
   資料層即包括臨時資料或快取、檔案儲存、網路儲存與呼叫。

   • 臨時資料
     臨時主要是指在記憶體中資料，在程式碼中主要是通過在.js檔案裡用this.setData()函式來將資料從邏輯層傳送到檢視層。setData函式的引數接受一個物件，以key,value的形式表示將this.data中的key對應的值改變成value，如下圖。this代表的是呼叫函式的頁面，需要注意的是單次設定的資料不能超過1024KB，因此儘量避免一次設定過多的資料。
     

   • 檔案儲存（本地儲存）
     主要是使用微信提供的API介面，如下所示：
     wx.getStorage: 獲取本地資料快取
     wx.setStorage: 設定本地資料快取
     wx.clearStorage: 清理本地資料快取

   • 網路儲存或呼叫
     使用微信提供的上傳或下載檔案API介面，如下：
     wx.request: 發起網路請求
     wx.uploadFile: 上傳檔案
     wx.downloadFile: 下載檔案
     呼叫URL的API介面如下：
     wx.navigateTo: 新視窗開啟頁面
     wx.redirectTo: 原視窗開啟頁面