April

4月22日

vitepress搭建

📖 参考文档
- 十分钟教会你如何使用VitePress搭建及部署个人博客站点
- vitepress Home Page的配置

`天地图`使用时遇到的问题

地理位置名称显示

🔑 关键代码

// 获取图层API
const imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
    "&tk=您的密钥";
const imageURLT = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
    "&tk=您的密钥";

// 影像底图图层
const lay = new T.TileLayer(imageURL, { minZoom: 6, maxZoom: 18 });
// 影像注记图层
const lay2 = new T.TileLayer(imageURLT, { minZoom: 6, maxZoom: 18 });
const config = { layers: [lay, lay2] };

// 创建地图实例
this.map = new T.Map('yzMap', config);
this.map.centerAndZoom(new T.LngLat(110.15114, 22.6281), 11);

📖 参考文档

天地图默认为卫星图包括地名标记方法，天地图添加各类注记或图层方法

地图中嵌套一个网页（如：VR，并且有点类似小程序里嵌套【web-view】）
可以引入 iframe 标签，它能够将另一个 HTML 页面嵌入到当前页面中。
html
```
<iframe 
    id="inlineFrameExample"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="网页地址"
>
</iframe>
```

axios请求超时的解决办法

❓ 问题
timeout of 5000ms exceeded，并且请求接口地址所返回的状态码为200
💡 解决
在状态码为200的情况下，大胆猜测，由于服务器响应时间比实际设置时间长。以至于在服务器加载数据完成前，就被axios拦截，导致接口返回的数据获取不到。
所以，可以在axios配置文件中，延长请求时间。
js
```
const service = axios.create({
    // 设置超时时间 50s
    timeout: 50000,
});
```
📖 参考文档
- axios请求超时：timeout of 5000ms exceeded的解决方法

uniapp 获取组件高度

两种方式

boundingClientRect()

// 在页面渲染后获取，所以写在mounted()里
mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('id名').boundingClientRect(data => {
        console.log(data)
    }).exec();
},

利用ref获取

// 在页面渲染后获取，所以写在mounted()里
mounted() {
    // navHeight 在组件中绑定 ref='navHeight'
    // 页面渲染完成后的回调
    this.$nextTick(()=>{ 
        // 获取高度
        this.navHeight = this.$refs.navHeight.height;
    })
},

📖 参考文档
- uni.createSelectorQuery()

4月26日

git提交时报错

❓ 问题
在使用 git add . 时，报错 error: unable to index file

💡 解决

在使用 git add . 时，报错 error: unable to index file

bash

git rm -r --cached .   // 删除暂存区文件，但保留工作区的文件，并且将这次删除放入暂存区。
git status  // 查看还没提交的文件
git add .

📖 参考文档
- unable to index file

在vitepress引用scss文件，报错

❓ 问题
Preprocessor dependency "sass" not found. Did you install it?
💡 解决
由于vitepress项目是跟着教程搭建，以至于安装的时候用的是pnpm. 而我安装sass时，用的是npm，所以安装完又报了以下错误：
Cannot read properties of null (reading 'matches')
因此，记得查看一下项目安装时，用的是npm，还是pnpm，或者yarn
🔧 安装 sass
bash
```
pnpm install sass --save-dev
```

不得不说，pnpm安装真的好快。👍

4月27日

小程序轮播图自适应比例的问题

研究了小程序轮播图，根据图片高度，自适应比例的问题

💡 关键代码

Swiper height: calc(100vw * 原图比例)

image mode="aspectFill"

📖 参考文档
- 微信小程序 swiper轮播图高度宽度自适应（解决轮播图图片显示不全问题）

4月28日

引入 `uni-app` 的 `textarea`组件

实现，点击输入框，自动聚焦，弹起键盘。点击右侧的发表按钮，获取到输入框的内容。

💡 关键代码

用 v-model 绑定参数

javascript

<textarea 
    auto-height adjust-position 
    auto-blur fixed
    :show-confirm-bar="false"
    placeholder="请输入发表评论"
    cursor-spacing="20"
    style="padding: 20rpx;width: 90%;"
    v-model="commentData"
/>

javascript

export default {
    data() {
        return {
            commentData: '' // 评论内容
        }
    },
    methods: {
        handleSubmit() {
            // 用 V-model绑定，点击事件就能直接获取到输入框的值
            console.log(this.commentData)
        }
    }
}

