微信小程式開發基礎知識總結

微信小程式在無論在功能、文檔及相關支援方面，都是優于前面幾種微信賬号類型，它提供了很多原生程式才有的接口，使得我們的小程式在很多方面突破H5頁面應用的限制，更加接近原生程式的功能，是以微信小程式具有很大的前景想象力。它提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層架構，并在視圖層與邏輯層間提供了資料傳輸和事件系統，可以讓開發者可以友善的聚焦于資料與邏輯上。

1、小程式的目錄結構

小程式的目錄結構如下所示。

其中項目級别的的檔案包括 app.js、app.json、app.wxss 這三個。其中

.js

字尾的是腳本檔案，

.json

字尾的檔案是配置檔案，

.wxss

字尾的是樣式表檔案。

頁面級别可以包含很多個頁面，如index，detail等頁面，每個頁面都包含.js，.json，.wxml，.wxss這些檔案，其中.wxml為頁面視圖檔案，是自定義标簽的HTML頁面。

app.js是小程式的腳本代碼。我們可以在這個檔案中監聽并處理小程式的生命周期函數、聲明全局變量，可以調用架構提供的豐富的 API。

app.json 是對整個小程式的全局配置。我們可以在這個檔案中配置小程式是由哪些頁面組成，配置小程式的視窗背景色，配置導覽列樣式，配置預設标題。

app.wxss 是整個小程式的公共樣式表。我們可以在頁面元件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。

一個小程式主體部分由三個檔案組成，必須放在項目的根目錄。

 微信小程式中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程式的首頁。

每一個小程式頁面是由同路徑下同名的四個不同字尾檔案的組成，如：index.js、index.wxml、index.wxss、index.json。

.js

字尾的檔案是腳本檔案，

.json

字尾的檔案是配置檔案，

.wxss

字尾的是樣式表檔案，

.wxml

字尾的檔案是頁面結構檔案。

index.json 是頁面的配置檔案：頁面的配置檔案是非必要的。當有頁面的配置檔案時，配置項在該頁面會覆寫 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置檔案，則在該頁面直接使用 app.json 中的預設配置。

邏輯層(App Service)

小程式開發架構的邏輯層是由JavaScript編寫。

邏輯層将資料進行處理後發送給視圖層，同時接受視圖層的事件回報。 在 JavaScript 的基礎上，我們做了一些修改，以友善地開發小程式。

• 增加 App 和 Page 方法，進行程式和頁面的注冊。
• 增加 getApp 和 getCurrentPages 方法，分别用來擷取 App 執行個體和目前頁面棧。
• 提供豐富的 API，如微信使用者資料，掃一掃，支付等微信特有能力。
• 每個頁面有獨立的作用域，并提供子產品化能力。
• 由于架構并非運作在浏覽器中，是以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
• 開發者寫的所有代碼最終将會打包成一份 JavaScript，并在小程式啟動的時候運作，直到小程式銷毀。類似 ServiceWorker，是以邏輯層也稱之為 App Service。

視圖層

架構的視圖層由 WXML 與 WXSS 編寫，由元件來進行展示。

将邏輯層的資料反應成視圖，同時将視圖層的事件發送給邏輯層。

WXML(WeiXin Markup language)用于描述頁面的結構。

WXSS(WeiXin Style Sheet)用于描述頁面的樣式。

元件(Component)是視圖的基本組成單元。

基礎元件

架構為開發者提供了一系列基礎元件，開發者可以通過組合這些基礎元件進行快速開發。

什麼是元件：

• 元件是視圖層的基本組成單元。
• 元件自帶一些功能與微信風格的樣式。
• 一個元件通常包括

  開始标簽

  和

  結束标簽

  ，

  屬性

  用來修飾這個元件，

  内容

  在兩個标簽之内。

  <tagname property="value">
    Content goes here ...
  </tagename>
             

  注意：所有元件與屬性都是小寫，以連字元

  -

  連接配接

API

架構提供豐富的微信原生API，可以友善的調起微信提供的能力，如擷取使用者資訊，本地存儲，支付功能等。

說明：

• wx.on 開頭的 API 是監聽某個事件發生的API接口，接受一個 CALLBACK 函數作為參數。當該事件觸發時，會調用 CALLBACK 函數。
• 如未特殊約定，其他 API 接口都接受一個OBJECT作為參數。
• OBJECT中可以指定

  success

  , 

  fail

  , 

  complete

  來接收接口調用結果。

參數名	類型	必填	說明
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

2、小程式接口功能清單

架構提供豐富的微信原生API，可以友善的調起微信提供的能力，如擷取使用者資訊，本地存儲，支付功能等。

1）網絡 API 清單：

wx.request 發起網絡請求

wx.uploadFile 上傳檔案

wx.downloadFile 下載下傳檔案

wx.connectSocket 建立 WebSocket 連接配接

wx.onSocketOpen 監聽 WebSocket 打開

wx.onSocketError 監聽 WebSocket 錯誤

wx.sendSocketMessage 發送 WebSocket 消息

wx.onSocketMessage 接受 WebSocket 消息

wx.closeSocket 關閉 WebSocket 連接配接

wx.onSocketClose 監聽 WebSocket 關閉

2）媒體 API 清單：

wx.chooseImage 從相冊選擇圖檔，或者拍照

wx.previewImage 預覽圖檔

wx.startRecord 開始錄音

wx.stopRecord 結束錄音

wx.playVoice 播放語音

