微信小程序開發(fā)基本知識總結

 

基礎知識

MINA 框架

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

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

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

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

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

頁面管理

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

基礎組件

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

豐富的 API

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

小程序目錄結構

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

文件	作用
app.js	小程序啟動入口文件
app.json	小程序公共設置，如注冊路由信息
app.wxss	小程序公共樣式表

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

文件	作用
js	頁面的具體邏輯功能，如頁面的分享等邏輯方法
wxml	頁面的結構，MINA 框架提供的各種組件便用于此
wxss	頁面樣式表，類似 Web 開發(fā)的 CSS 文件，用于控制頁面的具體顯示樣式
json	頁面配置，用以配置 MINA 框架提供的特有功能，如下拉刷新是否啟用等配置信息

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

小程序的運行機制

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

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

開發(fā)實踐

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

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

創(chuàng)建項目

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

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

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

• 在左側的編輯選項卡下，可以進行代碼的編輯工作。
• 在調試選項卡下，可以進行調試工作，如斷點調試、查看當前存儲信息、模擬坐標等。
• 在項目選項卡下，可以配置當前的程序運行選項，如是切換基礎庫版本、生成小程序預覽等。

創(chuàng)建頁面

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

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

編寫代碼

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

頁面結構代碼如下：

<!--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 進行開發(fā)，在開發(fā)工具的項目選項卡下，點擊預覽即可生成當前小程序二維碼。然后使用具有開發(fā)者或體驗者權限的微信帳號掃一掃二維碼，即可真機操作小程序。具體設置如下圖所示：

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

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