🏷️ 属性说明

属性名	说明
auto-height	自动增高
adjust-position	键盘弹起时，自动上推页面
auto-blur	键盘收起时，自动失去焦点
cursor-spacing	指定光标与键盘的距离，分离输入框与键盘的距离. 可设置20.

📖 参考文档
- textarea

本地配置多个git账户

由于本地已全局配置了gitee的账户，个人的项目想传到github的仓库上。以至于，想要在本地多配置一个git账户

1) 为 Github 生成一个新的 SSH Key

bash

ssh-keygen -t rsa -C "你的邮箱@xxx.com" -f ~/.ssh/id_rsa_github

id_rsa_github 给文件取别名，用于与别的sshKey做区分

2) 配置 config

windows: C:\Users\Administrator\.ssh (本机的ssh目录路径)

在上述的目录中，创建 config 文件（无后缀名）

配置内容如下：

bash

# 配置文件参数
# Host Host可以看作是一个你要识别的模式，对识别的模式，进行配置对应的的主机名和ssh文件
# HostName 要登录主机的主机名
# User 登录名
# PreferredAuthentications publickey,password,keyboard-interactive
# IdentityFile 指明上面User对应的identityFile路径

# github
Host github.com
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile C:\\Users\\\Administrator\\.ssh\\id_rsa_github

3) 在Github上添加 SSH Key

bash

cat ~/.ssh/id_rsa_github.pub

复制上述命令执行的结果，到Github上.

4) 在需要连Github项目的根目录中，执行如下命令

⚠️ 注：此配置，仅对当前项目生效

bash

git config user.name "yourName"
git config user.email "yourEmail"

5) 验证是否连接成功

bash

ssh -T git@github.com

6) 把代码传入仓库

先在Github上新建一个仓库
然后，在本地新建一个同名的文件夹，在项目根目录执行 git init，对仓库进行初始化
接着，我们在本地库上使用命令 git remote add 把它与Github远程库关联起来

bash

git remote add github 项目的SSH地址

关联完成后，我们可以通过输入 git remote -v 来查看关联的远程库信息
然后推送代码到仓库

bash

git push -u github master

7) 过程中遇到的问题

Permission denied (publickey).
fatal: Could not read from remote repository.

💡 解决

回到第二步，检查配置信息
然后再执行第五步，看是否链接成功. 当出现以下代码时，说明链接成功. 这时就可以再次提交代码到仓库

Hi xxx! You've successfully authenticated, but GitHub does not provide shell access.

📖 参考文档

配置二级域名

由于已有的域名已经绑定了一个博客，现需使用该域名绑定另一个网站，这时候就用到 二级域名

💡 一个域名可以添加无数个二级域名(主机名)

目前两个博客都是部署在Vercel上，第一个博客使用域名时，已经解析过Vercel的DNS A记录.

所以此次，在Vercel部署另一个博客项目时，Domain里的域名，只需要 自行拟定一个二级域名 就能成功使用。

格式： xxxx.原有的域名

April ​

4月22日 ​

vitepress搭建 ​

天地图使用时遇到的问题 ​

axios请求超时的解决办法 ​

uniapp 获取组件高度 ​

4月26日 ​

git提交时报错 ​

在vitepress引用scss文件，报错 ​

4月27日 ​

小程序轮播图自适应比例的问题 ​

4月28日 ​

引入 uni-app 的 textarea组件 ​

本地配置多个git账户 ​

1) 为 Github 生成一个新的 SSH Key ​

2) 配置 config ​

3) 在Github上添加 SSH Key ​

4) 在需要连Github项目的根目录中，执行如下命令 ​

5) 验证是否连接成功 ​

6) 把代码传入仓库 ​

7) 过程中遇到的问题 ​

配置二级域名 ​

April

4月22日

vitepress搭建

`天地图`使用时遇到的问题

axios请求超时的解决办法

uniapp 获取组件高度

4月26日

git提交时报错

在vitepress引用scss文件，报错

4月27日

小程序轮播图自适应比例的问题

4月28日

引入 `uni-app` 的 `textarea`组件

本地配置多个git账户

1) 为 Github 生成一个新的 SSH Key

2) 配置 config

3) 在Github上添加 SSH Key

4) 在需要连Github项目的根目录中，执行如下命令

5) 验证是否连接成功

6) 把代码传入仓库

7) 过程中遇到的问题

配置二级域名