HiDocs
Search K

Appearance

1.脱离文档流的元素没高度的解决办法：占位思想 ​

fixed和 absolute 会造成 dom 脱离文档流，这时候我们在其下面写新的内容的时候会自动跑到脱离文档流的 dom 的里面（比如 navbar），因为脱离文档流没有高度

解决办法：新加一个不脱离文档流的 dom 元素，设置同样的高度，相当于占位了，这样我们在下面接着内容的时候就可以正常展示了

image-20230615103013450

2.占位思想让块分为三部分，并且中间部分居中 ​

虽然可能使用 flex 布局的 space-around也可以实现，但是占位实现很巧妙，是一种很重要的思想

image-20230615103457138

左右都设置那个块，并且右边的设置透明度为 0

image-20230615103526773

只设置了 padding，没有设置 width和 height

3.小程序使用 vant组件的注意事项 ​

小程序中每使用一个组件 vant 都要在 app.json里面进行配置

4.后端返回的数据字段带有小数点的解决方案 ​

问题背景：后端返回的百分比是小数0.14，但是用0.14*100后面多了很多个 0

在JavaScript中，浮点数运算可能会导致精度损失，而导致结果中出现现多余的零。这是由于浮点数在计算机中的内部显示方式所造成的制造的。

在你提供的例子中，0.14乘以100，预期结果应为14。然而，由于浮点数的浓度问题，计算结果可能不准确，导致结果中出现问题外面的零。

为了解决这个问题，你可以使用合适的方法来处理浮点数的精度。例如，可以使用toFixed()任意数将结果四舍五入指定的小位数。

1.接收到数据之后 map 函数遍历处理（把一个对象数组中每个对象的其中一个字段改掉） ​

这样可以修改一个对象数组中，每个对象的某一两个字段，写法比较方便

js
let newList = res.data.rankList.map(obj => {
  return { ...obj, activeRatio: activeRatio?(activeRatio*100).toFixed(0):activeRatio };
});

这里是返回了一个百分比*100 并且去掉小数位的值

2.在模版页面中使用wxs过滤器进行处理 ​

wxml 里面仍然不支持 js 的 Math 方法和 toFixed等方法，但是 wxs 里面是支持的，所以可以编写一个过滤器

image-20230615115202115

image-20230615115247752

5.vant踩坑之滑动单元格SwipeCell左右滑无样式解决办法 ​

直接引入组件是得不到官方的删除那些按钮的样式的效果的

因此，需要在wxss里添加上如下样式

css
.van-swipe-cell__left,
.van-swipe-cell__right {
  display: inline-block;
  65px;
  height: 44px;
  font-size: 15px;
  line-height: 44px;
  color: #fff;
  text-align: center;
  background-color: #f44;
}

6.splice方法会改变原数组，返回值是被删除的元素 ​

不用写let newList = this.data.allThings.splice(index,1)

直接写this.data.allThings.splice(index,1)即可操作数组

7.组件根据 props 生成动态样式 ​

动态的class 类的设置策略：

（1）小程序中的策略：

image-20230615185129023

（2）vue中的策略：

image-20230616001546599

vue 中绑定 class 的其他写法：

class放在[]中：

image-20230616001657311

class放在列表的对象中，并用 boolean 值标志是否启用：

image-20230616001715718

8.mac 使用命令移动文件夹 ​

在 macOS 上，你可以使用mv命令来移动文件夹。mv命令用于移动文件或文件夹，同时也可以用于对文件或文件夹进行重命名。

以下是使用mv命令移动文件夹的示例：

  1. 移动文件夹到指定目录：
bash
mv /path/to/source_folder /path/to/destination_folder

将/path/to/source_folder替换为要移动的文件夹的实际路径，将/path/to/destination_folder替换为要移动到的目标路径。

  1. 移动文件夹并重命名：
bash
mv /path/to/source_folder /path/to/destination_folder/new_folder_name

将/path/to/source_folder替换为要移动的文件夹的实际路径，将/path/to/destination_folder/new_folder_name替换为目标路径和新文件夹的名称。

请确保你具有足够的权限来移动文件夹，并确保提供正确的源路径和目标路径。

