基於微信雲開發的小程序客服消息推送

小冊 《Uniapp 從入門到進階》 - 從基礎到實戰，詳細講解跨平臺應用開發的方方面面，包含 Uniapp 開發經常使用知識點，基礎 api，前端交互、組件封裝，後端 Nodejs 開發、先後端聯調和調優部署，是一套很是全面的綜合課程。

今年的早春非同尋常，病毒的肆虐，影響着各行各業，但願早點過去，一切恢復正常。

引言

最近在升級公司小程序，打算把一些前端可操做且相對獨立（後端懶得改）的功能，逐步嘗試轉移爲雲開發實現，此次先談談客服消息推送，我"參考"了官方文檔，感謝官方提高我多想多動手的能力，因而有了這篇文章，內容大概會分爲如下幾點：

• 雲開發是什麼
• 雲函數客服消息推送
• 實現功能
• 參考資料

雲開發是什麼

Serverless 這個詞這兩年很是火，不瞭解的趕忙點擊這裏。個人理解 Serverless 是一種架構，雲開發屬於它的一種實現。

雲開發爲開發者提供完整的原生雲端支持和微信服務支持，弱化後端和運維概念，無需搭建服務器，接入sdk，即可使用平臺提供的 API 進行核心業務開發，便可實現快速上線和迭代。

雲開發提供了幾大基礎能力支持：

能力	做用	說明
雲函數	無需自建服務器	在雲端運行的代碼，微信私有協議自然鑑權，開發者只需編寫自身業務邏輯代碼
數據庫	無需自建數據庫	一個既可在小程序前端操做，也能在雲函數中讀寫的 JSON 數據庫
雲存儲	無需自建存儲和 CDN	在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理
雲調用	原生微信服務集成	基於雲函數免鑑權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力

在開發者工具工具欄左側，點擊雲開發按鈕便可打開雲控制檯、根據提示開通雲開發、建立雲環境。默認配額下能夠建立兩個環境，各個環境相互隔離，每一個環境都包含獨立的數據庫實例、存儲空間、雲函數配置等資源。每一個環境都有惟一的環境 ID 標識，初始建立的環境自動成爲默認環境。

上面是官方介紹，總之肯定你開啓雲開發功能。

雲函數客服消息推送

開通了雲開發的小程序可使用雲函數接收消息推送，目前僅支持客服消息推送。

雲調用會用到2個API：

• customerServiceMessage.send
• customerServiceMessage.uploadTempMedia

customerServiceMessage.send

能夠推送四種類型消息

| 屬性 |說明|
| -------- | :-----: |
|text | 文本消息，msgtype="text" |
|image |圖片消息，msgtype="image"
|link |圖文連接，msgtype="link"
|miniprogrampage | 小程序卡片，msgtype="miniprogrampage" |

此次只用到text，image兩種，link和miniprogrampage暫時沒用到。image圖片類型有個要求：傳入media_id參數，爲發送的圖片的媒體ID，需經過 新增素材接口（customerServiceMessage.uploadTempMedia） 上傳圖片文件得到。

customerServiceMessage.uploadTempMedia

把媒體文件上傳到微信服務器。目前僅支持圖片。用於發送客服消息或被動回覆用戶消息，放到下面功能實現介紹。

實現功能

先說下咱們的需求：

用戶點擊彈窗的引導圖，打開客服消息窗口，主動推送一條帶提示操做的歡迎消息，當用戶輸入'1'，會推送二維碼圖片。

因爲咱們的公司小程序比較早就存在了，結構已經不輕易調整，開始覺得會比較難集成，沒想到只需簡單配置就能夠，在根目錄新增文件夾cloudfunctions存放雲函數，在根目錄的 project.config.json 文件，新增 cloudfunctionRoot 字段，指定cloudfunctions爲雲函數本地根目錄，

{
   "cloudfunctionRoot": "cloudfunctions/",
}

完成指定以後，雲函數的根目錄的圖標會變成「雲目錄圖標」，雲函數根目錄下的第一級目錄（雲函數目錄）是與雲函數名字相同的，若是對應的線上環境存在該雲函數，則會用一個特殊的 「雲圖標」 標明:

接着，在雲函數根目錄上右鍵菜單中，選擇建立一個新的 Node.js 雲函數，咱們將該雲函數命名爲 kefumsg，在本地建立出雲函數目錄和入口index.js文件，同時在線上環境中建立出對應的雲函數。

一個目錄表明一個雲函數，通常是兩個文件組成，index.js，package.json，這裏手動新增config.json文件，用於配置使用customerServiceMessage.send的權限：

{
    "permissions": {
        "openapi": [
            "customerServiceMessage.send",
            "customerServiceMessage.uploadTempMedia"
        ]
    }
}

如下是kefumsg雲函數的目錄：

node_modules是本地調試生成的，放後面說。先上傳二維碼圖片到雲存儲，微信開發工具打開雲開發->存儲->上傳文件：

這裏的File ID下面會用到。

編寫雲函數

打開kefumsg雲函數的目錄index.js文件，替換爲如下代碼：

const cloud = require('wx-server-sdk')
cloud.init()

