11月
26
- Error failed to bundle project:
https://github.com/wixtoolset/wix3/releases/download/wix3141rtm/wix314-binaries.zip: Connection Failed: Connect error: 由于连接方在一段时间后没有正确答复或连接的主机没有反 应，连接尝试失败。 (os error 10060)
执行 pnpm tauri build，然后就会遇到上边这个问题。不管你是否用了梯子，都会出现这个问题。的却是有点坑。既然上边提示下载 zip 失败，那就手动下载下来，然后解压放到对应的位置就可以。这里放在
C:\Users\{user}\AppData\Local\tauri 下，可以在终端中使用 cd ~/AppData/Local/tauri 即可达到。然后将文件夹重命名为 WixTools314 即可，这个很重要，一定要命名为 WixTools314 而不是 WixTools
- Error failed to bundle project: error running light.exe:
failed to run C:\Users\Windows\AppData\Local\tauri\WixTools314\light.exe
编辑 tauri.conf.json ，bundle 节点中新增以下配置。
"windows": {
"allowDowngrades": true,
"certificateThumbprint": null,
"digestAlgorithm": null,
"nsis": null,
"signCommand": null,
"timestampUrl": null,
"tsp": false,
"webviewInstallMode": {
"silent": true,
"type": "downloadBootstrapper"
},
"wix": {
"language": "zh-CN"
}
}
主要就是 wix 的 language 一定要设置成 zh-CN。这个是配置中，包名使用中文引起的。
参考
https://blog.csdn.net/qq_41614928/article/details/128145938
https://blog.csdn.net/weixin_44786530/article/details/143132166
11月
26
tauri 2 创建 webview。这里前端使用的 vue3。需要以下两步就可以。
- 配置权限和安全。
- 编写前端逻辑。
配置权限和安全
src-tauri/capabilities/default.json
增加以下配置。
{
……,
"permissions": [
"core:default",
"shell:allow-open",
{
"identifier": "http:default",
"allow": [
{
"url": "https://www.yuepaibao.com/"
}
],
"deny": [
{
"url": "https://private.tauri.app"
}
]
},
"core:webview:allow-create-webview",
"core:window:allow-show",
"core:webview:allow-create-webview-window",
"core:webview:allow-webview-close"
]
}
编写前端逻辑
src/App.vue
<script setup lang="ts">
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
const webview = new WebviewWindow("search", {
center: true,
width: 540,
height: 960,
alwaysOnTop: true,
skipTaskbar: true,
decorations: true,
closable: true,
url: "https://www.yuepaibao.com",
});
webview.once("tauri://created", function () {
console.log("webview created");
});
webview.once("tauri://error", function (e) {
console.log("error creating webview", e);
});
</script>
如果想创建 webview 后，马上进入全屏。可以这样弄。
- 在权限配置那里，将设置全屏的权限配置进去。
- 在 webview 创建成功的回调里，设置全屏。
增加配置
"core:window:allow-set-fullscreen"
编写代码，修改和编辑
import { Window } from "@tauri-apps/api/window";
webview.once("tauri://created", async function () {
console.log("webview created");
const window = await Window.getByLabel("search");
if (window) {
window
.setFullscreen(true)
.then(() => {
console.log("Window is now fullscreen");
})
.catch((error) => {
console.error("Error setting fullscreen:", error);
});
}
})
11月
21
随着各个平台（github,阿里云，等）都开始使用 MFA 来增加软件使用的安全性。对软件进行 MFA 处理还是有必要。有些平台已经在强制使用了。
MFA（Multi-factor Authentication，多因素认证）是一种安全实践，它要求用户提供两种或两种以上的认证因素来验证身份，以增强账户和系统的安全性。
TOTP（Time-Based One-Time Password，基于时间的一次性密码）是一种基于时间的一次性密码算法，通常用于两步验证和多因素身份验证，以增强静态口令认证的安全性。它由互联网工程任务组（IETF）在RFC 6238中定义，是HOTP（基于哈希的消息认证码的一次性密码算法）的扩展，添加了时间因素。
TOTP 可以是 MFA 的一部分。
MFA 的工作原理
MFA的目的是建立一个多层次的防御，使未经授权的人访问计算机系统或网络更加困难，从而提高安全性。
MFA通常包括以下三个要素之一或多个的组合：
- 知识因素（用户知道的东西）：如密码、PIN码、答案问题。
- 所有权因素（用户拥有的东西）：如手机、硬件令牌、电子邮件。
- 生物特征因素（用户所具有的东西）：如指纹、虹膜、面部识别
实现MFA的基本步骤通常包括：
- 第一步验证（通常是密码）：用户输入用户名和密码，数据库对其进行验证。
- 第二步验证（如一次性密码 OTP）：如果第一步验证通过，用户会收到一个一次性密码（OTP），通常通过短信、电子邮件或身份验证器应用生成。用户需要输入这个OTP。
- 验证通过：系统验证OTP的有效性，如果正确，则允许用户访问资源。
MFA的实现方法：
MFA可以通过多种方式实现，以下是一些常见的方法：
-
双因素身份验证（2FA）：这是最常见的MFA形式，包括两个身份验证步骤，例如输入密码后，向用户的手机或电子邮件发送一次性密码（OTP）。
-
身份验证器软件：身份验证器软件会生成基于时间的一次性密码（TOTP），供用户在输入密码后使用。
-
硬件令牌：用户可以携带的物理设备，如安全密钥，用于生成一次性密码或提供认证响应。短信或电子邮件验证码：向用户的手机号或邮箱发送验证码，用户需要输入这个验证码来完成认证。
简要
上边这些，都是一些文字的简要介绍。真正的使用场景可以这样。
比如，先账号密码登录或扫码登录。这一步验证通过后，再进行短信验证或 TOTP 验证。毕竟短信的使用是有费用成本，使用 TOTP 来实现验证就是一个省钱的方式。只是 TOTP 也是需要客户端来做支撑。（自己开发或让用户使用市面上成熟的工具）
11月
19
下载一个 Creative Cloud Cleaner Tool 工具，就和方便清理掉 adobe 的各种缓存。比其他清理工具好用多了。一键搞定。然后就可以很方便的安装 adobe 全家桶了。缓存清理不干净，安装太伤人。
adobe 清理工具。
https://helpx.adobe.com/cn/creative-cloud/kb/cc-cleaner-tool-installation-problems.html
9月
17
在某些场景中，css 的遮罩真的很好用。小程序也可以用。如其名，遮罩就是遮住的地方才能罩得住，才能显示出来。adobe 的 flash 和 ps 也是这样提现的。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image
如下图，用户的头像是个六边形区域。如果用传统 css 实现六边形的裁切，很难实现这样好的效果。这个不仅有 border，边边交接处还有圆角，看起来更圆润。这个时候，遮罩就能很好的实现。只要用图中所示的区域的 png 图片作为遮罩来对目标图片进行遮罩处理就可以很好的实现。border 可以通过嵌套和内层 margin 来实现。
9月
17
css 实现渐变边框
不需要圆角的方式
<div class="box">无圆角的渐变边框</div>
.box {
border: 4px solid;
border-image-source: linear-gradient(to right, #8f41e9, #578aef);
border-image-slice: 1;
}
这种方式最简洁简单。唯一缺点就是无圆角。
有圆角的方式
一般人能想到的是使用一个渐变色背景。然后里边套一层 div，设置 div 的背景色。同时设置外层和里层的圆角。这个有两个缺点。一个是多套了一层，另外一个就是圆角不一定能把握的住，不一定非常完美融合。
还有一种方式实现,分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。
.box {
border: 4px solid transparent;
border-radius: 16px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}
文章来源
https://segmentfault.com/a/1190000040794056
9月
12
分析 app 接口数据，对 app 请求进行抓包是必要的一步。比如想做一个自动抢票系统，在对方没有提供 api 给予抢票时，就得需要自己去抓包分析请求。虽然这样不一定能成功，却是要走的一步。charles 是一个很不错的抓包工具，是一个付费工具。利用 charles 进行抓包需要走一下几步。
抓包步骤
- 下载安装 charles。 https://www.charlesproxy.com/latest-release/download.do
- 获取激活码。 https://www.zzzmode.com/mytools/charles/
- 通过上边的激活码，激活 charles。
- 配置（mac 端证书，手机端证书，代理接口等）。 https://blog.csdn.net/pan_jiabao/article/details/123126053
乱码配置
上边这些做好之后，手机端运行程序发起的 https 请求， mac 端的 charles 都能抓取到。可是在查看数据时，发现都是乱码。不是乱码更好了。如果是乱码，就处理处理。
-
依次点击顶部菜单。 Proxy->SSL Proxying Settings.
-
Enable SSL Proxying 打勾，并且添加 include 配置。这里可以添加 :。允许所有的域名和端口号。这样设置之后，乱码应该就没了。至少我是没了。
9月
12
vite 构建的 ts 项目中，引用某些库时，遇到 Could not find a declaration file for module 的错误提示。手动在 env.d.ts 中添加一下就可以。如：
/// <reference types="vite/client" />
declare module 'element-plus/dist/locale/zh-cn.mjs'
declare module 'element-plus/dist/locale/en.mjs'
declare module 'element-plus/dist/locale/ja.mjs'
declare module 'simple-peer/simplepeer.min.js'
