10-8

1 uniapp上传文件到七牛云

注意：uniapp不是browser环境，所以无需将文件转化为blob

uni.uploadFile 会将文件转化去上传

upload(imgPath, token) {
  return new Promise((resolve, reject) => {
    if (!imgPath) {
      return reject('Invalid imgPath')
    }
    if (!token) {
      return reject('Invalid token')
    }

    uni.uploadFile({
      url: 'https://up-z2.qiniup.com',
      name: 'file',
      filePath: imgPath,
      header: {
        'Content-Type': 'multipart/form-data',
      },
      formData: {
        token, //后端返回的token
      },
      success: resolve,
      fail: reject,
    })
  })
}

[1][uni-app 七牛云上传文件](https://blog.51cto.com/u_13526952/2720164)

[2][uniapp微信小程序上传图片到七牛（node）](https://www.jianshu.com/p/c01be135604b)

2 pag在ios端无法正常播放

需要解码器

[1][web端腾讯PAG初体验](https://juejin.cn/post/7108928632331976718)

[2] https://pag.art/docs/web-sdk/play.html

3 url2blob

通过url去生成blob

[1][How to get a file or blob from an object URL?](https://stackoverflow.com/questions/11876175/how-to-get-a-file-or-blob-from-an-object-url)

4 Parsing error: No Babel config file detected

I had the same issue and this change fixed the issue. In your .eslintrc.js file, add requireConfigFile: false

parserOptions: {
  parser: '@babel/eslint-parser',
  requireConfigFile: false, // <== ADD THIS
  ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
  sourceType: 'module' // Allows for the use of imports
}

[1][Parsing error: No Babel config file detected](https://stackoverflow.com/questions/71501892/parsing-error-no-babel-config-file-detected)

6 tsconfig.json 报错 无法写错写入文件 ，因为他会覆盖输入文件是怎么回事？

两个关键点：

1. compilerOptions 下面配置"outDir": "./"
2. 在exclude里面添加需要忽略的目录

[1][tsconfig.json 报错 无法写错写入文件 ，因为他会覆盖输入文件是怎么回事？](https://segmentfault.com/q/1010000019980246)

7 sass和scss

scss是简写

8 BEM规范

BEM(Block Element Modifier) 是一种命名CSS class的模式，使用这种模式可以让 CSS 代码更加利于维护。标准的 BEM 写法是 .block-name__element-name--modifier-name。

名称	描述	示例
block	页面上逻辑和功能独立的	class="header"
element	组成块的一部分，内部的任何元素都与块有关联，不能在块的外部使用	class="article__title"
modifier	用来表示块或者元素的状态，外观或者行为，不必须，可以选择使用	class="btn btn--disabled"

常用CSS class名

包裹类： container, wrapper, outer, inner, box, header, footer, main, content, aside, page, section, block

组件类： card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog

尺寸类： large, middle, small, bigger, smaller

位置类： first, last, current, prev, next, forward, back

文本类： title, desc, content, date, author, category，label，tag

人物类： avatar, name, age, post, intro

状态类： primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading

[1][BEM命名规范入门及常用CSS class 命名](https://juejin.cn/post/6844903601127555085)

[2][CSS 命名规范总结](https://jiandanxinli.github.io/2016-08-11.html)

9 CSS实现带小箭头气泡

.tip {
  position: fixed;
  bottom: 19px;
  right: 32px;
  width: 100px;
  height: 40px;
  background: #fff;
  box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
}
.tip::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 14%;
  display: block;
  width: 0;
  height: 0;
  border-radius: 4px;
  border: 8px solid transparent;
  border-right-color: #fff;
  border-bottom-color: #fff;
  transform: scaleX(0.8) rotate(45deg);
}

[1][CSS实现带小箭头气泡](https://codeantenna.com/a/0tTeOXpwNO)

10 前端Mock数据

mockjs 能否自动拦截 axios 数据

// setup-mock.ts
const debug = true

export default ({ mock, setup }: { mock?: boolean; setup: () => void }) => {
  if (mock !== false && debug) setup();
};

export const successResponseWrap = (data: unknown) => {
  return {
    data,
    status: 'ok',
    msg: '请求成功',
    code: 20000,
  };
};

export const failResponseWrap = (data: unknown, msg: string, code = 50000) => {
  return {
    data,
    status: 'fail',
    msg,
    code,
  };
};

// mock-user.ts
import Mock from 'mockjs';
import setupMock, {
  successResponseWrap,
} from './setup-mock';

Mock.setup({
  timeout: '600-1000',
});

setupMock({
  setup() {
    // Mock.XHR.prototype.withCredentials = true;

    // 用户的服务端菜单
    Mock.mock(new RegExp('/api/user/menu'), () => {
      const menuList = [
        {
          path: '/dashboard',
          name: 'dashboard',
          meta: {
            locale: 'menu.server.dashboard',
            requiresAuth: true,
            icon: 'icon-dashboard',
            order: 1,
          },
          children: [
            {
              path: 'workplace',
              name: 'Workplace',
              meta: {
                locale: 'menu.server.workplace',
                requiresAuth: true,
              },
            },
            {
              path: 'https://arco.design',
              name: 'arcoWebsite',
              meta: {
                locale: 'menu.arcoWebsite',
                requiresAuth: true,
              },
            },
          ],
        },
      ];
      
      return successResponseWrap(menuList);
    });
  },
});

11 小程序上传文件

import { UPLOAD_URL } from '../env/index'
import { HttpResponseBaseSync } from './api'

type Options = {
  type: 'sign' | 'perfect' | 'fail' | 'other'
  success?: (data: HttpResponseBaseSync<UploadRes[]>) => void
  fail?: (err: any) => void
}

type UploadRes = {
  destination: string
  encoding: string
  fieldname: string
  filename: string
  mimetype: string
  originalname: string
  path: string
  requestUrls: string[]
  size: number
}

function upload(file: any, { success, fail, type }: Options) {
  const token = wx.getStorageSync('token')

  const url = (UPLOAD_URL as any)[type]

  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  wx.uploadFile({
    url,
    filePath: file.url,
    header: {
      Authorization: `Bearer ${token}`,
    },
    name: 'file',
    success(res) {
      const data: HttpResponseBaseSync<UploadRes[]> = JSON.parse(res.data)
      success && success(data)
    },
    fail,
  })
}

export { upload }

[1][微信小程序上传图片Demo](https://blog.csdn.net/weixin_45356397/article/details/107212186)