小程序中实现excel数据的批量导入的示例代码

目录
  • 1 建立数据源
  • 2 编制入库的代码
    • 2.1 创建低码方法
    • 2.2 低码中调用连接器
  • 3 最终的代码
  • 4 总结

我们上一篇介绍了如何利用微搭的自定义连接器接入腾讯文档的数据,光有接入是不够的,更重要的是我们需要将采集的数据积累下来,变成企业的数字资产。

积累数据最好的方式就是把数据存入数据库,低码工具除了有可视化编程的便利外,还提供了线上的文档型数据库。文档数据库比传统数据库的优势是,文档数据库的返回结构是JSON格式,直接就可以在前端进行渲染。关系型数据库还得通过代码进行转译。

另外一个方面是文档数据库的类型更丰富,有附件、富文本、自动编号、数组、对象、图片、地理位置这些偏业务类型的字段。有了这些丰富多彩的字段,那我们就可以减少代码的编制,无疑对提高编程效率非常有帮助。

介绍了一些基础背景后我们开始介绍如何将腾讯文档的数据批量入库。

1 建立数据源

要想将数据入库,就先需要建立数据源。登录微搭控制台,点击数据源,点击新建数据模型

输入名称和标识

数据源建立之后需要创建字段,点击添加字段

初学者最大的疑问是我需要建哪些字段,字段是个什么概念?我们还是先看一下我们的腾讯文档的在线表格

会用excel的人都知道,excel里有行和列的概念。那我们的字段其实是列,每一列都对应一个字段。字段的类型其实是和单元格的内容是相关的。比如我的A2单元格是张三,明显是存的字符,那么我们的类型就是文本。C2是出生日期,应该是日期类型。D2是联系电话,可以选择文本也可以选择电话类型。

明白了这个基础概念之后,我们分别添加一下字段,一共是四个字段,姓名、性别、出生日期、联系电话

2 编制入库的代码

我们上一节介绍了如何创建连接器来对接腾讯文档,不会的同学可以翻看上一篇文章添加腾讯文档连接器

读取腾讯文档的数据分为读取sheet,根据sheet获取每一行的数据。因为是入库,还需要将解析好的数据封装到对象中,调用批量新增的方法入库。我们来一步步讲解一下。

2.1 创建低码方法

要想入库,先需要创建一个低码方法。点击左上角的低码编辑器进入到代码界面

低码编辑器打开之后会定位到当前页面,在handler旁边点击+号来创建低码方法

首先需要输入一个方法名,方法名最好能望文知义,我们可以定义一个batchAdd方法

平台会自动生成代码结构

初学者因为没有系统的学习过编程,往往容易犯的错误是自由发挥,随意编制代码。我们讲解一下这里的知识点。一般我们在handler里定义的方法叫函数,函数由几部分组成,函数名、入参、出参(或者叫返回值)

export default function 是函数的定义,这里叫匿名函数,就是不给函数起一个名字。如果函数体里写了await了,这个函数需要改写成异步函数,变成 export default async function

小括号里边的叫入参,多个参数以逗号分隔。我们这里其实只有一个入参,是{event,data}。用一对儿大括号包裹的叫对象,对象里是具体的入参。

event是事件对象,一般我们可以获取到组件里的值,data是如果调用事件传参了,可以直接从data里获取值。具体如果希望看到值的我们可以使用打桩的技术,所谓的打桩就是在控制台输出具体的值。

比如我们可以这样写

export default function({event, data}) {
  console.log(event,data)
}

打好桩之后,如何看结果呢?事件必须绑定到组件上,组件产生的各种的动作可以触发事件。就像我们这个批量入库,需要用户主动触发,就需要放置一个按钮,并且绑定点击事件,来触发批量新增的方法。

事件绑定好之后在哪看结果呢?点击开发调试工具来看具体的输出

这时候点击一下按钮就可以看到对应的输出

