Giter VIP home page Giter VIP logo

issues's People

Contributors

yemuguliunian avatar

Watchers

 avatar

issues's Issues

umi 如何传递 dva-loading createLoading options 信息

问题描述

期望通过配置 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;
            };
        },
    },
};

百度tts文字转语音

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();
};

设置 git config --global core.autocrlf false 解决 prettier 检测LF问题

假如你正在 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 Response.body 属性

今天帮同事排查文件下载的问题,同事使用了fetch发送请求然后根据响应数据通过blob方式下载,下载的文件内容为[Object ReadableStream]

排查后发现使用fetch时Response.body跟使用axios时Response.data处理方式不一致。

Fetch API 教程

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支持搜索查询地址信息设置中心点

image

HBuilderX 运行到 Android App 基座提示找不到设备

问题描述

Android手机开发者选项已开启USB调试,但是HBuilderX未检测到手机设备。

解决方案

  1. 打开 HBuilderX 安装目录下的 plugins\launcher\tools\adbs
    image
  2. 备份该目录下三个文件(文件夹除外)。
  3. 把1.0.31目录下的文件拷贝到 adbs 目录下,直接覆盖即可。
  4. 重启 HBuilderX 即可检测到手机了

使用eslint-plugin-import解决windows系统import路径大小写不敏感问题

前言

最近一段时间出现很多前端工程本地运行无问题,发布后CI/CD打包报错的问题。查看后多数为import路径文件名大小写书写错误导致,在windows系统下文件名大小写不敏感。

image

解决方案

使用 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',
    },
};

第三步:执行yarn lint
image
image

rgb(0, 0, 0, 0.1) 在低版本 chrome 浏览器下无法被解析

问题描述

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方式)

问题来源

客户反馈系统导出列表迅雷下载失败。

问题分析

最新的导出组件使用了blob的下载方式,以往使用的是Form表单下载的方式,验证点:是否因为blob方式导致迅雷下载失败?

对比

浏览器绑定迅雷,验证Form表单下载和blob下载

  • Form表单下载,文件直接下载,不会触发迅雷下载
  • blob下载,触发迅雷下载,且文件下载失败

原因猜测

window.URL.createObjectURL(blob)创建的是一个指向内存的映射并不是一个真正的下载地址,故迅雷下载失败。

解决方案

考虑用户浏览器会默认绑定迅雷下载的情况,后续默认使用Form表单下载

nodejs 内存溢出

increase-memory-limit

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"
  }
// ...

TypeScript 问题总结

tsconfig.json 文件内部报错问题

JSON schema for the TypeScript compiler's configuration file

解决:
出现类似的问题,提示哪个文件无法写入,会覆盖输入文件,就将哪个目录添加到 exclude 属性里。

gulp编译css支持css modules

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;
}

将网站添加到iPhone的主屏幕上,并修改Logo,生成桌面App。

解决方案

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中打开网址

参考

  1. https://www.jianshu.com/p/1223adfc61ed

uni-app小程序下计算属性值变更为undefined,界面未刷新

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 || '';
        },
    }
}

入参提示 unable to decode value

image

测试本地无问题,nginx代理出现问题。解决方法

location / {
    charset utf-8;
    root  /Users/yemuguliunian/workspace/test/ylkh-frontend/dist/;
    index  index.html index.htm;
}

添加charset utf-8;

uni-app下图片路径 '/cloudFile/common/download/id' 编译为 './cloudFile/common/download/id'

问题描述

在uni-app下使用图片, src路径如果写/cloudFile/common/download/id,最终会被编译城 ./cloudFile/common/download/id。
如果最终的访问路径上代理pathname,最终图片地址可能会变为类似于https://kanbandev.cloudhw.cn:8446/kanban/cloudFile/common/download/id

解决办法

  • 如果web服务器是Nginx,则额外做一个代理
  • 小程序类的写绝对路径

使用 gulp-less 编译 @import (reference) '~antd/es/style/themes/index.less';

原文件

@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]);
});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.