zl程序教程

您现在的位置是:首页 >  其他

当前栏目

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

文件微信下载 功能 本地 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%;
}