基礎知識----

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.// Register a Page.Page({ data: ‘Baixing‘, onChangeName: function(e) { // sent data change to view this.setData({ name: ‘MINA‘ }) }})
 

以上通過框架將邏輯層數據中的 name 與視圖層的 name 進行了綁定，所以在頁面打開的時候會顯示 "Hello Baixing!"，

當點擊按鈕的時候，視圖層會發送 onChangeName 的事件給邏輯層，邏輯層找到對應的事件處理函數。邏輯層執行了 setData() 的操作，將 name 從 Baixing 變為 MINA，因為該數據和視圖層已經綁定了，從而視圖層會自動改變為 "Hello MINA!" 。

頁面管理

框架管理小程序的頁面路由，可以做到頁面間的無縫切換，並給以頁面完整的生命周期。開發者需要做的只是將頁面的數據、方法、生命周期函數註冊進框架中，其他的一切復雜的操作都交由框架處理。

基礎組件

框架提供了一套基礎的組件，這些組件自帶微信風格的樣式以及特殊的邏輯，我們通過組合基礎組件，就可以很方便的創建出強大的微信小程序。詳情參考微信小程序組件文檔。

豐富的 API

MINA 框架提供豐富的微信原生 API，可以方便地調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。如果想了解更多，請參考微信小程序 API 文檔。

小程序目錄結構

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。

一個小程序主體部分由三個文件組成，必須放在項目的根目錄下：

一個小程序頁面由四個文件組成，分別是：

註意：以上的四個文件必須具有相同的路徑和文件名。

小程序的運行機制

註意小程序是沒有重啟的概念的，主要的運行機制如下：

• 當小程序進入後臺，客戶端會維持一段時間的運行狀態，超過一定時間後 (溫馨官方文檔 5 分鐘) 會被微信主動銷毀。

• 被置頂的小程序不會被微信主動銷毀。

• 當收到系統內存警告也會進行小程序的銷毀。

開發者入門學習

1.下載安裝微信Web開發者工具，很貼心的支持Mac，並且教程的截圖都是Mac的哦~~

2.打開開發者工具後，（網絡慢的二維碼可能加載很久）掃二維碼後可以添加項目或導入項目，appid不會公眾號的，沒有內測邀請的可以不填，輸入項目名稱比如：HelloWorld，選擇項目保存地址的時候選擇一個新創建的空文件夾，如果勾選在當前目錄創建 quick start項目, 它就會幫我們創建一個簡易的小程序demo，方便我們學習理解

3.點擊開發者工具左側導航的“編輯”，我們可以看到這個項目，已經初始化並包含了一些簡單的代碼文件。在項目文件夾下看到了三個特別的文件app.js、app.json、app.wxss，其中，.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件。這三個文件是一個項目必不可少的文件，刪除任意一個文件項目都會運行不了。

app.js: 小程序運行主要邏輯及入口，裏面使用App()函數來註冊一個小程序，普通頁面的js文件中可以通過 getApp()函數拿到App()函數所擁有的參數，並調用其中的數據。我們可以在這個文件中監聽並處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。想了解更多可用 API，可參考 API 文檔

app.json: 是小程序的全局配置文件。可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。註意該文件不可添加任何註釋。更多可配置項可參考配置詳解。每一個小程序加載的頁面，包括四個部分[js、json、wxml、wxss]）都要在 pages數組中聲明後才能訪問， window對象中可以設置窗口的樣式顏色等。

app.wxss: 是一個公共的樣式文件，整個項目的每個頁面都可以調用，我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則，就如一個全局的css文件。

4.在左邊菜單欄中選擇“編輯”，可以查看我們這個項目的文件和結構,從文件結構中我們可以看到文件類型有4種：

• js : 這就是一個JavaScript文件，只不過它是微信基於javascript封裝過的，所以很多js函數是不能使用的，比如localhost.href，微信加入了很多自身的接口，比如跳轉頁面是： wx.navigationTo()函數。例如index.js 是頁面的腳本文件，在這個文件中我們可以監聽並處理頁面的生命周期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。
• json : 是頁面的配置文件，可以配置頁面頭部title信息等，頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。
• wxml : 視圖結構文件，功能就像html文件差不多，用於描述頁面結構，只不過它有自己獨特的標簽，不使用html標簽。微信對wxml的全稱定義也不是weixin xml，而是WeiXin MarkupLanguage，很霸氣的要自成體系感。自然wxss也是WeiXin Style Sheets，一樣的希望給人牛逼哄哄的感覺。
• wxss : 視圖樣式文件，格式跟css文件一樣，他在css的基礎上擴展了幾個特性 比如：尺寸單位 / 樣式導入

5: 項目運行過程：

