背景

因为要适配的设备有点多，经常性出现适配问题，单位又多的一批，烦死了

所以我决定从头来看，这些单位到底代表什么，和分辨率， 到底是个什么关系

我先放个移动端的iphone 设备表在这，再来分析

以下部分内容，我们拿iPhone 13这款机子举例子

物理像素

我们经常性会看到各种各样的分辨率

就如iPhone 13，我们都能看到两个分辨率

一个是分辨率像素 1170x2532

我看谁还不会装环境！

背景

最近新来的同事有点多，为了统一大家的开发环境和工具

专门写了环境安装文档，以供使用

所有命令，均在iterm2中输入

Mac常用信息介绍

有mac使用经验的用户可以跳过这一节

以前使用Windows的同学可以先看这一节

键盘

Windows 上常用的ctrl键，在mac上使用command键代替（简称cmd键）

背景

可能很多同学，看到环境变量就头痛，不知道怎么配，也不知道改什么

一旦要配置环境变量，就是上网到处翻，乱复制，出错了也不知道怎么排查

所以我打算就我的知识范畴，总结一下我在工作过程中，常用的环境配置和命令

如有不对，大佬们在评论区轻喷

我是用的是Mac，以下介绍大部分依据Mac和Linux，Windows老哥仅供参考

SHELL环境介绍

首先我们需要介绍一下SHELL环境

我们打开“终端”出现的黑框框里面的环境（也有的同学使用iterm2或者别的终端工具），管它叫SHELL环境

重新添加rootview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// SceneDelegate.swift

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        let tmpScene = (scene as? UIWindowScene)
        if ((tmpScene) != nil) {
            window = UIWindow.init(windowScene: tmpScene!)
            let viewCotroller = HomeViewController()
            let navigationViewController = UINavigationController.init(rootViewController: viewCotroller)
            navigationViewController.navigationBar.barTintColor = WXTools.ColorHex("#213241")
            window?.rootViewController = navigationViewController
            window?.makeKeyAndVisible()
        } else { return }
    }

布局从nav以下开始

1

self.navigationController?.navigationBar.isTranslucent = false

去掉nav下面的横线

1
2
3

//        去除下划线
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self.navigationController?.navigationBar.shadowImage = UIImage()

nav

1
2
3
4

// 状态栏高度
let statusBarHeight = UIApplication.shared.statusBarFrame.height
// nav高度
let navigationBarHeight = (navigationController?.navigationBar.frame.height)!

移除SceneDelegate

1.修改Info.plist

背景

很早就有这种需求，项目里封装好了组件，但是不知道怎么丢到npm库里

直接写vue文件丢到npm上，项目里好像也能直接用，但总觉的怪怪的

因为别人的库都是最后打包出来的js，不是vue文件

怎奈何一致不知道正规的的做法，webpack也不会用，babel也不懂，js也不精通，只能打打酱油，

TODO：未完待续。。。

背景

要求对git的message做限制，要求要以

['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'revert', 'types']:

做开头标记

思路

git存在hook，在每个步骤后面都会执行对应的🪝

因此我们可以考虑通过git hook去完成这项校验

实际上，在平时的开发过程中，就已经有于此相关的内容了，就是不知道同学们留意到没有

举个🌰

比如在Vue项目中，如果在创建项目中，选择了eslint，并选择了保存并格式化

背景

项目中总是遇到class取名难，样式到处定义，重复颜色到处写，代码切换烦得一批

一.dart-sass，node-sass

使用dart-sass，废弃node-sass

二.Vue项目中色板的使用

在全局css文件中，新建一个文件，放置各种scss变量

例如：

src/styles/variables.scss

1

$moedu-background-color: #F5F7FA;

配置vue.config.js,将整个变量文件注入

git分支管理模型挺多的，各种概念配图花里胡哨，对于初学者来说，看起来会比较累，可能理解不了。

我这里描述一下我个人是如何做分支管理的，有更好的方式或者建议欢迎评论区交流。

常驻分支

保持三个常驻分支对应三个环境

• master —— 生产
• develop —— 开发
• beta —— 测试

一般情况下，各个公司都会有着不同的几个环境用于各项研发工作

名称大同小异，我这里截取几个比较常见的环境名称，分别对应生产，测试，开发

各位有几个环境，一般可以对应几个常驻分支

保护分支

master

背景

我们做的是后台类型的管理系统，因此相对应的表单就会很多。

相信做过类似项目的老哥懂得都懂。

因此我们希望能够通过一些相对简单的配置方式生成表单，不再需要写一大堆的组件。

尽量通过数据驱动。

思路

不管是哪个平台，思路都是相通的。

1.基于UI框架封装

react我们基于antd封装。

vue我们基于element封装。

想给开源社区贡献点代码（遇到bug了）

文档启动

1
2
3
4

git clone 
yarn
yarn bootstrap
yarn website-dev

代码改动

1
2
3

git clone 
yarn
yarn bootstrap

/website/play下新建一个index.vue
填写调试代码

1

yarn website-dev:play

完毕