鉴于前期打卡需求的发展,本期需要以列表的形式展示打卡记录,但微信小程序没有表单组件,可能是官方考虑到表单一直是前端开发中最复杂的组件之一,所以一直没有实现。没有现成的组件可以使用。为了解决这个问题,目前有两种解决方案:
组件表组件最初是为第一阶段打卡开发的,老板期望第二阶段的需求也可以是原生的,方便后期维护。于是,我开始做轮子,joy:表组件需要满足以下功能:
主要用于显示结构化数据;支持自定义操作;支持自定义页眉样式;支持固定页眉、左右滚动等功能。
迷你程序-表格-组件小程序定制表格组件
这个组件的使用依赖于applet基础库的2.2.2版本和开发者工具的npm构造。
一个简单的微信小程序表组件诞生了。又新鲜又热。看完展示效果,我给大家介绍一下。自定义表组件使用起来非常简单,就是按照npm包和微信自定义组件来使用。
安装组件:
npm install --save miniprogram-table-component复制代码
在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置
{ "usingComponents": { "table-view": "../../../miniprogram_npm/miniprogram-table-component" }}复制代码
注意:npm包的路径。如果这里遇到找不到包的问题,可以查看下方的微信小程序 npm 找到不到npm包的坑?
在wxml页面需要用到的地方使用,如下:
<table headers="{{tableHeader}}" data="{{ row }}" stripe="{{ stripe }}" border="{{ border }}"/>复制代码
在js页面需要用到的地方使用,如下:
Page({ /** * 页面的初始数据 */ data: { tableHeader: [ { prop: 'datetime', width: 150, label: '日期', color: '#55C355' }, { prop: 'sign_in', width: 152, label: '上班时间' }, { prop: 'sign_out', width: 152, label: '下班时间' }, { prop: 'work_hour', width: 110, label: '工时' }, { prop: 'statusText', width: 110, label: '状态' } ], stripe: true, border: true, outBorder: true, row: [ { "id": 1, "status": '正常', "datetime": "04-01", "sign_in_time": '09:30:00', "sign_out_time": '18:30:00', "work_hour": 8, }, { "id": 2, "status": '迟到', "datetime": "04-02", "sign_in_time": '10:30:00', "sign_out_time": '18:30:00', "work_hour": 7, }, { "id": 29, "status": '正常', "datetime": "04-03", "sign_in_time": '09:30:00', "sign_out_time": '18:30:00', "work_hour": 8, }, { "id": 318, "status": '休息日', "datetime": "04-04", "sign_in_time": '', "sign_out_time": '', "work_hour": '', }, { "id": 319, "status": '正常', "datetime": "04-05", "sign_in_time": '09:30:00', "sign_out_time": '18:30:00', "work_hour": 8, } ], msg: '暂无数据' }, /** * 点击表格一行 */ onRowClick: function(e) { console.log('e: ', e) }})复制代码
配置部分主要配置这么几个属性,分别是:
配置相关代码:chestnut::
<table header-row-class-name="header-class" row-class-name="row-class" cell-class-name="cell-class" headers="{{tableHeader}}" data="{{ row }}" stripe="{{ stripe }}" height="{{ height }}" border="{{ border }}" bind:rowClick="onRowClick" bind:cellClick="onCellClick" no-data-msg="{{ msg }}"/> 复制代码
header-row-class-name、row-class-name、cell-class-name是通过externalClasses支持外部样式,在父组件中控制表格的样式,externalClasses外部样式类, 官方说明。例子源码通过github地址查看。
之前也发布过 npm 包,遗忘了npm login登录不上需要将淘宝镜像改回npm的。还有一点需要注意的是,每次发布都需要更新package.json文件里的版本号。
组件开发完,引入使用的时候,发现npm的包,找不到了?这里比较坑的是小程序的npm有特殊的使用方式。
npm init -f 复制代码
npm install -production miniprogram-table-component复制代码
npm/cnpm/yarn add 均可
在微信开发者工具中,设置 —> 项目设置—>勾选使用npm模块。
在微信开发者工具中,工具 —> 构建npm,构建完成会生成miniprogram_npm文件夹,项目用到的npm包都在这里。
按照自己的使用路径,从miniprogram_npm引入需要的包。
需求开发时间比较紧迫,也是尽量提高工作效率,把大块时间用来封装组件了。爱越折腾啊,也算是适当给自己的项目增加点难度,多一点追求,技术就会成长的更快。