背景
在上一篇博客中，我介绍了如何使用 callback 回调函数的方式对接讯飞星火大模型，实现打字机效果。虽然这种方式可以工作，但代码分散在回调函数中，可读性和可维护性都不够理想。
本篇将介绍如何使用 异步迭代器(Async Iterator) 来重构整个流程，让代码更加线性、直观，就像写同步代码一样处理异步流式数据。
一、什么是异步迭代器(Async Iterator)
...大约 7 分钟
背景
正在做一个考核管理系统，需要用到附件的上传以及回显。项目有 vue 做的 pc 端，以及 uniapp 做的 H5 移动端，做的时候发现二者的回显稍有不同，记录一下。因为附件只牵扯到 pdf 和图片，所以只写了这两种的回显。
1、vue 项目中回显
function reviewFile (file) {
let fileType = ''
if (file.fileName.indexOf('.pdf') != -1) {
fileType = 'application/pdf'
} else {
fileType = 'image/png'
}
axios({
url: process.env.VUE_APP_BASE_URL + '/file/download/' + file.file,
method: 'get',
responseType: 'blob', // 一定要设置响应类型为 blob
headers: { token: token } // 对于有鉴权的接口，需要添加token
}).then(res => {
// 创建用于作为附件预览源的Blob
const blob = new Blob([res.data], { type: fileType });
// 创建用于作为PDF预览源的Blob的URL
let url = URL.createObjectURL(blob);
window.open(url)
})
},...大约 1 分钟
背景
想为答题小程序中的模拟考试功能，增加一个弹出显示考试成绩海报的功能，可以让用户下载图片。使用了原生的 canvas 绘制，但是发现图片模糊。
参考了网上其他网友的方法，在画布上进行绘制的时候，先放大尺寸，然后在 scale 缩小，或者 setTransform 缩小，发现都没解决。另辟蹊径，最终使用 image 图片显示，解决了这个问题。
模糊的原因
这就牵扯出一个概念，物理分辨率 和 逻辑分辨率。现在设备基本上都是高分屏，通常说的我们说的某个手机分辨率是物理分辨率，比如 iPhone 13 Pro 的物理分辨率是 1170 x 2532，但是逻辑分辨率是 390 x 844，也就是说，物理分辨率是 3 倍于逻辑分辨率（ dpr = 3）。我们一般操作都是基于逻辑分辨率，但是实际显示的时候，会根据 dpr 进行放大或者缩小。
...大约 6 分钟
背景
使用 uniapp 开发的小程序，想对接 AI 大模型。目前这个时间点，2024 年 12 月，直接为前端提供 api 的大模型，有百度的文心一言和讯飞的星火大模型，这篇先记录下文心一言的对接方式。
1、申请百度 AI 文心一言所需 key
首先要在文心千帆大模型平台控制台总览中，左侧菜单中选择 应用接入，创建自己的应用，配置服务，这里选择所有的预置服务就行。申请成功后，会得到一个 API_key 和 Secret_key，这两个 key 在后续的调用中会用到。
...大约 2 分钟
背景
使用 uniapp 开发的小程序，想对接 AI 大模型。目前这个时间点，2024 年 12 月，直接为前端提供 api 的大模型，有百度的文心一言和讯飞的星火大模型，这篇先记录下星火模型的对接方式。
1、申请星火模型所需 key
首先进入星火大模型 API，新用户要先注册。选择 Spark Lite，目前这个模型 token 是免费的。当然也可以选择其他更强大的模型。然后创建应用，获取到 APPID 和 APISecret、APIKey。
...大约 4 分钟
背景
之前用 uniapp 开发的小程序，使用了 echarts 用来展示折线图和饼状图。现在不需要再展示饼状图了，因为小程序前端代码大小有限制，所以干脆重新生成一个只包含折线图的 echarts.min.js 文件，发现报错 t.addEventListener is not a function。突然想起，这种定制的 echarts，在 5.3.0 版本以上，就会报错。手动选择低版本，重新生成一个就好了。
因为小程序代码大小限制，所以在小程序中使用 echarts，基本上都会采用定制方式，只选择自己需要的图标类型就行。定制地址：https://echarts.apache.org/zh/builder.html
...小于 1 分钟
背景
最近在做一个答题小程序，部分题型中试题数量比较大，一把带出来所有的试题，经过测试界面在试题数量大概在 100 道以上就会开始卡顿，而且试题越多，首次进来加载的时间越长。
一开始想的方案是分页进行加载，但是加载第二页的时候因为要请求接口，所以体验不是特别好。这种分页方式，还有个很大的问题，就是实现“答题卡”功能，在各个试题中跳转比较麻烦。于是在网上搜索，发现一种方案能完美解决这个问题。
简单说，就是 swiper 组件只需要准备三个 item，这三个 item 就相当于三个桶。然后设置 swiper 的 circular 属性为 true，这样可以实现循环滑动。而在滑动的过程中，我们可以通过监听 swiper 的 change 事件，来动态的更新桶中的内容。这样，不管试题有多少，我们只需要准备三个桶，就可以实现流畅的滑动效果。下面看代码：
...大约 3 分钟