第一步：加載項目根目錄下的 app.js、 app.json、 app.wxss文件，同時會執行app.js文件，並觸發其中的onLaunch 和 onShow 函數

第二步：加載app.json中pages數組中配置的第一個頁面，作為項目的歡迎頁，同時會執行對應頁面js文件，並觸發 onLoad / onReady 和 onShow 函數

往後：頁面可以通過事件與js文件交互，比如 在標簽元素上綁定點擊事件，並且指向js文件中的一個函數，就能用js中的邏輯去處理這個事件了。

開發實踐

講了很多原理性的東西，如果沒有實際實踐的話，也只是一紙空談。下面將以一個記賬小程序作為開發實踐，這個小程序用以記錄每日花費以及具體花費說明。

在開始前，請下載小程序開發工具。

創建項目

這裏因為沒有申請 AppID，所以選擇了無 AppID 開發模式。如果有要使用 AppID 進行開發，可通過微信小程序官網進行配置，這裏就不細說，具體參考微信小程序官網文檔說明。

開發工具的開始頁面：

如上，我們填寫好項目名稱，選擇項目目錄後，點擊添加項目，就進入所創建項目的開發界面，如下:

• 在左側的編輯選項卡下，可以進行代碼的編輯工作。

• 在調試選項卡下，可以進行調試工作，如斷點調試、查看當前存儲信息、模擬坐標等。

• 在項目選項卡下，可以配置當前的程序運行選項，如是切換基礎庫版本、生成小程序預覽等。

創建頁面

我們的程序主要有兩個頁面，一個是展示所有記賬記錄的首頁頁面，一個是添加記賬的頁面。在開發工具編輯選項卡下，點擊添加新建，輸入要創建的文件就可以了。完成後具體的目錄如下：

在上面的（Pages）目錄中，每個不同的頁面目錄下存在 4 種不同的文件格式。在基礎知識部分，有講解過不同格式具體的作用，這裏不再贅述。接下來就進入實際的編碼工作吧。

編寫代碼

1. 首頁的具體功能包括：

• 統計花費總額

• 展示每次記錄的概要信息

頁面主要邏輯代碼如下：

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) }) } ...})

頁面結構代碼如下：

<!--index.wxml--><view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <view class="info-view"> <text class="userinfo-nickname">{{userInfo.nickName}}</text> <text class="money-text">總花費：{{totalMoney}}元</text> </view> </view> <view class="list-view"> <block wx:for="{{list}}" wx:key="*this"> <view class="tally-cell"> <text class="detail-text">{{item.detail}}</text> <text class="money-text">{{item.money}}元</text> <text class="time-text">{{item.time}}</text> </view> </block> </view> <navigator class="add-button" url="../record/record" open-type="navigate">記一筆</navigator></view>

2. 記錄頁面主要功能：

• 用於記錄具體的花費金額以及花費詳情

頁面主要邏輯代碼如下：

import {addNewRecord} from ‘../../services/tallyService.js‘var app = getApp()Page({ ... onSaveRecord() { let record = { money: this.customerData.money, detail: this.customerData.detail } addNewRecord(record, (res)=>{ console.log(res) wx.navigateBack({}) }) }})

頁面結構代碼如下：

<!--record.wxml--><view class="container record-view"> <view class="money-view"> 金額： <input placeholder="請輸入要記錄的花費金額..." bindblur="onMoneyBlured" maxlength="10" placeholder- confirm-type="done" type="digit" auto-focus value="{{money}}" bindinput="onMoneyChanged"/> </view> <view class="detail-view"> 花費記錄： <textarea class="detail-textarea" placeholder- placeholder="請輸入具體的花費詳細吧..." maxlength="160" cursor-spacing="10" bindinput="onDetailChanged"/> </view> <button class="save-button" catchtap="onSaveRecord" formType="submit" disabled="{{ !canSave }}"> 保存 </button></view>

3. 記錄 Dao 類

主要邏輯代碼如下：

var records = []import {formatTime} from ‘../utils/util.js‘function addNewRecord({money, detail}, callback) { let id = records.length let time = formatTime(new Date()) let record = {id, money, detail, time} records.push(record) if (typeof callback === ‘function‘) { callback(true) }}function loadAllRecord(callback) { if (typeof callback === ‘function‘) { callback(records) }}module.exports = { addNewRecord, loadAllRecord}

預覽

如果是通過填寫 AppID 進行開發，在開發工具的項目選項卡下，點擊預覽即可生成當前小程序二維碼。然後使用具有開發者或體驗者權限的微信帳號掃一掃二維碼，即可真機操作小程序。具體設置如下圖所示：

我這裏因為是通過無 AppID 開發，所以只能通過開發工具進行預覽了。

最終的程序運行頁面如下：

微信小程序開發入門與實踐