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

來(lái)源：超達(dá)科技 發(fā)布時(shí)間：2018-03-29瀏覽：3719次

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

微信小程序在無(wú)論在功能、文檔及相關(guān)支持方面，都是優(yōu)于前面幾種微信賬號(hào)類型，它提供了很多原生程序才有的接口，使得我們的小程序在很多方面突破H5頁(yè)面應(yīng)用的限制，更加接近原生程序的功能，因此微信小程序具有很大的前景想象力。它提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基于 Javascript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開(kāi)發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。

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

小程序的目錄結(jié)構(gòu)如下所示。

其中項(xiàng)目級(jí)別的的文件包括 app.js、app.json、app.wxss 這三個(gè)。其中.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。

頁(yè)面級(jí)別可以包含很多個(gè)頁(yè)面，如index，detail等頁(yè)面，每個(gè)頁(yè)面都包含.js，.json，.wxml，.wxss這些文件，其中.wxml為頁(yè)面視圖文件，是自定義標(biāo)簽的HTML頁(yè)面。

app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽(tīng)并處理小程序的生命周期函數(shù)、聲明全局變量，可以調(diào)用框架提供的豐富的 API。

app.json 是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。

app.wxss 是整個(gè)小程序的公共樣式表。我們可以在頁(yè)面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。

一個(gè)小程序主體部分由三個(gè)文件組成，必須放在項(xiàng)目的根目錄。

 微信小程序中的每一個(gè)頁(yè)面的【路徑+頁(yè)面名】都需要寫(xiě)在 app.json 的 pages 中，且 pages 中的第一個(gè)頁(yè)面是小程序的首頁(yè)。

每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件。

index.json 是頁(yè)面的配置文件：頁(yè)面的配置文件是非必要的。當(dāng)有頁(yè)面的配置文件時(shí)，配置項(xiàng)在該頁(yè)面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。如果沒(méi)有指定的頁(yè)面配置文件，則在該頁(yè)面直接使用 app.json 中的默認(rèn)配置。

邏輯層(App Service)

小程序開(kāi)發(fā)框架的邏輯層是由Javascript編寫(xiě)。

邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。 在 Javascript 的基礎(chǔ)上，我們做了一些修改，以方便地開(kāi)發(fā)小程序。

• 增加 App 和 Page 方法，進(jìn)行程序和頁(yè)面的注冊(cè)。

• 增加 getApp 和 getCurrentPages 方法，分別用來(lái)獲取 App 實(shí)例和當(dāng)前頁(yè)面棧。

• 提供豐富的 API，如微信用戶數(shù)據(jù)，掃一掃，支付等微信特有能力。

• 每個(gè)頁(yè)面有獨(dú)立的作用域，并提供模塊化能力。

• 由于框架并非運(yùn)行在瀏覽器中，所以 Javascript 在 web 中一些能力都無(wú)法使用，如 document，window 等。

• 開(kāi)發(fā)者寫(xiě)的所有代碼最終將會(huì)打包成一份 Javascript，并在小程序啟動(dòng)的時(shí)候運(yùn)行，直到小程序銷毀。類似 ServiceWorker，所以邏輯層也稱之為 App Service。

視圖層

框架的視圖層由 WXML 與 WXSS 編寫(xiě)，由組件來(lái)進(jìn)行展示。

將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時(shí)將視圖層的事件發(fā)送給邏輯層。

WXML(WeiXin Markup language)用于描述頁(yè)面的結(jié)構(gòu)。

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

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

基礎(chǔ)組件

框架為開(kāi)發(fā)者提供了一系列基礎(chǔ)組件，開(kāi)發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開(kāi)發(fā)。

什么是組件：

• 組件是視圖層的基本組成單元。

• 組件自帶一些功能與微信風(fēng)格的樣式。

• 一個(gè)組件通常包括開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來(lái)修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。

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

  注意：所有組件與屬性都是小寫(xiě)，以連字符-連接

API

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

說(shuō)明：