需要注意的是，mv命令是一个强大而潜在危险的命令，移动文件夹时请谨慎操作，避免意外删除或覆盖重要数据。建议在使用mv命令之前备份重要文件和文件夹。

例子：

bash
mv /Users/songshu/WeChatProjects/miniprogram-demo /Users/songshu/Desktop/my-task

成功将miniprogram-demo文件夹移动到 my-task内：

image-20230615210608503

9.推自己的项目到 gitee的 username ​

必须先设置 git config，用户名和邮箱

写 username的时候要写 1558637209@qq.com才可以！

image-20230615211014815

11.sourceTree的使用和提交的策略 ​

（1）尽量不要勾选这个立即推送

先commit提交然后 pull，然后再 push，当远程有更新的时候，这样是最保险的，commit 再 pull可以在本地将冲突解决，然后再 push 就不会有错误了

image-20230615220439240

（2）立即提交合并的改动这个也可以不勾选：

"git 立即提交合并的改动" 意味着你希望立即将合并后的改动（可能会有冲突，远程的代码我们不一定都要，会有相应的删减和改变）提交到版本控制系统，而不是等待后续的提交。立即提交合并的改动是可选的，你也可以在稍后的时间点提交。这取决于你的工作流程和需求。

但是我们为了本次提交代码只是提交我们自己的改动，并且让远程仓库保证最新，那么我们就没有必要此次提交合并的改动（merge），只要把我们的代码加上，那么远程就是最新的了。

image-20230615222437867

（3）可以不用 git clone，sourceTree提供了拉取代码的方法

image-20230615220716385

（4）移除和停止追踪

在 SourceTree 中，"停止追踪"（Stop Tracking）和"移除"（Remove）是两个不同的操作，它们的含义和效果略有不同。

  1. 停止追踪（Stop Tracking）：这个操作适用于已经被 Git 跟踪的文件，但你希望停止 Git 继续跟踪这些文件的改动。当你停止追踪一个文件时，Git 将不再关注该文件的状态和变化，它将不会出现在你的未跟踪文件或待提交的更改中。然而，这个文件仍然会保留在你的git工作目录中。

停止追踪操作的目的通常是告诉 Git 忽略特定文件的更改，比如一些配置文件或生成的文件。这样，即使你对这些文件进行了修改，Git 也不会将其视为需要被版本控制的文件。

  1. 移除（Remove）：这个操作用于从 Git 的版本控制中彻底移除文件。当你移除一个文件时，它不仅会从 Git 的跟踪列表中消失，而且会被从git工作目录中删除。这意味着文件将不再出现在你的本地文件系统中。

移除操作会将文件从当前分支的历史记录中删除，包括之前的提交。这样，当你将这些更改推送到远程仓库或其他人拉取代码时，这些文件将不再存在。

需要注意的是，移除操作是不可逆的，所以在执行移除操作之前，请确保你真正想要永久删除文件。如果你只是希望停止 Git 对某些文件的跟踪而不删除它们，那么停止追踪操作更适合。

一般这样：

image-20230625143655726

停止追踪之后，远程拉取代码有冲突会怎么样？

当你停止追踪文件后，在远程拉取代码时，如果远程仓库中对这些被停止追踪的文件进行了修改，以下是可能的情况：

  1. 文件没有被删除：如果被停止追踪的文件在远程仓库中仍然存在且被修改，Git 不会自动将远程仓库中的改动应用到你的本地文件。这是因为停止追踪操作实际上是告诉 Git 忽略这些文件的改动，不再追踪它们。
  2. 文件被删除：如果被停止追踪的文件在远程仓库中被删除，拉取操作将不会将这些文件重新创建到你的工作目录中。

在这两种情况下，远程仓库的改动不会直接影响到你的本地被停止追踪的文件。如果你希望应用远程仓库中对这些文件的改动，你可以选择手动更新这些文件，比如手动复制、覆盖或通过其他手段同步这些改动。

需要注意的是，停止追踪操作仅仅影响到你的本地仓库，不会直接修改远程仓库中的文件。如果你希望同步你的本地修改到远程仓库，你需要使用 Git 的其他命令，如 git add、git commit 和 git push 等来完成相应的操作。

