历史文章回顾:

  • 微信小程序 | 开发常用事例(一)
  • 微信小程序 | 开发常用事例(二)
  • 微信小程序 Notes | 开发常用事例(三)
  • 微信小程序 Notes | 开发常用事例(四)

一、前言

最近一直处于微信小程序的开发之中,未曾想过,好好的 Android 开发变成了“东北乱炖”,这个刺激,酸爽,无与伦比!

不过好处在于接触面儿多了,思维发散了,想问题也似乎多了一种方式。

个人习惯开发时常整理笔记,总结记录是一方面,另一方面也是多多少少证明自己在这个行业曾经为之奋斗过。

感谢这个时代,也感谢各位前辈,站在巨人的肩膀继续努力,分享自己的点滴,帮助后赶来的小伙伴,一起加油~

简单说一下需求吧:

  • 将用户填报的数据整理 Excel 文件,并提供下载链接地址。

本文不会对基础环境配置做过多说明,默认已具备云开发环境~

下面进行着手分析、编码实现,欢迎交流~

文末已附上参考链接。

二、需求分析

经过前期多(du)方(zi)探索,明确如下关键几点:

  • 我们需要借助 node-xlsx 创建 Excel 并上传云平台进行存储;
  • 提供下载地址需要设置有效期,安全为主。

基于以上两点,明确以下开发流程:

  • 第一步,获取用户之前填报数据;
  • 第二步,基于 node-xlsx 将获取到的填报数据进行 Excel 填充;
  • 第三步,将生成的 Excel 文件同步上传云平台,获取到当前 fileID;
  • 第四步,根据 fileID 获取下载地址,并设置有效期;
  • 第五步,将下载地址复制到用户粘贴板,以供用户进行分享、下载。

将需求进行大概梳理后,是不是就感觉一目了然了呢?

下面开始实际开发,当然过程会遇到想不到的意外,别担心,别慌,一个个 fix 就好~

三、实际开发

个人推荐,每个云函数编写完,都本地测试下,多打点 log,前期麻烦了,后期也就省事儿了。

记得测试没问题之后选择「上传并部署:云端安装依赖,不上传 node_modules」

每个云函数都需要上传哦~

3.1 添加获取填报信息云函数/接口

根据上面分析,我们第一步需要去云平台拉取之前用户填报的数据,也就是说我们需要创建一个获取用户数据的云函数,操作步骤如下:

在 cloudfunctions 目录下选择“新建 Node.js 云函数”,随后填入获取填报数据名称,也就是云函数/接口名称,比如说这里我叫 getReportData ,创建完成后如下所示:

接下来在 index.js 中添加获取数据库表内数据即可。关键内容:

  • collection(‘云平台数据库集合名称’).get() : 获取集合数据

代码如下:

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数
exports.main = async (event, context) => {return await cloud.database().collection('DataReport').get();
}

随后开启云函数本地调试,测试下,看下输出结果:

3.2 借助 node-xlsx 生成 Excel 并上传云平台

同样需要创建一个将获取到的填报数据组装成 Excel 的函数,这个函数主要功能为:

  • 处理数据:包含数据的组装,每个不同的 sheet 对应的数据内容格式处理;
  • 生成 Excel 并上传云平台,获取到 fileID。

fileID 是后续换取下载链接的。因为我们的业务是需要设置导出 Excel 名称带有导出时间,这块大家需要注意下小程序获取时间异常(其实就是时区导致获取到的时间比实际少 8 小时)。

