【系】微信小程序雲開發實戰堅果商城-前後端交互之開篇

第 4-1 課：前後端交互之開篇

雲開發已經告一段落了，現在我們需要前後端的數據對接工作了。很多時候在實際的開發中公司利用雲開發可能只是部分功能，所以在這裏編寫的時候，我們處理的接口應該要做到通用。

1 全局通用配置

client 新建 config.js ，用來存放全局接口訪問地址配置文件

const config = {
  cloud_route: 'index'
}

export { config }

client 新建 utils/CloudRequest.js ，後臺路由請求公共工具類

import { config } from "../config.js"
class CloudRequest{

  constructor(){
    this.cloud_route = config.cloud_route
  }

  request(params){
    wx.cloud.callFunction({
      // 要調用的雲函數名稱
      name: this.cloud_route,
      // 傳遞給雲函數的參數
      data: {
        // 要調用的路由的路徑，傳入準確路徑或者通配符
        $url: params.url, 
        data: params.data 
      },
      success: res => {
        params.success(res)
      },
      fail: err => {
        console.log(err)
      }
    })
  }

  /*獲得元素上的綁定的值*/
  getDataSet(event, key) {
    return event.currentTarget.dataset[key];
  }
  

}
export { CloudRequest }

後面的所有的 model 直接繼承調用 request 就可以操作雲函數了，在小程序的使用的形式很多時候就代碼可以看起來更通俗易懂，constructor 初始化的就會執行，在這裏我們全局之定義了一個路由，所以我放到後面配置文件，如果有幾個路由這裏大家 當前的類寫一個判斷路由的方法，每一個 model 在調用的時候傳入一個類型做條件判斷。在之前不知道大家怎麼處理點擊的返回的參數，不知道是不是每次點擊都是在event 去獲取，在這裏我封裝了一個公共的方法 ，getDataSet 方法大家只需要傳入就能直接獲取元素綁定的值，避免一次又一次的尋找複製粘貼。

2 代碼分解

2.1 constructor

constructor(){
    this.cloud_route = config.cloud_route
  }

constructor() 方法是類的默認方法,通過 new 命令生成對象實例時,自動調用該方法 。每次實例化去加載配置文件，this.cloud_route 將 config 配置信息賦值。

2.2 request 方法

  request(params){
    wx.cloud.callFunction({
      // 要調用的雲函數名稱
      name: this.cloud_route,
      // 傳遞給雲函數的參數
      data: {
        // 要調用的路由的路徑，傳入準確路徑或者通配符
        $url: params.url, 
        data: params.data 
      },
      success: res => {
        params.success(res)
      },
      fail: err => {
        console.log(err)
      }
    })
  }

與後臺交互的時候我需要傳入路由和參數（非必傳）， wx.cloud.callFunction 官方提供的雲函數調用方法函數，$url 因爲我們後臺採用的 tcb-router 所以每一個請求的函數需要參入路由在後臺判斷，這裏的 params.data 根據實際的情況進行傳入。params.success(res) 將請求的返回數據返回調用方。其他類需要調用 request 繼承 CloudRequest 通過繼承使用。

• 無 data 調用

import { CloudRequest } from '../utils/cloud-request.js'
class TestModel extends CloudRequest {
  getTest(callBack) {
    this.request({
      url: "路由路徑",
      success: res => {
        callBack(res)
      }
    })
  }
}
export { TestModel }

繼承之後通過 this.request 直接使用, CloudRequest 中 params 對應參數如下

{
    url: "路由路徑",
    success: res => {
    callBack(res)
    }
}

• 有 data 調用

import { CloudRequest } from '../utils/cloud-request.js'

class TestModel extends CloudRequest {
  getTest(callBack) {
    this.request({
      url: "路由路徑",
      data:"{傳入的數據}",
      success: res => {
        callBack(res)
      }
    })
  }
  
}

export { TestModel }

data 使用json傳入的形式，在後面的章節我會講到，callBack 函數拿到數據這裏不進行 在返回它的調用方。這裏多次調用和返回可能有點繞，大家可以結合代碼進行參看。

項目地址

在搭建項目前，根據自己需要下載本系列文章的源代碼

本項目地址：https://gitee.com/mtcarpenter/nux-shop