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

時間 2019-11-17

標籤微信程序開發基礎知識總結简体版

原文原文鏈接

微信小程序在不管在功能、文檔及相關支持方面，都是優於前面幾種微信帳號類型，它提供了不少原生程序纔有的接口，使得咱們的小程序在不少方面突破H5頁面應用的限制，更加接近原生程序的功能，所以微信小程序具備很大的前景想象力。它提供了本身的視圖層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統，可讓開發者能夠方便的聚焦於數據與邏輯上。html

一、小程序的目錄結構

小程序的目錄結構以下所示。node

其中項目級別的的文件包括 app.js、app.json、app.wxss 這三個。其中.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件。web

頁面級別能夠包含不少個頁面，如index，detail等頁面，每一個頁面都包含.js，.json，.wxml，.wxss這些文件，其中.wxml爲頁面視圖文件，是自定義標籤的HTML頁面。json

app.js是小程序的腳本代碼。咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量，能夠調用框架提供的豐富的 API。小程序

app.json 是對整個小程序的全局配置。咱們能夠在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。微信小程序

app.wxss 是整個小程序的公共樣式表。咱們能夠在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。api

一個小程序主體部分由三個文件組成，必須放在項目的根目錄。瀏覽器

微信小程序中的每個頁面的【路徑+頁面名】都須要寫在 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	否	接口調用結束的回調函數（調用成功、失敗都會執行）

二、小程序接口功能列表

框架提供豐富的微信原生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 打開卡券

三、相關處理代碼

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

      }

主要研究技術：代碼生成工具、會員管理系統、客戶關係管理軟件、病人資料管理軟件、Visio二次開發、酒店管理系統、倉庫管理系統等共享軟件開發
專一於Winform開發框架/混合式開發框架、Web開發框架、Bootstrap開發框架、微信門戶開發框架的研究及應用。
轉載請註明出處：

撰寫人：伍華聰 http://www.iqidi.com