部分代码如下,已隐去部分业务代码:

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()// 操作 Excel 类库
const xlsx = require('node-xlsx');// 云函数入口函数
exports.main = async (event, context) => {try {let { reportList } = event;// 定义 Excel 表名 let dataCVS = 'online-excel/资料表-' + processDate() + '.xlsx';// 定义存储数据let allData = [];// 定义表属性let row = ['序号', '地区'];allData.push(row);// 组装数据let tempKey = 1;for (let key in reportList) {let arr = [];let reportBean = reportList[key];arr.push(tempKey++); // 序号arr.push(reportBean.report_yacht_address); // 地区// ...allData.push(arr);}// 将数据保存到 Excel 中var buffer = await xlsx.build([{name: "总数据",data: allData}]);// 把 Excel 文件保存到云存储中return await cloud.uploadFile({cloudPath: dataCVS,fileContent: buffer});} catch (e) {console.error(e);return e;}
}/*** 获取东 8 区时间*/
function getEast9Time() {// 目标时区,东8区 const targetTimezone = -8;// 当前时区与中时区时差,以min为维度const dif = new Date().getTimezoneOffset();// 本地时区时间 + 本地时区时差  = 中时区时间// 目标时区时间 + 目标时区时差 = 中时区时间// 目标时区时间 = 本地时区时间 + 本地时区时差 - 目标时区时差// 东8区时间 return new Date().getTime() + dif * 60 * 1000 - (targetTimezone * 60 * 60 * 1000);
}/*** 获取格式化后时间格式*/
function processDate() {// 时间格式化 由于最终生成在线地址,: 是特殊字符,因此时间时分秒间不添加任何字符date = new Date(getEast9Time());var y = date.getFullYear();var m = date.getMonth() + 1;m = m < 10 ? ('0' + m) : m;var d = date.getDate();d = d < 10 ? ('0' + d) : d;var h = date.getHours();h = h < 10 ? ('0' + h) : h;var minute = date.getMinutes();minute = minute < 10 ? ('0' + minute) : minute;var second = date.getSeconds();second = second < 10 ? ('0' + second) : second;return y + '-' + m + '-' + d + ' ' + h + '' + minute + '' + second;
};

随后在此函数目录右键选择“在外部终端窗口打开”,准备安装 node-xlsx。

  • npm install node-xlsx

3.3 获取下载地址

通过 getTempFileURL 方法获取下载地址并设置有效期,记得对地址进行编码,防止中文~

3.4 拷贝下载地址到用户粘贴板

通过 setClipboardData/getClipboardData 即可。

四、完整 js 代码

  /*** 一键导出 Excel*/onExportExcelClick() {let that = this;// 必须登录if (app.globalData.userInfo == null) {msg.showToast('请登录后再进行数据导出!');return;}wx.showLoading({title: '数据拉取中...',});//  读取数据填报数据wx.cloud.callFunction({name: 'getReportData',success: res => {console.log("---> 读取成功", res.result.data);that.saveExcel(res.result.data);},fail: err => {wx.hideLoading();console.log('---> 读取失败', err);}});},/*** 将数据保存到 Excel 中并存储到云存储中* @param {读取到的数据填报信息} reportList */saveExcel(reportList) {let that = this;wx.showLoading({title: '数据合成中...',});wx.cloud.callFunction({name: "getExportExcel",data: {reportList: reportList},success: res => {console.log("---> 保存成功", res);that.getExcelDownLoadUrl(res.result.fileID);},fail: err => {wx.hideLoading();console.log("---> 保存失败", err);},});},/*** 获取 Excel 下载地址* @param {*} fileID */getExcelDownLoadUrl(fileID) {let that = this;wx.showLoading({title: '数据解码中...',});wx.cloud.getTempFileURL({fileList: [{fileID: fileID,maxAge: 60 * 60 * 24, // 有效期 24 小时 }],success: res => {console.log("---> 获取 Excel 下载地址:", res);that.copyExcelDownloadUrl(encodeURI(res.fileList[0].tempFileURL));},fail: err => {wx.hideLoading();console.log("---> 获取 Excel 下载地址失败", err);}});},/*** 复制 Excel 下载地址* @param {*} excelDownloadUrl */copyExcelDownloadUrl(excelDownloadUrl) {console.log("---> 获取 Excel 解码地址 :", excelDownloadUrl);wx.setClipboardData({data: excelDownloadUrl,success: res => {wx.getClipboardData({success: (option) => {wx.hideLoading();msg.showToast('文件下载地址复制剪贴板~');},fail: (err) => {wx.hideLoading();}})}});},

五、问题汇总

  • Q 1:开启云平台本地测试提示:node modules 未安装,是否忽略并继续?
  • 通过终端进入当前云函数目录下执行 npm install 即可

六、参考资料

  • 微信官方文档
  • 小程序导出数据到excel表,借助云开发后台实现excel数据的保存
  • JavaScript encodeURI() 函数

微信小程序 Notes | 常用开发事例(五)基于云平台导出 Excel相关推荐

  1. 微信小程序 Notes | 开发常用事例(四)

    前言 那啥,关于小程序整理了几篇笔记,多多少少对个人而言有点作用,下面附上对应的文章链接: 微信小程序 | 开发常用事例(一) 微信小程序 | 开发常用事例(二) 微信小程序 Notes | 开发常用 ...

  2. 微信小程序 Notes | 开发常用事例(三)

    前言 之前涉足小程序,简短的记录了下开发过程中遇到的点点滴滴: 微信小程序 | 开发常用事例(一) 微信小程序 | 开发常用事例(二) 而今再次负责小程序,时隔许久,真是一片懵逼,多亏了之前的简短记录 ...

  3. 微信小程序 wxml组件开发(五) 电话号码和地图地址

    在微信小程序开发中,有时候会遇到电话号码和地图信息需要展示的时候,接下来简单介绍电话号码和地图地址展示功能 wxml页面 <text bindtap="goMap">地 ...

  4. 「微信小程序」|开发常用事例(六)

    历史文章回顾: 微信小程序 | 开发常用事例(一) 微信小程序 | 开发常用事例(二) 微信小程序 Notes | 开发常用事例(三) 微信小程序 Notes | 开发常用事例(四) 微信小程序 No ...

  5. eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误

    1.修改入口文件 也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...

  6. 微信小程序应该这样开发

    微信小程序应该这样开发 帐号相关流程 注册范围 企业 政府 媒体 其他组织(换句话讲就是不让个人开发者注册) 填写企业信息 不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的 ...

  7. 另一个小程序 返回的支付结果如何得到_微信小程序商城的开发商家需要注意什么?...

    原标题:微信小程序商城的开发商家需要注意什么? 小程序的应用目前已经成为人们使用较为普遍的平台,无论是用于吃喝玩乐亦或是工具.商业发展等.微信作为小程序的首家推出平台,凭借其自身的10亿流量用户让小程 ...

  8. 微信小程序Taro + React开发实践

    微信小程序Taro + React开发实践 微信小程序原生开发有一套自己的规范和写法,开发体验十分类似Vue,但如果你想减少学习成本,那么Taro框架是一个在此基础上又封装了一层的轮子,从社区热度到开 ...

  9. 微信小程序蓝牙BLE开发实战——案例(二)

    微信小程序蓝牙BLE开发实战(二) 上篇主要介绍在开发过程中应用到相关API操作.接下来介绍个人在项目开发中应用蓝牙BLE一些事情. 由于时间比较仓促, 有些注释没那么详细.请理解~写的不好欢迎各位大 ...

最新文章

  1. mysqldump和xtrabackup备份原理实现说明
  2. linux 防火墙 命令
  3. 如何用LogQL在几秒内查询TB级的日志
  4. php 位深度,javascript - 流程图获取深度,求各位算法高手帮帮忙
  5. Python计算本周是第几周
  6. 系统视频教学视频教程_太极拳教学视频教程,董氏太极拳基本功训练方法视频...
  7. 移动端C#病毒“东山再起”,利用知名应用通信实现远控隐私窃取
  8. matlab提示未定义wc,WooCommerce 教程:修复致命错误调用未定义的函数wc_get_order() - WooCommerce 微站...
  9. linux 命令行看图片,骚操作:用终端打开图片
  10. Spring源码分析之doDispatch分发请求逻辑
  11. 解决性能问题中SQL Server警报:SQL Server警报基础
  12. dio设置自定义post请求_Flutter中的http网络请求
  13. 【Android Studio安装部署系列】三十一、从Android studio3.0.0升级到Android studio3.0.1
  14. html页面前端展示数学公式+vue项目前端展示数学公式——亲测可行
  15. 智能汽车路径规划学习-Dijkstra、蚁群算法
  16. excel中的相对引用、绝对引用和混合引用
  17. 云原生架构下的 API 网关实践: Kong (三)
  18. Android计算器LinearLayout实现布局
  19. waning rm -i rm -rvfi
  20. 《奋斗》里徐志森的七堂地产财商课

热门文章

  1. java 遍历阿斯克吗_java学习笔记
  2. 一个java随机数据的工具类
  3. Kafka的broker-list,bootstrap-server以及zookeeper的关系
  4. Ubuntu 出现这个提示“Waiting for cache lock: Could not get lock /var/lib/dpkg/lock-frontend.”?
  5. Waiting for application to come online: com.example.andyyuan.androidmui.test | com.example.andyyuan.
  6. while [ -h “$PRG“ ] ; do 该段SHELL脚本的含义及应用
  7. php百度收录排名代码,PHP查询百度收录数量代码
  8. Zynq中FPGA上电时序
  9. ubuntu下修复U盘并格式化
  10. 微信小程序开发系列——注册申请