基礎知識
MINA 框架
爲方便微信小程序開發，微信爲小程序提供了 MINA 框架，這套框架集成了大量的原生組件以及 API。通過這套框架，我們可以方便快捷的完成相關的小程序開發工作。
MINA 框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統，因此我們主要聚焦於數據與邏輯上。
響應的數據綁定
框架的核心是一個響應的數據綁定系統。
整個系統分爲兩塊：視圖層（View）和邏輯層（App Service），
通過框架，可以讓數據與視圖保持同步變得很簡單。當我們修改數據的時候，只需要在邏輯層修改數據，視圖層就會做相應的更新。
通過下面的例子來看：
<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="onChangeName"> Click me! </button>
// This is our App Service.www.zhaoweb.cn
// Register a Page.
Page({
data: 'Baixing',
onChangeName: function(e) {
// sent data change to view
this.setData({
name: 'MINA'zhaoweb.cn
})
}
})
以上通過框架將邏輯層數據中的 name 與視圖層的 name 進行了綁定，所以在頁面打開的時候會顯示 "Hello Baixing!"，
當點擊按鈕的時候，視圖層會發送 onChangeName 的事件給邏輯層，邏輯層找到對應的事件處理函數。邏輯層執行了 setData() 的操作，將 name 從 Baixing 變爲 MINA，因爲該數據和視圖層已經綁定了，從而視圖層會自動改變爲 "Hello MINA!" 。
頁面管理
框架管理小程序的頁面路由，可以做到頁面間的無縫切換，並給以頁面完整的生命週期。開發者需要做的只是將頁面的數據、方法、生命週期函數註冊進框架中，其他的一切複雜的操作都交由框架處理。
基礎組件
框架提供了一套基礎的組件，這些組件自帶微信風格的樣式以及特殊的邏輯，我們通過組合基礎組件，就可以很方便的創建出強大的微信小程序。詳情參考微信小程序組件文檔。
豐富的 API
MINA 框架提供豐富的微信原生 API，可以方便地調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。如果想了解更多，請參考微信小程序 API 文檔。
小程序目錄結構
小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
一個小程序主體部分由三個文件組成，必須放在項目的根目錄下：
文件 作用
app.js 小程序啓動入口文件
app.json 小程序公共設置，如註冊路由信息
app.wxss 小程序公共樣式表
一個小程序頁面由四個文件組成，分別是：
文件 作用
js 頁面的具體邏輯功能，如頁面的分享等邏輯方法
wxml 頁面的結構，MINA 框架提供的各種組件便用於此
wxss 頁面樣式表，類似 Web 開發的 CSS 文件，用於控制頁面的具體顯示樣式
json 頁面配置，用以配置 MINA 框架提供的特有功能，如下拉刷新是否啓用等配置信息
注意：以上的四個文件必須具有相同的路徑和文件名。
小程序的運行機制
注意小程序是沒有重啓的概念的，主要的運行機制如下：
當小程序進入後臺，客戶端會維持一段時間的運行狀態，超過一定時間後 (溫馨官方文檔 5 分鐘) 會被微信主動銷燬。
被置頂的小程序不會被微信主動銷燬。
當收到系統內存警告也會進行小程序的銷燬。
開發實踐
講了很多原理性的東西，如果沒有實際實踐的話，也只是一紙空談。下面將以一個記賬小程序作爲開發實踐，這個小程序用以記錄每日花費以及具體花費說明。
在開始前，請下載小程序開發工具。
創建項目
這裏因爲沒有申請 AppID，所以選擇了無 AppID 開發模式。如果有要使用 AppID 進行開發，可通過微信小程序官網進行配置，這裏就不細說，具體參考微信小程序官網文檔說明。
開發工具的開始頁面：
開始頁面
如上，我們填寫好項目名稱，選擇項目目錄後，點擊添加項目，就進入所創建項目的開發界面，如下:
創建項目
在左側的編輯選項卡下，可以進行代碼的編輯工作。
在調試選項卡下，可以進行調試工作，如斷點調試、查看當前存儲信息、模擬座標等。
在項目選項卡下，可以配置當前的程序運行選項，如是切換基礎庫版本、生成小程序預覽等。
創建頁面
我們的程序主要有兩個頁面，一個是展示所有記賬記錄的首頁頁面，一個是添加記賬的頁面。在開發工具編輯選項卡下，點擊添加新建，輸入要創建的文件就可以了。完成後具體的目錄如下：
創建頁面
在上面的（Pages）目錄中，每個不同的頁面目錄下存在 4 種不同的文件格式。在基礎知識部分，有講解過不同格式具體的作用，這裏不再贅述。接下來就進入實際的編碼工作吧。
編寫代碼
- 首頁的具體功能包括：
統計花費總額
展示每次記錄的概要信息
頁面主要邏輯代碼如下：
import {
loadAllRecord,
deleteRecordById
} from '../../services/tallyService.js'
var app = getApp()
Page({
data: {
userInfo: {},
list: [],
totalMoney: 0
},
...
// 加載已存的每日花費記錄，且統計總共花費的金額。
fetchData() {
wx.showLoading({
title: '加載數據中...',
})
var self = this
loadAllRecords((list) => {
var totalMoney = 0
list.forEach((item) => {
totalMoney += Number(item.money)
})
self.setData({list, totalMoney})
self.customerData.isFirstShow = false
setTimeout(() => {
wx.hideLoading()
}, 1000)
})}
...
})