云開(kāi)發(fā) 云接入與HTTP觸發(fā)

云接入是云開(kāi)發(fā)基于云函數(shù)之上為開(kāi)發(fā)者提供的HTTP訪問(wèn)服務(wù)，開(kāi)發(fā)者可以輕松使用 POST、PUT、GET、DELETE等方法通過(guò) HTTP 請(qǐng)求訪問(wèn)到云開(kāi)發(fā)環(huán)境內(nèi)的全部資源，而不需要使用Web端 SDK。而且云接入天然支持跨域請(qǐng)求，將域名添加至Web 安全域名中，這個(gè)域名里的網(wǎng)頁(yè)便可以跨域訪問(wèn)云接入。當(dāng)使用云函數(shù)時(shí)，系統(tǒng)會(huì)自動(dòng)預(yù)配TLS證書(shū)，因此我們可以通過(guò)安全連接調(diào)用云函數(shù)。

一、使用云接入訪問(wèn)云函數(shù)

給云函數(shù)啟用云接入的方式非常簡(jiǎn)單，我們可以使用騰訊云云開(kāi)發(fā)網(wǎng)頁(yè)控制臺(tái)以及Cloudbase Cli命令兩種方式。

1、云開(kāi)發(fā)控制臺(tái)啟動(dòng)云接入

打開(kāi)騰訊云云開(kāi)發(fā)網(wǎng)頁(yè)控制臺(tái)的云函數(shù)菜單，然后點(diǎn)擊HTTP觸發(fā)標(biāo)簽，開(kāi)啟HTTP觸發(fā)，云接入就啟動(dòng)啦，云接入的默認(rèn)域名就是https://{你的環(huán)境id}.service.tcloudbase.com/。

在前面我們已經(jīng)上傳了一個(gè)webtest的云函數(shù)（其他云函數(shù)也都可以的哦），點(diǎn)擊進(jìn)入webtest云函數(shù)的管理頁(yè)，然后點(diǎn)擊右上角的編輯，在HTTP 觸發(fā)路徑里輸入/webtest（也可以是其他值），保存之后，在瀏覽器里打開(kāi)以下鏈接（網(wǎng)頁(yè)控制臺(tái)直接就有鏈接）就可以訪問(wèn)云接入了：

https://{你的環(huán)境id}.service.tcloudbase.com/webtest

大家可以對(duì)比一下event、context對(duì)象與調(diào)用云函數(shù)返回的對(duì)象有什么不同。使用云接入調(diào)用云函數(shù)時(shí)，HTTP 請(qǐng)求會(huì)被轉(zhuǎn)化為特殊的結(jié)構(gòu)體，稱(chēng)之為集成請(qǐng)求，結(jié)構(gòu)如下：

{
    path: 'HTTP請(qǐng)求路徑，如 /hello',
    httpMethod: 'HTTP請(qǐng)求方法，如 GET',
    headers: {HTTP請(qǐng)求頭},
    queryStringParameters: {HTTP請(qǐng)求的Query，鍵值對(duì)形式},
    requestContext: {云開(kāi)發(fā)相關(guān)信息},
    body: 'HTTP請(qǐng)求體',
    isBase64Encoded: 'true or false，表示body是否為Base64編碼'


}

這里的queryStringParameters是HTTP請(qǐng)求的Query,我們可以在鏈接里傳入一些參數(shù)，比如在訪問(wèn)云接入的鏈接里加一些參數(shù)：

https://xly-xrlur.service.tcloudbase.com/webtest?name=bbsky&location=shenzhen

2、使用Cloudbase Cli啟動(dòng)云接入

在前面我們已經(jīng)了解到通過(guò)在終端輸入cloudbase --help可以了解到Cloudbase Cli有哪些命令（盡管cloudbase是全局的，建議大家在云開(kāi)發(fā)項(xiàng)目的根目錄執(zhí)行），我們可以看到關(guān)于云接入的命令有：

  service:switch [options]                  開(kāi)啟/關(guān)閉 HTTP Service 服務(wù)
  service:auth:switch [options]             開(kāi)啟/關(guān)閉 HTTP Service 服務(wù)訪問(wèn)鑒權(quán)
  service:create [options]                  創(chuàng)建 HTTP Service
  service:delete [options]                  刪除 HTTP Service
  service:list [options]                    獲取 HTTP Service 列表
  service:domain:bind [options] <domain>    綁定自定義 HTTP Service 域名
  service:domain:unbind [options] <domain>  解綁自定義 HTTP Service 域名
  service:domain:list [options]             查詢(xún)自定義 HTTP Service 域名

