前言 移动端的页面本应该很少有table表格这样的展示、操作，但总归有这样的需求，然而平时用的vant和iview的小程序组件库都没有table组件，这里将自己编写的table组件展示一下供大家查看。 小程序实现table的问题在于，自定义td的实现，而小程序没办法像react一样使用[代码]jsx[代码]，也没办法像vue一样用[代码]作用域插槽[代码]传row行的信息给slot，但是小程序还是留有一样东西可以完成自定义td的功能。 抽象节点 这个特性自小程序基础库版本 1.9.6 开始支持。 有时，自定义组件模板中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。 微信官方api地址 通过抽象节点我们可以做到使用自定义组件通过key值分发组件内容到不同的td里。 具体的源码地址可点击下方查看，如果对你有帮助请点个star~~ 源码地址 具体的实现效果可以扫描下方小程序码。 [图片] API prop 参数 说明 类型 默认值 是否必填 columns 表格的配置 Columns[] [] true dataList 数据 any[] [] true getListLoading 请求列表的loading boolean false true showTipImage 无数据时的提示文本图片 boolean false true rowKey 用于指明行的唯一标识符，在勾选中有使用 string id false scrollViewHeight 控制可滚动区域高度。 string 600rpx false tipTitle 无数据时的提示文本主标题 string 提示 false tipSubtitle 无数据时的提示文本副标题 string 暂无数据 false scrollX 是否需要X轴滚动。 boolean false false select 控制是否出现勾选。 boolean false false selectKeys 勾选的初始值 any[] [] false generic:action-td 当列表项内具有操作列，需要在[代码]columns[代码]内添加[代码]type:action[代码]的一项，操作列的内容往往需要自定义，小程序不提供react,vue的[代码]rander函数[代码]，所以使用到了抽象节点，该属性指明抽象节点的组件。操作列位置可以不固定，点击事件由[代码]bindclickaction[代码]触发 component undefined false isExpand 控制是否点击展开。 boolean false false expandValueKey 展开信息的key值 string false initExpandValue 当展开信息为空时的默认提示语 string ‘暂无信息’ false expandStyle 展开信息的最外层的样式 string ‘’ false generic:expand-component 如果展开区域的内容需要自定义，[代码]expandValueKey[代码]设置为空字符串，则切换到组件模式，传一个组件进来，展开区域的点击事件由[代码]bindclickexpand[代码]触发 component undefined false dynamicValue 给自定义内容的动态值，用于改变状态 ，建议{value:放的数据} object {} false Events 事件 解释 类型 bindclicklistitem 点击列表行事件 Function(e); e.detail.value = {index:number（当前行序号）,item: any（当前行的内容）} bindclickexpand 点击展开内容事件 Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在expand-component里)} bindclickaction 点击抽象节点事件 Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)} bindcheckkey 勾选事件 返回被勾选项的rowKey数组 Function(e); e.detail.value = any[]//(数组内每一项是rowKey字段定义的数据的toString()结果) bindscrolltolower 滚动触底 Function() bindscrolltoupper 滚动触顶 Function() column 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 事件 解释 类型 必填 title 字段名中文含义 string true key 字段名 string true width 单元格宽度 string false type 判断字段是否是自定义组件 ‘action’/undefined false render td内内容由函数返回 (value: any, item: any, index: number, data?: 当前页面的this.data) => any,// 设置内容 function false

由于云开发导入数据库支持导入的格式只有csv与json： [图片] 相对于json，csv不仅更加直观，管理也更加方便不容易出现格式错误，所以我选择了把txt转成了csv文件 转成csv文件后打开记得添加表头 [图片] 注意表头，否则上传时会报错：导入数据库失败 {"error":"error","headers":{}} [图片] 我们直接导入会发现出现了这个问题： [图片] 这是由于云数据存的是UTF-8格式，需要将csv文件的格式换一换，更换文件后缀为.txt, 打开txt另存编码改为utf-8,文件类型选为csv即可 然后在云数据库中重新选择文件上传 （在这里本来直接换csv的存储格式为utf-8，发现换了后导入进去还是乱码） [图片] 例如我在这里导入了60万条记录，格式符合预期: [图片]

