微信小程序项目开发中，遇到联系客服和word文档打印（下载）功能，记录一下，以便查阅。

一、客服功能

官方文档

1.在小程序中加入客服消息按钮:

使用button按钮，设置open-type=‘contact’ 属性。

<!--联系客服--><view><button class="button" open-type='contact' style="border: none;padding: 0;font-size: unset;line-height: unset;font-weight: unset;"><image class="img" src="../images/contact.png"/><view class="text">联系客服</view></button>
</view>

2.收发客服消息

微信为小程序提供了 微信公众平台客服功能，已经绑定为客服的人员，可以直接打开客服功能页面（https://mpkf.weixin.qq.com）扫码登录，就能与小程序用户进行沟通。

1. 绑定客服人员

首先，小程序管理员需要为小程序绑定客服人员，客服人员才能进入客服功能，与小程序用户进行沟通。
具体绑定方法是：
(1)使用小程序帐户，登录至微信公众平台（https://mp.weixin.qq.com）。
(2)点击左侧边栏的「客服」链接，进入「客服」功能模块。
(3)点击右侧的「添加」按钮，并在弹出框中，输入需要绑定的客服人员的个人微信号。可以添加多个客服人员的微信号。
(4)确认添加，点击「确定」即可。

2. 进入客服

添加完成后，小程序的客服人员可以使用自己的个人微信，扫码登录进入「微信公众平台客服功能」。

客服功能使用起来非常简单，就像是在用微信网页版一样。只要小程序的用户发起会话，客服人员就可以在客服功能中与用户进行沟通。

用户：

客服人员：

用户：

需要注意的是，客服人员只能在用户发送消息后的 48 小时内回复用户。如果用户发起会话超过 48 小时，客服人员将无法回复该用户。

二、word文件下载

功能1：复制链接到浏览器下载
功能2：下载文件并预览，右上角转发word文件到微信好友
效果图：

file-download.wxml代码:

<!--pages/packageA/file-download/file-download.wxml-->
<view class="container"><view class="action-buttons"><!--联系客服--><button class="button" open-type='contact' style="border: none;padding: 0;font-size: unset;line-height: unset;font-weight: unset;"><image class="img" src="../images/contact.png"/><view class="text">联系客服</view></button><view class="button" bindtap = "downloadWord"><image class="img" src="../images/copy.png"></image><view class="text">下载word</view></view><view class="button" bindtap = "downloadOpenDocument"><image class="img" src="../images/view.png"></image><view class="text">下载并预览word</view></view></view>
</view>

file-download.js代码:

// pages/packageA/file-download/file-download.js
var app=getApp();//获取当前小程序的实例，方便使用全局方法和属性
Page({/*** 页面的初始数据*/data: {//合同word url地址word_url:'http://xiaofang-001.oss-cn-shanghai.aliyuncs.com/file/20201221/134634316_925.docx'},/*** 生命周期函数--监听页面显示*/onShow: function () {},//打印合同，下载合同Word 文件downloadWord(){var url=this.data.word_urlwx.setClipboardData({data: url, //需要设置的内容,success: res => {wx.showModal({title: '提示',content: '复制链接成功，在浏览器中粘贴地址即可下载',success: function (res) {if (res.confirm) {console.log('确定')} else if (res.cancel) {console.log('取消')}}})}});},//下载并打开文档(下载合同Word 文件、预览分享)downloadOpenDocument(){var url=this.data.word_url;var fileExt = url.substring(url.lastIndexOf(".") + 1).toLowerCase();//文件后缀名var fileName= url.substring(url.lastIndexOf("/") + 1).toLowerCase();//文件名+后缀//wx.env.USER_DATA_PATH:微信小程序提供的本地用户文件目录//下载文件，生成临时地址wx.downloadFile({url: url, // 下载资源的 urlfilePath:wx.env.USER_DATA_PATH+'/'+fileName,//指定文件下载后存储的路径（本地路径）(filePath放开手机没问题，开发者工具报超限错误)success: res => {console.log('downloadFile',res)var filePath = res.filePathwx.setClipboardData({data: url, //需要设置的内容,success: res => {wx.showModal({title: '提示',content: '下载成功！链接已复制，打开浏览器访问即可下载文件。也可以点击预览，从右上角菜单里选择发送给微信好友',cancelText: '关闭',confirmText: '预览',success: function (res) {if (res.confirm) {console.log('确定')// 打开文件wx.openDocument({filePath: filePath, //文件路径，可通过 downFile 获得,fileType: fileExt,showMenu: true,//    是否显示右上角菜单success: res => {console.log('打开文档成功')}});} else if (res.cancel) {console.log('取消')}}})}});},fail: () => {},complete: () => {}});},})

file-download.wxss代码：

/* pages/packageA/file-download/file-download.wxss */
.container{width:100%;background: #faf9f9;
}
button::after{display: block;
}
.action-buttons{width:100%;display: flex;text-align: center;
}
.action-buttons .button{width:33%;text-align: center;
}
.action-buttons .button .img{width:180rpx;height: 180rpx;display: block;margin-left: 35rpx;border-radius: 50%;
}

微信小程序实现客服功能、word文件下载到本地相关推荐

微信小程序接入客服功能
微信小程序接入客服功能 1.提供客服入口 // 通过组件方式 <contact-button type="default-light" size="20" ...
如何使用微信小程序视频客服功能？
开通腾讯云实时音视频服务 https://curl.qcloud.com/exHrRPbA 记录下两个信息: SDKAppID key 后续会使用这两个信息进行实时视频聊天配置系统参数添加文本类型 ...
微信小程序实现客服功能和 ICON标签
open-type 的 contact的实现流程 1. 将⼩程序的 appid 由测试号改为⾃⼰的 appid 2. 登录微信⼩程序官⽹,添加客服 -- 微信即可... ICON 图标.组件属 ...
微信小程序在线客服系统都有哪些功能？
微信小程序的用户已经破6亿,不少企业都看准了小程序这块大蛋糕.但是想要把握住小程序红利,除了做好运营推广外,用户服务也是重中之重.微信小程序自带的客服系统却很难满足用户服务的需求,于是很多小程序使用者 ...
关于微信小程序第三方客服接入调查
微信小程序----第三方客服接入调查简介:第三方客服相比微信小程序原生客服,通常来说,会有更强的只能辅助系统,更好的服务营销能力,适用于对服务质量.用户留存转化率以及访客价值挖掘有更高期待的企业. ...
微信小程序绑定客服，接收不到消息？
微信小程序绑定客服,无法接收用户消息客服文档添加客服 <button class="serviceBtn" open-type="contact"&g ...
许嵩音乐智能问答系统微信小程序之客服聊天室
许嵩音乐智能问答系统微信小程序之客服聊天室项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱你还在为因为性格腼 ...
微信小程序在线客服接入功能详解
步骤一::小程序接入微信「客服消息」功能模块,开发者只需要调用按钮,触发微信的客服消息功能即可. 加入客服消息按钮有两个方法,大家可以根据自己的实际需求,任选一种方法. 1.插入固定的接入样式 < ...
微信内置小程序在线客服功能
在小程序中加入客服消息按钮小程序接入微信「客服消息」功能模块,开发者只需要调用按钮,触发微信的客服消息功能即可,不需要自行在小程序中实现. 加入客服消息按钮有两个方法,大家可以根据自己的实际需求,任 ...

微信小程序实现客服功能、word文件下载到本地