我的编程空间,编程开发者的网络收藏夹
学习永远不晚

微信小程序实现自动回复图片消息

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

微信小程序实现自动回复图片消息

前提

小程序已经开通了“云开发”功能

在微信开发者工具中打开“云开发”,点“设置”,点击“其它设置”,点击“添加消息推送”(添加消息类型为“image”和“event”两种消息推送设置),点击“确定”

目前微信小程序用户使用客服功能,必须通过固定的按钮进行触发,在下文展示

按钮触发后小程序会主动发送客服图片消息

实现

小程序index.wxml文件中实现

需要将 button 组件 open-type 的值设置为 contact,当用户点击后就会进入客服会话,如果用户在会话中点击了小程序消息,则会返回到小程序,开发者可以通过 bindcontact 事件回调获取到用户所点消息的页面路径 path 和对应的参数 query,此外,开发者可以通过设置 session-from 将会话来源透传到客服。

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

云函数config.json配置文件

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

小程序云函数入口文件index.js实现

const cloud = require('wx-server-sdk')
cloud.init()
// 下载云存储图片
// 讲图片上传到小程序云开发的存储中可以得到文件的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) => {
  // 客服消息
  if (event.MsgType == 'event') {
    const wxContext = cloud.getWXContext()
    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"
  }
};

备注

customerServiceMessage.uploadTempMedia 的使用:

把媒体文件上传到微信服务器。目前仅支持图片。用于发送客服消息或被动回复用户消息。

云调用是微信云开发提供的在云函数中调用微信开放接口的能力,需要在云函数中通过 wx-server-sdk 使用。

调用实例

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

cloud.downloadFile的使用

从云存储空间下载文件 其中下载文件的返回类型为 ArrayBuffer

调用实例

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

到此这篇关于微信小程序实现自动回复图片消息的文章就介绍到这了,更多相关小程序自动回复内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

微信小程序实现自动回复图片消息

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

微信小程序实现自动回复图片消息

这篇文章主要介绍了微信小程序实现客服消息自动回复图片消息,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
2023-01-17

PHP开发微信小程序:如何实现自动回复功能?

PHP开发微信小程序:如何实现自动回复功能?微信小程序是一种轻量级的应用程序,非常适用于移动设备。在开发微信小程序时,自动回复功能是一个非常重要的功能,可以提供更好的用户体验。本文将介绍如何使用PHP语言开发微信小程序的自动回复功能,并提供
2023-10-27

微信小程序的消息框如何实现

这篇文章主要讲解了“微信小程序的消息框如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序的消息框如何实现”吧!wxml2023-06-26

微信小程序实现图片上传功能

微信小程序实现图片上传功能随着移动互联网的发展,微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景,还支持开发者自定义功能,其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能,并提供具体的代码
微信小程序实现图片上传功能
2023-11-21

微信小程序实现图片裁剪功能

微信小程序实现图片裁剪功能随着微信小程序的快速发展,越来越多的开发者开始探索小程序的潜力。其中,图片处理功能是小程序中常见的需求之一。本文将介绍如何在微信小程序中实现图片裁剪功能,并提供具体的代码示例,帮助开发者快速实现这一功能。准备工作在
微信小程序实现图片裁剪功能
2023-11-21

微信小程序实现图片预览功能

微信小程序是一种轻量级的应用程序,可以在微信中直接使用,具有跨平台、操作方便等优点。在开发过程中,经常会遇到需要实现图片预览功能的需求。本文即将给出一个具体的代码示例,教你如何在微信小程序中实现图片预览功能。首先,我们需要在微信小程序的页面
微信小程序实现图片预览功能
2023-11-21

微信小程序如何实现裁剪图片大小

这篇文章主要介绍“微信小程序如何实现裁剪图片大小”,在日常操作中,相信很多人在微信小程序如何实现裁剪图片大小问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序如何实现裁剪图片大小”的疑惑有所帮助!接下来
2023-06-30

微信小程序怎么实现图片拖拽排序

这篇文章主要介绍“微信小程序怎么实现图片拖拽排序”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序怎么实现图片拖拽排序”文章能帮助大家解决问题。首先来看效果对于组件内部来说。笔者提供了一个参数
2023-06-29

编程热搜

目录