工作中遇到的问题记录

前端工作

更新于：2021年1月20日 12:09

字数：1.9k字

时长：8分钟

次浏览

这篇文章记录了我工作中遇到的一些困难以及解决方法。

Vue

滚动穿透

@touchmove.stop

React

react-router-dom 中的switch：https://segmentfault.com/a/1190000022444683
localstorage和sessionstorage生命周期

useEffect中使用async await

useEffect(() => {
  (async () => {
    await xxx
  })();
}, []);

CSS

pre不能换行的问题

pre {
  white-space: pre-wrap;
    word-break: break-all;
}

待学习

git的fast-forword
cherry-pick
github fork

mac使用以及vscode技巧

快捷键

touch 创建文件
open 打开文件
ctrl+space切换输入法
F11显示桌面
ctrl+↑/↓
command + shift + 。显示隐藏文件

vscode快捷键

移动光标到行首或者行尾：command+方向键
以单词未维度移动光标：option++方向键
选中文本：上述操作+shift
vscode多行注释option+shift+A
代码块折叠ctrl+shift+[
返回上一位置 Alt + ‘←’

软件

命令行工具iTerm2

mpvue

生命周期

created生命周期在微信的app创建时就被触发了（onLaunch），不管该页面有没有被访问，尽量不使用created
页面返回上一级页面会触发onUnload，但是并不会销毁vue实例，即不会触发destroyed生命周期

生命周期触发顺序(首次进入页面时)

onLoad
onShow
onReady
beforeMount
自定义组件created
自定义组件mounted
mounted

非首次进入页面(组件不再会进行created和mounted)
```
onLoad
onShow
onReady
beforeMount
mounted
```
由于页面不会销毁，导致data中的数据不会清楚，具体查看下面图片

`mpvue-echarts`

mpvue-echarts

<template>
  <div class="container">
    <div class="echarts-wrap">
      <mpvue-echarts :echarts="echarts" :onInit="initChart" canvasId="demo-canvas" ref="radar"/>
    </div>
  </div>
</template>

<script>
let chart = null
import * as echarts from '../utils/echarts.min.js'
import mpvueEcharts from 'mpvue-echarts'
export default {
  components: {
    mpvueEcharts
  },
  data: {
    echarts,
    radarValue: [],
    radarInit: 0
  },
  onUnload() {
    this.resetData()
  },
  async onLoad() {
    this.initRadar()
  },
  methods: {
    initRadar() {
      if (this.radarInit === 1) {
        let option = {
          radar: [
            {
              indicator: [
                { text: '体能耐力', max: 100 },
                { text: '平衡感', max: 100 },
                { text: '协调性', max: 100 },
                { text: '力量', max: 100 },
                { text: '柔韧性', max: 100 }
              ],
              center: ['50%', '50%'],
              radius: 99,
              startAngle: 90,
              splitNumber: 5,
              shape: 'circle',
              name: {
                formatter: '{value}',
                textStyle: {
                  color: '#4A4A4A'
                }
              },
              splitArea: {
                areaStyle: {
                  color: [
                    '#fffced',
                    '#fffced',
                    '#fffced',
                    '#fffced',
                    '#fffced'
                  ]
                }
              },
              axisLine: {
                symbol: 'circle',
                symbolSize: [5, 5],
                lineStyle: {
                  color: '#FFBF12'
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#FFBF12'
                }
              }
            }
          ],
          series: [
            {
              name: '雷达图',
              type: 'radar',
              emphasis: {
                lineStyle: {
                  width: 1,
                  color: '#7ED321'
                }
              },
              data: [
                {
                  value: [75, 75, 75, 75, 75],
                  name: '标准值',
                  symbol: 'rect',
                  symbolSize: 5,
                  areaStyle: {
                    color: '#D2E986'
                  },
                  lineStyle: {
                    color: '#7ED321'
                  },
                  itemStyle: {
                    opacity: 0
                  }
                },
                {
                  // 需要动态修改的值
                  value: this.radarValue,
                  name: '孩子值',
                  areaStyle: {
                    color: '#F8C01C'
                  },
                  lineStyle: {
                    color: '#FF9F00'
                  },
                  itemStyle: {
                    opacity: 0
                  }
                }
              ]
            }
          ]
        }
        // 在这里改变option的值
        // option.xxx = 'xxx'
        chart && chart.setOption(option)
      }
    },
    resetData() {
      this.radarValue = []
    },
    initChart(canvas, width, height) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      // 用于解决echarts初始化晚于onLoad生命周期
      this.radarInit = 1
      this.initRadar()
      return chart // 返回 chart 后可以自动绑定触摸操作
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>

其他

mpvue获取页面传递参数this.$root.$mp.query在created中获取不到，可以在mounted中获取
分包中引用第三方库导致主包体积过大，解决方案webpack打包时将三方库打包到分包中

关键代码(使用了CopyWebpackPlugin插件)

// webpack.base.config.js
new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../src/pages/child-evaluation/static'), // 分包中资源的路径
    to: path.resolve(config.build.assetsRoot, './pages/child-evaluation/static'), // 打包后的分包对应的路径
  }
])