输出的结果还是蛮复杂的,不同的组件产生的事件对象不同,里边的内容不同,我们会在具体的场景进行深入的讲解。为啥本篇会先讲一些基础操作呢?因为不少粉丝是按照教程的步骤一步步操作的,不懂基本的操作有时候会乱粘贴一气,然后就是各种各样的报错,还不知道从哪看错误,浪费了不少时间。

2.2 低码中调用连接器

我们上一篇是使用变量的方法调用了连接器,这一篇我们使用低码方法调用连接器。为了获取腾讯文档中的数据,先需要获取工作表的信息。我们复习一下变量中我们是如何调用的

这里是调用了getSheets方法,并且传入了bookID,低码中是通过api的方式来调用的,在方法中输入如下代码

const bookID = "DWkxMSFlkU1l2YkRo";
  const { sheetData } = await app.cloud.callConnector({
    name: 'txwd_jnegl1q',
    methodName: 'getSheets',
    params: {
      bookID,
    },
  });
console.log(sheetData)

这里的bookID是通过腾讯文档分享链接的时候获取到的,{sheetData}是解构赋值的意思,可以直接从返回结果里获取对应的值。可以看一下控制台打印的结果

要怎么看返回结果呢,一对儿中括号表示数组的意思,展开数组第一个元素的下标是0,数组里的元素是个对象,对象是以一对儿大括号表示的,对象里边又有具体的属性和方法。我们这里边需要的是sheetID,cloumnCount,rowCount。

了解了之后我们就定义变量来接收返回值,输入如下代码

let sheetID = sheetData[0].sheetID
  let rowCount = sheetData[0].rowCount
  let columnCount = sheetData[0].columnCount
  console.log(sheetID, rowCount, columnCount)

看控制台的打印结果

接着我们就需要根据返回的结果调用获取单元格的方法,我们使用变量的时候是这么做的

代码中是这样获取

const { rows } = await app.cloud.callConnector({
    name: 'txwd_jnegl1q',
    methodName: 'getRows',
    params: {
      bookID,
      sheetID,
      rows: `2-${rowCount}`
    },
  });
console.log(rows)

这里小伙伴不明白的就是这一句2-${rowCount},用两个反引号包裹的表示模板字符串,里边如果使用${}这种语法的表示变量,代码只要一执行就会翻译成2-3,读取第二行、第三行的数据。我们看一下输出的结果

textTypes表示每一列的字段类型,textValues表示具体的值。字段类型我们不需要,只需要解析出具体的值就可以

这样每行的数据也解析出来了,就需要按照需要的格式整理入库了,下边是入库的代码

const newRecords = [];
  const columns = "xm|xb|csrq|lxdh"; 

  for(let r = 0; r < rowCount - 1; r++) {
    const { textValues } = rows[r];
    const inputParams = {};
    const cols = columns.split('|');
    cols.forEach((c, i) => {
      inputParams[c] = textValues[i];
    });

    newRecords.push(inputParams);
  }

  await app.cloud.callModel({
    name: 'txwdsjy_q6rop6n', // 数据模型标识
    methodName: 'wedaBatchCreate', // 新增多条的方法标识
    params: {
      records: newRecords,
    },
  });

这里columns是内数据源的每一个字段的字段标识,可以去数据源那块找到

其余的代码因为涉及到具体的编程知识,你直接复用就可以,感兴趣的同学可以学习一下javascript,了解了语法之后就可以读的懂

写好之后点击按钮,发现有两条数据已经写入数据库了

但是有个问题是出生日期没有正确的读出来,入库的日期都是1970-01-01。如果有解决办法的小伙伴可以评论区留言,也方便大家学习。

3 最终的代码

