微信小程式搭配小白介面，自己沒有伺服器也能開發哦

黃禪宗發表於2018-03-26

微信小程式伺服器

這裡將重點介紹，在自己沒有伺服器的情況下，如何在微信小程式裡直接呼叫小白介面。

前提

假設你已經開通微信小程式，如果還沒有，可前往微信公眾平臺開通：https://mp.weixin.qq.com

假設你已經開通小白介面，如果還沒有，可到 https://www.okayapi.com/?f=mwx 免費註冊開通

示例原始碼下載

本示例原始碼可到碼雲上下載，點選下載：https://gitee.com/dogstar/okayapi-demo。

最終執行效果：

關鍵配置

微信公眾平臺 - 修改request合法域名

首先，登入微信公眾號平臺，進入：設定 - 開發設定 - 伺服器域名，修改request合法域名，修改為你當前所在的小白介面域名。小白介面已支援HTTPS訪問。如下：

如果不清楚自己所在的域名，可登入小白後臺，進入：系統設定 - 我的套餐，檢視介面域名。如：

注意！並不是全部的所在域名都是api.okayapi.com，只有在這設定後，才能允許在小程式中請求介面。

微信開發工具 - 修改app.js裡的globalData

然後，下載本接入示例的程式碼，使用微信開發者工具（點選下載）開啟，並修改app.js裡的globalData配置。如下：

關於APP_KEY和APP_SECRECT，可以在前面我的套餐裡找到。

配置完成後，我們就可以開始在小程式裡進行功能開發啦。下面來看，如何編寫程式碼請求小白介面。

如果你第一次接觸小程式開發，可以參考下面說明。先開啟微信開發者工具

用微信掃碼登入，然後建立一個新專案，再把剛才下載的原始碼全部覆蓋過去即可。

編寫小程式程式碼

先在你的utils目錄內檔案裡新增okayapi.js和md5.js這兩個檔案。然後在你的index.js檔案內，先引入okayapi.js，即：

//index.js
let okayapi = require('../../utils/okayapi.js')複製程式碼

通過wx.request請求小白介面

然後，使用微信提供的wx.request對小白介面發起請求。需要注意的是，傳遞的引數須經過okayapi.enryptData()進行加密，在返回的結果中的wxRes.data才是小白介面的返回結果。

  /** * 小白介面請求示例 */
  okayApiHelloWorld: function(e) {
    /** * 準備介面引數 */
    let params = {
      s: "Hello.World",         // 必須，待請求的介面服務名稱
      name: "dogstar"         // 可選，根據介面文件，補充更多介面引數
    };
    let _self = this

    /** * 對小白介面發起請求 */
    wx.request({
      url: app.globalData.okayapiHost,
      data: okayapi.enryptData(params),
      success: function (wxRes) {
        // TODO：實現你的夢想……
        let res = wxRes.data

        if (res.data && res.data.err_code == 0) {
          // TODO：請求成功
          console.log('ok: ', res.data)

          _self.setData({
            motto: res.data.title
          })
        } else {
          // TODO：當前操作失敗
          console.log('fail: ', res)

          _self.setData({
            motto: res.data.err_msg
          })
        }

      }
    }) 
  }複製程式碼

呼叫成功的情況下，會看到類似這樣的除錯資訊：

更高階&安全的方案：如果有自己的伺服器，使用PHP代理請求小白介面

以上是針對自己沒有伺服器下，微信小程式直連小白介面的接入指南。如果自己有伺服器，並且不能修改現在微信小程式上的request合法域名時，則可以使用上面介紹的PHP代理。PHP代理的使用更簡單，只需要將PHP代理檔案上傳到你的伺服器上，然後在微信小程式請求介面時，連結改為剛才PHP代理的連結即可。這種使用場景，更為簡便，不需要修改request合法域名，也不需要修改app.js裡的globalData配置，也不需要在wx.request進行okayapi.enryptData()加密。因為這些都全部移到了PHP代理內實現，因此也更為安全。

即呼叫鏈如下：

// 自己沒有伺服器（通過wx.request直接請求小白介面）
微信小程式 -> 小白介面

// 自已有伺服器（通過PHP代理中轉請求小白介面）
微信小程式 -> 自己伺服器的PHP代理 -> 小白介面複製程式碼

對於自己有伺服器的情況，推薦使用PHP代理；如果沒有自己的伺服器也不要緊，可參考上面的接入指南。

小白介面有哪些功能？

簡單說一下，小白介面為小程式開發提供了較多介面，免費，可以直接呼叫。你可以把一些資料通過介面存到你的雲端資料庫（可以自己建表、加表欄位，也可以使用自己的資料庫，或預設的雲端資料庫）。例如這樣：

使用小白介面進行資料的處理很簡單，例如需要獲取某個id的資料，

請求的介面，以及返回的資料示例格式如下（其他的介面使用示例，基本上需要的資料介面都有提供哦）：

http://api.okayapi.com/?s=App.Table.Get&model_name=git_project&id=6
複製程式碼

{
    "ret": "200",
    "data": {
        "err_code": "0",
        "err_msg": "",
        "data": {
            "id": 6, // 資料ID（系統保留欄位，固定返回）
            "uuid": "", // 使用者ID（系統保留欄位，固定返回）
            "add_time": "2017-11-12 09:38:45", // 新增時間（系統保留欄位，固定返回）
            "update_time": "", // 最後更新時間，沒有時返回空欄位串（系統保留欄位，固定返回）
            "ext_data": "", // JSON格式的擴充套件欄位，沒有時返回空欄位串（系統保留欄位，固定返回）
            "git_name": "",
            "git_url": "",
            "git_author": "dogstar"
        }
    },
    "msg": ""
}複製程式碼