WeChat applet realizes automatic reply to customer service messages (reply to picture messages)

Learn from the WeChat applet to realize automatic reply to customer service messages (reply to picture messages) - Nuggets (juejin.cn)

WeChat applet realizes automatic reply to customer service messages (reply to picture messages)

There are many types of reply messages, such as text messages, img picture messages, link link messages, and miniprogrampage applet card messages. The following is just to reply to the picture message (this is not written in most tutorials, others can be searched on Nuggets by yourself)

Before automatically replying to a picture message, according to the WeChat document description, the picture needs to be uploaded to a temporary file server now, and the picture storage time is only valid for three days.

premise

• The mini program has enabled the "cloud development" function
• Open "Cloud Development" in WeChat Developer Tools, click "Settings", click "Other Settings", click "Add Message Push" (add two message push settings with message types of "image" and "event"), click " Sure"
• At present, WeChat mini-program users must trigger the customer service function through a fixed button, as shown below
• After the button is triggered, the applet will actively send a picture message to customer service

accomplish

Implemented in the applet index.wxml file

The open-type value of the button component needs to be set to contact. When the user clicks, he will enter the customer service session. If the user clicks on the mini program message in the session, he will return to the mini program. The developer can obtain it through the bindcontact event callback. The page path of the message clicked by the user and the corresponding parameter query. In addition, developers can transparently transmit the session source to customer service by setting session-from.

<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom">客服</button>

 Cloud function config.json configuration file

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

 Mini program cloud function entry file index.js implementation

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境

// 下载云存储图片
// 讲图片上传到小程序云开发的存储中可以得到文件的fileID
let downLoad = async(event, context) => {
  const res = await cloud.downloadFile({
      fileID: 'cloud://example.png' 
  })
  const buffer = res.fileContent
  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()
  
  await cloud.openapi.customerServiceMessage.send({
    touser: wxContext.OPENID,
    msgtype: 'text',
    text: {
      content: '欢迎来到印象派肖像！我是您的客服，非常高兴为您服务。如果您有任何关于摄影作品、展览或其他方面的问题，都可以随时向我咨询。如果您需要帮助或有任何疑问，请随意问我。您也可以通过搜索下面的微信号添加我为好友，我将随时为您提供帮助和回答问题。期待与您互动，分享摄影的乐趣！祝您在我们的小程序中度过愉快的时光！',
    },
  })
  await cloud.openapi.customerServiceMessage.send({
    touser: wxContext.OPENID,
    msgtype: 'text',
    text: {
      content: 'a1803233552',
    },
  })

  // 客服消息
  let Buffer = await downLoad()
  let meida = await upload(Buffer)
  await cloud.openapi.customerServiceMessage.send({
      touser: wxContext.OPENID,
      msgtype: "image",
      image: {
          "media_id": meida.mediaId
      }
  })
  

  return 'success'
}

Effect 

 

 

 Remark

Use of customerServiceMessage.uploadTempMedia: Upload media files to WeChat server. Currently only images are supported. Used to send customer service messages or passively reply to user messages. Cloud call is the ability provided by WeChat cloud development to call the WeChat open interface in the cloud function, which needs to be used in the cloud function through wx-server-sdk. Call instance

// cloud = require('wx-server-sdk')
// ...
// 方法返回 Promise
cloud.openapi.customerServiceMessage.uploadTempMedia({
  type: 'image',
  media: {
    contentType: 'image/png',
    value: Buffer
  }
})

The use of cloud.downloadFile to download files from cloud storage space where the return type of the downloaded file is  ArrayBuffer the call instance

wx.cloud.downloadFile({
  fileID: 'a7xzcb'
}).then(res => {
  console.log(res.data)
}).catch(error => {
  // handle error
})