由這些命令，我們可以在終端里輸入以下命令來(lái)開(kāi)啟和關(guān)閉云接入，比如開(kāi)啟云開(kāi)發(fā)環(huán)境id為xly-xrlur的云接入服務(wù)：

cloudbase service:switch -e xly-xrlur

而我們可以執(zhí)行以下命令創(chuàng)建一條云接入路由，路徑為 /webtest，指向的云函數(shù)為 webtest：

cloudbase service:create -p /webtest -f webtest

除了可以使用瀏覽器里打開(kāi)云接入的鏈接，我們還可以使用cURL命令行來(lái)調(diào)用云接入，比如我們可以在終端輸入以下命令：

curl https://xly-xrlur.service.tcloudbase.com/webtest

3、參數(shù)的傳入與獲取總結(jié)

我們有必要重新梳理一下一些參數(shù)的傳入與獲取相關(guān)的知識(shí)，我們往云函數(shù)里傳入?yún)?shù)的方式有調(diào)用云函數(shù)時(shí)傳入?yún)?shù)、訪問(wèn)云接入鏈接時(shí)傳入?yún)?shù)以及配置云函數(shù)環(huán)境時(shí)添加配置信息，那這三種方法又是如何獲取這些參數(shù)呢？（還有一種是通過(guò)require模塊、文件，這里就不多做介紹了）

調(diào)用云函數(shù)傳入?yún)?shù)

在小程序端、Web端以及云函數(shù)端，我們可以通過(guò)callFunction的接口（小程序端為wx.callFunction、云函數(shù)端為cloud.callFunction、web端為app.callFunction）來(lái)調(diào)用云函數(shù)，并傳入?yún)?shù):

wx.cloud.callFunction({
  name: 'webtest', //被調(diào)用的云函數(shù)的名稱(chēng)
  data: {
    userInfo:{
      name:"李東bbsky"
    },
    id:"20200420001"
  }
})

那我們應(yīng)該如何獲取使用調(diào)用云函數(shù)時(shí)傳遞的參數(shù)呢？我們可以從event對(duì)象里拷貝：

const {userInfo,id} = event

訪問(wèn)云接入鏈接時(shí)傳入?yún)?shù)

我們通過(guò)訪問(wèn)云接入鏈接或axios等進(jìn)行HTTP 請(qǐng)求的方式也能向云函數(shù)里傳遞參數(shù)，這個(gè)參數(shù)會(huì)在queryStringParameters對(duì)象里，我們可以通過(guò)

const {name,title} = event.queryStringParameters

云函數(shù)配置信息傳入?yún)?shù)

我們可以在云開(kāi)發(fā)控制臺(tái)對(duì)云函數(shù)進(jìn)行一些參數(shù)的配置，也就是新增環(huán)境變量的字段，這個(gè)參數(shù)在云函數(shù)的獲取方式如下：

const {school,name} = process.env

二、后臺(tái)函數(shù)與云接入

有了云接入的概念，我們可以把云函數(shù)分為兩類(lèi)，在前面的章節(jié)云函數(shù)主要用于調(diào)用云函數(shù)、處理數(shù)據(jù)庫(kù)、云存儲(chǔ)云調(diào)用，我們可以稱(chēng)之為后臺(tái)函數(shù)，而HTTP函數(shù)則是我們可以通過(guò)標(biāo)準(zhǔn)HTTP請(qǐng)求來(lái)調(diào)用的。

參考上節(jié)Web端云開(kāi)發(fā)的內(nèi)容，在functions文件夾里新建一個(gè)云函數(shù)比如backfunction，然后在index.js里輸入以下代碼，注意有一個(gè)dbName的參數(shù)會(huì)由HTTP請(qǐng)求傳入：

const tcb = require('@cloudbase/node-sdk')
tcb.init({
  env: "xly-xrlur"
})
const db = tcb.database()
const _ = db.command
exports.main = (event,context) =>{
  const {dbName} = event.queryStringParameters //注意queryStringParameters的來(lái)源
  return db.collection(dbName) 
  .where({              
    gdp: _.gt(3000)     
  })
  .get()
}

然后安裝該云函數(shù)的依賴(lài)，將云函數(shù)的代碼部署上傳到云端，并開(kāi)啟云接入以及設(shè)置路由，具體操作前面都有介紹，然后我們?cè)跒g覽器里打開(kāi)如下鏈接，就能看到云函數(shù)返回的數(shù)據(jù)了。

