需求:用户将excel表格导入至小程序,解析后将表格内数据渲染至前端页面
首先,我们先根据需求来分析一下流程:
- 选择excel表格,上传
- 通过云函数解析,并存入云数据库
- 从数据库中读取数据,返回前端进行渲染
开工
一. 准备工作
- 通过微信开发者工具,开通云服务(自行查文档)
- 打开云开发界面 => 数据库:新建合集users (PS:合集名字随意)
- 找到小程序根目录下project.config.json文件进行如下修改:
二. 创建云函数文件夹
在上图中配置好的路径处(推荐根目录下)新建文件夹(名字和上图路径名一致),创建好文件夹后,右键打开,配置当前环境
三. 创建云函数:
- 右键cloudfunctions云函数文件夹,新建node.js云函数,函数名自定义,暂定upLoadExcel;
- upLoadExcel下会自动生成四个文件,index.js为入口文件
- 编写云函数(这里需要安装两个依赖:npm install --save wx-server-sdk@latest,npm install node-xlsx)
4. 编写云函数逻辑主体(解析并存入数据库)
5. 到这里云函数就完成了,右键cloudfunctions文件夹=>同步云函数列表;右键upLoadExcel文件夹=>上传并部署:云端安装依赖
6. 打开云开发界面=>云函数,看到列表中出现upLoadExcel,就大功告成了。
四. 编写小程序端逻辑
- 首先要初始化,在app.js中添加如下代码
2. 打开需求实现页面,定义数据库及合集
const db = wx.cloud.database({})
const users = db.collection('users')
3. 编写主逻辑
4. 验证
五. 优化
为了避免合集数据量过大,每次上传新的excel时,将合集原有数据清空(思路很棒,开干)
- 同第三步前三条,创建一个名为deleteExcel的云函数
- 添加主体函数(云函数端可批量删除,小程序端只能单条删除)
3. 编写OK,部署上去 4. 在小程序端,增加如下代码
测试了一下,效果不错,完美
效果图
再来看云端数据库合集中的数据:保证只有每次上传的表格中的数据就OK了