一次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。两个环境各发起请求的方式不同，需要分开写兼容代码，新建...
在mac开发一个脚本执行FFMpeg编译
项目中采用JSMpeg方案播放视频，需要用到FFMpeg转码。调研了市面上FFMpeg封装的应用，要么收费，要么配置不够，为了方便产品运营（避免以后转换视频的工作都落到自己头上），研究了下用bash写了个脚本，又用mac的command双击执行。 1. FFMpeg命令安装FFMpeg，配置环境变量。打开终端，执行FFMpeg命令编译视频。（这里我配置的环境变量可能有点问题，又在视频目录放了一份ffmpeg文件。） JSMpeg所需要的命令如下： 1ffmpeg -y -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 out.ts 其中-i是指定输入文件，最后面是输出文件。-f mpegts -codec:v mpeg1video -codec:a mp2这个是JSMpeg指定的编码、视频、音频格式。-y是当输出文件已存在同名文件时，不要询问直接覆盖。此外，可以加参数指定分辨率，截取时长等。 如下面的b:v指定了码率，scale指定了分辨率。 1ffmpeg -i in.mp4 -f mpegts -codec:v mp...
h5播放视频
一个在h5页面播放视频的需求。最先采用了video标签的方案，后改为使用JSMpeg。 video标签方案使用html原生的video标签播放。 video标签文档：https://www.runoob.com/tags/tag-video.html 使用如下： 1234567891011121314151617<template> <video id="video" ref="myVideo" preload="auto" :controls="config.controls" :poster="config.poster" :autoplay="config.autoplay" :muted="config.muted" :loop="config.loop" x-webkit-airplay="allow" w...
开发一个网页版节拍器
平时练尤克里里经常用到节拍器，突发奇想自己用js开发一个。 最后实现的效果如下：https://ahao430.github.io/metronome/。 代码见github仓库：https://github.com/ahao430/metronome。 1. 需求分析节拍器主要是可以设定不同的速度和节奏打拍子。看各种节拍器，有简单的，也有复杂的。 设定不同的速度，每分钟多少拍 选择节拍，比如4/4拍、3/4拍、6/8拍等等。 选择节拍的节奏型，一拍一个，一拍两个，一拍三个（三连音），一拍四个，swing，等等。这个很多简易节拍器就没有了。 切换不同的音色，比如敲击声、鼓声、人声等等。 这里拍速是指一分钟有多少拍。 而节拍是以几分音符为1拍，每小节几拍。这个不影响拍速，观察各种节拍器，这里会展示几个小点，每一拍一个点，其中第一拍第一下重声，后面的轻声。 节奏型决定每一拍响几下，以及这几下之前的节奏。比如这一拍响一下、响两下、响三下、响四下；如果是一个swing就是前8后16分音符的时长；也可能这个节奏型的时长是两拍，比如民谣扫弦的下—-，下...
利用阿里oss处理图片
oss图片处理能力我们平时存储图片一般都是用的阿里oss服务，阿里oss除了存储文件外，还有很多其他功能。比如可以通过拼接url后缀，来对图片进行处理。 官方文档在这里：https://help.aliyun.com/document_detail/144582.html。 可以看到，支持很多处理方式，如修改图片的分辨率，给图片添加水印，转换图片格式，压缩图片等等。 下面简单介绍下拼接的规则： 必须是上传到oss的图片链接 后面拼接参数?x-oss-process=image，再继续按照不同的功能拼接 类似旋转、亮度这种，参数说明只有一个[value]的，直接/[key],[val]。如https://oss-console-img-demo-cn-hangzhou.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/rotate,90 如果参数说明是一个对象，对象又有很多子key，拼接方式是/[key],[subKey1][subVal1],[subKey2...
github自动部署分支到pages
在代码根目录新建.github/workflows/目录，新建一个任意名称后缀yml的文件。 内容如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566name: CIon: push: branches: - main # 这里是要自动部署的分支名，有提交的时候就会触发actionjobs: job: name: Deployment runs-on: macos-latest permissions: pages: write id-token: write environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} steps: - name: Checkout ...
Svga和lottie动画在h5的使用
需求需要在h5页面中做复杂动效，调研了几种常用的方案，跟UI一起尝试。 调研占用内存对比：从大到小： 视频＞序列帧＞GIF＞APNG/WEBP＞LOTTIE/SVGA 质量稳定对比：从差到好： 视频＜GIF＜序列帧＜APNG/WEBP＜LOTTIE/SVGA 支持AE动效对比：从多到少：视频＞GIF＞序列帧＞APNG/WEBP＞LOTTIE/SVGA 业务方案： gif虽然体积小、兼容性好、但效果差、不推荐使用、除非非常在意多端兼容性与性能！ 简单的动图采用webp、比如简单的聊天表情动图（骰子、石头剪刀布等） lottie适合一些复杂的动画、比如复杂的加载动画、引导动画等、不适合做直播间大礼物特效 直播间复杂的大礼物动可以用效用svga,webp还有apng MP4不建议做直播间礼物动画防范 这里我们的需求是需要较复杂的动效，并且希望可配置，一键替换动效文件，svga和lottie比较符合我们的需求。gif图文件太大，并且不好精细操作；而序列帧也是一样的问题，并且不适合做配置替换。 另外调研阶段发现腾讯出...