我的GitHub

无星的小窝

估计也么的人看

0%

发表于 更新于 分类于 阅读次数：
本文字数： 2.6k 阅读时长 ≈ 2 分钟

重新添加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

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 155 阅读时长 ≈ 1 分钟

背景

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

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

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

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

TODO：未完待续。。。

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 2.2k 阅读时长 ≈ 2 分钟

背景

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

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

做开头标记

思路

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

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

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

举个🌰

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

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 4.5k 阅读时长 ≈ 4 分钟

背景

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

一.dart-sass，node-sass

使用dart-sass，废弃node-sass

二.Vue项目中色板的使用

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

例如：

src/styles/variables.scss

1
$moedu-background-color: #F5F7FA;

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

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 1.7k 阅读时长 ≈ 2 分钟

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

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

常驻分支

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

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

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

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

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

保护分支

master

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 16k 阅读时长 ≈ 14 分钟

背景

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

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

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

尽量通过数据驱动。

思路

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

1.基于UI框架封装

react我们基于antd封装。

vue我们基于element封装。

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 155 阅读时长 ≈ 1 分钟

想给开源社区贡献点代码（遇到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

完毕

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 6.4k 阅读时长 ≈ 6 分钟

背景

我们做的大量都是后台管理系统，对于这种系统，我们会发现，里面的业务其实相当单一

大量都是类似这种， 搜索条件，表格，分页

1

每个页面都要处理上下翻页，搜索，mounted加载首页table数据等等逻辑

虽然不复杂，但很累。

因此，我们需要封装一些DSL来降低我们的重复工作量

啥是CompositionAPI/hook

看看文档

我们的请求经过封装，大概是这种格式

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 2.4k 阅读时长 ≈ 2 分钟

背景

element-plus中，el-select中可选项达到了500条，页面跳转销毁时导致异常卡顿（vue3.0.0版本，3.0.11版本有很大改善，建议升级）

因此需要进行分页操作。初步设想时当select中的options滚动到最底部的时候，触发加载更多，获取更多的可选项。

实现方式

打算通过指令实现，这样添加就很方便，预期一个指令

1
v-loadmore="loadMore"

搜一下

正常情况下，我们碰到的100个需求，99个都已经有人实现过了，所以我们就只需要搜一哈，就能找到答案。

1.png

果不其然，答案异常的多，只不过都是element-ui的，不过改动不多，应该问题不大，让我们来试一试。

阅读全文 »

发表于 更新于 分类于 阅读次数：
本文字数： 5.1k 阅读时长 ≈ 5 分钟

记录一些我碰到的入门问题

1.如何创建ts项目

1
npx create-react-app app-name --template typescript

2.react+ts项目eslint如何引入

1
2
3
yarn add eslint --dev

npx eslint --init

选项如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? … 
❯ React
  Vue.js
  None of these

? Does your project use TypeScript? › No / Yes✔

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
  Node

? How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

? Which style guide do you want to follow? … 
❯ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google

? What format do you want your config file to be in? … (任选)
  JavaScript
  YAML
❯ JSON

? Would you like to install them now with npm? › No / Yes✔

npm下载完成以后，删掉package-lock.json，重新使用yarn去加载依赖

接着，以为已经使用airbnb规则，万事大吉

但是你会发现特别多奇奇怪怪的错误，比如

阅读全文 »