export default async function ({ event, data }) {
  console.log(event, data)
  const bookID = "DWkxMSFlkU1l2YkRo";
  const { sheetData } = await app.cloud.callConnector({
    name: 'txwd_jnegl1q',
    methodName: 'getSheets',
    params: {
      bookID,
    },
  });
  console.log(sheetData)
  let sheetID = sheetData[0].sheetID
  let rowCount = sheetData[0].rowCount
  let columnCount = sheetData[0].columnCount
  console.log(sheetID, rowCount, columnCount)
  const { rows } = await app.cloud.callConnector({
    name: 'txwd_jnegl1q',
    methodName: 'getRows',
    params: {
      bookID,
      sheetID,
      rows: `2-${rowCount}`
    },
  });
  console.log(rows)
  const newRecords = [];
  const columns = "xm|xb|csrq|lxdh"; 

  for(let r = 0; r < rowCount - 1; r++) {
    const { textValues } = rows[r];
    const inputParams = {};
    const cols = columns.split('|');
    cols.forEach((c, i) => {
      inputParams[c] = textValues[i];
    });

    newRecords.push(inputParams);
  }

  await app.cloud.callModel({
    name: 'txwdsjy_q6rop6n',
    methodName: 'wedaBatchCreate',
    params: {
      records: newRecords,
    },
  });
}

4 总结

我们本篇详细的介绍了低代码中如何解析腾讯文档的数据,如何批量入库。虽然现在低码中还没有批量导入的功能,但是我们通过腾讯文档也是可以做到的,如果学会了赶紧照着做一下吧。

