yemuguliunian / issues Goto Github PK
View Code? Open in Web Editor NEW记录平时遇到的一些问题和知识点
记录平时遇到的一些问题和知识点
期望通过配置 dva-loading 的 except ,过滤掉一些不希望产生的 loading effect。
app.use(
createLoading({
only: ['count/a'],
except: ['count/b'],
}),
);
但在umi工程内如何传递 dva-loading createLoading options 信息呢,从而达到期望的效果。
根目录 app.js 内添加
export const dva = {
config: {
onReducer: (reducer, lastState) => {
let lastStateCopy = lastState;
return (state, action) => {
// 对于count/b引发的loading 不触发state更新,避免全局loading引发的多余render
if (
action.type.includes('@@DVA_LOADING') &&
action.payload.actionType == 'count/b' &&
lastStateCopy
) {
return lastStateCopy;
}
lastStateCopy = reducer(state, action);
return lastStateCopy;
};
},
},
};
export const broadcast = text => {
const url = `http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=${encodeURI(text)}`;
const audio = new Audio(url);
audio.src = url;
audio.play();
};
假如你正在 Windows 上写程序,而你的同伴用的是其他系统(或相反),你可能会遇到 CRLF 问题。 这是因为 Windows 使用回车(CR)和换行(LF)两个字符来结束一行,而 macOS 和 Linux 只使用换行(LF)一个字符。 虽然这是小问题,但它会极大地扰乱跨平台协作。许多 Windows 上的编辑器会悄悄把行尾的换行字符转换成回车和换行, 或在用户按下 Enter 键时,插入回车和换行两个字符。
Git 可以在你提交时自动地把回车和换行转换成换行,而在检出代码时把换行转换成回车和换行。 你可以用 core.autocrlf 来打开此项功能。 如果是在 Windows 系统上,把它设置成 true,这样在检出代码时,换行会被转换成回车和换行:
$ git config --global core.autocrlf true
如果使用以换行作为行结束符的 Linux 或 macOS,你不需要 Git 在检出文件时进行自动的转换; 然而当一个以回车加换行作为行结束符的文件不小心被引入时,你肯定想让 Git 修正。 你可以把 core.autocrlf 设置成 input 来告诉 Git 在提交时把回车和换行转换成换行,检出时不转换:
$ git config --global core.autocrlf input
这样在 Windows 上的检出文件中会保留回车和换行,而在 macOS 和 Linux 上,以及版本库中会保留换行。
如果你是 Windows 程序员,且正在开发仅运行在 Windows 上的项目,可以设置 false 取消此功能,把回车保留在版本库中:
$ git config --global core.autocrlf false
今天帮同事排查文件下载的问题,同事使用了fetch发送请求然后根据响应数据通过blob方式下载,下载的文件内容为[Object ReadableStream]
排查后发现使用fetch时Response.body跟使用axios时Response.data处理方式不一致。
const response = await fetch('flower.jpg');
const reader = response.body.getReader();
while(true) {
const {done, value} = await reader.read();
if (done) {
break;
}
console.log(`Received ${value.length} bytes`)
}
上面示例中,response.body.getReader()方法返回一个遍历器。这个遍历器的read()方法每次返回一个对象,表示本次读取的内容块。
这个对象的done属性是一个布尔值,用来判断有没有读完;value属性是一个 arrayBuffer 数组,表示内容块的内容,而value.length属性是当前块的大小。
手持端使用百度地图选点
var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.331, 39.923);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
var marker = new BMapGL.Marker(point, {
enableDragging: true
});
map.addOverlay(marker);
使用官方点拖拽示例,在手持端点位无法拖动。放弃!
参考打车软件平台,在地图容器中心放置一个点位,通过拖动地图更新中心点,使用中心点作为最终的点位信息。
使用new BMapGL.LocalSearch
支持搜索查询地址信息设置中心点
最近一段时间出现很多前端工程本地运行无问题,发布后CI/CD打包报错的问题。查看后多数为import路径文件名大小写书写错误导致,在windows系统下文件名大小写不敏感。
使用 eslint-plugin-import
检查路径
第一步:安装 eslint-plugin-import
yarn add eslint-plugin-import -D
第二步:在.eslintrc.js
内添加配置
module.exports = {
extends: ['plugin:react/recommended', 'plugin:import/errors'],
rules: {
'import/no-unresolved': [2, { ignore: ['@/'] }], // 别名校验有些问题,所以暂时忽略
'import/named': 'off',
},
};
执行脚本
npx clear-npx-cache
font-weight: 600 在苹果机上生效,安卓机不生效。改为 font-weight: bold
echarts 图表在浙政钉浏览器下图形未正常显示。F12控制台报错
the value provided rgb(111, 186, 255, 0.3) cloud not be parsed as a color
浙政钉浏览器浏览器内核:chrome/63
低版本浏览器兼容性
色值 | 是否支持 |
---|---|
rgb(0, 0, 0) | 支持 |
rgb(0, 0, 0, 0.1) | 不支持,无法解析 |
rgba(0, 0, 0, 0.1) | 支持 |
高版本浏览器兼容性
色值 | 是否支持 |
---|---|
rgb(0, 0, 0) | 支持 |
rgb(0, 0, 0, 0.1) | 支持 |
rgba(0, 0, 0, 0.1) | 支持 |
当颜色需添加透明度 alpha 统一使用 rgba 定义。
客户反馈系统导出列表迅雷下载失败。
最新的导出组件使用了blob的下载方式,以往使用的是Form表单下载的方式,验证点:是否因为blob方式导致迅雷下载失败?
浏览器绑定迅雷,验证Form表单下载和blob下载
window.URL.createObjectURL(blob)创建的是一个指向内存的映射并不是一个真正的下载地址,故迅雷下载失败。
考虑用户浏览器会默认绑定迅雷下载的情况,后续默认使用Form表单下载
外层包一层 加上 flex
可以了
地址栏添加 response-content-type=application/octet-stream
npm install -g increase-memory-limit
package.json
// ...
"scripts": {
"fix-memory-limit": "cross-env LIMIT=2048 increase-memory-limit"
},
"devDependencies": {
"increase-memory-limit": "^1.0.3",
"cross-env": "^5.0.5"
}
// ...
JSON schema for the TypeScript compiler's configuration file
解决:
出现类似的问题,提示哪个文件无法写入,会覆盖输入文件,就将哪个目录添加到 exclude 属性里。
第一步
访问淘宝网站 https://npmmirror.com/,搜索安装包比如 node-releases
第二步
对比淘宝源和npm源的版本号(1),如果版本号不匹配,点击 sync (2)同步
https://blog.csdn.net/summer_dou/article/details/123922964
vue must be a peer dependency
const Core = require('css-modules-loader-core');
const genericNames = require('generic-names');
const less = require('gulp-less');
const postcss = require('gulp-postcss');
const core = new Core([
Core.values,
Core.localByDefault,
Core.extractImports,
Core.scope({
generateScopedName: genericNames('[local]___[hash:base64:5]'),
}),
]);
gulp.task('less', function() {
const lessStream = gulp.src('./components/**/*.less');
const lessToCss = lessStream
.pipe(
less({
plugins: [new LessPluginAutoPrefix({ browsers: ['last 2 versions', 'IE 9'] })],
}),
)
.pipe(postcss(core.plugins))
.pipe(gulp.dest(libDir));
return lessToCss;
});
编译前
.grid {
background: #fff;
.row {
background: #fff;
}
}
编译后
.grid___kW3k9 {
background: #fff;
}
.grid___kW3k9 .row___-u05H {
background: #fff;
}
:export {
grid: grid___kW3k9;
row: row___-u05H;
}
index.html 内添加
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./image/logo-144x144.png" />
1.制作4种不同尺寸的图片
,放在相应目录下(目录随便,但是要图片获取要对应的路径):
<!--适用于 Retina 屏的 iPad-->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./static/apple-touch-icon-precomposed-144x144.png">
<!--适用于 Retina 屏的 iPhone-->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="./static/apple-touch-icon-precomposed-120x120.png">
<!--适用于非 Retina 屏的 iPad-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="./static/apple-touch-icon-precomposed-72x72.png">
<!--适用于非 Retina 屏的 iPhone-->
<link rel="apple-touch-icon-precomposed" href="./static/apple-touch-icon-precomposed-57x57.png">
2.vue项目中,需将4张图片放到static文件中
3.上面的代码位置:在index.html的之间添加以上代码
4.部署上线
5.完成上述步骤后,在safari中打开网址
export default {
computed: {
inputValue: function() {
const { value, data } = this;
// 计算值为undefind时,界面值未变更
return data.find(item => item.key === value)?.value;
},
}
}
修改
export default {
computed: {
inputValue: function() {
const { value, data } = this;
// 改为返回''界面同步刷新了,尚未具体排查原因
return data.find(item => item.key === value)?.value || '';
},
}
}
在uni-app下使用图片, src路径如果写/cloudFile/common/download/id,最终会被编译城 ./cloudFile/common/download/id。
如果最终的访问路径上代理pathname,最终图片地址可能会变为类似于https://kanbandev.cloudhw.cn:8446/kanban/cloudFile/common/download/id
原文件
@import (reference) '~antd/es/style/themes/index.less';
.text {
color: fade(@black, 45%);
}
使用gulp-less
编译
const less = require('gulp-less');
const LessPluginAutoPrefix = require('less-plugin-autoprefix');
const NpmImportPlugin = require('less-plugin-npm-import');
const libDir = path.join(process.cwd(), 'lib');
gulp.task('less', function() {
const lessStream = gulp.src('./components/**/*.less');
const lessToCss = lessStream
.pipe(
less({
javascriptEnabled: true,
plugins: [
new NpmImportPlugin({ prefix: '~' }),
new LessPluginAutoPrefix({ browsers: ['last 2 versions', 'IE 9'] }),
],
}),
)
.pipe(gulp.dest(libDir));
return merge2([lessToCss]);
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.