商城系統(tǒng) 注冊

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

2020-09-27|HiShop
導(dǎo)讀:微信小程序開發(fā)基本知識總結(jié)了開發(fā)一個小程序需要掌握的基本技術(shù)知識。...

 

基礎(chǔ)知識

MINA 框架

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

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

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

響應(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 進行了綁定,所以在頁面打開的時候會顯示 "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ù)注冊進框架中,其他的一切復(fù)雜的操作都交由框架處理。

基礎(chǔ)組件

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

豐富的 API

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

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

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

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

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

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

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

小程序的運行機制

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

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

開發(fā)實踐

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

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

創(chuàng)建項目

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

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

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

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

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

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

創(chuàng)建頁面

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

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

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

編寫代碼

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="請輸入具體的花費詳細吧..."
      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 進行開發(fā),在開發(fā)工具的項目選項卡下,點擊預(yù)覽即可生成當(dāng)前小程序二維碼。然后使用具有開發(fā)者或體驗者權(quán)限的微信帳號掃一掃二維碼,即可真機操作小程序。具體設(shè)置如下圖所示:

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

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

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

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

 

 

電話咨詢 預(yù)約演示 0元開店