微信小程序自定义组件 |
您所在的位置：网站首页 › 微信小程序数据收集生成表格 › 微信小程序自定义组件 |
微信小程序自定义组件
历史总结： 微信小程序性能优化实践 通过微信小程序来实现 “钉钉打卡” 记一次微信小程序项目分包，以及分包预下载 微信小程序实战 背景针对上期打卡需求开发，这期需要以列表的形式展现打卡记录，但是微信小程序并没有表格组件，可能是官方考虑到,在前端开发中，表格一直都是最复杂的组件之一就没有实现吧。没有现成的组件可以使用，针对这个问题，目前有两种解决方案： 1）内嵌 h5页面，（毕竟 h5 的 table组件 众多） 2）自定义 table组件（造轮子唄）第一期打卡采用的原生开发的，老板期望第二期需求也能用原生，方便后期的维护。于是乎，我就开始了造轮子啦😂。需要table组件满足一下功能： 主要用于展示结构化数据； 支持自定义操作； 支持自定义表头样式； 支持固定表头，可左右滚动等功能。 table组件效果展示miniprogram-table-component 小程序自定义table组件 使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。 1.基础表格一个简易的微信小程序 table组件诞生了。新鲜热乎的，前面看完了展现效果，接下来介绍使用。 自定义的 table 组件，使用很简单，就是按照npm包和微信自定义组件的方法使用。 1、安装和引入 安装组件： npm install --save miniprogram-table-component 引入table自定义组件在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置 { "usingComponents": { "table-view": "../../../miniprogram_npm/miniprogram-table-component" } }注意：npm包的路径。如果这里遇到找不到包的问题，可以查看下方的 微信小程序 npm 找到不到npm包的坑？ 2、使用table组件在wxml页面需要用到的地方使用，如下： 在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) } }) 3、配置配置部分主要配置这么几个属性，分别是： 配置项说明类型可选值默认值必填headers表格头部标题、列宽度、列属性Array{prop: 'datetime', width: 150, label: '日期'}[]yesdata表格列表数据Array[]nostripe是否为斑马纹booleantrue/falsefalsenoborder是否有间隔线booleantrue/falsefalsenoheight纵向内容过多时，可选择设置高度固定表头。stringautonomsg固定无数据情况，展示文案string暂无数据～noheader-row-class-name自定义表格头样式stringnorow-class-name自定义表格行样式stringnocell-class-name自定义单元格样式stringnobind:rowHandle行被点击时会触发该事件functionno配置相关代码🌰： header-row-class-name、row-class-name、cell-class-name 是通过externalClasses支持外部样式，在父组件中控制表格的样式，externalClasses外部样式类, 官方说明。例子源码通过github地址查看。 实现一个自定义表格组件遇到的坑 npm 登录不上和发布不了的问题?之前也发布过 npm 包，遗忘了 npm login 登录不上需要将淘宝镜像改回npm的。还有一点需要注意的是，每次发布都需要更新 package.json 文件里的版本号。 微信小程序 npm 找到不到npm包的坑？组件开发完，引入使用的时候，发现npm的包，找不到了？这里比较坑的是小程序的npm有特殊的使用方式。 首先在项目的根目录初始化 npm: npm init -f 然后安装对应的自定义组件包 npm install -production miniprogram-table-componentnpm/cnpm/yarn add 均可 在微信开发者工具中，设置 —> 项目设置—> 勾选使用npm模块。 在微信开发者工具中，工具 —> 构建npm，构建完成会生成 miniprogram_npm 文件夹，项目用到的npm包都在这里。 按照自己的使用路径，从 miniprogram_npm 引入需要的包。 table组件源码 table组件npm地址 github地址需求开发时间比较紧迫，也是尽量提高工作效率，把大块时间用来封装组件了。爱折腾啊，也算是适当给自己的项目增加点难度，多一点追求，技术就会成长的更快。 参考 微信小程序-自定义组件 微信小程序自定义table组件 你期待的微信小程序表格组件来 微信小程序-npm支持 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |