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

技术博客 / 4074人浏览 / 0人评论

一、客服功能
官方文档

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)使用小程序帐户，登录至微信公众平台（https://mp.weixin.qq.com）。
(2)点击左侧边栏的「客服」链接，进入「客服」功能模块。
(3)点击右侧的「添加」按钮，并在弹出框中，输入需要绑定的客服人员的个人微信号。可以添加多个客服人员的微信号。
(4)确认添加，点击「确定」即可。

进入客服

添加完成后，小程序的客服人员可以使用自己的个人微信，扫码登录进入「微信公众平台客服功能」。
客服功能使用起来非常简单，就像是在用微信网页版一样。只要小程序的用户发起会话，客服人员就可以在客服功能中与用户进行沟通。

需要注意的是，客服人员只能在用户发送消息后的 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%;
}

原文来自：https://blog.csdn.net/qq_26383975/article/details/111988479
感谢大佬。