移动端开发思考

Git commit前eslint自动检查代码质量

package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,vue}": [
    "npm run lint"
  ]
},

.eslintrc.js


vue/jsx页面是如何适配不同手机

postcss-pixel-to-viewpor：它是一个利用JS插件来对CSS进行转换的工具，将px单位自动转换成viewport单位

配置 Postcss.config.js

module.exports = {
    plugins: [
        // require('./webpack-local-plugins/postcss-plugin-border-1px'),
        require('autoprefixer')({
            browsers: ['last 5 version', 'Android >= 4.0'],
            // 是否美化属性值 默认：true
            cascade: true,
            // 是否去掉不必要的前缀 默认：true
            remove: true
        }),
        require('postcss-pixel-to-viewport')({
            viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            propertyBlacklist: ['.ignore'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            enableConvertComment: 'on',
            disableConvertComment: 'off',
            mediaQuery: false
        })
    ]
}; 


效果

.class {
  margin: -10px .5vh;
  padding: 5vmin 9.5px 1px;
  border: 3px solid black;
  border-bottom-width: 1px;
  font-size: 14px;
  line-height: 20px;
}

### after build

.class {
  margin: -3.125vw .5vh;
  padding: 5vmin 2.96875vw 1px;
  border: 0.9375vw solid black;
  border-bottom-width: 1px;
  font-size: 4.375vw;
  line-height: 6.25vw;
}

组件样式覆盖

由于交互设计是明确的，引入组件需要做全局或者局部样式覆盖

组件二开

尺寸兼容性、安卓ios兼容性、版本过低

高度、宽度尽量使用vh、vw来处理

string replace vs replaceAll (String.prototype.replaceAll() 方法是在ES2021/ES12中被加入)

ios企业微信用的ios系统自带的WKWebview

Android的是tbs x5

mac版的微信浏览器内核是系统的safari

windows版cef核心浏览器版本是Chromium框架53

ios特有的底部横条兼容，不处理会导致页面与底部重叠

/*兼容iosx + */
    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/


按需引入组件库组件

elementUI仅引入upload组件

jsx双刃剑

Good: 逻辑、代码结构类似后端容易理解等；

Bad: 组件库demo都用