• wx.on 開(kāi)頭的 API 是監(jiān)聽(tīng)某個(gè)事件發(fā)生的API接口，接受一個(gè) CALLBACK 函數(shù)作為參數(shù)。當(dāng)該事件觸發(fā)時(shí)，會(huì)調(diào)用 CALLBACK 函數(shù)。

• 如未特殊約定，其他 API 接口都接受一個(gè)OBJECT作為參數(shù)。

• OBJECT中可以指定success, fail, complete來(lái)接收接口調(diào)用結(jié)果。

2、小程序接口功能列表

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

1）網(wǎng)絡(luò) API 列表：

wx.request 發(fā)起網(wǎng)絡(luò)請(qǐng)求
wx.uploadFile 上傳文件
wx.downloadFile 下載文件
wx.connectSocket 創(chuàng)建 WebSocket 連接
wx.onSocketOpen 監(jiān)聽(tīng) WebSocket 打開(kāi)
wx.onSocketError 監(jiān)聽(tīng) WebSocket 錯(cuò)誤
wx.sendSocketMessage 發(fā)送 WebSocket 消息
wx.onSocketMessage 接受 WebSocket 消息
wx.closeSocket 關(guān)閉 WebSocket 連接
wx.onSocketClose 監(jiān)聽(tīng) WebSocket 關(guān)閉

2）媒體 API 列表：

wx.chooseImage 從相冊(cè)選擇圖片，或者拍照
wx.previewImage 預(yù)覽圖片
wx.startRecord 開(kāi)始錄音
wx.stopRecord 結(jié)束錄音
wx.playVoice 播放語(yǔ)音
wx.pauseVoice 暫停播放語(yǔ)音
wx.stopVoice 結(jié)束播放語(yǔ)音
wx.getBackgroundAudioPlayerState 獲取音樂(lè)播放狀態(tài)
wx.playBackgroundAudio 播放音樂(lè)
wx.pauseBackgroundAudio 暫停播放音樂(lè)
wx.seekBackgroundAudio 控制音樂(lè)播放進(jìn)度
wx.stopBackgroundAudio 停止播放音樂(lè)
wx.onBackgroundAudioPlay 監(jiān)聽(tīng)音樂(lè)開(kāi)始播放
wx.onBackgroundAudioPause 監(jiān)聽(tīng)音樂(lè)暫停
wx.onBackgroundAudioStop 監(jiān)聽(tīng)音樂(lè)結(jié)束
wx.chooseVideo 從相冊(cè)選擇視頻，或者拍攝

3）文件 API 列表：

wx.saveFile 保存文件
wx.getSavedFileList 獲取已保存的文件列表
wx.getSavedFileInfo 獲取已保存的文件信息
wx.removeSavedFile 刪除已保存的文件信息
wx.openDocument 打開(kāi)文件

4）數(shù)據(jù) API 列表：

wx.getStorage 獲取本地?cái)?shù)據(jù)緩存
wx.getStorageSync 獲取本地?cái)?shù)據(jù)緩存
wx.setStorage 設(shè)置本地?cái)?shù)據(jù)緩存
wx.setStorageSync 設(shè)置本地?cái)?shù)據(jù)緩存
wx.getStorageInfo 獲取本地緩存的相關(guān)信息
wx.getStorageInfoSync 獲取本地緩存的相關(guān)信息
wx.removeStorage 刪除本地緩存內(nèi)容
wx.removeStorageSync 刪除本地緩存內(nèi)容
wx.clearStorage 清理本地?cái)?shù)據(jù)緩存
wx.clearStorageSync 清理本地?cái)?shù)據(jù)緩存

5）位置 API 列表：

wx.getLocation 獲取當(dāng)前位置
wx.chooseLocation 打開(kāi)地圖選擇位置
wx.openLocation 打開(kāi)內(nèi)置地圖
wx.createMapContext 地圖組件控制

6）設(shè)備 API 列表：

