微信小程序实现客服功能、word文件下载到本地
2023-09-11 14:20:19 时间
微信小程序项目开发中,遇到联系客服和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_url
wx.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, // 下载资源的 url
filePath:wx.env.USER_DATA_PATH+'/'+fileName,//指定文件下载后存储的路径(本地路径)(filePath放开手机没问题,开发者工具报超限错误)
success: res => {
console.log('downloadFile',res)
var filePath = res.filePath
wx.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%;
}
相关文章
- DVWA之File Inclusion(文件包含)
- 学习ASP.NET Core Blazor编程系列十九——文件上传(下)
- 通俗易懂,C#如何安全、高效地玩转任何种类的内存之Span的脾气秉性(二)。 异步委托 微信小程序支付证书及SSL证书使用 SqlServer无备份下误删数据恢复 把list集合的内容写入到Xml中,通过XmlDocument方式写入Xml文件中 通过XDocument方式把List写入Xml文件
- Laravel .env 文件偶发性值读取不到
- 【微信小程序】--创建第一个小程序项目&项目文件的作用(二)
- 《微信小程序:开发入门及案例详解》—— 2.4 框架页面文件
- 我用 Dubbo 传输文件,差点被开除
- linux中增加swap分区文件的步骤方法
- C++中TCP socket传输文件
- C# xml文件的创建,修改和添加节点 。
- PHP生成excle文件
- Linux文件管理
- 红色警戒!Windows微信蓝屏文件刨析!
- Sring源码解析(一)Spring是怎么读取配置Xml文件的
- Swift - 发送消息(文本,图片,文件等)给微信好友或分享到朋友圈
- gendiff - 致力于创建无错的 diff 文件的工具
- 文件管理利器,快速将文件移动到所属文件夹目录
- 微信-文件组成-模块作用--定义全局方法变量---数据绑定--wx:for循环列表
- 如何毫不费力地探索您的 IDX 数据集,使用 idx2numpy 库在 Python 中探索原始 MNIST 文件
- jsPDF将html页面生成pdf文件的前端解决方案及html2canvas如何真正解决跨域图片的问题
- 微信小程序: 按说明的方法在app.wxss中引入 weui.wxss 提示找不到文件的解决方法
- prometheus多个配置文件,prometheus文件发现
- Linux文件查找工具之find “大宝剑”--转载