[图片] tailwindcss and postcss for 小程序第二个大版本发布啦！ 安装与配置 小程序使用 [代码]tailwindcss[代码] 只需三步: 第一步 - 安装 [代码]yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-miniprogram-preset@latest # or npm install -D tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-miniprogram-preset@latest [代码] 一些框架，如[代码]vue/cli[代码],[代码]uni-app[代码],[代码]nuxt2(有postcss8插件)[代码]用的Postcss7旧版本，则使用postcss7-compatibility-build 第二步 - 创建配置 创建 [代码]postcss.config.js[代码] [代码]// postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } [代码] 初始化 [代码]tailwindcss[代码] 配置文件 [代码]npx tailwindcss init [代码] 使用 [代码]preset[代码]: [代码]// tailwind.config.js const { defaultPreset } = require('tailwindcss-miniprogram-preset') /** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */ module.exports = { //... presets: [defaultPreset] //... } [代码] 第三步 - 引用 [wx|c|sc|le]ss [代码]// app.scss @tailwind utilities; [代码] 然后在应用入口，如 [代码]App.vue[代码] 导入它即可。 接下来就能够看到，[代码]tailwindcss[代码] 愉快的运转了，安装 [代码]vscode[代码] 插件[代码]Tailwind CSS IntelliSense[代码] 后，所有的自定义的智能提示也出现了。 点击查看更详细的文档和Demo 一些细节 此 [代码]preset[代码] 自动带了一套 [代码]rem2rpx[代码] 的机制,开发者可以通过: [代码]const { createPreset } = require('tailwindcss-miniprogram-preset') [代码] 进行配置，如果您不想要此功能，可以把 [代码]rem2rpx[代码] 设置为 [代码]false[代码] [代码]presets: [createPreset({ rem2rpx: false })] [代码] 如果此时需要更加强大，且自定义的 [代码]rem2rpx[代码] 效果，可以使用 [代码]postcss-rem-to-responsive-pixel[代码] 它是一个用 [代码]ts[代码] 写的 [代码]postcss plugin[代码],兼容 [代码]postcss8[代码] ，它能够让我们更加轻松的定制我们的转化策略。 如何使用呢? 在我们关闭 [代码]preset[代码] 的 [代码]rem2rpx[代码] 转化后，我们可以在 [代码]postcss.config.js[代码] 设置: [代码]module.exports = { plugins: [ require('autoprefixer'), require('tailwindcss'), require('postcss-rem-to-responsive-pixel')({ rootValue: 32, // 1rem = 32rpx propList: ['*'], // 所有的属性 transformUnit: 'rpx' // 转换单位为 rpx , 默认为 px }) ] } [代码] 这样也可以轻松愉快的达到效果，更多的配置请看文档 一些开发的碎碎念 最近在使用 [代码]Typescript[代码] 重构之前的开源项目和编写新的项目。 正好 [代码]tailwindcss-miniprogram-preset[代码] 当初是使用 [代码]js[代码] 撰写的，于是正好趁这个机会重构一下。 步骤 正如把大象塞进冰箱，只需要三步。[代码]js[代码] 项目转为 [代码]ts[代码] 项目也分几步走。 首先，我先撰写了一个 [代码]for npm cjs lib[代码] 的模板 [代码]npm-lib-template[代码]。 它是一个使用 [代码]ts[代码] + [代码]rollup[代码] 进行打包的工具链，主要的工作为 将 [代码]src[代码] 中代码引用到的文件，通过 [代码]tsc[代码] [代码]node-resolve[代码],[代码]alias[代码] 等等加工，最后输出为 [代码]cjs[代码],[代码]esm[代码] 和 [代码]types[代码]，同时声明在 [代码]package.json[代码] 内( [代码]main[代码],[代码]module[代码],[代码]types[代码])，这样开发者在使用时候，不论 [代码]package.json->type[代码] ，不论 [代码]require[代码]，还是 [代码]import ... from[代码] ，都能够找到准确的包。 在参照 [代码]npm-lib-template[代码] 生成项目后，我们即可编写代码。 其中代码目录大致如下: [代码]# region dirs dist # 打包输出目录 src # 源代码目录 bin # bin 的入口，使用 dist中的方法，一般就一行 examples # 案例目录 scripts # 辅助脚本目录 test # 测试目录，这里使用的是 jest # 除此之外还有类似 .github , coverage 的临时目录 # endregion dirs [代码] 开始迁移 [代码]js[代码] -> [代码]ts[代码] 很简单，类型补全 + [代码]cjs[代码]->[代码]esm[代码] 就行。 但是却在[代码]tsconfig.json[代码]配置项这里遇到了坑。 发布beta版本 我们尚在测试中的 [代码]2.x[代码] 版本是不可能直接发布到 [代码]npm[代码] 的 [代码]latest[代码] 的，假如这时候的包存在一些[代码]Fatal[代码]级别的错误，用户在获取最新或者升级的时候，会获取到错误的版本，导致崩溃。 这时候我们就需要: [代码]yarn pulish --tag beta[代码] 同时可以把要发布的版本号设置为: [代码]2.0.0-beta.[x][代码] 这样，我们获取的时候，只需要 [代码]yarn add -D [pkgName]@beta[代码] 就可以了。 发布v2 [代码]v2[代码] 相比 [代码]v1[代码] 版本，代码整体优化了许多，同时配置项更加的灵活，以适配不同的场景。 其中，用户可以自己传参去生成 [代码]preset[代码] 了，我们在 [代码]tailwind.config.js[代码] 中导入时,除了 [代码]defaultPreset[代码] 还有一个 [代码]createPreset[代码]，其中 [代码]defaultPreset[代码] 即 [代码]v1[代码] 版本的默认导出， 而 [代码]createPreset[代码] 就可以根据传的配置项，来决定: 是否需要 [代码]rem -> rpx[代码] 假如不需要这个预设来进行转化，且又有转化的需求，可以使用 [代码]postcss-rem-to-responsive-pixel[代码] 这个 [代码]postcss[代码] 插件。 在关闭预设的 [代码]rem2rpx[代码] 配置项后，只需要把这个插件运行在 [代码]tailwindcss[代码] 插件后就行(postcss插件的优先级)。 配置 [代码]rem -> rpx[代码] 的 [代码]rootValue[代码] 是多少，默认为 [代码]32[代码] 配置其他的一些选项 未来开发计划 下一步，把 [代码]jit[代码] 模式安排上。

