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

基礎知識

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。
一個小程式主體部分由三個檔案組成，必須放在專案的根目錄下：

檔案	作用
app.js	小程式啟動入口檔案
app.json	小程式公共設定，如註冊路由資訊
app.wxss	小程式公共樣式表

一個小程式頁面由四個檔案組成，分別是：

檔案	作用
js	頁面的具體邏輯功能，如頁面的分享等邏輯方法
wxml	頁面的結構，MINA 框架提供的各種元件便用於此
wxss	頁面樣式表，類似 Web 開發的 CSS 檔案，用於控制頁面的具體顯示樣式
json	頁面配置，用以配置 MINA 框架提供的特有功能，如下拉重新整理是否啟用等配置資訊

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

小程式的執行機制

注意小程式是沒有重啟的概念的，主要的執行機制如下：

• 當小程式進入後臺，客戶端會維持一段時間的執行狀態，超過一定時間後 (溫馨官方文件 5 分鐘) 會被微信主動銷燬。
• 被置頂的小程式不會被微信主動銷燬。
• 當收到系統記憶體警告也會進行小程式的銷燬。

開發實踐

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

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

建立專案

這裡因為沒有申請 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-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="請輸入具體的花費詳細吧..."
      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 開發，所以只能通過開發工具進行預覽了。

最終的程式執行頁面如下：

本文完整程式碼下載：github.com/wanghongli1…

尾註

當前小程式開發的熱度已然越演越烈，各種小程式層出不窮。希望本文能給正打算開發微信小程式或者對微信小程式開發感興趣的小夥伴們帶來一些幫助，感謝閱讀。

---

作者：王洪禮
簡介：百姓網 iOS 開發工程師。

本文僅為作者個人觀點，不代表百姓網立場。

---

本文在 “百姓網技術團隊” 微信公眾號首發，掃碼立即訂閱：