到此这篇关于小程序中实现excel数据的批量导入的示例代码的文章就介绍到这了,更多相关小程序 excel批量导入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法

    导入执行后 VM292:1 thirdScriptError  sdk uncaught third Error  module "miniprogram_npm/vant-weapp/mixins/transition" is not defined  Error: module "miniprogram_npm/vant-weapp/mixins/transition" is not defined     at require (http://127.0.0.

  • 微信小程序 导入图标实现过程详解

    图片素材库--阿里巴巴矢量图https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1359989" 在页面输入要搜索的图标 点击"入库",然后"添加至项目" 选择"编辑",即对进行编辑成自己想要的效果,名字为home 点击保存--下载至本地,则下载量.了一个.zip的压缩包 其中demo_index.html内有导入的方法记录 选择iconfo

  • 微信 小程序Demo导入详细介绍

    微信小程序一出,立马炸开了锅,都去搭建自己的开发环境,我这里也来尝尝先,之前发了一篇文章,有人问Demo怎么导入? Demo源代码(来自网络) 百度: https://pan.baidu.com/s/1o8hJFuU (密码: bsky) 360: https://yunpan.cn/ckvXAacJjvsgR (提取码:3327) demo导入方式: 打开"微信web开发者工具" -->添加项目-->填写AppID(随便填).项目名称(随便填),选择本地开发目录(Demo

  • 微信小程序实现上传word、txt、Excel、PPT等文件功能

    正文: 目前小程序没有能实现此功能的 API 所以我这里通过使用 web-view 实现: 实现流程: 1. 在小程序后台配置业务域名 2. 在服务器写一个html,实现表单上传文件 3.后端php接收文件并存到一个服务器文件夹,把文件名存到数据库以后检索用 4.在微信小程序创建一个页面,里面使用web-view达到上传文件的目的: 效果图: 具体实现: 1. 在小程序后台配置业务域名 2. 在服务器写一个html,实现表单上传文件 index.html文件 <!DOCTYPE html> &

  • 小程序中实现excel数据的批量导入的示例代码

    目录 1 建立数据源 2 编制入库的代码 2.1 创建低码方法 2.2 低码中调用连接器 3 最终的代码 4 总结 我们上一篇介绍了如何利用微搭的自定义连接器接入腾讯文档的数据,光有接入是不够的,更重要的是我们需要将采集的数据积累下来,变成企业的数字资产. 积累数据最好的方式就是把数据存入数据库,低码工具除了有可视化编程的便利外,还提供了线上的文档型数据库.文档数据库比传统数据库的优势是,文档数据库的返回结构是JSON格式,直接就可以在前端进行渲染.关系型数据库还得通过代码进行转译. 另外一个方

  • 微信小程序中实现一对多发消息详解及实例代码

    微信小程序中实现一对多发消息详解及实例代码 微信小程序中各个界面之间的传值和通知比较蛋疼.所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心. 通知中心可以做到:1对多发消息,传递object.使用十分简洁. 使用时,在需要接收消息的界面注册一个通知名.然后在需要发消息的界面post这个通知名就可以了.可以在多个界面注册同一个通知名.这样就可以1对多发消息. 使用方法: 1:在app.js中引用notification.js var notificationCenter = re

  • 微信小程序连续签到7天积分获得功能的示例代码

    每周每天签到获得积分的案例 功能设计:计算每天签到得1分,显示得到的签到积分,连续签到3天[周一二三]即得+多3分,连续签到7天[周一二三四五六日]+多7分,没有连续即不显示多余的3分或7分的提示- wxml结构: <!--pages/signIn2/signIn2.wxml--> <view class='sign-new'> <view class='in'> <view class='new-head'> <view class='sig-tl'

  • 微信小程序实现可以截断的瀑布流组件的示例代码

    瀑布流是一种常见的布局方式,实现的方式有许多,比如直接分两列,然后控制在左右两列加入元素:还有一种方式就是通过绝对定位的方式来放置两边.本文所要介绍的瀑布流不同于常规的,因为瀑布流中间可能会被截断: 对于上面的布局,如果强制分成两列去做布局就不太适合了,因此我采用了绝对定位的方式来进行布局,由于瀑布流中的元素高度都不是固定的,因此我得想办法获取到每个元素的高度,然后判定元素到底是放一整行,还是左侧,亦或者右侧. 首先我们来看下模板部分的实现: <view class="container&

  • 微信小程序中插入激励视频广告并获取收益(实例代码)

    最近微信小程序后台发送通知,小程序激励式视频广告组件日前已全量上线,也就是说大家可以在小程序中插入激励视频广告了,之前只允许小游戏可以使用 . 激励式视频广告 用户在小程序中主动触发激励式广告,并达成奖励下发标准(完整播放视频广告,并手动点击 "关闭广告" 按钮),将获得该小程序下发的奖励.广告触发场景与奖励内容均由流量主自定义. 新建广告位 首先进入小程序后台点击流量主,点击广告位管理,点击新建广告位,就可以新建所需要的广告了,目前有三种 banner,激励视频,插屏广告. 插入广告

  • 微信小程序实现定位及到指定位置导航的示例代码

    一:实现定位及到指定位置导航所需组件及API 1:组件:map(地图组件) 2:API:wx.getLocation(Object object)(获取当前的地理位置.速度),wx.openLocation(Object object)(使用微信内置地图查看位置) 二:代码实现 1:wxml <view> <map id="map" longitude="{{longitude}}" latitude="{{latitude}}"

  • 小程序中读取腾讯文档的表格数据的实现

    目录 1 创建连接器 2 创建腾讯文档 3 应用中访问腾讯文档 3.1 获取sheet中的所有数据 3.2 迭代行和列的数据 4 总结 日常生活中我们使用腾讯文档在线的收集各类数据,数据收集是比较方便,但是如果希望对数据进行维护或者后续统计分析还是不方便的.本篇就介绍一下如何利用微搭低代码工具来接入腾讯文档的数据,实现数据的在线管理功能. 1 创建连接器 如果希望接入腾讯文档的功能,需要创建连接器.打开微搭控制台,点击新建连接器 选择腾讯文档 然后进行授权 输入连接器的名称和标识,点击开始新建

  • Java中excel表数据的批量导入方法

    本文实例为大家分享了Java中excel表数据的批量导入,供大家参考,具体内容如下 首先看下工具类: import java.awt.Color; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.lang.ref

  • 150行代码带你实现微信小程序中的数据侦听

    在小程序项目中, 我们的通常会使用到使用到一个全局对象作为各个页面通用的数据存储容器, 将它绑定到app对象后, 就能在每一个页面都自由的操纵这个对象. 然而在实践中, 由于这个对象及其属性不具备响应式条件, 它不能直接参与业务逻辑的编写, 能力仅仅局限于数据储存. 若是在VueJS项目中, 我们可能经常使用到 Vue.$watch 去侦听某个数据是否发生变化, 小程序却缺乏这种能力. 在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器(下简称VX): // 一个快

  • 微信小程序中使用ECharts 异步加载数据的方法

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte

随机推荐