代码片段：https://developers.weixin.qq.com/s/yfxiNVmc7Bm3 视野移动和缩放在不正常: 1.PC缩放笔记本端，两指缩放地图，检测不到缩放（IDE:Stable 1.03.2011120）； 2.真机：拖动，缩放都判断不到（手机型号：荣耀9X，安卓：10，EMUI版本：10.1.0，微信版本：7.0.21） <!-- wxml --> <map class="map" id="map" bindregionchange="mapRegionchange"> </mpp> /** * js */ // 视野变化触发函数   mapRegionchange: function (res) {     let that = this;     // 只获取视野触发结束时     console.log('视野变化返回：', res)//能正常触发     if (res.detail.type == "end" &&       res.detail.causedBy == "drag") {       console.log('拖动触发结束：', res);//真机检测不到，微信开发者工具可以     }     if (res.detail.type == "end" &&       res.detail.causedBy == "scale") {       console.log('缩放触发后结束：', res);//真机检测不到，微信开发工具，笔记本两指缩放也检测不到     }   },

一周前发现个人的小程序的代码被反编译抄袭了，然后立马就投诉了，结果对方只是暂停了几天服务就不处理了？？？？ 真的是无奈了，既然官方这么处理，那么大家都是程序员，他可以抄袭反编译我的，那么我当然也是可以反编译别人的，无所谓了，反正被发现了就暂停几天服务，官方就不处理了嘛！！！ 小程序这么个处理方法，我只能表示无奈了！！！ 我的小程序名称叫“好读”，对方的叫“盘古电子书推送” 大家可以去看下，连页面的bug都一模一样，只能是反编译了 [图片]