微信小程序開(kāi)發(fā)基本知識(shí)總結(jié)

基礎(chǔ)知識(shí)

MINA 框架

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

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

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

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

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

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

頁(yè)面管理

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

基礎(chǔ)組件

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

豐富的 API

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

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

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

一個(gè)小程序頁(yè)面由四個(gè)文件組成，分別是：

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

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

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

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

開(kāi)發(fā)實(shí)踐

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

在開(kāi)始前，請(qǐng)下載小程序開(kāi)發(fā)工具。

創(chuàng)建項(xiàng)目

這里因?yàn)闆](méi)有申請(qǐng) AppID，所以選擇了無(wú) AppID 開(kāi)發(fā)模式。如果有要使用 AppID 進(jìn)行開(kāi)發(fā)，可通過(guò)微信小程序官網(wǎng)進(jìn)行配置，這里就不細(xì)說(shuō)，具體參考微信小程序官網(wǎng)文檔說(shuō)明。

開(kāi)發(fā)工具的開(kāi)始頁(yè)面：

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

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

創(chuàng)建頁(yè)面

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

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

編寫(xiě)代碼

1. 首頁(yè)的具體功能包括：

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

頁(yè)面主要邏輯代碼如下：

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

Page({
  data: {
    userInfo: {},
    list: [],
    totalMoney: 0
  },
  ...
  // 加載已存的每日花費(fèi)記錄，且統(tǒng)計(jì)總共花費(fèi)的金額。
  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)
    })
  }
  ...
})

頁(yè)面結(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">總花費(fèi)：{{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. 記錄頁(yè)面主要功能：

• 用于記錄具體的花費(fèi)金額以及花費(fèi)詳情

頁(yè)面主要邏輯代碼如下：

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

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

<!--record.wxml-->
<view class="container record-view">
  <view class="money-view">
    金額：
    <input placeholder="請(qǐng)輸入要記錄的花費(fèi)金額..." 
      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">
    花費(fèi)記錄：
    <textarea class="detail-textarea"
      placeholder-style="font-size: 14px;"
      placeholder="請(qǐng)輸入具體的花費(fèi)詳細(xì)吧..."
      maxlength="160"
      cursor-spacing="10"
      bindinput="onDetailChanged"/>
  </view>
  <button class="save-button" 
    catchtap="onSaveRecord" 
    formType="submit" 
    disabled="{{ !canSave }}">
    保存
  </button>
</view>

3. 記錄 Dao 類(lèi)

主要邏輯代碼如下：

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ù)覽

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

我這里因?yàn)槭峭ㄟ^(guò)無(wú) AppID 開(kāi)發(fā)，所以只能通過(guò)開(kāi)發(fā)工具進(jìn)行預(yù)覽了。

最終的程序運(yùn)行頁(yè)面如下：