http://xly-xrlur.service.tcloudbase.com/backfunction?dbName=china

在小程序端我們知道獲取獲取可以使用wx.request()接口，而在web端我們則可以使用axios，在靜態(tài)托管的html頁(yè)面，比如打開(kāi)之前public文件夾里的index.html，輸入以下代碼，然后打開(kāi)鏈接，然后在瀏覽器的控制臺(tái)可以獲取到的數(shù)據(jù)啦：

<script src="https://unpkg.com/axios/dist/axios.min.js" rel="external nofollow" ></script>
<script>
    const url ="https://xly-xrlur.service.tcloudbase.com/backfunction?dbName=china"
    axios.get(url).then(res => {
        console.log(res)
        console.log(res.data)
    }).catch(err => {
        console.log(err)
    })
</script>

三、返回集成響應(yīng)

云函數(shù)可以返回String、Object、Number等類(lèi)型的數(shù)據(jù)，還能返回集成響應(yīng)，云接入會(huì)將返回值轉(zhuǎn)化成正常的HTTP響應(yīng)，我們接下來(lái)使用云接入來(lái)返回一些靜態(tài)資源文件。

1、使用集成響應(yīng)返回HTML

使用VS Code在functions文件夾里新建一個(gè)云函數(shù)，比如sendhtml，以及assets文件夾，里面存放我們要返回的HTML文件，結(jié)構(gòu)如下：

├── sendhtml   //sendhtml云函數(shù)目錄
│   └── assets
│       └── index.html
│   └── index.js
│   └── config.json
│   └── package.json

然后在index.js里輸入以下代碼，讀取云函數(shù)目錄assets文件夾里index.html，并返回HTML，這個(gè)云函數(shù)就和以往的云函數(shù)有很大的不同啦：

const tcb = require('@cloudbase/node-sdk')
tcb.init({
  env: "xly-xrlur"
})
const fs = require('fs')
const path = require('path')
exports.main = async (event,context) =>{
  //path.resolve() 方法將路徑或路徑片段的序列解析為絕對(duì)路徑
  const html = fs.readFileSync(path.resolve(__dirname, './assets/index.html'), {
    encoding: 'utf-8'
  })
  return {
    statusCode: 200,
    headers: {
        'content-type': 'text/html'
    },
    body: html
  }
}

在assets文件夾里index.html可以輸入一些html代碼，然后將sendhtml云函數(shù)部署上傳并開(kāi)啟云接入，以及設(shè)置路由如/sendhtml之后，用瀏覽器打開(kāi)云接入的地址，返回的HTML就被瀏覽器自動(dòng)解析了。

2、使用集成響應(yīng)返回其他類(lèi)型的文件

除了html文件，還能返回其他類(lèi)型的文件，在響應(yīng)中，Content-Type 實(shí)體頭部用于指示資源的MIME媒體類(lèi)型，告訴Web端返回的內(nèi)容類(lèi)型。媒體類(lèi)型有很多，比如：

將 content-type 分別設(shè)置為 application/javascript、text/css，即可在 body 中返回 JavaScript 文件和css文件，html、js、css文件是靜態(tài)網(wǎng)站的核心文件，都是可以返回的，這樣就用集成響應(yīng)返回一個(gè)完整的靜態(tài)網(wǎng)站啦。注意用集成請(qǐng)求返回的靜態(tài)網(wǎng)站和靜態(tài)托管之間的區(qū)別哦。

將content-type 設(shè)置為 image/png以及將 isBase64Encoded 設(shè)置為 true，就能返回圖片的二進(jìn)制文件，這個(gè)也可以和云存儲(chǔ)結(jié)合起來(lái)使用。比如我們可以寫(xiě)如下云函數(shù)，先下載云存儲(chǔ)里面的圖片，將Buffer轉(zhuǎn)成base64格式的圖片，然后返回，這樣我們就能通過(guò)云接入的鏈接查看到圖片了：

const cloud = require('wx-server-sdk')
cloud.init({
  env: "xly-xrlur"
})
exports.main = async (event,context) =>{
  const fileID = 'cloud://xly-xrlur.786c-xly-xrlur-1300446086/1572315793634-953.png'
  const res = await cloud.downloadFile({
    fileID: fileID,
  })
  const buffer = res.fileContent
  const base64img = await buffer.toString('base64')
  return {
    isBase64Encoded: true,
    statusCode: 200,
    headers: {
        'content-type': 'image/png'
    },
    body: base64img
  }
}