最近,我在公司的微信小程序中添加了下载文件和扫描QR码的功能。我踩了一些坑。这是一个摘要。希望对大家有帮助。
一、文件下载
1、与微信小程序中的网络通信,并且只能与指定的域名通信。需要在微信小程序的后台配置相应的域名,否则无法访问。
微信小程序包括四种类型的网络请求
接下来,我将主要介绍wx.downloadFile的使用。
DownloadTask wx.downloadFile(Object object)
wx.downloadFile方法将文件资源下载到本地。客户端直接发起HTtps GET请求,并返回文件的本地临时路径(local path)。一次下载允许的最大文件为200MB,而我们自己的业务已将上限设置为50M。基本用法如下:
wx.downloadFile({ url: 'https://example.com/test.pdf', //仅为示例,并非真实的资源 success (res) { // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调 if (res.statusCode === 200) { console.log(res.tempFilePath)//打印临时本地临时路径 } }})
wx.downloadFile方法返回一个DownloadTask对象。 DownloadTask对象是可以监视下载进度更改事件并取消下载任务的对象。 DownloadTask对象的方法是:
在这里,我主要介绍一些我自己使用过的东西。 DownloadTask.onProgressUpdate可以下载进度,获取下载百分比,下载的字节数和总字节数。
//官方的例子downloadTask.onProgressUpdate((res) => { console.log('下载进度', res.progress) console.log('已经下载的数据长度', res.totalBytesWritten) console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)})
downloadTask.abort()此方法可以取消下载任务,但是有一个陷阱,downloadTask.abort()调用不起作用。因为我遇到的情况是我想通过建立下载连接来获取文件大小,并且发现在onProgressUpdate中获取文件大小后调用downloadTask.abort()无法停止下载任务,并通过以下方式调用downloadTask.abort()其他按钮也不起作用。的。最后,经过一番探索,我发现在DownloadTask.onHeadersReceived(function callback)方法中,可以通过Header的Content-length字段获取大小,并且同时调用downloadTask.abort()的效果是不错。
下载文件后,我们可以在成功回调中获取本地临时路径,然后调用系统预览方法以打开文档。我的本地代码如下:
wx.openDocument({ showMenu: true, fileType: 'pdf', filePath: res.tempFilePath, success: function (res) { console.log('打开文档成功', res) }, fail: function (res) { console.log('打开文档失败', res) }})
wx.openDocument(Object object)系统方法用于在新打开的页面上打开文档。此功能主要是我们通常用来将文件保存到手机的选项。如图所示
参数说明:
docdoc格式文件docxdocx格式文件xlsxls格式文件xlsxxlsx 格式文件pptppt格式文件pptxpptx格式文件pdfpdf格式文件
二、扫描常规链接的QR码以打开小程序
此功能是扫描QR码,如果信息已配置,它将自动打开小程序,然后执行相应的业务处理。
首先,我们需要在微信小程序背景中添加规则。在开发版本的开发设置模块中的设置访问域名的部分下,找到“扫描QR码以打开程序中的普通链接”,如下图所示,我设置了3此规则是试用版
我们点击右上角的添加进入设置规则页面,您可以在微信小程序的官方网站上查看具体规则
根据QR码重定向规则,我们需要填写需要重定向到小程序的QR码规则。要求如下:
QR码规则的域名必须由ICP记录进行验证,并且必须放置验证文件以支持以http,https和ftp开头的链接。一个小程序帐户最多可以配置10个QR码前缀规则。
在小程序后台配置QR码跳转小程序规则后,可以使用微信扫描代码以打开小程序,然后如何处理参数? QR码链接的内容将以参数q的形式进入页面。自己一次提取onLoad事件中的q参数并解码URIComponent,以获取原始QR码的完整内容。具体代码如下
onLoad(query) { if (query.q && query.q !== 'undefined') { var url = decodeURIComponent(query.q) //进行业务处理 }}
此功能最初并不复杂,因为我们公司仅发布了在线环境,这导致了向我这一边申请放置验证文件的曲折过程,但最终得以解决。
如果您有任何疑问或有更好的方法,可以留言以进行交流。