移除文件之后也是同理的。

（5）优秀的文章

主要是先 commit，然后 pull，会有形成冲突的文件，然后手动进行合并，再进行 push

12.用访达访问mac 隐藏的文件结构，并修改文件权限 ​

image-20230615234326915

前往 private 可以看到我们正常在访达中看不到的文件夹

image-20230615234358453

显示简介，解锁，可以修改权限（文件夹）

image-20230615234418610

image-20230615234501905

image-20230615234519302

修改权限（文件），同时可以在可视化面板修改文件内容，而不需要用 vim 了

image-20230615234550793

13.微信小程序中用ts 定义类型 ​

在微信小程序中使用TypeScript（TS）定义类型，你可以使用接口（interface）或类型别名（type alias）来声明自定义类型。以下是在微信小程序中使用TS定义类型的示例：

  1. 使用接口定义类型：
ts
interface User {
  id: number;
  name: string;
  age: number;
}

// 使用定义的接口类型
let user: User = {
  id: 1,
  name: "John",
  age: 25
};

在上面描述的例子中，我们使用interface关键字确定了一个名称User的接口，指定了id、name和age字段的类型。然后，我们可以使用该接口类型User来声明变化量user，并赋予相应的价值。

  1. 使用类型别名定义类型：
ts
type User = {
  id: number;
  name: string;
  age: number;
};

// 使用定义的类型别名
let user: User = {
  id: 1,
  name: "John",
  age: 25
};

注意：一般写在 Page 或者 Component 的外面即可！

14.curl 请求信息的解释 ​

bash
curl -H "Host: service-api-test.songshuai.com" \
     -H "content-type: application/json" \
     -H "User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.37(0x1800252f) NetType/WIFI Language/zh_CN" \
     -H "Referer: https://servicewechat.com/wx84eef86b867f3c52/0/page-frame.html" \
     --data-binary "{\"param\":{\"agentId\":\"89059\",\"logType\":2,\"openid\":\"oKprw5BfU_cRKFimgisJyfm3Dth4\",\"unionid\":\"od_Ry6mQLtR95qjNjmVjjMPeb-9k\",\"pageUrl\":\"subpackages/home/dealerRankingList/index\",\"requestId\":1686746352617,\"trueName\":\"xiaoqu89059\",\"userId\":\"17720\"},\"time\":1686746352,\"sign\":\"8bcf6e5528026600b74baace3532232c\"}" \
     --compressed \
     "https://service-api-test.songshuai.com/serviceapplet/api/applet/tool/addAppletLog"

这是一个使用 curl 发送 POST 请求的示例命令，它包含了一些自定义的请求头和请求数据。该命令发送的请求目标是 "https://service-api-test.songshuai.com/serviceapplet/api/applet/tool/addAppletLog”

该命令使用 -H 选项来添加自定义的请求头，包括 "Host"、"content-type"、"User-Agent" 和 "Referer"。

--data-binary 选项用于指定请求的数据，该数据是一个 JSON 字符串，它作为请求的主体部分发送到服务器。

--compressed 选项告诉 curl 接受经过压缩的响应。

15.不推荐内联样式的原因 ​

不推荐过多使用内联样式的原因有以下几点：

  1. 可维护性差：当样式需要在多个元素中重复使用时，内联样式会导致样式代码的冗余。如果需要修改样式，你需要逐个查找并更新每个元素的 style 属性，而不是在一个地方进行修改。
  2. 优先级问题：内联样式的优先级非常高，它会覆盖外部样式表（如 <style> 标签或外部 CSS 文件）中的相同样式。这可能会导致样式层叠和冲突问题，增加样式调试和维护的复杂性。
  3. 可重用性差：内联样式通常只适用于单个元素，难以在多个元素之间实现样式的重用。如果你希望多个元素共享相同的样式，使用外部样式表（CSS 文件）更为合适。
  4. HTML 与样式分离原则：HTML 负责结构和内容，样式应该由 CSS 来控制。通过将样式与 HTML 分离，你可以提高代码的可读性和可维护性，同时也符合良好的代码组织原则。

推荐的做法是将样式定义在外部的 CSS 文件中，并使用类选择器或 ID 选择器来为元素添加样式