<!--下載雲存儲圖片-->
let downLoad = async(event, context) => {
    const res = await cloud.downloadFile({
        fileID: 'cloud://kefumsg-n350x.6769-kefumsg-n350x-1302104716/1588064201743.png', // 圖片的File ID
    })
    const buffer = res.fileContent
    console.log(buffer)
    return buffer
}

<!--把媒體文件上傳到微信服務器-->
let upload = async(Buffer) => {
    return await cloud.openapi.customerServiceMessage.uploadTempMedia({
        type: 'image',
        media: {
            contentType: 'image/png',
            value: Buffer
        }
    })
}


exports.main = async(event, context) => {
    const wxContext = cloud.getWXContext()

    if (event.Content == '1') {
        let Buffer = await downLoad()
        let meida = await upload(Buffer)
            // console.log(meida)
        try {
            <!--發送圖片類型消息-->
            const result = await cloud.openapi.customerServiceMessage.send({
                touser: wxContext.OPENID,
                "msgtype": "image",
                "image": {
                    "media_id": meida.mediaId
                }
            })
            return result
        } catch (err) {
            return err
        }
    } else if (event.Title == '自定義標題') { 
    // 根據自定義卡片title觸發
        let Buffer = await downLoad()
        let meida = await upload(Buffer)
        try {
            const result = await cloud.openapi.customerServiceMessage.send({
                touser: wxContext.OPENID,
                "msgtype": "image",
                "image": {
                    "media_id": meida.mediaId
                }
            })
            return result
        } catch (err) {
            return err
        }
    } else {
        try {
            await cloud.openapi.customerServiceMessage.send({
                touser: wxContext.OPENID,
                msgtype: 'text',
                text: {
                    content: '您好,很高興爲您服務。回覆1，查看入羣二維碼'
                }
            });
            return 'success'
        } catch (err) {
            return err
        }
    }
}

你確定會好奇爲何又是download()，又是upload()的，這裏會有點繞，跟着我來理解下：

1. 首先二維碼圖片放在雲存儲，先要經過cloud.downloadFile下載找到對應的buffer值，
2. 而後openapi.customerServiceMessage.uploadTempMedia的media類型只接受Buffer，上傳成功返回mediaId標識（媒體文件上傳後，獲取標識，3天內有效），
3. 傳給openapi.customerServiceMessage.send的image的media_id屬性，

這樣才能成功返回圖片類型消息。若是各位大佬有好的辦法請告知我。

上傳並部署

雲函數編寫完成，在kefumsg雲函數的目錄右鍵，選擇上傳並部署：全部文件，一鍵推送至雲而且自動返回部署成功與否的消息。

接着，在開發工具雲開發控制檯中選擇設置->全局設置->添加消息推送，添加一條配置，這裏只選擇text類型：

肯定保存

根據咱們需求，用戶點開客服，會自動推送一條消息，通過測試，配置text類型纔會主動推送，如配置多條，只能用戶主動發送消息才能觸發推送。

調用雲函數

首先，在小程序app.js頭添加：

wx.cloud.init()

在頁面.wxml添加打開客服對話框：

<!--發送卡片，title很重要，做爲觸發器關鍵-->
<button open-type="contact" bindcontact="handleContact" show-message-card="true" send-message-title="自定義標題" send-message-img="https://s3.pstatp.com/toutiao/static/img/logo.271e845.png"/>

對應的.js添加：

wx.cloud.callFunction({
    name: 'kefumsg'  // 名字和雲函數名字對應
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err)
})

打開微信開發工具預覽掃碼，需真機調試才能看到效果，如無報錯，點擊按鈕，會彈出「您好,很高興爲您服務。回覆1，查看入羣二維碼」，回覆1，會彈窗二維碼圖片：

雲函數本地調試

每次開發完都要提交部署，一旦網速慢我很反感覺不了。這時能夠利用雲函數本地調試功能。在kefumsg雲函數的目錄右鍵，選擇開啓雲函數本地調試，因爲使用npm包wx-server-sdk（雲函數的運行環境是 Node.js，所以在本地安裝依賴時務必保證已安裝 Node.js），須要在該目錄執行終端命令安裝依賴包yarn install，不然會報錯，安裝完成會打開窗口：

勾選開啓本地調試，點擊調用按鈕，能夠看到執行：

若有報錯也能夠一目瞭然，待修改測試完成再推到雲端便可。

45047 錯誤碼，意思是微信客服消息在向客戶推送時,可連續發送20條（也不必定），若是期間客戶沒有回覆，或超過限額，會中止發送，除非客戶回覆一下。

參考資料

• 雲開發文檔
• 雲函數接收消息推送
• customerServiceMessage.send
• 客服消息下發條件說明
• 前端爲何要關注 Serverless?

小結

以前我有基於leancloud，知曉雲開發經驗，他們給我體驗都挺好，對於這類型的開發模式我還算熟悉，初步接入客服消息功能只花了1小時左右時間，相比於傳統開發模式，雲開發給我了我足夠的信心，讓我專一於業務的開發，接下來我會把更多實際功能轉移到雲開發上面來（繼續搬磚）。

原文發於掘金：https://juejin.im/post/5eba49...