微信小程序“一勞永逸”的接口封裝

前言

　　最近都在研究小程序了，我可以的！

需求

　　之前都是用vue來開發項目的，接口模塊我特意封裝了一下。感覺也可以記錄一下

　　小程序的接口雖說簡單，但是重複調用那麼多，顯得不專業（一本正經的胡說八道）

　　還有一篇，小程序遇到了的那些坑和小技巧）待續

 

一、小程序接口請求流程

　　

　　簡單的畫了一個流程圖

 

二、域名配置

　　一定要配置https,小程序上配置的域名必須是域名備案的，還有一定服務器要TLS1.2以上

　　

 

三、打開微信開發者工具，打開你的項目，點開詳情。確認一下域名是否一一匹對。不然會編譯失敗的哦

 

　　

 

 四、在你的項目文件utils 文件中新建api.js http.js

 

　　

 

五、http.js 代碼(複製過去就可以了)

　　　　

module.exports = {
  http(url, method, params) {
    let token = 'token' // 獲取token，自行獲取token和簽名，token和簽名表示每個接口都要發送的數據
    let sign = 'sign' // 獲取簽名 (後臺怎麼定義的，就傳什麼)
    let data = {
      token,
      sign
    }
    if (params.data) { // 在這裏判斷一下data是否存在，params表示前端需要傳遞的數據，params是一個對象，有三組鍵值對，data：表示請求要發送的數據，success：成功的回調，fail：失敗的回調，這三個字段可缺可無，其餘字段會忽略
      for (let key in params.data) { // 在這裏判斷傳過來的參數值爲null，就刪除這個屬性
        if (params.data[key] == null || params.data[key] == 'null') {
          delete params.data[key]
        }
      }
      data = { ...data, ...params.data }
    }
    wx.request({
      url: '你配置的域名' + url, // 就是拼接上前綴,此接口域名是開放接口，可訪問
      method: method == 'post' ? 'post' : 'get', // 判斷請求類型，除了值等於'post'外，其餘值均視作get 其他的請求類型也可以自己加上的
      data,
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        params.success && params.success(res.data)
      },
      fail(err) {
        params.fail && params.fail(err)
      }
    })
  }
}

 

六、api.js（再次複製代碼 就可以了）

　　

// 在這裏面定義所有接口，一個文件管理所有接口，易於維護
import { http } from './http'; // 引入剛剛封裝好的http模塊，import屬於ES6的語法，微信開發者工具必須打開ES6轉ES5選項

function femaleNameApi(params) { // 請求隨機古詩詞接口
  http('project/projectInfos', 'get', params)  // 接口請求的路由地址以及請求方法在此處傳遞
}

// 每一個接口定義一個函數，然後暴露出去，供邏輯代碼調用

function novelApi(params) { // 小說推薦接口
  http('/novelApi', 'get', params)
}

export default { // 暴露接口
  femaleNameApi,
  novelApi
}

 

七、在index.js 調用（你想在哪裏用就在哪裏用）

 

//index.js
import http from '../../utils/api' // 引入api接口管理文件

Page({
  onLoad: function () {

    this.getData()
  },

  getData(){
    http.femaleNameApi({ // 調用接口，傳入參數
      data: {
        token: '470712FF0FE2392D6CB6D8A6560805CC'
      },
      success: res => {
        console.log('接口請求成功', res)
        this.setData({
          femaleList: res.data
        })
      },
      fail: err => {
        console.log(err)
      }
    })
  }
})

 

八、打開控制檯

　　如果你這樣的錯

　　

　　忘記說了showRequestInfo() 這個了（一開始，以爲是api 接口），直接在控制檯輸入這個方法就可以了，可以看到錯誤信息詳情

　　那說明你們的服務器要有證書，而且TLS版本要大於等於1.2

　　（我把我後臺逼瘋了，哈哈哈哈哈哈哈）

　　如果你是這樣的，恭喜你接口成功了呢

　　

九、Fannie式總結

　　以上的兩個文件，算是接口封裝的模板，你放在哪一個項目裏面都可以這樣配置

　　有一點一勞永逸的意思

　　但是它封裝的不夠完美

　　沒有我的vue項目封裝的好，改天再改造一下

　　希望對你有幫助，拜拜咯！