移动端开发
taro 官网说明taro官网明确表示暂时不支持rem
由于项目内使用的 less，所以我们采用 less 变量声明的方式，曲线救国
// base.less
//基准的font-size是根据项目确定的，如果是老项目，则需要根据老代码确定
// 由于之前采用的是vh，所以在这我们将1rem设置为1vh（屏幕高度1000）
@fontsize: 10px;
// index.less
@import "/src/static/baseFontSize";
.startup {
width: 100vw;
height: 100vh;
background-image: linear-gradient(180deg, #282c60 0%, #0e173e 66%);
position: absolute;
top: 0;
left: 0;
z-index: 800;
font-family: PingFangSC-Semibold;
//项目改造，之前写法是font-size:7.7vh 我们改造成rem的方式时，将1rem设置为 ...
移动端开发
安全区域横屏适配
<meta content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
如果不加viewport-fit=cover这个属性，H5页面在iPhone上会出现不能铺满全屏的情况，加上这个属性后，页面会自动填充到全屏幕。但是横屏展示时，状态栏部分会被遮挡，所以需要做一些适配。由于页面是会旋转的，所有left和right都要适配。
width: calc(100% - constant(safe-area-inset-left) - constant(safe-area-inset-right));
width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
前端开发
1、生产环境的项目，我们隐藏 log 信息
引入 babel-plugin-transform-remove-console 插件vue 项目内创建 babel.config.js 文件
// babel.config.js
const prodPlugins = [];
if (process.env.NODE_ENV === "production") {
prodPlugins.push("transform-remove-console");
}
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [...prodPlugins],
};
2、打包时，文件添加其他标识我们可以灵活运用，将时间戳改为版本号、tag等
const Version = new Date()
.getTime()
.toString()
.match(/.*(.{8})/)[1];
module.exports = { ...
前端开发
// 解决当wtListScrollColumn元素隐藏且此时更改分辨率后，再次显示wtListScrollColumn时布局没有更新的问题
const elementToWatch = document.getElementsByClassName("wtListScrollColumn");
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
// 页面展示
if (entry.isIntersecting) {
this.SetDynamicLayout();
}
// 页面隐藏
else{
}
});
});
for (let i = 0; i < elementToWatch.length; i++) {
intersectionObserver.observe(elementToWat ...
前端开发
1、微信登录function WXLogin() {
let url = "需要跳转回的URL";
//这里有登录之前的协议阅读限制，项目不同，要求也不一样
if (this.check_) {
const dom = document.getElementById("checkbox_");
this.check_ = false;
//跳转到微信登录页，会出现一个二维码弹窗，扫码后会消失
window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wx901e99869df0daaf&redirect_uri=${url}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
} else {
this.notice = "请先阅读并同意协议";
this.s ...
前端开发
base64 转文件export function dataURLtoFile(dataurl, filename) {
let arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime,
});
}
网络与协议
三次握手客户端和服务端通信前要进行连接，“3次握手”的作用就是双方都能明确自己和对方的收、发能力是正常的。
1、第一次握手：客户端发送网络包，服务端收到了。这样服务端就能得出结论：客户端的发送能力、服务端的接收能力是正常的。
2、第二次握手：服务端发包，客户端收到了。这样客户端就能得出结论：服务端的接收、发送能力，客户端的接收、发送能力是正常的。 从客户端的视角来看，我接到了服务端发送过来的响应数据包，说明服务端接收到了我在第一次握手时发送的网络包，并且成功发送了响应数据包，这就说明，服务端的接收、发送能力正常。而另一方面，我收到了服务端的响应数据包，说明我第一次发送的网络包成功到达服务端，这样，我自己的发送和接收能力也是正常的。但是服务器还不知道我的接收能力
3、第三次握手：客户端发包，服务端收到了。这样服务端就能得出结论：客户端的接收、发送能力，服务端的发送、接收能力是正常的。 第一、二次握手后，服务端并不知道客户端的接收能力以及自己的发送能力是否正常。而在第三次握手时，服务端收到了客户端对第二次握手作的回应。从服务端的角度，我在第二次握手时的响应数据发送出去了，客户端接收到了。 ...
前端开发
事情的起因是这样：项目是加载在android的webview上面，由于andriod端更改了dpi，由160改成了200，造成pixelRatio变成了1.25，而项目内使用的css单位是Px进行的适配，造成整体页面也被放大了1.25倍，导致UI溢出。
解决办法：直接将页面缩放为原来的0.8倍，发布到项目上与1.25倍相乘，正好得到原来的1倍值
由此引发的思考：
1、pxPX(pixel):即传统计算机语言中描述的像素，在Android则代表绝对像素。
之所以Android中不推荐使用这种单位，正是因为不同生产厂商，不同品牌，不同屏幕的设备，其分辨率亦不一。举例来说，我们现在将某个Button的width设为160px，则会出现如下情况：
在分辨率为“320宽”的设备里，该按钮显示占屏幕宽度一半；在分辨率为“640宽”的设备里，该按钮显示占屏幕宽度的四分之一；
2、dp与我们之前谈到的绝对密度“px”对应，Android中引入的“dp”代表的则是“设备独立像素”。该单位是为支持WVGA、HVGA和QVGA而使用的，其不再依赖像素本身，而是和屏幕密度相关。在Android当 ...
工具与效率
1、windows 命令行1.1 打开文件或文件夹//在当前目录下打开本目录下的BLOG
C:\Users\WTCL\Desktop\博客> start BLOG
//打开指定目录 不区分大小写
start C:\Users\WTCL\Desktop\博客\blog
start C:\Users\WTCL\Desktop\博客\BLOG
2、macos 命令行2.1 打开文件或文件夹open
2.2 使用指定软件打开文件open 我的博客 -a webstorm
2.3 打开指定软件//因为应用名之间可能包含空格，所以需要用引号包裹起来
open -a 'Google Chrome'
在项目中，遇到一段代码，同一个元素同时绑定了 touchstart 和 click 两种事件，且同时指向了同一个函数，示例代码如下
<template>
<div id="app">
<button @click="go('click')" @touchstart="go('touch')">go</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
go(string) {
console.log("1", string);
},
},
};
</script>
由于是历史代码，不知道当初为什么将两种事件同时绑定，也不敢删除，所以添加了一个判断，判断当前设备是否支持touchstart，如果支持，就用touchstart，反之使用click
<template>
<div id="app">
& ...
addEventListener第三个参数
工具与效率
hexo内引入图片使用![]()的方式，但是在hexo里，会有一个与文档title同名的目录（如果title没改的话）,在hexo里()内不用写目录，直接写图片名称+后缀即可。以本文档为例，名为“hexo一次全局替换”，图片链接就可以写为，在hexo的服务器与部署服务器上就能展示，但是本地显示的是图二右边破损的图标
所以为兼容本地和服务器显示，应写为 a代表的就是同名文件夹
但是由于该项目历史文档较多，所以写了一个node进行自动替换，代码如下
const fs = require('fs');
const path = require('path');
const pathName = '_posts'
let arr = []
arr.map(item => {
fs.readFile(`${pathName}/${item.name}`, {encoding: 'utf8'}, (err, data) => {
if (err) { ...
