技术实践 on 乐的博客

如何使 H5 页面跳出微信客户端自动在默认浏览器中打开

Thu, 24 Aug 2023 14:15:00 +0800

TL:DR;

我们的一个业务流程需要通过微信来传播，用户收到分享卡片后点击后需要在系统浏览器中打开。这个过程会比较长。因此我们用一个 hack 技巧让 H5 页面自动跳出 Android 微信客户端。

问题

试想你作为一名用户，在微信上收到一个链接后需要点击 4 次以上才能真正打开页面，会不会觉得非常烦躁。我们可以说这个操作步骤的成本比较高，对产品体验影响比较大。因此前端对于复杂操作是需要尽可能避免的。

光看文字可能还不够直接，下面我们以一个微信 H5 支付场景举例，整个操作流程如下：

解决 Google Search Console 中提示【已发现-未索引】的问题

Wed, 22 Feb 2023 16:24:00 +0800

TL:DR;

如果在 Google Search Console 中发现了“已发现-尚未索引”的问题，可能是因为 Cloudflare 默认会将没有末尾斜杠的 URL 跳转到带斜杠的 URL，导致 SEO 受到影响。在使用 Hugo 和 Zozo 主题的博客中，可以通过修改主题文件的方式来解决这个问题。

问题

在 Google Search Console 中发现“已发现-尚未索引”的问题时，可能有多种原因。然而在博客创建的初始阶段，最需要检查的问题之一是是否存在跳转问题。具体来说，访问 tag 页面时可能会发生 308 跳转，即将没有末尾斜杠的 URL 跳转到带斜杠的 URL，从而导致 SEO 受到影响。

2023 年我的年度博客选题

Tue, 31 Jan 2023 18:52:00 +0800

Photo by Neelakshi Singh on Unsplash

TL:DR;

花了大力气来搭建维护博客，如果仅仅将其用作随手笔记，似乎有点浪费。如果不希望博客成为多年不更新的死博客，或者到处都是复制粘贴来的快速技巧、生活流水帐的话，我想写博客还是要遵循一些方式方法的，要有明确的主题，可预期的写作规划。

这篇文章就是为了明确本博客 2023 年要写哪些内容，怎么写出来，当前进度如何。

一、问题

年初的时候已经把博客搭建起来了，用 Emacs 把写作流程串起来，完成了一套写作工作流。现在要解决的写什么内容的问题。

封装将 Firefox 中链接插入 Org-mode 的过程成为可分享的包

Sun, 15 Jan 2023 10:35:00 +0800

TL:DR;

为了将前面的逻辑方便的分享出去，我基于 deno-bridge 封装了 deno-bridge-echo。

将 Firefox 中的链接插入 Org-mode 是一个有用的方案，然而其实现涉及多种语言和工具，因此很难将其共享给其他人。为了解决这个问题，我使用 deno-bridge 工具封装了一个名为 deno-bridge-echo 的包，使其更易于使用和分享。现在，任何人都可以使用 deno-bridge-echo 来获取并插入来自 Firefox 的链接，而不必担心其底层实现细节。

问题

如何将之前的方案分享出去？

之前有群友建议说可以提 PR，但是由于这个方案混合使用了多个语言、工具，可能不大好去提到别的仓库中。

『Sentry 源码分析之旅一』:整体流程分析

Fri, 13 Jan 2023 18:21:00 +0800

前言

我们在研究前端错误监控的过程中，势必会探索一些知名的开源库，从中吸取养分，开拓自己的视野。

Sentry 就是这样一个成熟的开源产品。

笔者在刚开始研究分析其源码的过程中，由于不熟悉源码分析方法，抱着好奇一头扎进源码仓库，在 packages 下众多的包中浏览，在遍布的 js 代码中看的眼花缭乱，最后花了很多时间在理解 Sentry 的结构上，却没有多少实际的收获。

过了一段时间后，再来看这份代码，由于已经掌握了一些分析的小技巧，能够像庖丁解牛一样逐步的去分析源码，虽然实际上还达不到分析彻底的程度，但是已经能有所收获。

方便地在 Org-mode 中插入 Firefox 中的链接

Tue, 10 Jan 2023 22:55:00 +0800

TL:DR;

在撰写博客和记笔记时，我希望能够轻松地插入我正在浏览的标签页的 URL 和标题。我曾考虑使用 AppleScript，这与我之前在 Alfred 中的实现方式相似。但是，当我尝试在 Firefox 中获取 URL 时，只能通过模拟按键点击的方式，这样做既不可靠，也会打断我的写作思路。

最终，我通过编写 Tampermonkey 脚本和本地 Python HTTP 服务的方式来解决这个问题。这种方法可以将 Firefox 中当前访问的标签页信息存储起来，并通过 lisp 从 HTTP 服务中获取该标签页的信息，最终解决了该问题。

一、问题

在 Emacs 中获取并插入 Firefox 中的链接的体验并不是很好

最近在使用 Emacs 时，我发现了一个命令可以快速获取并插入其他应用程序中的链接，这个命令叫做 org-mac-link-get-link 。然而，我发现在使用 Firefox 中获取链接时，这个命令的使用体验并不是很好，经常会出现获取失败的情况。

微信小程序自动化测试之拦截 API 请求

Fri, 06 Jan 2023 10:47:00 +0800

TL;DR

封装一个 InspectAPI ，在测试脚本中执行会引起小程序网络请求的操作之前调用，可以获取小程序中网络请求的出参和入参。

原理是综合使用 miniProgram.mockWxMethod 和 miniProgram.exposeFunction 这两个miniprogram-automator自动化库中的 api。

使用方法如下：

let orderNo = '';
await InspectApi({
 miniProgram,
 once: true,
 mockApi: mockApi,
 inspect: (req, res) => {
 let {data} = res.data;
 orderNo = data?.orderNo;
 console.log('传入InspectApi的回调函数中打印入参', orderNo);
 },
})
await page.waitFor(1000 * 3)
console.log(orderNo);

是不是挺符合要求的？

前言

在做自动化测试的时候，会需要对请求 api 进行检查。例如：

需要等待某个请求是否成功
需要获取某个请求的入参和出参

真实场景如购买商品下单时，需要在下单页面拿到调用下单接口返回的订单号，在订单列表页面检查该订单号的数据。

而在没有做拦截 API 请求时，一种方式是在下单页面代码中将接口返回的订单号显示在页面元素上。