基礎(chǔ)知識

MINA 框架

為方便微信小程序開發(fā)，微信為小程序提供了 MINA 框架，這套框架集成了大量的原生組件以及 API。通過這套框架，我們可以方便快捷的完成相關(guān)的小程序開發(fā)工作。

MINA 框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，因此我們主要聚焦于數(shù)據(jù)與邏輯上。

響應(yīng)的數(shù)據(jù)綁定

框架的核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。
整個系統(tǒng)分為兩塊：視圖層（View）和邏輯層（App Service），
通過框架，可以讓數(shù)據(jù)與視圖保持同步變得很簡單。當(dāng)我們修改數(shù)據(jù)的時候，只需要在邏輯層修改數(shù)據(jù)，視圖層就會做相應(yīng)的更新。
通過下面的例子來看：

<!-- 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'
    })
  }
})

以上通過框架將邏輯層數(shù)據(jù)中的 name 與視圖層的 name 進(jìn)行了綁定，所以在頁面打開的時候會顯示 "Hello Baixing!"，
當(dāng)點擊按鈕的時候，視圖層會發(fā)送 onChangeName 的事件給邏輯層，邏輯層找到對應(yīng)的事件處理函數(shù)。邏輯層執(zhí)行了 setData() 的操作，將 name 從 Baixing 變?yōu)?MINA，因為該數(shù)據(jù)和視圖層已經(jīng)綁定了，從而視圖層會自動改變?yōu)?"Hello MINA!" 。

頁面管理

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

基礎(chǔ)組件

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

豐富的 API

MINA 框架提供豐富的微信原生 API，可以方便地調(diào)起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。

小程序目錄結(jié)構(gòu)

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
一個小程序主體部分由三個文件組成，必須放在項目的根目錄下：

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

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

小程序的運行機(jī)制

注意小程序是沒有重啟的概念的，主要的運行機(jī)制如下：

• 當(dāng)小程序進(jìn)入后臺，客戶端會維持一段時間的運行狀態(tài)，超過一定時間后 (溫馨官方文檔 5 分鐘) 會被微信主動銷毀。
• 被置頂?shù)男〕绦虿粫晃⑿胖鲃愉N毀。
• 當(dāng)收到系統(tǒng)內(nèi)存警告也會進(jìn)行小程序的銷毀。

開發(fā)實踐

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

在開始前，請下載小程序開發(fā)工具。

創(chuàng)建項目

這里因為沒有申請 AppID，所以選擇了無 AppID 開發(fā)模式。如果有要使用 AppID 進(jìn)行開發(fā)，可通過微信小程序官網(wǎng)進(jìn)行配置，這里就不細(xì)說，具體參考微信小程序官網(wǎng)文檔說明。

開發(fā)工具的開始頁面：

如上，我們填寫好項目名稱，選擇項目目錄后，點擊添加項目，就進(jìn)入所創(chuàng)建項目的開發(fā)界面，如下:

• 在左側(cè)的編輯選項卡下，可以進(jìn)行代碼的編輯工作。
• 在調(diào)試選項卡下，可以進(jìn)行調(diào)試工作，如斷點調(diào)試、查看當(dāng)前存儲信息、模擬坐標(biāo)等。
• 在項目選項卡下，可以配置當(dāng)前的程序運行選項，如是切換基礎(chǔ)庫版本、生成小程序預(yù)覽等。

創(chuàng)建頁面

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

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

編寫代碼

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

• 統(tǒng)計花費總額
• 展示每次記錄的概要信息

頁面主要邏輯代碼如下：

import {
  loadAllRecord,
  deleteRecordById 
} from '../../services/tallyService.js'
var app = getApp()

Page({
  data: {
    userInfo: {},
    list: [],
    totalMoney: 0
  },
  ...
  // 加載已存的每日花費記錄，且統(tǒng)計總共花費的金額。
  fetchData() {
    wx.showLoading({
      title: '加載數(shù)據(jù)中...',
    })

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

頁面結(jié)構(gòu)代碼如下：

<!--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({})
    })
  }
})

頁面結(jié)構(gòu)代碼如下：

<!--record.wxml-->
<view class="container record-view">
  <view class="money-view">
    金額：
    <input placeholder="請輸入要記錄的花費金額..." 
      bindblur="onMoneyBlured" 
      maxlength="10" 
      placeholder-style="font-size: 14px;"
      confirm-type="done" 
      type="digit" 
      auto-focus
      value="{{money}}"
      bindinput="onMoneyChanged"/>
  </view>
  <view class="detail-view">
    花費記錄：
    <textarea class="detail-textarea"
      placeholder-style="font-size: 14px;"
      placeholder="請輸入具體的花費詳細(xì)吧..."
      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
}

預(yù)覽

如果是通過填寫 AppID 進(jìn)行開發(fā)，在開發(fā)工具的項目選項卡下，點擊預(yù)覽即可生成當(dāng)前小程序二維碼。然后使用具有開發(fā)者或體驗者權(quán)限的微信帳號掃一掃二維碼，即可真機(jī)操作小程序。具體設(shè)置如下圖所示：

我這里因為是通過無 AppID 開發(fā)，所以只能通過開發(fā)工具進(jìn)行預(yù)覽了。

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