wx.pauseVoice 暫停播放語音

wx.stopVoice 結束播放語音

wx.getBackgroundAudioPlayerState 擷取音樂播放狀态

wx.playBackgroundAudio 播放音樂

wx.pauseBackgroundAudio 暫停播放音樂

wx.seekBackgroundAudio 控制音樂播放進度

wx.stopBackgroundAudio 停止播放音樂

wx.onBackgroundAudioPlay 監聽音樂開始播放

wx.onBackgroundAudioPause 監聽音樂暫停

wx.onBackgroundAudioStop 監聽音樂結束

wx.chooseVideo 從相冊選擇視訊，或者拍攝

3）檔案 API 清單：

wx.saveFile 儲存檔案

wx.getSavedFileList 擷取已儲存的檔案清單

wx.getSavedFileInfo 擷取已儲存的檔案資訊

wx.removeSavedFile 删除已儲存的檔案資訊

wx.openDocument 打開檔案

4）資料 API 清單：

wx.getStorage 擷取本地資料緩存

wx.getStorageSync 擷取本地資料緩存

wx.setStorage 設定本地資料緩存

wx.setStorageSync 設定本地資料緩存

wx.getStorageInfo 擷取本地緩存的相關資訊

wx.getStorageInfoSync 擷取本地緩存的相關資訊

wx.removeStorage 删除本地緩存内容

wx.removeStorageSync 删除本地緩存内容

wx.clearStorage 清理本地資料緩存

wx.clearStorageSync 清理本地資料緩存

5）位置 API 清單：

wx.getLocation 擷取目前位置

wx.chooseLocation 打開地圖選擇位置

wx.openLocation 打開内置地圖

wx.createMapContext 地圖元件控制

6）裝置 API 清單：

wx.getNetworkType 擷取網絡類型

wx.onNetworkStatusChange 監聽網絡狀态變化

wx.getSystemInfo 擷取系統資訊

wx.getSystemInfoSync 擷取系統資訊

wx.onAccelerometerChange 監聽加速度資料

wx.startAccelerometer 開始監聽加速度資料

wx.stopAccelerometer 停止監聽加速度資料

wx.onCompassChange 監聽羅盤資料

wx.startCompass 開始監聽羅盤資料

wx.stopCompass 停止監聽羅盤資料

wx.setClipboardData 設定剪貼闆内容

wx.getClipboardData 擷取剪貼闆内容

wx.makePhoneCall 撥打電話

wx.scanCode 掃碼

7）界面 API 清單：

wx.showToast 顯示提示框

wx.showLoading 顯示加載提示框

wx.hideToast 隐藏提示框

wx.hideLoading 隐藏提示框

wx.showModal 顯示模态彈窗

wx.showActionSheet 顯示菜單清單

wx.setNavigationBarTitle 設定目前頁面标題

wx.showNavigationBarLoading 顯示導覽列加載動畫

wx.hideNavigationBarLoading 隐藏導覽列加載動畫

wx.navigateTo 新視窗打開頁面

wx.redirectTo 原視窗打開頁面

wx.switchTab 切換到 tabbar 頁面

wx.navigateBack 退回上一個頁面

wx.createAnimation 動畫

wx.createContext 建立繪圖上下文

wx.drawCanvas 繪圖

wx.stopPullDownRefresh 停止下拉重新整理動畫

8）WXML節點資訊 API 清單：

wx.createSelectorQuery 建立查詢請求

selectorQuery.select 根據選擇器選擇單個節點

selectorQuery.selectAll 根據選擇器選擇全部節點

selectorQuery.selectViewport 選擇顯示區域

nodesRef.boundingClientRect 擷取布局位置和尺寸

nodesRef.scrollOffset 擷取滾動位置

nodesRef.fields 擷取任意字段

selectorQuery.exec 執行查詢請求

9）開放接口：

wx.login 登入

wx.getUserInfo 擷取使用者資訊

wx.chooseAddress 擷取使用者收貨位址

wx.requestPayment 發起微信支付

wx.addCard 添加卡券

wx.openCard 打開卡券

3、相關處理代碼

1）注冊程式處理代碼

App({
  onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: \'I am global data\'
})      

2）注冊頁面處理代碼

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: \'Set some data for updating view.\'
    })
  },
  customData: {
    hi: \'MINA\'
  }
})      

3）JS函數子產品化

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye      

在需要使用這些子產品的檔案中，使用 

require(path)

 将公共代碼引入

var common = require(\'common.js\')
Page({
  helloMINA: function() {
    common.sayHello(\'MINA\')
  },
  goodbyeMINA: function() {
    common.sayGoodbye(\'MINA\')
  }
})      

4）網絡資料請求處理代碼

//點選搜尋按鈕調用的函數
      search:function(e){
        var that = this;

        //資料加載完成之前，顯示加載中提示框
        wx.showToast({
          title: \'加載中。。。\',
          icon: \'loading\',
          duration: 10000
        });

        //發起請求，注意 wx.request發起的是 HTTPS 請求
        wx.request({
          url: url + "?city=" + that.data.inputValue + "&key=" + apiKey,
          data: {},
          header: {
              \'content-type\': \'application/json\'
          },
          success: function(res) {
            var data = res.data;
            //将資料從邏輯層發送到視圖層，同時改變對應的 this.data 的值
            that.setData({
              restation: data.result,
              condition: false
            });
            //資料加載成功後隐藏加載中彈框
            wx.hideToast();
          }
        })

      }