iPhoneX底部黑条兼容，通过wx.getSystemInfo()获取机型判断，对iPhoneX底部加上margin来兼容

关键代码：

const modelmes = wx.getStorageSync('modelmes')
this.isIphoneX = modelmes.search('iPhone X') !== -1

Docker

命令

docker image ls查看image列表
docker image build -t <tagname> .build image
docker rmi -f <imageId> 移除image
docker run -e var=var -p 3000:3000 --build-arg API_ENV=development <imagename>:<tagname>运行

Dockerfile书写示例

# node版本号
FROM node:12-alpine

# docker build时传进来的值 docker image build -t <name> --build-arg API_ENV=development .
ARG API_ENV

RUN echo ${API_ENV}

ENV NEXT_PUBLIC_API_ENV=${API_ENV}

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package*.json /usr/src/app/
RUN npm install

# Bundle app source
COPY . /usr/src/app

RUN npm run build
EXPOSE 3000

CMD [ "npm", "run", "start" ]

ReactNative

H5调起APP

ios配置：在xcode中配置，info—>URL Types，或者配置Universal Links可以直接调起APP

Android：通过scheme来调起APP

puppeteer

截图模糊

await page.setViewport({
    width: 375,
    height: 1334,
    deviceScaleFactor: 3 // 默认是1
});

html2canvas使用

遇到的坑

textarea无法换行，使用了@nidi/html2canvas

ios截图图片元素()没有截图成功

html2canvas(document.getElementById('poster-content'), {
  onclone: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve();
      }, 400);
    });
  }
}).then((canvas) => {
  canvas.toDataURL('image/png');
});

IOS13.x版本无法使用

安装 v1.0.0-rc.4版本

配置alias

修改jsconfig文件

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"],
        }
    },
    "exclude": [
        "node_modules"
    ]
}

环境处理

npm install --save-dev cross-env

cross-env 用于处理不同平台问题（例如mac和windows）

  "scripts": {
    "serve": "vue-cli-service serve",
    "devbuild": "cross-env NODE_ENV=development vue-cli-service build",
    "build": "cross-env NODE_ENV=production vue-cli-service build"
  },

创建文件用于处理不同环境下的api

export default {
  "production": {
    xxx: "正式环境域名",
  },
  "development": {
    xxx: "测试环境域名",
  } 
}

使用

import baseURLConfig from '配置文件'
Vue.prototype.baseURL = baseURLConfig[process.env.NODE_ENV].xxx

移动端适配

postcss-px-to-viewport

在根目录下新建文件postcss.config,js

module.exports = {
  plugins: {: {},
    'postcss-px-to-viewport': {
      // 视窗的宽度，对应的是我们设计稿的宽度，我们公司用的是375
      viewportWidth: 375,
      // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      // viewportHeight: 1334,
      // 指定`px`转换为视窗单位值的小数位数
      unitPrecision: 3,
      // 指定需要转换成的视窗单位，建议使用vw
      viewportUnit: 'vw',
      // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      selectorBlackList: ['.ignore'],
      // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      minPixelValue: 1,
      // 允许在媒体查询中转换`px`
      mediaQuery: false
    }
  }
}

移动端保存图片到本地

https://www.cnblogs.com/zhangkaiqiang/p/8183926.html

nvm管理多node版本

https://github.com/coreybutler/nvm-windows/releases

切换镜像源：npm_mirror: https://npm.taobao.org/mirrors/npm/
https://cloud.tencent.com/developer/article/1812323

常用命令

nvm list
nvm list available
nvm install [node 版本号]
nvm use [node 版本号]

react中使用defaultProps

https://stackoverflow.com/questions/37282159/default-property-value-in-react-component-using-typescript

多仓库的问题

如果一个项目引用了私有的组件库，那么在组件库修改后需要重新发布npm并在项目中更新版本才能调试。使用npm link可以解决这个问题。

typescript相关

动态设置state值时typescript类型推导问题：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/26635

`git` 回退上次的 `commit`

git reset --soft HEAD^

git文件大小写被忽略的问题

git config core.ignorecase false

node-sass 安装问题

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

html email

由于不同邮件客户端对 css 的兼容性不同，导致 css 很多属性不能使用，css 兼容性查询 campaignmonitor caniemail
有些客户端不支持 <head><style></style></head>，所以样式使用行内样式，转化工具转化工具
可以使用 nodemailer 来测试发送效果
使用 <table> 完成，毒瘤 outlook 😒
可视化工具

https://stackoverflow.design/email/base/mso/
https://www.emailonacid.com/blog/article/email-development/which-code-should-i-include-in-every-email/