基于ali-oss开发图片上传小工具
ali-oss sdk(nodejs版)：https://help.aliyun.com/zh/oss/developer-reference/getting-started-with-oss-sdk-for-node-js?spm=a2c4g.11186623.0.0.e1137efd32AoVH 背景之前在海星server基于ali-oss的nodejs sdk，做了oss上传下载文件的接口，并基于上传接口做了一款网页版的上传工具， 界面如下： 平时上传一些图片等静态资源还是很方便的。但是有个问题是上传之后看不到当前的目录结构和历史上传的文件，替换文件的时候要记得文件路径去拼写。 为了解决上述问题，仔细查询文档后，发现有查询目录的api，实现了一个2.0版，界面如下： sdk相关方法 查询目录: client.list方法，传入路径，列举制定前缀的文件，返回当前路径的文件列表和子目录列表。 删除文件：client.delete方法删除单个文件。 上传文件：client.put上传本地文件。oss中没有目录的概念，上传路径的/当做逻辑上的目录划分。 下载文件：...
Automa插件使用
Automa是一个chrome扩展，通过拖拽0代码实现工作流，模拟网页的各种点击、表单填写等操作，使用时点击插件脚本一键执行，或者设置定时执行，从而简化我们的工作。 功能介绍官方文档地址：https://docs.automa.site/。 界面新建一个插件，界面如上图。 左侧面版有一些列组件可供选择 右侧画布区域可以放置组件，再把组件用线连起来。 点击组件，组件上方出现编辑、删除等按钮，点击编辑，左侧弹出组件配置区域。 右上方工具栏，其中table可以创建数据表，globalData可以编辑全局数据 设置里可以选择中文 常用组件插件提供了非常多的组件。有界面相关的，如点击元素、获取元素属性、获取元素文本、悬停元素、按键等等；有逻辑相关的，如条件、判断元素存在、循环等；有浏览器相关的，如激活当前活动标签页、新建标签页、前进、返回、刷新、截屏；等等。 这里介绍几个主要的组件： 触发器一个脚本以触发器开始，新建脚本默认会有一个触发器。编辑触发器，有编辑触发器和参数两个配置。其中编辑触发器，默认手动，可以换成下图的多种触发方式，可以按时间定时执行，也可以设置快捷键等。 可以添加...
小程序商家后台脚本实现批量添加域名
业务需求在多个小程序后台批量添加域名，每个小程序要添加几十个。需要重复如下操作： 点击图上添加按钮，出现弹窗。 在弹窗输入要添加的域名，点击确认提交。 弹出通知弹窗，再次点击确认。 重复上述操作，添加不同的域名 几十个域名*几个小程序，操作量有点大，考虑用脚本实现。 思路 考虑用按键精灵，发现mac不支持 考虑js脚本，仔细研究了ajax请求，在控制台ajax调用，设置了携带cookie，发现依然返回失败 考虑用js模拟真实操作 问题用js实现了上述过程，在输入框设置input.value=domain。实际执行每次输入域名后点击确认，输入框报红色校验错误，判断应该是用框架实现的页面，虽然修改了输入框dom上挂载的value，但是内存中的值没有改，代码直接读取内存的值，校验错误。 搜索vue和react模拟真实收入，发现有实现的方法，https://blog.csdn.net/weixin_46774564/article/details/123254550。 查看支付宝这个页面应该是react写的，在控制台可以看到react插件有...
前端项目中图标的使用和管理
在前端项目中，会用到很多小图标，这些图标很小，但是数量会很多，比如导航、按钮等等，其中很多在不同项目还会重复用到。 使用方式直接使用图片最简单的图片使用方式，就是UI给出的图片，在代码中使用img标签，或者background属性来引用。 引用的图片可以维护在项目本地，也可以放到cdn。 雪碧图直接使用图片，会有很多并发的网络请求，因此可以讲这些小图标合并成一张大图，通过background-position定位来展示不同的图标。这样多个请求合并成一个，优化了性能，但是使用和维护起来麻烦。 关于雪碧图的维护，我们可以通过插件在编译阶段解决，自动生成雪碧图，并且生成css文件，开发的时候，按照文件名的class命名去引用。 123456789101112131415161718192021222324252627282930313233343536373839//webpack.config.jsvar path = require('path'); var SpritesmithPlugin = require('webpack-spritesmi...
小程序本地iconfont工具开发
npm包：https://www.npmjs.com/package/miniapp-svg2iconfont github: https://github.com/ahao430/miniapp-svg2iconfont#readme 基于svgtofont开发。 背景： 平时小程序开发过程中，UI给的是一个个的svg，没有系统的iconfont维护。小程序端使用iconfont的话，首先要上传维护iconfont仓库，然后每次要转base63再下载，在项目中更新，比较麻烦。 在web端直接使用svg更加方便，如svg-sprite-loader，项目本地维护svg即可；但是小程序端svg只能作为图片使用。 思路： svgtofont可以将本地的svg转成iconfont，但是看了文档，没有转成base64格式的选项，转base64的话，还是需要去iconmoon等网站工具。想到基于svgtofont生成的文件，继续转base64，再替换到css中，试验可行。 实现： svg转font 从https://www.iconfont.cn/下载了几个svg图片，引入svgto...
SVGA动画替换图层元素
之前写了一篇关于SVGA和Lottie动画使用的，现在有一个新的需求，要实现一个效果比较炫的引导动画，想用SVGA实现，但是要求里面的一些数字是动态可配的。查了下SVGA支持替换图层，跟UI配合调研成功替换，用了两种SVGA库来实现。 UI准备： UI在出图的时候，对图层做好命名，导出SVGA后，告诉开发可配置图层的名称。 PS: 在这里预览SVGA文件，也可以查看所有图层的key。 联调过程： 引入svga，根据图层的key动态替换元素，再播放动画。 这里我先用的svgaplayer-web-lite去做，因为之前的svga动画也是用的这个库。但是当时跟UI还在调研，以为新建的图层要用文本框，出了一个有问题的svga文件，用这个库报错，换成svgaplayer-web就可以正常渲染。另外网上看的替换svga图层的教程都是用的svgaplayer-web，就先用这个实现了。 后来发现不用文本框，普通图层就行，又用lite实现了一下，相比较起来，lite更轻量，性能更好。 参考文章：https://blog.csdn.net/weixin_44309374/article...
一次code review发现的对象排序问题
问题一次代码review中，发现代码如下： 1234567891011121314151617181920export const sortByASCII = (obj) => { let arr = Object.keys(obj); let sortArr = arr.sort(); let sortObj = {}; for (let i in sortArr) { sortObj[sortArr[i]] = obj[sortArr[i]]; } return sortObj;};export const qs = { stringify: (obj = {}) => { const arr = []; for (const key in obj) { arr.push(key + "=" + obj[key]); &#...
开发一个婚礼请柬小程序
前段时间给自己开发了一个婚礼请柬微信小程序，后端直接采用微信小程序的云开发能力。 项目代码：https://github.com/ahao430/wedding-miniapp 小程序码： 因为服务已经过期了，图片都看不了了，所以就放心挂出来了😁 初始化项目，测试云函数在微信小程序开发工具中，创建项目，选择微信云开发，模板选择邀请函，填写注册的appId。 打开项目，弹出提示上传云函数。 可以看到项目代码包含cloundfunctions和miniprogram两部分。在cloudfunctions中，右键文件夹上传云函数。如果还是报错，可能是云函数的数据表在云服务上不存在，点击云开发按钮，进去查看数据库。 查看模板代码，可以看到云函数的js文件代码很简单，语法类似mongodb。然后小程序端在app.js中初始化数据库连接，传入云端的环境id，这个id可以在云开发概览查看。然后app.js中call方法封装了cloud.callFunction方法，可以请求云函数。 123456789101112131415161718192021222324252627const c...
终端交互实现多项目编译
需要在一套小程序代码中输出多个小程序。之前是通过在npm srcipts配置环境变量，然后编译代码中通过process.env获取： 12345678scripts: { "dev:dev": "cross-env NODE-ENV=dev gulp-dev", "dev:test": "cross-env NODE-ENV=test gulp-dev", "dev:prod": "cross-env NODE-ENV=prod gulp-dev", "build:dev": "cross-env NODE-ENV=dev gulp-build", "build:test": "cross-env NODE-ENV=test gulp-build", "build:prod": "cross-env NODE-ENV=prod gu...
封装一个js业务sdk
github: https://github.com/ahao430/sdk-demo npm仓库：https://www.npmjs.com/package/@ahao430/sdk-demo 1. 需求开发一个sdk，将业务接口都放进去，活动项目和小程序通过npm安装，实现快速调用。 2. 分析 sdk是纯js，一般采用rollup打包，体积更小。 要同时适配h5和小程序，公用部分提出来，剩下不同的部分分开写。 通过sdk.模块名.接口名方式来调用 导出ts注释，通过npm引入，可以在vscode看到代码提示 3. 开发3.1 目录结构初始化项目，src目录存放源码，里面index.js作为入口，根目录新建rollup.config.js文件。 然后考虑到我们的sdk主要目的是存放api接口。在src新建一个modules目录，里面存放各个接口模块，再在每个模块目录编写一个个接口文件。 再考虑我们的项目要同时兼顾h5段和小程序端，应该有两个入口文件，分别打包各自的sdk。两个环境各发起请求的方式不同，需要分开写兼容代码，新建...