wx.getNetworkType 獲取網(wǎng)絡(luò)類型
wx.onNetworkStatusChange 監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化
wx.getSystemInfo 獲取系統(tǒng)信息
wx.getSystemInfoSync 獲取系統(tǒng)信息
wx.onAccelerometerChange 監(jiān)聽(tīng)加速度數(shù)據(jù)
wx.startAccelerometer 開(kāi)始監(jiān)聽(tīng)加速度數(shù)據(jù)
wx.stopAccelerometer 停止監(jiān)聽(tīng)加速度數(shù)據(jù)
wx.onCompassChange 監(jiān)聽(tīng)羅盤(pán)數(shù)據(jù)
wx.startCompass 開(kāi)始監(jiān)聽(tīng)羅盤(pán)數(shù)據(jù)
wx.stopCompass 停止監(jiān)聽(tīng)羅盤(pán)數(shù)據(jù)
wx.setClipboardData 設(shè)置剪貼板內(nèi)容
wx.getClipboardData 獲取剪貼板內(nèi)容
wx.makePhoneCall 撥打電話
wx.scanCode 掃碼

7）界面 API 列表：

wx.showToast 顯示提示框
wx.showLoading 顯示加載提示框
wx.hideToast 隱藏提示框
wx.hideLoading 隱藏提示框
wx.showModal 顯示模態(tài)彈窗
wx.showActionSheet 顯示菜單列表
wx.setNavigationBarTitle 設(shè)置當(dāng)前頁(yè)面標(biāo)題
wx.showNavigationBarLoading 顯示導(dǎo)航條加載動(dòng)畫(huà)
wx.hideNavigationBarLoading 隱藏導(dǎo)航條加載動(dòng)畫(huà)
wx.navigateTo 新窗口打開(kāi)頁(yè)面
wx.redirectTo 原窗口打開(kāi)頁(yè)面
wx.switchTab 切換到 tabbar 頁(yè)面
wx.navigateBack 退回上一個(gè)頁(yè)面
wx.createAnimation 動(dòng)畫(huà)
wx.createContext 創(chuàng)建繪圖上下文
wx.drawCanvas 繪圖
wx.stopPullDownRefresh 停止下拉刷新動(dòng)畫(huà)

8）WXML節(jié)點(diǎn)信息 API 列表：

wx.createSelectorQuery 創(chuàng)建查詢請(qǐng)求
selectorQuery.select 根據(jù)選擇器選擇單個(gè)節(jié)點(diǎn)
selectorQuery.selectAll 根據(jù)選擇器選擇全部節(jié)點(diǎn)
selectorQuery.selectViewport 選擇顯示區(qū)域
nodesRef.boundingClientRect 獲取布局位置和尺寸
nodesRef.scrollOffset 獲取滾動(dòng)位置
nodesRef.fields 獲取任意字段
selectorQuery.exec 執(zhí)行查詢請(qǐng)求

9）開(kāi)放接口：

wx.login 登錄
wx.getUserInfo 獲取用戶信息
wx.chooseAddress 獲取用戶收貨地址
wx.requestPayment 發(fā)起微信支付
wx.addCard 添加卡券
wx.openCard 打開(kāi)卡券

3、相關(guān)處理代碼

1）注冊(cè)程序處理代碼

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）注冊(cè)頁(yè)面處理代碼

//index.jsPage({
  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函數(shù)模塊化

// common.jsfunction 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）網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求處理代碼

    //點(diǎn)擊搜索按鈕調(diào)用的函數(shù)      search:function(e){        var that = this;        //數(shù)據(jù)加載完成之前，顯示加載中提示框        wx.showToast({
          title: '加載中。。。',
          icon: 'loading',
          duration: 10000
        });        //發(fā)起請(qǐng)求，注意 wx.request發(fā)起的是 HTTPS 請(qǐng)求        wx.request({
          url: url + "?city=" + that.data.inputValue + "&key=" + apiKey,
          data: {},
          header: {              'content-type': 'application/json'
          },
          success: function(res) {            var data = res.data;            //將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時(shí)改變對(duì)應(yīng)的 this.data 的值            that.setData({
              restation: data.result,
              condition: false
            });            //數(shù)據(jù)加載成功后隱藏加載中彈框            wx.hideToast();
          }
        })

      }