`CI`（Continuous Integration）持续集成和`CD`（Continuous Delivery）持续交付，`CD`还有一种称谓：持续部署。

它的理念：让开发人员更加专注于业务代码的开发，通过自动化流程完成代码单元测试、集成测试、合并、打包、部署等流程。

合理全面的CI/CD，自动化研发流程，提高研发效率，增加系统稳定性

我了解的关于前端CICD流程方案有3种
1. `pm2` 它不仅可以执行本地命令，还可以连接服务器、执行命令、监控项目等
2. `Github Actions`
3. [Travis CI](https://www.ruanyifeng.com/blog/2017/12/travis_ci_tutorial.html)

CICD流程的搭建需要先了解linux shell脚本、npm、机票、ssh免密登陆相关知识。<br>

其实`Github Actions`配置很简单，关键配置前的准备工作
1. 服务器要实现准备好node环境git环境
2. 本地生成公私钥并开启ssh代理
3. github配置公钥，这样可以免密拉取代码
4. 服务器也要生成公私钥，并在github 配置公钥，这样在服务器上可以执行git相关命令时免密操作。在讲解`Github Actions`CICD方案

本文将依次讲解上述内容，然后再带你配置`Github Actions`，打通CICD流程



# 服务器准备工作
由于我选择的腾讯云ubuntu系统默认已经安装了git环境，我就不折腾了。

但是node版本太旧了，我决定使用nvm安装到16版本

## 通过nvm安装node
nvm 的安装 [官方文档](https://github.com/nvm-sh/nvm#install--update-script) <br>
第一步 让我下载脚本并执行即完成安装`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash`<br>
第二步 配置环境变量
- `vi ~/.bashrc` 增加以下内容
```bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
```
使配置生效`souce .bashrc`<br>
然后执行 `nvm install 16` && `nvm use 16`
![image.png](https://blog.warmplace.cn/static/img/16e4f2115b7953cf14cec72d02c307fc.image.webp)

考虑我的服务器配置很低（硬盘空间少），且后面再服务器打包，我采用`pnpm`包管理器
安装很简单，一个命令搞定`npm install -g pnpm `

但是没有那么顺利 `curl` 下载文件需要机票, 我想到了 `clash`这个代理工具和 [speed17.com](https://speed17.com)这个机场

## 科学上网
第一步先要下载`clash`这个代理工具， 按照[这篇教程](https://fanqiang.gitbook.io/fanqiang/linux) 在github找到[对应的版本](https://github.com/Dreamacro/clash/releases/tag/v1.18.0)通过`wget`命令下载<br>
```bash
wget -O clash.gz https://github.com/Dreamacro/clash/releases/download/v1.18.0/clash-linux-amd64-v1.18.0.gz
```
下载这个文件同样需要机票😂 ，我是在本地电脑下载，然后通过`scp`命令上传到服务器

第二步下载`clash`的配置文件，也就是机票，我以前买过了，按照[放心云的教程](https://speed17.com/#/knowledge) 点击linux文档，我下载了`clash.yaml`, 与之前的`clash`放在同一个目录，

然后执行 `./clash -f clash.yaml &` 后台启动服务

如果想关闭 可以通过 `lsof -i`查询到进程id， 然后`kill -9`杀死集成，它的默认端口是7890

![image.png](https://blog.warmplace.cn/static/img/932bc385ed32f7c2ef821b98455a8375.image.webp)

![image.png](https://blog.warmplace.cn/static/img/80bb84556d2e22bd4fd5987cb1343819.image.webp)

第三步是命令行开启代理 `export ALL_PROXY=socks5://127.0.0.1:7890`<br>
可以通过`curl -vv https://www.google.com` 验证机票是否有效

注意该`export`命令只在当前窗口有效，如果你要永久有效可以写入`.bashrc`文件

机票有了， 第一步的nvm安装才能顺利进行。

补充: [clash官方文档](https://dreamacro.github.io/clash/zh_CN/)

## ssh免密登陆
关于免密登陆参考我的[这篇文章](https://www.yuque.com/guojw/operation/ykbgyn#5R2Fj)， 这里就不重复写了

我这里已经配置好了

![image.png](https://blog.warmplace.cn/static/img/fcaca12912044c56d4187ec6bbb377d4.image.webp)

本地拉去代码服务器拉去代码都正常

![image.png](https://blog.warmplace.cn/static/img/fccb4288d6a60d1ef8cfc9c3ee7129a5.image.webp)

补充个小知识点，由于我骚操作 修改了home目录权限，导致ssh免密登陆失效，参考
[ssh免密登陆失败原因](https://juejin.cn/s/ssh%E5%85%8D%E5%AF%86%E7%99%BB%E5%BD%95%E5%A4%B1%E8%B4%A5%E5%8E%9F%E5%9B%A0) 解决了


这里先说一下我的思路，先梳理总总总结 `GithubActions` 最常用和基本功能，然后写一个相对完善的`CICD`案例。

# GithubActions功能简介
1. 持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。`GitHub` 把这些操作就称为 `actions`。
2. 这些操作在不同项目很类似，`GitHub` 注意到了这一点，让`actions`之间可以相互集成
    - [官方市场](https://github.com/marketplace?type=actions) [awesome actions 的仓库](https://github.com/sdras/awesome-actions)
    - `actions`基本使用
    - `actions/setup-node@74bc508` # 指向一个 commit
    - `actions/setup-node@v1.0`    # 指向一个标签
    - `actions/setup-node@master`  # 指向一个分支
3. 基本概念
    - `workflow` （工作流程）：持续集成一次运行的过程，就是一个 `workflow`
    - `job` （任务）：一个 `workflow` 由一个或多个 `jobs` 构成，含义是一次持续集成的运行，可以完成多个任务。
    - `step`（步骤）：每个 `job` 由多个 `step` 构成，一步步完成。
    - `action` （动作）：每个 `step` 可以依次执行一个或多个命令（`action`）

来看一个案例
```yml
name: test # 任务名称， 不写取配置文件名称

# on什么时候触发
# 当往main分支push代码的时候触发。
# paths表示限定为哪里内容改动触发，里面是glob语法
on:
    push:
        branches:
            - main
        paths:
            - '.github/workflows/**'
            - '__test__/**'
            - 'src/**'


jobs: # 定义任务
    test: # 定义名为test的任务
        runs-on: ubuntu-latest # 改任务的运行环境
        steps: # 任务包含一组action，以"-"开头的就是一个任务
            - name: Use Node.js # 任务名称
              uses: actions/setup-node@v1 # 继承别人写好的action
              with: # 使用该action所需参数
                  node-version: 14
            - name: lint and test
              # run 定义要执行的脚本
              run: |
                  npm i
                  npm run lint
                  npm run test:remote
```


4. workflow 文件<br>
`GitHub Actions` 的配置文件叫做 `workflow` 文件，存放在代码仓库的`.github/workflows`目录。<br>
`workflow` 文件采用 YAML 格式<br>
关于`YAML` 格式相比`JSON`格式来说更简洁（使用锁进表示层级）和强大（可以设置锚点、引入、拍平数据、组合效果），[更多关于yaml参考这里](https://www.ruanyifeng.com/blog/2016/07/yaml.html)

`workflow`的常用配置字段
- `on` 触发的条件，通常是某些条件 如`push`、`pull_request` 也支持外部事件和定时任务，更多参考[官方文档](https://help.github.com/en/articles/events-that-trigger-workflows)
- `on.<push|pull_request>.<tags|branches>` 限定事件触发的条件，是分支或标签
- `jobs.<job_id>` 定义事件默认并行 可通过`needs`表示依赖关系，如实现串行
来看一个jobs串行示例
```yml
jobs:
  job1:
  job2:
    needs: job1
  job3:
    needs: [job1, job2]
```
- `jobs.<job_id>.runs-on` 限定运行环境
- `jobs.<job_id>.steps` 定义`jobs`的运行步骤,来看个示例
```yml
jobs:
  my-job: 
    name: My Job # 事件名称
    runs-on: ubuntu-latest # 限定运行环境
    steps: # 运行步骤 有 name env run 三个字段
    - name: Print a greeting # 步骤名称，打印使用
      env: # 定义变量
        MY_VAR: Hi there! My name is
        FIRST_NAME: Mona
        MIDDLE_NAME: The
        LAST_NAME: Octocat
      run: | # 运行脚本   |表示多行文本
        echo $MY_VAR $FIRST_NAME $MIDDLE_NAME $LAST_NAME.
```
考虑到服务器IP、账号、密码相关私密信息，github提供配置界面，配置以后不显示value，只能覆盖或删除。如下图我的配置


![image.png](https://blog.warmplace.cn/static/img/c4e4eb569073869e94d614b8173b3936.image.webp)

`workflow`文件的模版可以在`github`上生成
<img src='https://blog.warmplace.cn/static/img/4b33391a5b2bc643c9457bb69e97125c.image.webp' width=400>

你可以把我这段内容放进去，文件名随意，我取名`ci.yml`
- `ci.yml`
```yml
name: test ssh command
on:
  push:
    branches:
      - main
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: executing remote ssh commands using password
        uses: appleboy/ssh-action@v1.0.0
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
          script: cd /home/ubuntu/github && echo hello >> b.txt
```
上述代码 就登录了一下我的服务器，往`b.txt`文件（没有会创建）追加写入`hello字符串`。<br>
`appleboy/ssh-action`是别人写好的一个`action` 通过ssh连接服务器的。

当你`push`到`main`分支时候已经触发`workflow`任务执行， 我的执行结果如下

![image.png](https://blog.warmplace.cn/static/img/7593e7217f812d1c29a3ecf0315f3f61.image.webp)

现在我去登录一下我的服务器看看

![image.png](https://blog.warmplace.cn/static/img/39c5f094dc14d1eb1a649d798d02fa91.image.webp)

`scipt`脚本是可以定制的，如执行`git pull`、`pnpm install`、`npm run build`、发布、发送邮件通知等等，至此恭喜你已完成`Github Actions`的入门

# 完整案例
我这边准备了一个小项目 [CICD-demo](https://github.com/guojingwen/CICD-demo)

[点击这里](https://static.warmplace.cn/cicd.mp4)可以看一下我实现的效果
<iframe src='https://static.warmplace.cn/cicd.html' width=712 height=430></iframe>

我的`workflow`配置如下
- `ci.yml`
```yml
name: test ssh command
on:
  push:
    branches:
      - main
    paths:
      - '.github/workflows/**'
      - 'tests/**'
      - 'src/**'
      - 'config/**'
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: executing remote ssh commands using password
        uses: appleboy/ssh-action@v1.0.0
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
          script: |
            cd /home/ubuntu/github/CICD-demo &&
            git pull &&
            pnpm i &&
            npm run build &&
            cp -r ./dist/*  /home/ubuntu/myDockerFiles/nginx/html/static/CICD-demo
```

补充： 关于demo中功能 请看我的另一片文章[前端代码规范](https://blog.warmplace.cn/post/specification)

使用GithubActions实现CICD流程

本文梳理了jest比较核心的知识点 监听模式、配置文件、匹配器、异步函数测试、接口测试、接口mock、内置钩子等内容。


前端测试在前端工程化中的作用毋庸置疑，主流JavaScript框架或类库无一例外都用单元测试。

# 为什么选择Jest
老牌主流前端框架有
- Jasmine
- Mocha+chai
- Jest
相对而言 从性能、功能、易用性三个角度考虑，Jest更流行一些，但是单元测试框架都差不多，会其中一个其他的框架也基本会了。

Jest的优势
- 速度快
- API简单
- 易配置
- 隔离性好
- 监控模式
- IDE整合
- Snapshot
- 多项目并行
- 覆盖率
- Mock丰富


先看了案例体味一下单元测试
```js
function add(a, b) {
  return a - b;
}

function test(desc, fn) {
  try {
    fn();
    console.log(`${desc}没有通过测试`);
  } catch (e) {
    console.error(e);
    console.log(`${desc}没有通过测试`);
  }
}

function expect(result) {
  return {
    toBe(actual) {
      if (result !== actual) {
        throw new Error(`预期值与实际值不符合 预期: ${actual} 实际: ${result}`);
      }
    },
  };
}
test("3 + 3 = 6", () => {
  expect(add(3, 3)).toBe(6);
});
```

# 入门案例
1. jest默认支持CommonJS
2. `npx jest`默认执行`**/*.test.js`文件

来看一个示例
```js
// math.js
function add (a, b) {
  return a+b
}
function minus(a,b) {
  return a-b
}
module.exports = {
  add,
  minus
}

// math.spec.js
const math = require("./math");
const { add, minus } = math;
test("3+7", () => {
  expect(add(3, 7)).toBe(10);
});
test("7-3", () => {
  expect(minus(7, 3)).toBe(4);
});
```
- `npm i jest`
- 执行 `npx jest` 或配置 `package.json`的script字段 `"test": "jest"` 执行`npm run jest`

![image.png](https://blog.warmplace.cn/static/img/5d03ef680dde369bef5ece195e765638.image.webp)

# ESM支持
我如我们编写ESM模块时， 执行`npm run jest`会报错，jest认识 `import`、`export`, 需要配置babel
1. `pnpm i @babel/core @babel/preset-env`
2. 配置 `babel.config.js`
```js
module.exports = {
  presets: ["@babel/preset-env"],
};
```
3. 准备代码
- `math.js`
```js
export function add(a, b) {
  return a + b;
}
export function minus(a, b) {
  return a - b;
}
```
- `math.spec.js`
```js
import { add, minus } from "./math";

test("3+7", () => {
  expect(add(3, 7)).toBe(10);
});
test("7-3", () => {
  expect(minus(7, 3)).toBe(4);
});
```

再次执行 `npm run jest` ok

其实jest跟webpack一样，你不写配置文件，它会使用内置的配置文件`jest.config.js`, 内置配置默认集成了`babel-jest`， 所以它会寻找babel的配置文件。

# 配置文件
通过`npx jest --init`的方式生成配置文件

![image.png](https://blog.warmplace.cn/static/img/4985a1be87b1d7bbe67222ba0a7ad4ec.image.webp)
我选择了 浏览器环境、支持TS、需要覆盖率

需要安装一些依赖  
<img width=300 src='https://blog.warmplace.cn/static/img/516ceb6de316b09b816613847ac65168.image.webp'>

其中`jest-environment-jsdom`是执行`npx jest`提示要安装的

`babel.config.js`配置文件内容如下
```js
module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-typescript"],
};
```

将`math.js`和`math.spec.js`两个文件更名为ts文件， 执行`nxp jest`跑通了脚手架

![image.png](https://blog.warmplace.cn/static/img/b8b660efc55156831b58a798c2abdb41.image.webp)

生成覆盖率文件

执行`npx jest --coverage` 结果与上图相同，还会生成 `coverage`文件夹， `coverage`文件夹 是有配置 `coverageDirectory` 字段决定的

运行 `coverage/lcov-report/index.html`

![image.png](https://blog.warmplace.cn/static/img/3a80b100a9e00f7f154a2ef25a881c2d.image.webp)


# 配置监听
该一下代码执行一下命令效率太低了，开发模式下可以通过 `npx jest --watch` or `npx jest --watchAll`的方式监听文件改动然后执行测试用例。

但是并不顺利

![image.png](https://blog.warmplace.cn/static/img/310ab90a28ecafdea7a8b1e518f082d4.image.webp)


因为监听有个前提，必须是`git`项目或已使用`watchman`监听了本项目， 
我配置了`git`， 还是不通， 我尝试通过`watachman`的方式， 但是监听不了本文件，折腾一番从[github issure找到原因](https://github.com/facebook/watchman/issues/977)，需要将项目移除Document目录和Download目录（两个坑我都踩了😂）。  终于跑起来了。


![image.png](https://blog.warmplace.cn/static/img/a76519d22db00b5d92f4a29549f34968.image.webp)

这里有一些模式
- `f` 只执行失败的测试用例
- `o` 只执行改动的文件相关测试用例 即 `--watch`
- `p` 根据文件或正则过滤要执行的测试用例
- `t` 根据根据test名过滤要执行的测试用例
- `a` 执行所有的测试用例 即 `--watchAll`

一般我们使用`npx jest --watch`, 如果测试用例比较多， 我们进入`f`，这些技巧能提高我们的开发效率

# 匹配器
```js
test("toBe匹配器", () => {
  // toBe 相当于 Object.is()
  expect(10).toBe(10);
});

test("toEqual 匹配对象", () => {
  const obj = {
    name: "zs",
  };
  expect(obj).toEqual({
    name: "zs",
  });
});

test("基本类型 匹配", () => {
  expect(null).toBeNull();
  expect(undefined).toBeUndefined();
  expect(1).toBeDefined();
  expect(" ").toBeTruthy(); // 匹配truthy类型
  expect("").toBeFalsy(); // 匹配falsy类型 0 false ''
  expect("").not.toBeTruthy(); // 匹配falsy类型
});

test("数字相关 匹配", () => {
  expect(10).toBeGreaterThan(9);
  expect(11).toBeLessThanOrEqual(11);
  // 因浮点运算愿意 0.1 + 0.2 !== 0.3
  expect(0.1 + 0.2).toBeCloseTo(0.3);
});

test("string相关 匹配", () => {
  expect("asdfdf1122").toMatch("11");
});

// Array Set
test("Array Set 匹配", () => {
  expect([1, 2]).toContain(2);
  const set = new Set([1, 2]);
  expect(set).toContain(1);
});

// 异常
const throwError = () => {
  throw new Error("this is error");
};
test("toThrow 匹配", () => {
  expect(throwError).toThrow();
  //   expect(throwError).not.toThrow();
  expect(throwError).toThrow("this is error");
  expect(throwError).toThrow(/this is error/);
});
// 注意：以上代码没有注释的代码都是测试用例通过的，相反都是不通过的
```

# 异步函数测试接口测试
1. 准备
- `async.ts`
```ts
import axios from "axios";

//  cd api/ && http-server --cors
export const fetchData = (fn) => {
  axios.get("http://localhost:8080/1.json").then((res) => fn(res.data));
};

export const fetchDataPromise = () => {
  return axios.get("http://localhost:8080/1.json").then((res) => res.data);
};
export const fetch404Promise = () => {
  return axios.get("http://localhost:8080/404.json").then((res) => res.data);
};
```
接口准备
- `1.json`
```json
{
    "success": true
}
```
- 命令行执行`cd api/ && http-server --cors`

2. 异步函数测试的3种方法
```js
import { fetchData, fetch404Promise, fetchDataPromise } from "./async";

// 方法1
test("fetchData", (done) => {
  fetchData((data) => {
    // console.log(data);
    expect(data).toEqual({
      success: true,
    });
    done();
  });
});

// 方法2  async 函数
test("fetchData", async () => {
  const data = await fetchDataPromise();
  expect(data).toEqual({
    success: true,
  });
});

// 方法3  返回一个promise
// 注意要配合expect.assertions 使用，不然没有执行expect也算成功
test("fetchData", async () => {
  expect.assertions(1);
  return fetch404Promise().catch((e) => {
    expect(e.toString().indexOf("404") > -1).toBe(true);
  });
});

test("promise错误可以用try catch捕获", async () => {
  expect.assertions(1);
  try {
    await fetch404Promise();
  } catch (e) {
    expect(e.toString().indexOf("404") > -1).toBe(true);
  }
});

// 补充 一般测试接口需要用到对象匹配器
test("对象匹配器", () => {
  // toMatchObject 只要目标有某种结构就可以
  expect({ name: "zs", success: true }).toMatchObject({ success: true });
});

test("如果期望接口失败的情况", () => {
  return expect(fetch404Promise()).rejects.toThrow();
});
```

# 钩子的作用
先来看一下要测试的代码
- `Counter.ts`
```ts
export default class Counter{
    constructor(public number = 0) {
    }
    addOne() {
        this.number += 1;
    }
    minusOne() {
        this.number -= 1;
    }
}
```

测试用例编写
- `Counter.spec.ts`
```ts
import Counter from "./Conter";
const counter = new Counter();

test("测试Counter 中的 addOne 方法", () => {
  counter.addOne();
  expect(counter.number).toBe(1);
});
test("测试Counter 中的 minusOne 方法", () => {
  counter.minusOne();
  expect(counter.number).toBe(0);
});

// 上述写法存在耦合， 测试minusOne 需要关注 addOne的执行过程
// 为此，jest提供和钩子函数来隔离测试用例中间的影响

let counter2: Counter | null = null;

beforeEach(() => {
  counter2 = new Counter();
});

test("测试Counter 中的 addOne 方法", () => {
  counter2!.addOne();
  expect(counter2!.number).toBe(1);
});
test("测试Counter 中的 minusOne 方法", () => {
  counter2!.minusOne();
  expect(counter2!.number).toBe(-1);
});
```

# Jest中的钩子
- `beforeAll`
- `beforeEach`
- `afterEach`
- `afterAll`

- `beforeAll`和`afterAll`只执行一次<br>
- `beforeEach`和`afterEach`在每一个`test`执行前都会执行一次<br>
- 执行顺序就是`beforeAll` --> 第一个test中的`beforeEach` 和 `afterEach` --> 第二个test中的`beforeEach` 和 `afterEach` 由此类推 -->  `afterAll`

有兴趣可以测一下，我就不写案例了

`describe`可以对测试用例进行分组
```ts
describe("测试Counter加法", () => {
  test("测试Counter 中的 addOne 方法", () => {
    counter2!.addOne();
    expect(counter2!.number).toBe(1);
  });
  test("测试Counter 中的 addTwo 方法", () => {
    counter2!.addTwo();
    expect(counter2!.number).toBe(1);
  });
});
describe("测试Counter减法", () => {
  // ...
});
```
# 钩子的作用域
```ts
describe("describe outer", () => {
    // 作用域当前describe内部的所有 test 和 describe
  beforeEach(() => {
    // ......
  });
  test("xxx", () => {
    // ......
  });
  test("xxx2", () => {
    // ......
  });
  describe("describe inner", () => {
    // 仅作用于当前describe
    beforeEach(() => {
      // ......
    });
  });
});
```
如果逻辑比较多难以调试， 可以使用`test.only()`这样其他的`test()`都被跳过


还有一点要注意： `describe`中的代码早于`beforeEach`执行
```ts
describe("describe outer", () => {
  console.log('describe outer')
  beforeEach(() => {
    console.log('beforeEach')
  });
  test("xxx", () => {
    // ......
  });
  describe("describe inner", () => {
    console.log('describe inner')
  });
});
```
打印顺序为
1. 'describe outer'
2. 'describe inner'
3. 'beforeEach'

# Jest中的Mock
先准备两个函数
- `callback.ts`
```ts
export function runCallBack(cb: Function, ...args) {
  cb(...args);
}

export function createObj(classItem: any) {
  new classItem();
}
```

看一下如何mock 回调函数的调用
- `callback.spec.ts`
```ts
import { runCallBack, createObj } from "./callback";

test("测试 回调函数有没有调用", () => {
  // mock一个回调函数
  const fn = jest.fn();
  runCallBack(fn, 1, 2);
  expect(fn).toBeCalled();

  console.log(fn.mock); // 打印内容如下
  /**
   * {
        calls: [ [ 1, 2 ] ],
        contexts: [ undefined ],
        instances: [ undefined ],
        invocationCallOrder: [ 1 ],
        results: [ { type: 'return', value: undefined } ],
        lastCall: [ 1, 2 ]
      }
   */
  // calls 记录被调用的次数及每次调用的参数
  // results每次执行的返回值
  // invocationCallOrder 调用的顺序
  // instances  通过new调用创建的实例

  runCallBack(fn, 3);
  expect(fn.mock.invocationCallOrder.length).toBe(2);

  // 还可以模拟返回值
  fn.mockReturnValueOnce("mockReturn").mockReturnValueOnce("mockReturn2"); // 可以链式调用
});

test("测试 createObject", () => {
  const fn = jest.fn();
  createObj(fn);
  console.log(fn.mock);
  /**
   * {
        calls: [ [] ],
        contexts: [ mockConstructor {} ],
        instances: [ mockConstructor {} ],
        invocationCallOrder: [ 3 ],
        results: [ { type: 'return', value: undefined } ],
        lastCall: []
      }
   */
});

// 其他
test("测试 mockImplementantion", () => {
  const fn = jest.fn();
  // fn.mockImplementantion(()  => 'hello');
  // 等价于 fn = jest.fn(() => 'hello');
  // 它与mockReturnValue类似
});
```

再来看一下接口mock
```ts
import axios from "axios";

export const getData = () => {
  return axios.get("/api").then((res) => res.data);
};

/**
 * 一般前端不针对接口进行测试
 * 一方面方面是因为大量接口异步请求很多很慢，
 * 另一方面是接口测试是后端的工作
 * 前端一般通过mock跳过接口
 * */
jest.mock("axios"); // 会跳过 import axios from "axios";

test("测试 getData", async () => {
  axios.get.mockResolvedValueOnce({ data: "hello" });
  axios.get.mockResolvedValueOnce({ data: "world" });
  await getData().then((data) => {
    expect(data).toBe("hello");
  });
  await getData().then((data) => {
    expect(data).toBe("world");
  });
});
```
除了mock `axios` 我们还可以针对`api`进行mock

比如我们新建一个mock文件
- `myMockApi.ts`
```ts
function getData() {
    return new Promise((resolve) => {
      resolve(123)
    })
}
```
测试用例调整如下
```ts
import {fetchData} from './api'

jest.mock('./myMockApi'); // 它会提前 在import前面

test('fetchData 测试', () => {
  return fetchData().then(data => {
    expect(data).toEqual(123);
  })
})
```

如果有些接口不希望模拟 可以通过`jest.requireActual`去规避
```ts
const {getNumber} = jest.requireActual('./api');
// 此时getNumber 不再是myMockApi.ts导出的，而是 api.ts 导出的
```

:::tip{title=总结jest.fn的作用}
1. 捕获函数的调用和返回结果，调用顺序， 以及this
2. 可以自由的设置返回结果
3. 改变函数的内部实现
:::

# vscode jest插件

![image.png](https://blog.warmplace.cn/static/img/be6c8c2e3eaa6f30f5120ade6b55ffc3.image.webp)

# snapShort
快照通常用于配置文件修改后的确认

比如有一个配置文件
- `config.ts`
```ts
export const generateConfig = () => {
  return {
    server: "XXX",
    time: new Date(),
  };
};
```
- 测试用例 `config.spec.ts`
```ts
import { generateConfig } from "./config";

test("测试 generateConfig 函数", () => {
  expect(generateConfig()).toMatchSnapshot({
    time: expect.any(Date),
  });
});
```

第一次执行会，生成快照文件

![image.png](https://blog.warmplace.cn/static/img/56448af822fccdcdd60951dea973fdef.image.webp)

如果我们修改了`config.ts`<br>
增加配置 `port: "8080",`<br>
控制台会报错提示我们去确认是否更新快照 

![image.png](https://blog.warmplace.cn/static/img/7de5b2ef3f148f85cbab7e22648d1157.image.webp)

按W后

![image.png](https://blog.warmplace.cn/static/img/2c184bc327e0ecca2488734d90d15b37.image.webp)

输入`u`会更新快照

如果有多个快照要确认 可以通过 `i`模式交互式确认

# dom
jest中模拟了一套dom的api，可以直接测试dom
```ts
test("test dom", () => {
  const div = document.createElement("div");
  document.body.appendChild(div);
  expect(document.body.querySelectorAll("div").length).toBe(1);
});
```

[本文示例代码](https://github.com/guojingwen/unit-test)

Jest单元测试入门

本文从一个Web开发者的角度简单梳理RN开发的基础知识，对比web开发可能让web同学更快的上手RN开发。




# 样式
1. 大部分`RN`提供的框架组件都有`style`属性
  - 没有`className`,  使用`styleSheet.create({})`或`style={{}}`，推荐前者性能更好
  - 属性必须小驼峰
2. React 组件在概念上被设计为强隔离性的   **样式不被继承**
    -   也有特例  仅限于文本标签的子树 有一小部分样式可以继承（如`fontWeight`）

## 怎样知道哪些组件有哪些样式呢？
1. 一方面 通过`TypeScript`声明文件，编辑器会提醒你某个组件有哪些样式
2. 另一方面 `RN`的组件样式是有规则的，先把高频样式用会，低频样式查查文档

组件样式是有继承关系，分三层

![image.png](https://blog.warmplace.cn/static/img/b2420066dfb42941e70806e4db6e70b0.image.webp)
- 通用样式 盒模型相关属性+ `flex`布局 + `transform` + `shadow`
- `View` 组件样式  继承通用样式， 自身有 `backgroundColor`、`border`相关、`opacity`
- 大部分组件（如`Text`、`Image`）都继承了`View`组件样式。因此`View`组件的私有样式其实也可以算作通用样式
- 但`Text`/`Image`组件的私有样式，就不能相互通用了。

## Flex布局
优点： 跨平台、高性能、易上手 
1. `Flex`是跨平台的 `Web`/`Android`/`IOS`平台都在用， `RN`的布局引擎`Yoga`是`Android`/`iOS`通用的。
    - 组件上写的`Flex`布局代码，最终都会被`Yoga`引擎计算为精准的坐标系，然后渲染到屏幕上
2. 与Web端的差异
  - `flexDirection`默认值变为`column`
  - `flex`没有了`auto` `none`快捷值

## 与Web端样式差异
**RN的样式远没有web强大，不过RN组件非常丰富，弥补了这方面的缺点。**
- 支持盒模型属性 但是`display`只有`none`和`flex`
- 支持`postion`相关
    - 不支持`sticky` 需要借助 `<scrollview>`的`stickyHeaderIndices`属性 来实现
    - 不支持`fixed` 
- 背景图片请使用 `ImageBackground`
- 选择器没有了，伪类选择器都没有了
- 基本没有复合样式 如 `background`、`border`、`margin`
- 单位
   - **RN中只有百分比或不使用单位（逻辑像素）**
   - 使用逻辑像素会带来的问题，相同物理屏幕尺寸的手机分辨高的手机字体小
   - 如果想实现rem的效果，需提供一个工具方法
- `transfrom` 写法有变化 `transform: [{translateX:100}]`
- 首行锁进用字符实现，没有`text-indent`

推荐使用StyleSheet
- 元素结构和样式分离，可维护性更好；
- 样式对象可以复用，能减少重复代码；
- 样式对象只创建一次，也减少性能的损耗。

```ts
// width: 750rpx = 100%
export const radio = (function(logicWidth: number) {
  return logicWidth / 750
})(logicWidth);
```

- 刘海处理
    1. 使用`<SafeAreaView>`包裹页面，使用 `<StatusBar>`设置样式
    2. 获取状态栏高度 android `StatusBar.currentHeight`， ios 设置默认值 `20`
    3. npm包 `react-native-device-info`

# 组件
因为RN的样式比较少，但是RN提供了大量的组件弥补这方面的缺陷

## Image组件
Image组件支持4种加载图片的方法
1. 静态图片资源
2. 网络图片
3. 宿主应用图片
4. Base64图片

静态图片资源
- 通过require的方式引入，require的入参，必须是字面常量

静态图片资源的加载原理
1. **编译**&emsp;图片内容不混入代码，代码中只有图片的引用，编译后能获得图片的宽高格式等信息
2. **构建**&emsp;编译后的Bundle和静态图片资源，会在构建时编译到APP中。
3. **运行**&emsp;由于前面编译时已经获取到图片的基本信息，所以渲染时不会出现页面抖动。

网络图片
- RN对网络图片做了缓存和预加载机制
- `Android` 用的是 `Fresco` 第三方图片加载组件的缓存机制
- `iOS` 用的是 `NSURLCache` 系统提供的缓存机制。它遵循的是 HTTP 的 Cache-Control 缓存策略
- Android 和 iOS 的缓存设置方式和实现原理虽然有所不同，但整体上采用了内存和磁盘的综合缓存机制
- React Native 也提供了非常方便的图片预加载接口 `Image.prefetch(url)`

宿主应用图片
- 宿主应用图片指的是 React Native 使用 Android/iOS 宿主应用的图片进行加载的方式.
```html
// Android drawable 文件目录
// iOS asset 文件目录
<Image source={{ uri: 'app_icon' }} />
// Android asset 文件目录
<Image source={{ uri: 'asset:/app_icon.png' }} />
```

Base64 图片
- 由于 Base64 图片是嵌套在 Bundle 文件中的，所以 Base64 图片的优点是无需额外的网络请求展示快，
- 缺点是它会增大 Bundle 的体积。
- 只适合用在体积小的图片或关键的图片上

![image.png](https://blog.warmplace.cn/static/img/ffb6e8a929ad8cd40222a34d717f5d1e.image.webp)

## 点按组件
RN的点按组件经历了三代
1. `Touchable`组件
2. `Button`组件
3. `Pressable`组件


第一代 `Touchable` 组件
- 思路： 提供多种原生平台的反馈风格给开发者自己选择。框架提供了 1 个基类和 4 个扩展类
- `TouchableWithoutFeedback`：用于响应用户的点按操作，但不给出任何点按反馈效果。反馈效果由 4 个扩展类实现；
- `TouchableNativeFeedback`：给出当前原生平台的点按反馈效果，在 Android 中是涟漪（ripple）效果，就是从点击处散水波纹的效果
- `TouchableOpacity`：短暂地改变组件的透明度；
- `TouchableHighlight`：短暂地加深组件的背景色；
- `TouchableBounce`：有 bounce 回弹动画的响应效果。

第二代 `Button` 组
- 对 `Touchable` 组件进行封装，别让开发者纠结选啥组件了
- 在 Android 上是 `TouchableNativeFeedback` 组件，在 iOS 上是 `TouchableOpacity` 组件

第三代 Pressable 组件
- 它是一个全新重构的点按组件，它的反馈效果可由开发者自行配置。
- 它支持固定样式和动态样式

```jsx

// 固定的基础样式
const baseStyle = { width: 50, height: 50, backgroundColor: 'red'}
<Pressable
  onPress={handlePress}
  style={baseStyle} >
  <Text>按钮</Text>
</Pressable>


// 固定的基础样式
const baseStyle = { width: 50, height: 50, backgroundColor: 'red'}
<Pressable
  onPress={handlePress}
  style={({ pressed }) => [ /* 动态样式 */
    baseStyle,
    { opacity: pressed ? 0.5 : 1} 
  ]} >
  <Text>按钮</Text>
</Pressable>
```

## 点按事件
- `onPressIn`： 开始响应事件，用户手指接触屏幕，且该手势被当前组件锁定后触发；
- `onPressOut`：结束响应事件，用户手指离开屏幕时触发。
- `onPress`： 在`onPressOut`中，如果距离`onPressIn` < 500ms则触发 `onPress`
- 如果 >= 500ms 则属于长按 `onLongPress`

ref 的值不会因为组件刷新而重新声明，它是专门用来存储组件级别的信息的。

## TextInput
TextInput是输入框组件，相对于web，它的能力更强，可以定制键盘

一些与键盘优化相关的属性
- `enablesReturnKeyAutomatically` iOS 独有的属性，默认是`false` <img src='https://blog.warmplace.cn/static/img/2c6065ba9688825aad8b8c8a338130d9.image.webp' width=200>
- `returnKeyType` <img src='https://blog.warmplace.cn/static/img/76c2413244bb33ed18344d6ea97b8632.image.webp' width=400>
- 跳转下一个输入框  iOS `textContentType` android `autoComplete`
- `keyboardType`可以控制键盘类型

## 对比RN组件与Web标签
- 文本必须使用文本标签`<Text>`包裹；
- `image`网络图片必须给定宽高；
    - src --> source 更灵活
    - android下支持gif或webp格式的图片，要修改gradle配置
    - 在主线程外解码图片（这是web端页面掉帧的一大因素）
- 滚动必须用`<ScrollView>` 没有`overflow：scroll`
    - 还集成了 触摸锁定响应者系统
    - 可以模拟web开发中的UI组件 `swipe`
    - 滚动到指定位置 通过`ref`拿到原生组件，调用方法`scrollTo(x, y, animated)`
- 长列表 `FlatList` / `SectionList` 后者支持分组，比如城市列表、联系人列表


# 列表组件
##  ScrollView
- RN中没有`overflow：scroll` 想要滚动就需要 `<ScrollView>`
- 可以模拟web开发中的UI组件 `swipe`
- 滚动到指定位置 通过`ref`拿到原生组件，调用方法`scrollTo(x, y, animated)`

## FlatList / SectionList
- `<ScrollView>` 会全部渲染元素，对于长列表就有性能问题
-  `<FlatList>`和`<SectionList>`会渲染可视区及附近的元素，滚动时销毁远离可视区的元素并创建即将进入可视区的元素。
- 区别是后者支持分组（比如城市列表、联系人列表），为了简化理解，后面只针对`<FlatList>`做说明
- `<FlatList>` 的底层实现是 `<VirtualizedList>` 而`<VirtualizedList>` 的底层又是`<ScrollView>` 所以`<FlatList>` 可以使用`<ScrollView>`和`<VirtualizedList>`的大部分属性
- 建议尽量填一下`getItemLayout`属性，如果不把列表项高度告知`<FlatList>`,`<FlatList>`会通过`onLayout`的布局回调动态计算，用户是会感觉到卡顿的

## ReyclerListView
官方的`<FlatList>`方案性能确实有的大幅提升，但性能还不够理想，社区提出了`<ReyclerListView>`方案， 它是改改在用（变更离开可视区的元素为即将进入可视区的元素）所以它的性能更好。

`<ReyclerListView>` 有一定学习成本，先来看一下使用

它有三个必填属性
- 列表数据：`dataProvider`
- 列表项的布局方法：`layoutProvider`
- 列表项的渲染函数：`rowRenderer`

示例
```jsx
function MyList() {
  let dp = new DataProvider((r1, r2) => {
    return r1 !== r2;
  });
  useEffect(() => {
    fetch('XXX')
    .then(res => res.json())
    .then(arr => {
      dp = dp.cloneWithRows(arr);
    })
  })
  
  
const _layoutProvider = new LayoutProvider(
  index => {
    if (index % 3 === 0) {
      return ViewTypes.FULL;
    } else {
      return ViewTypes.HALF_RIGHT;
    }
  },
  (type, dimension) => {
    switch (type) {
      case ViewTypes.HALF_RIGHT:
        dimension.width = width / 2;
        dimension.height = 160;
        break;
      case ViewTypes.FULL:
        dimension.width = width;
        dimension.height = 140;
        break;
    }
  },
);
const _rowRenderer(type, data) {
    //You can return any view here, CellContainer has no special significance
    switch (type) {
      case ViewTypes.HALF_RIGHT:
        return (
          <CellContainer style={styles.containerGridRight}>
            <Text>Data: {data}</Text>
          </CellContainer>
        );
      case ViewTypes.FULL:
        return (
          <CellContainer style={styles.container}>
            <Text>Data: {data}</Text>
          </CellContainer>
        );
      default:
        return null;
    }
  }
  
  return (
      <RecyclerListView
          onEndReached={fetchNextPage}
          dataProvider={dp}
          layoutProvider={layoutProvider}
          rowRenderer={RowRenderer}
      />
    )
}
```
分析
- 一个列表中可能存在多种类型组件 所以设计了两个参数
- `layoutProvider`获取元素尺寸和类型，
- `rowRenderer` 根据类型渲染元素
- `dataProvider` 除了数据还要提供比对方面，提高性能


![image.png](https://blog.warmplace.cn/static/img/8cddeef2ad1737c6bc9cbcd085e3f27c.image.webp)


![image.png](https://blog.warmplace.cn/static/img/4ee1dc193ba01ff9c560acf2a2c0f0bc.image.webp)

因为`RecyclerListView` 用的是 `position:absolute` 的绝对定位布局。所以要指定组件的宽高

如果宽高大致确定吗也是可以用的，可以开启`forceNonDeterministicRendering` 小幅修正布局位置


## FlashList
`<RecyclerListView>`貌似很完美，但不支持双列

解决方案1： 需要修改`<RecyclerListView>` 源码，[如这个案例](https://github.com/jiangleo/react-native-classroom/tree/main/src/12_HomePage/components/RecyclerListView)

解决方案2 就是使用`<FlashList>` 它是对`<RecyclerListView>`的二次封装

[官网](https://shopify.github.io/flash-list/docs/usage/)

最后建议，如果有长列表瀑布流需求， 一开始就用`<RecyclerListView>`或`<FlashList>` ， 不然随着业务迭代改造成本很大。

# 特定平台代码
- 样式使用`Platform.select({ios, android})`
- 给文件增加特定平台的扩展名
- 条件代码 根据平台`Platform.OS`执行不同逻辑

# 事件&交互
web的`e.target.value` => RN`e.nativeEvent.text`

导航 `react-navigation` / `react-native-navigation` / 使用原生导航管理RN视图

动画  使用`Animated`
- 并行/串行/延迟/集合运算 等等可以随意组合， 比web端的css动画更灵活
- 跟踪手势， 比如配合`ScrollView`实现`Web`端`Swipe`组件的脚标动画 `Animated.event`
- 使用原生动画驱动， 避免通信损耗

# DOM操作
- 通过`ref`获取到原生组件  调用 `setNativeProps` 方法
- 埋点实现   曝光   使用原生组件方法测量位置（`measure` `measureLayout`）+ 监听滚动 可实现类似Web端的`IntersectionObserver`的功能
    - 并非所有标签都能使用`measure`方法
- `layout` 方法在渲染前可以拿到文本元素尺寸（web需要渲染后才知道）

# JS运行环境
- 浏览器下的`JS` 包含浏览器`API`、`BOM` 和 `ECMA`规范两部份组成 由JS引擎(`chrome V8` / `safari JSCore` )提供。
- `RN >=7.0`使用 `Hermes`引擎  `<7.0`使用 `JSCore`
- 网络方面：实现了与web端几乎一致的 `XMLHttpRequest` / `fetch` / `WebSocket`   没有跨域问题
- 内置了`Babel`  做了语法转换  内置了`API`和`Polyfills`
- `require`  / `console` 
- 定时器 `setTimeout`、`setInterval`、`requestAnimationFrame`、`setImmediate`
- `__DEV__`

ReactNative基础学习

本文介绍ReactNative入门相关知识， 包含一下知识点
1. RN基本介绍及使用场景
2. 环境搭建
3. 调试
4. 原生相关知识
5. 简单了解下RN原理


# 为什么选择RN作为跨端方案
[中文官网](https://reactnative.cn/)

## RN适合的场景
没有完美的跨端技术，只有适合的场景
1. 业务更新迭代较快的团队与出海团队
2. 既要支持动态更新，又要支持复杂业务的场景
  - 动态更新(降低企业的试错成本)  --- 目前只有`RN`
  - 小程序只能让你的应用运行在别人的 `App` 上
  - `Weex` 最终未能大规模流行起来，
  - 而 `Flutter` 使用的语言是 `Dart` 而非 `JavaScript`，并不能很好支持动态更新

## 为什么学RN
1. 首先，`React Native` 是一个非常流行的跨端框架，开发者认可度很高   [npm trends](https://npmtrends.com/react-native)上面`RN`增长势头强劲
2. 其次，`React Native` 是一个跨领域的融合技术，它是你现有技术的自然延伸。
3. 更关键的是，`React Native` 新架构 与`2022`年已经发布
  - 启动性能会有 2 倍左右的提升  `Hermes` 是一款专为移动端打造的 `JavaScript` 引擎，它支持 `JavaScript` 的 `AOT` 预编译。
  - 通信性能会有 3 倍左右的提升  
    - 老架构JSBridge，
    - 新架构JSI，JS可以直接调用C++
    - 就像 `node.js` 使用 `addon` 调用 `C++` 、 `Flutter` 用 `FFI` 调用 `C++` ，以及 `Java` 使用 `JNI` 调用 `C++` 一样。
    - 直接调用没有了序列化和反序列化，操作指令的传输效率会高很多
  - 渲染流水有了很大的变化，这会带来更好的用户体验
  - SSR支持
    - `Airbnb` 的自行研发服务端渲染框架原理非常类似
    - 美团团队也在 `React Native` 老架构之上实现了 `SSR`，据说美团的页面渲染速度最快能达到 `50ms`。


# 环境安装
首先贴出 [官方文档](https://www.react-native.cn/docs/environment-setup) 

官方写的很文章很详细完整，我不再累赘。建议**严格按照官方文档一步一步操作**（比如`jdk`安装了其它版本，作为外行人很难定位问题，这样学习效率不高）。推荐 **完整原生环境**

我使用的是苹果电脑，本文也是讲解MacOS 系统下RN环境安装问题（一般RN开发都是用`mac`电脑，虽然`window`电脑可以通过安装虚拟机`xcode` 来解决`ios`构建问题，但该方案比较偏，问题也多）

但由于众所周知的原因，国内用户会遇到各种奇奇怪怪得问题。我这里记录一下我在安装过程中遇到的问题及解决方案，供参考。

## 搭建IOS环境

1. 作为前端`node`安装不用说了（其它`nvm`、`yarn`/`npm`、 `nrm`/`yrm`等可以参考我的其它文章，这里不说这些）
2. 补充一些墙问题的解决方案
    - 如何实现命令行翻墙？
    - 我使用的是 `ClashX` 客户端，参考[网上的教程](https://github.com/Dreamacro/clash/issues/592)
    - 找到端口 点击 `mac`顶部状态栏 `ClashX` 图标 打开本地配置文件，第一行就是 `mixed-port: 7890`推测这个就是端口
    - 终端执行`export ALL_PROXY=socks5://127.0.0.1:7890`
    - 通过 `curl -vv https://www.google.com` 命令，验证是否解决命令行墙问题
3. 为什么我的终端可以翻墙 却有些包还是下载不了？
    - 首先判断网络是否畅通
    - 比如 `ping github.com` 控制台日志 `Request timeout for icmp_seq` 表示丢包，网络不通，
    - 在 [ipaddress](https://ipaddress.com/website) (该网站好像要翻墙才能访问）搜索 `github.com` 得到 ip 为`140.82.113.4` 配置host `140.82.113.4 github.com` ，再次使用`ping github.com`测试，网络已通。（`pod install`安装失败，可以用此方案解决）
4. 安装失败问题
    - 多执行几次命令（比如`pod install`安装失败，再次执行会从上次下载失败的包处开始重新下载）  
5.  `brew` 问题
    - 在 `brew install watchman` 或 `brew update` 等阶段，可能会遇到的报错信息 `Error: homebrew-core is a shallow clone`。
    - 个人总结最好的解决方案 **使用阿里云镜像源**，重新安装`homebrew`
    - 如果你的系统比较老，可能会要求你升级 mac系统&升级Xcode
6. Xcode 安装问题
    - Xcode安装不顺利， `app store`里`xcode`一直转圈，过一会提示 “无法下载请稍后再试”
    - 从官网下载`xcode` [链接这里](https://developer.apple.com/cn/xcode/resources/) 过了一会下载完成解压后拖拽到应用 覆盖原有的`xcode` ，至此`xcode`安装成功 
7. `watchman` 问题
    - `yarn ios` 或`yarn android`时报错，即使在安装时正常 ，也可能第二天你执行`yarn ios`或 `yarn android`时报错，报错内容为
    - ![image.png](https://blog.warmplace.cn/static/img/8d30043d6076d5d5fa4898f875d857bc.image.webp)
    - 此时在 启动的`ios`或`anroid`机器（这里的机器包含真机或模拟器）上 还会看到全屏报错
    - <img width=300 src='https://blog.warmplace.cn/static/img/d1c3a3e75b5860fa6f6f27b7c324e976.image.webp'>
    - **解决方案， 将项目从`Document`目录移出，可以移动到 `~/**` 目录  （`~/`是用户主目录）**

7. `cocoapods` 问题
    - 如果使用`brew install cocoapods`失败，可以用`sudo gem install cocoapods`试试看， 
    - 推荐还是使用阿里云镜像源
8.  iOS项目问题排查
    - 启动ios模拟器 `yarn ios` 
    - 如果遇到错误，进入`./ios`目录 双击`.xcworkspace`文件，在xcode中打开项目
    - ![image.png](https://blog.warmplace.cn/static/img/6865c861fc9c9625ebcc9445fb6d6138.image.webp)


补充一些知识点：
- `Watchman` 由 Facebook 提供的监视文件系统变更的工具
- `Xcode` 苹果生态应用开发唯一工具，这里开发ios app 就有用的xcode构建
- `CocoaPods` IOS包管理器，命令行`pod`， 可类比web前端的npm
- `HomeBrew` macOS的套件管理工具，命令行`brew`，可以类比unbuntu的`apt-get`或centos的`yum`
- `Metro` 它是RN的打包工具，类比web前端的`webpack`

## 搭建android环境
首先补充下android相关知识背景
> 1. `jdk`与`jre`的关系 
>    1. `jdk`是`java`开发工具，编译`java`文件为二进制文件（`.classes`）；`jre`是`java`运行时环境
>    1. 查看`jdk`版本 `java -version`; 查看`jre`版本`javac -version`; 查看`jdk`路径`which java` or `whereis java`
>    1. 卸载`java sudo rm -rf /Library/Java/JavaVirtualMachines/jdkxxx.jdk`
> 2. `gradle` 这里可以理解为 android项目构建工具， 可以把它看作保姆，下载资源并配置，可以写动态脚本。包含`maven`的功能，`maven`/`pox.xml`可类比web前端的`npm`/`package.json`
> 3. `Android Studio`  `android`开发官方推荐的`JIDE`
>    1. `Android Studio` 内置了很多东西（`jdk`、模拟器、`adb`等）
>    1. 其中有接触过android webview 调试的同学可能了解`adb`，如果你想使用`adb`命令可以使用`IDE`内置`adb`
>    ![image.png](https://blog.warmplace.cn/static/img/0fa0edc145aa969a30766047bbbb2929.image.webp)
1. `yarn android` 如果严格按照官方文档来，android环境的安装会比较顺利
    - 注意一定先安装`jdk`再配置`IDE`,如果你先安装配置了`IDE`,系统会自动为你安装`jdk`，此时你使用`yarn android`是跑不起来的。
    - 必须先卸载掉`jdk` 按官方文档安装`jdk`，然后删除项目重新安装`npx react-native init AwesomeProject`，最后在执行`yarn andriod`才能正常跑起项目

2. 模拟器运行
- 按照官方教程模拟器安装比较顺利，这里不再赘述
- 常见问题
  - 启动模拟器失败 `error Failed to launch emulator.`  或者  `> Task :app:installDebug FAILED`
  - 执行 `adb device` 检测设备， 如果没有 则打开`Android Studio`  删除设备， 在重新创建 

3. 真机运行
- 使用`adb devices`检查电脑是否识别手机，只要能识别到手机就能真机运行！
- 如果识别不到手机 则参考 我的另一篇文章[《前端调试》](https://www.yuque.com/guojw/fe-project/euk9im#0wCtl)


假设经过上面的前面的折腾，你也像我一样成功把脚手架跑起来了。

![image.png](https://blog.warmplace.cn/static/img/f1a9635be29f52a518ea51e5baccc769.image.webp)

万事开头难，环境搭建多折腾

# RN热更新原理

最早期的版本叫做热重载 `HotReload` 基于Webpack的模块热替换原理开发的

![image.png](https://blog.warmplace.cn/static/img/27930ed97e7b80fca19294d08c9f0b89.image.webp)

2） Metro收到通知就会编译涉及到的更新文件<br>
3） 编译完成会生成一个用于更新的bundle文件<br>
4） 本地服务会通过socket通知客户端<br>
5） 客户端请求资源<br>
6）服务端响应bundle,客户端在原来的RN应用的JS执行上下文中运行更新的bundle<br>

基础的模块热替换只能实现组件级别的强制刷新，而组件的状态会丢失，如何复用组件的状态呢？

RN在运行时，用“代理”的方式管理新旧组件的切换

1. 代理组件只会在初次加载的时候创建，之后就作为一个不变的对象放在代理注册中心
2. 代码保存后, 模块热替换会将新组件代码运行，新组件的注册函数也会执行，通过唯一ID，找到原代理对象，更新代理属性到新组件上，然后修改代理组件的引用

原生视图会复用吗？

肯定复用，RN组件进行render时判断是否需要创建原生视图，通过浅层比较决定是否复用原生视图。

![image.png](https://blog.warmplace.cn/static/img/495df3d0b02854a32293b94bef2828c8.image.webp)

当然，并不是所有情况都会复用状态和原生视图。

1. 对于函数组件来说，hooks 的顺序非常重要, 如果hooks顺序有变化，会丢弃原先状态，新建原生组件

2. 对于类组件 只要是类组件的代码发生更新，组件的内部状态都要重新初始化。

**建议：尽可能地拥抱函数组件，放弃类组件。**

# 调试
默认的脚手架启动后，页面展示的是调试文档和学习指引文档。

调试文档如下：（以下操作前提是选中模拟器）
- 双击R 重新加载APP
- `Command + M`(android模拟器)/`Command + D`(ios模拟器) 或摇晃手机（真机）  弹出开发者菜单选项 （android机还可以通过`adb shell input keyevent 82`）

![image.png](https://blog.warmplace.cn/static/img/467eb11e1f4f302c37d2a595457f1deb.image.webp)

几种调试方法的对比
![image.png](https://blog.warmplace.cn/static/img/9840a1739c26bdbebc7c50521a1cc475.image.webp)

1. `Terminal`调试 
    - 终端 Terminal，你在本地通过 Terminal 启动打包工具 Metro 的服务时，你的调试代码就和 Terminal 建立了连接，你通过 console.log 打印的日志，都会在 Terminal 显示。
2. `chrome`调试
3. `Flipper` Facebook 出 。它的功能很强大，打日志、打断点、查看元素树、抓包请求、查看存储它都支持，而且支持扩展插件。

## Flipper调试

凑合参考这篇[《用Flipper调试React Native应用程序》](https://juejin.cn/post/7064778031964880926)文章吧

与环境搭建一样，坑很多。。。

这里记录一下步骤和踩坑点

1. 安装  `brew install --cask flipper`  注意命令行要翻墙，否则安装不了
2. 安装成功后mac应用程序打开 `flipper` 会有警告 “不明开发者，，移到废纸篓”， 千万别移到废纸篓， 在  mac偏好设置--》安全与隐私--》点击仍然打开
3. 打开了 `flipper`， 这时要检查环境配置

<img src='https://blog.warmplace.cn/static/img/fdb99c3d9d45a44973cea8f17de1323f.image.webp' width=400>

放心没那么顺利，上图是我处理后的
- Android `SDK Installed` 要选择路径，可以查`AndroidStatio`的设置，我的配置为![image.png](https://blog.warmplace.cn/static/img/e528e58c86943f914482ef23bc2bbea0.image.webp)
- Watchman 一开始也不行， 我使用brew命令重新安装了下， 虽然Watchman好了但项目跑不起来了， 按照前面环境搭建提到的环境问题 解决了。
- 至此 跑通了`flipper`的 `React DevTools`和`Logs`调试 （亲测android模拟器和ios模拟器有效）

4. 断点调试 需要先启用Hermes
- android： 配置 <img src='https://blog.warmplace.cn/static/img/0770597c36f8e14e04faa47bd989986a.image.webp' width=200>
- ios: <img src='https://blog.warmplace.cn/static/img/77e2f2b0660523cc769d4eaca93832c9.image.webp' width=400>
- ![image.png](https://blog.warmplace.cn/static/img/8cf18a7fb32ea6fab8b4d4f7c1201c6f.image.webp)
- 看起来没啥问题了，折腾了几个小时还不不能断点调试😂😂，以后有空在研究吧

# 补充一些原生知识
## adb命令
- `adb devices`
- `adb install -r xx.apk`
- `adb reverse tcp:8081 tcp:8081`
- `adb shell`   进入沙盒类linux命令行环境
- `adb push 1.png /sdcard/`   copy电脑文件到手机
- `adb pull /sdcard/1.png ./` 从手机中copy文件到电脑

## android项目目录
```txt
android
    |-app
       |- src
           |- main
               |- AndroidManifest.xml
               |- java
                   |- mainApplication.java
           |- res
               |- minmao-hdpi / minmao-mdpi 应用图标
               |- minmao-xhdpi / minmao-xxhdpi / minmao-xxxhdpi
               |- values
                   |- string.xml 修改应用名称
       |- build.gradle
    |- build.gradle
```
`AndroidManifest.xml`
- 增加权限
- 第三方插件元数据

外层`build.gradle`大概率改不到
- 升级sdk版本
- 配置第三方仓库

内层`build.gradle`
- 打包后签名
- 配置变种包
- 原生依赖

`mainApplication.java`
- 管理整个应用
- 增加原生桥接 ReactPackage/ ReactModule/ViewManager
- 第三方库初始化

## RN和原生组件的对应关系
![image.png](https://blog.warmplace.cn/static/img/89f71df2319264b6a1799c124bc4d581.image.webp)

## 开发语言
- Android: `Java` / `Kotlin`
- IOS： `OC` vs `Swift`

## 应用签名
- 创建签名  AnroidStudio --> build --> Generate Signed Bundle / APK    文件后缀名 `.jks`
- 使用签名 配置`build.gradle`文件中的release
- 发包  
    - AppStore
    - 华米OV
 
## RN热修复包
- `PUSHY` RN中文网推荐
- `Code Push` 由于墙的原理网速比较慢，第二体检 

热修复包的设计思路
- 首先需要准备一个rn包管理平台，功能很简单，需要一个sql表 有包地址、hash值、平台、版本、日期、描述等字段，web平台上就是一个table列表，还有一个上传包的表单。就这些功能，自己撸nodejs代码也很快
- app要做一下处理，启动app检查rn包是否有新版本，有的话后台拉取，拉取完成在下一次打开RN页面的时候使用新版本。
- 后期可以考虑按设备或用户id推送，白名单推动

# RN架构

## 老架构
RN的本质只克隆了一份React并对react-dom进行了重写
![image.png](https://blog.warmplace.cn/static/img/48045092f8e4a1320b55dbdb29f01f99.image.webp)

用一张图对比下webview壳与RN两种混合开发上的差异

![image.png](https://blog.warmplace.cn/static/img/fc09b44952b45ff17ad1dca4239fabc7.image.webp)

## 新架构
老架构的核心问题是`JSBridge`的性能瓶颈
1. JSBridge通信，传送数据需要序列化，接收数据需要反序列化解析，与小程序一样bridge这块是性能瓶颈
2. 渲染引擎`UI Manager`  React创建`FiberTree`后会通过bridge再渲染原视图组件，这块开销也大
3. JSBridge是异步通信


新架构使用JSI 替换了`Bridge`，我们先来看一下架构图

![image.png](https://blog.warmplace.cn/static/img/13d2ae0d2d7cc2de88f2d9851ea3b1ba.image.webp)


1. `JSI`<br>
JSI 是一个轻量级的通用层，用C++编写，JS引擎可以使用它直接执行或者调用native。<br>
JSI 如何让 JavaScript 直接调用到原生方法？<br>
在 `JSI` 里 `Native` 方法会通过 `C++` `Host Objects` 暴露给 `JS`， 而 `JS` 可以**持有对这些对象的引用**，并且使用这些引用直接调用对应的方法

2. `Fabric`<br>
`Fabric` 是新的渲染系统，它将取代当前的 `UI Manager`。<br>
使用新的 `Fabric` 渲染，用户交互（如滚动、手势等）可以优先在主线程或 `Native` 线程中同步执行，而 `API` 请求等其他任务使用异步执行。<br>
另外新的 `Shadow Tree` 将成为 `immutable`，它会在 `JS` 和 `UI` 线程之间共享，以两端进行直接交互。

3. `Turbo Modules`<br>
`Turbo Modules` 基本上是对这些旧的 Native 模块的增强。
仅在需要时才加载对应模块，这样可以将显着缩短 RN 应用的启动时间。

4. `Codegen`<br>
`Codegen` 主要是用于保证 `JS` 代码和 `C++` 的 `JSI` 可以正常通信的静态类型检查器，通过使用类型化的 `JS` 作为参考来源，`CodeGen` 将定义可以被 `Turbo` 模块和 `Fabric` 使用的接口，另外 `Codegen` 会在构建时生成 `Native` 代码，减少运行时的开支。

![image.png](https://blog.warmplace.cn/static/img/9a41f7700b64f2ffdf934decdb8563e4.image.webp)

总结
- RN 不是要实现一个跨平台的UI系统 （包体积过大，学习成本高）
- RN 要实现的是一个借助个平台既有UI系统的跨平台UI控制系统

本段参考资料
- [React新架构](https://juejin.cn/post/7063738658913779743)
- https://formidable.com/blog/2019/react-codegen-part-1/
- https://formidable.com/blog/2019/jsi-jsc-part-2/

ReactNative入门学习

本文加少NodeJS鉴权的五种方案
1. `HTTP Basic Authentication`
2. `session-cookie`
3. `Token` 验证
4. `Json Web Token` 验证
5. `OAuth`(开放授权)




# HTTP Basic Authentication
这种授权方式是浏览器遵守`http`协议实现的基本授权方式，`HTTP`协议进行通信的过程中，`HTTP`协议定义了基本认证允许`HTTP`服务器对客户端进行用户身份认证的方法。

## 认证过程：

![image.png](https://blog.warmplace.cn/static/img/5e3e2b898b8f79b249bdf7b836d04e43.image.webp)

1. 客户端向服务器请求数据，请求的内容可能是一个网页或者是一个ajax异步请求，此时，假设客户端尚未被验证，则客户端提供如下请求至服务器：

```http
Get /index.html HTTP/1.0
Host:www.xianzao.com
```

2. 服务器向客户端发送验证请求代码401, `WWW-Authenticate: Basic realm="xianzao.com"`这句话是关键，如果没有客户端不会弹出用户名和密码输入界面）服务器返回的数据大抵如下：
```http
HTTP/1.0 401 Unauthorised
WWW-Authenticate: Basic realm=”xianzao.com” 
Content-Type: text/html 
Content-Length: xxx
```
补充说明
- realm 用来描述进行保护的区域，或者指代保护的范围。
- 它可以是类似于 "Access to the staging site" 的消息，
- 这样用户就可以知道他们正在试图访问哪一空间。

3. 当符合`http1.0`或`1.1`规范的客户端（如`FIREFOX`，`Chrome`）收到401返回值时，将自动弹出一个登录窗口，要求用户输入用户名和密码。
4. 用户输入用户名和密码后，将用户名及密码以`BASE64`加密方式加密，并将密文放入前一条请求信息中，则客户端发送的第一条请求信息则变成如下内容：
```shell
Get /index.html HTTP/1.0 
Host:www.xianzao.com 
Authorization: Basic d2FuZzp3YW5n
```
> 注：d2FuZzp3YW5n表示加密后的用户名及密码（用户名：密码 然后通过base64加密，加密过程是浏览器默认的行为，不需要我们人为加密，我们只需要输入用户名密码即可）

5. 服务器收到上述请求信息后，将 Authorization 字段后的用户信息取出、解密，将解密后的用户名及密码与用户数据库进行比较验证，如用户名及密码正确，服务器则根据请求，将所请求资源发送给客户端
  
## 示例代码
- 服务端
```javascript
let express = require("express");
let app = express();

app.use(express.static(__dirname+'/public'));

app.get("/Authentication_base",function(req,res){
  console.log('req.headers.authorization:',req.headers)
  if(!req.headers.authorization){
    res.set({
      'WWW-Authenticate':'Basic realm="xianzao"'
    });
    res.status(401).end();
  }else{
    let base64 = req.headers.authorization.split(" ")[1];
    let userPass = new Buffer(base64, 'base64').toString().split(":");
    let user = userPass[0];
    let pass = userPass[1];
    if(user=="xianzao"&&pass="xianzao"){
      res.end("OK");
    }else{
      res.status(401).end();
    }
  }
})

app.listen(8000)
```
- 客户端
```javascript
async authenticaition_base() {
  await axios.post('/Authentication_base')
}
```

优点：
1. 所有流行的网页浏览器都支持基本认证，但基本认证很少在可公开访问的互联网网站上使用，有时候会在小的私有系统中使用（如路由器网页管理接口）；
2. 开发时使用基本认证，是使用Telnet或其他明文网络协议工具手动地测试Web服务器。因为传输的内容是可读的，以便进行诊断；

缺点：
1. 由于用户 ID 与密码是是以明文的形式在网络中进行传输的（尽管采用了 base64 编码，但是 base64 算法是可逆的），所以基本验证方案并不安全，如果没有使用SSL/TLS这样的传输层安全的协议，那么以明文传输的密钥和口令很容易被拦截。该方案也同样没有对服务器返回的信息提供保护；
2. 现在的浏览器保存认证信息直到标签页或浏览器被关闭，或者用户清除历史记录。HTTP没有为服务器提供一种方法指示客户端丢弃这些被缓存的密钥。这意味着服务器端在用户不关闭浏览器的情况下，并没有一种有效的方法来让用户注销；

# session-cookie
`session` 是会话的意思，浏览器第一次访问服务端，服务端就会创建一次会话，在会话中保存标识该浏览器的信息。

- 它与 `cookie` 的区别就是 `session` 是缓存在服务端的，`cookie` 则是缓存在客户端
- 它与 `cookie` 的联系  二者一一对应，这样避免了`cookie`明文存储用户信息的缺点
## 认证过程

1. 服务器在接受客户端首次访问时在服务器端创建`seesion`，然后保存`seesion`(我们可以将`seesion`保存在 内存中，也可以保存在`redis`中，推荐使用后者)，然后给这个`session`生成一个唯一的标识字符串,然后在 `response header` 中种下这个唯一标识字符串；
2. 签名。这一步通过秘钥对`sid`进行签名处理，避免客户端修改`sid`；(非必需步骤)
3. 浏览器中收到请求响应的时候会解析响应头，然后将`sid`保存在本地`cookie`中，浏览器在下次`http`请求的请求头中会带上该域名下的`cookie`信息。
4. 服务器在接受客户端请求时会去解析请求头`cookie`中的`sid`，然后根据这个`sid`去找服务器端保存的该客户端的`session`，然后判断该请求是否合法。

![image.png](https://blog.warmplace.cn/static/img/f130548be8743db34ec7b8aa84021235.image.webp)

## 示例
```javascript
const http = require('http')
//此时session存在内存中
const session = {}

http.createServer((req, res) => {
  const sessionKey = 'sid'
  if (req.url === '/favicon.ico') {
    return
  } else {
    const cookie = req.headers.cookie
    //再次访问，对sid请求进行认证
    if (cookie && cookie.indexOf(sessionKey) > -1) {
      res.end('Come Back')
    }
    //首次访问，生成sid，保存在服务器端
    else {
      const sid = (Math.random() * 9999999).toFixed()
      res.setHeader('Set-Cookie', `${sessionKey}=${sid}`)
      session[sid] = { name: 'xianzao' }
      res.end('Hello Cookie')
    }
  }
}).listen(3000)
```
# Token
token 是一个令牌，浏览器第一次访问服务端时会签发一张令牌，之后浏览器每次携带这张令牌访问服务端就会认证该令牌是否有效，只要服务端可以解密该令牌，就说明请求是合法的，令牌中包含的用户信息还可以区分不同身份的用户。**一般 token 由用户信息、时间戳和由 hash 算法加密的签名构成**。

## 认证流程
1. 客户端使用用户名跟密码请求登录；
2. 服务端收到请求，去验证用户名与密码；
3. 验证成功后，服务端会签发一个 `Token`，再把这个 `Token` 发送给客户端；
4. 客户端收到 `Token` 以后可以把它存储起来，比如放在 `Cookie` 里或者`Local Storage` 里；
5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 `Token`；
6. 服务端收到请求，然后去验证客户端请求里面带着的 `Token（request头部添加Authorization）`，如果验证成功，就向客户端返回请求的数据 ，如果不成功返回`401`错误码，鉴权失败；

## Token和session的区别

1. 认证方式局限于在浏览器中使用，cookie 是浏览器端的机制，如果在app端就无法使用 cookie；
2. 为了满足全局一致性，我们最好把 session 存储在 redis 中做持久化，而在分布式环境下，我们可能需要在每个服务器上都备份，占用了大量的存储空间；
3. 在不是 Https 协议下使用 cookie ，容易受到 CSRF 跨站点请求伪造攻击。

token的缺点：

1. 加密解密消耗使得 `token` 认证比 `session-cookie` 更消耗性能；
2. `token` 比 `sid` 大，更占带宽；

两者对比，它们的区别显而易见：

1. `token` 认证不局限于 `cookie` ，这样就使得这种认证方式可以支持多种客户端，而不仅是浏览器。且不受同源策略的影响；
2. 不使用 `cookie` 就可以规避CSRF攻击；
3. `token` 不需要存储，`token` 中已包含了用户信息，服务器端变成无状态，服务器端只需要根据定义的规则校验这个 `token` 是否合法就行。这也使得 `token` 的可扩展性更强。

# JWT（JSON Web Token）
- 基于 `token` 的解决方案有许多，常用的是JWT，
- `JWT` 的原理是，服务器认证以后，生成一个 `JSON` 对象，
- 这个 `JSON` 对象肯定不能裸传给用户，那谁都可以篡改这个对象发送请求。因此这个 `JSON` 对象会被服务器端签名加密后返回给用户，返回的内容就是一张令牌，以后用户每次访问服务器端就带着这张令牌。
- 这个 `JSON` 对象可能包含的内容就是用户的信息，用户的身份以及令牌的过期时间。

##  JWT的组成部分
在该网站[JWT](https://jwt.io/)，可以解码或编码一个JWT。一个JWT形如：

![image.png](https://blog.warmplace.cn/static/img/b60810bda0d2124a92cd6b8ab25ef13c.image.webp)

它由三部分组成：`Header`（头部）、`Payload`（负载）、`Signature`（签名）

1. `Header`部分是一个JSON对象，描述JWT的元数据。一般描述信息为该Token的加密算法以及Token的类型。`{“alg”: “HS256″,”typ”: “JWT”}`的意思就是，该token使用HS256加密，token类型是JWT。这个部分基本相当于明文，它将这个JSON对象做了一个Base64转码，变成一个字符串。Base64编码解码是有算法的，解码过程是可逆的。头部信息默认携带着两个字段；
2. `Payload` 部分也是一个 JSON 对象，用来存放实际需要传递的数据。一般存放用户名、用户身份以及一些JWT的描述字段。它也只是做了一个Base64编码，因此肯定不能在其中存放秘密信息，比如说登录密码之类的；
3. `Signature`是对前面两个部分的签名，防止数据篡改，如果前面两段信息被人修改了发送给服务器端，此时服务器端是可利用签名来验证信息的正确性的。签名需要密钥，密钥是服务器端保存的，用户不知道。算出签名以后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用”点”（.）分隔，就可以返回给用户；
## JWT的特点

1. JWT 默认是不加密，但也是可以加密的。生成原始 Token 以后，可以用密钥再加密一次；
2. JWT 不加密的情况下，不能将秘密数据写入 JWT；
3. **JWT 不仅可以用于认证，也可以用于交换信息**。有效使用 JWT，可以降低服务器查询数据库的次数；
4. **JWT 的最大缺点是，由于服务器不保存 session 状态，因此无法在使用过程中废止某个 token**，或者更改 token 的权限。也就是说，一旦 JWT 签发了，在到期之前就会始终有效，除非服务器部署额外的逻辑；
5. **JWT 本身包含了认证信息，一旦泄露，任何人都可以获得该令牌的所有权限**。为了减少盗用，JWT 的有效期应该设置得比较短。对于一些比较重要的权限，使用时应该再次对用户进行认证；
6. **为了减少盗用，JWT 不应该使用 HTTP 协议明码传输，要使用 HTTPS 协议传输**；

# OAuth(开放授权)
**简单说，OAuth 就是一种授权机制。数据的所有者告诉系统，同意授权第三方应用进入系统，获取这些数据。系统从而产生一个短期的进入令牌（token），用来代替密码，供第三方应用使用。**

**令牌与密码的差异**<br />令牌（token）与密码（password）的作用是一样的，都可以进入系统，但是有三点差异。

- **令牌是短期的**，到期会自动失效，用户自己无法修改。密码一般长期有效，用户不修改，就不会发生变化。
- **令牌可以被数据所有者撤销，会立即失效。** 以上例而言，屋主可以随时取消快递员的令牌。密码一般不允许被他人撤销。
- **令牌有权限范围（scope）**，比如只能进小区的二号门。对于网络服务来说，只读令牌就比读写令牌更安全。密码一般是完整权限。

上面这些设计，保证了令牌既可以让第三方应用获得权限，同时又随时可控，不会危及系统安全。这就是 OAuth 2.0 的优点。<br />
注意，只要知道了令牌，就能进入系统。系统一般不会再次确认身份，所以令牌必须保密，泄漏令牌与泄漏密码的后果是一样的。 这也是为什么令牌的有效期，一般都设置得很短的原因。

## 授权分类
OAuth 2.0 对于如何颁发令牌的细节，规定得非常详细。具体来说，一共分成四种授权类型

- **授权码**（authorization code）方式，指的是第三方应用先申请一个授权码，然后再用该码获取令牌。
- **隐藏式** 允许直接向前端颁发令牌。这种方式没有授权码这个中间步骤，所以称为（授权码）"隐藏式"（implicit）
- **密码式** 如果你高度信任某个应用，RFC 6749 也允许用户把用户名和密码，直接告诉该应用。该应用就使用你的密码，申请令牌，这种方式称为"密码式"（password）。
- **凭证式**： 最后一种方式是凭证式（client credentials），适用于没有前端的命令行应用，即在命令行下请求令牌。

## GitHub第三方登录示例（授权码）

![image.png](https://blog.warmplace.cn/static/img/3c222b277de95e9bf0add5ddea2e7ce1.image.webp)

1. 在GitHub中备案第三方应用，拿到属于它的客户端ID和客户端密钥。

在`github-settings-developer settings`中创建一个`OAuth App`。并填写相关内容。填写完成后`Github`会给你一个客户端`ID`和客户端密钥。

![image.png](https://blog.warmplace.cn/static/img/f06e1d1733522f20f9bbd4950f4d1a59.image.webp)

1. 此时在你的第三方网站就可以提供一个Github登录链接，用户点击该链接后会跳转到Github。这一步拿着客户端ID向Github请求授权码code；
```javascript
const config = {
  client_id: 'XXX',
  client_secret: 'XXX'
}

router.get('/github/login', async (ctx) => {
  var dataStr = (new Date()).valueOf();
  //重定向到认证接口,并配置参数
  var path = "https://github.com/login/oauth/authorize";
  path += '?client_id=' + config.client_id;

  //转发到授权服务器
  ctx.redirect(path);
})
```

2. 用户跳转到`Github`，输入`Github`的用户名密码，表示用户同意使用`Github`身份登录第三方网站。此时就会带着授权码`code`跳回第三方网站。跳回的地址在创建该`OAuth`时已经设置好了；
3. 第三方网站收到授权码，就可以拿着授权码、客户端ID和客户端密钥去向`Github`请求`access_token`令牌；
4. `Github`收到请求，向第三方网站颁发令牌；
5. 第三方网站收到令牌，就可以暂时拥有`Github`一些请求的权限，比如说拿到用户信息，拿到这个用户信息之后就可以构建自己第三方网站的`token`，做相关的鉴权操作；
```javascript
router.get('/github/callback', async (ctx) => {
  console.log('callback..')
  const code = ctx.query.code;
  const params = {
    client_id: config.client_id,
    client_secret: config.client_secret,
    code: code
  }
  let res = await axios.post('https://github.com/login/oauth/access_token', params)
  const access_token = querystring.parse(res.data).access_token
  res = await axios.get('https://api.github.com/user?access_token=' + access_token)
  console.log('userAccess:', res.data)
  ctx.body = `
    <h1>Hello ${res.data.login}</h1>
    <img src="${res.data.avatar_url}" alt=""/>
  `
})
```

<div style='display:flex;align-items:center;font-size: 20px;'>
    <hr style='flex:1;font-size: 10px;'>
    &emsp;完结&emsp;
    <hr style='flex:1;font-size: 10px;'>
</div>

补充知识点： 单点登录
- 在企业发展初期，企业使用的系统很少，通常一个或者两个，每个系统都有自己的登录模块，运营人员每天用自己的账号登录，很方便。但随着企业的发展，用到的系统随之增多，运营人员在操作不同的系统时，需要多次登录，而且每个系统的账号都不一样，这对于运营人员来说，很不方便。于是，就想到是不是可以在一个系统登录，其他系统就不用登录了呢？这就是单点登录要解决的问题。
- 单点登录英文全称Single Sign On，简称就是SSO。它的解释是：**在多个应用系统中，只需要登录一次，就可以访问其他相互信任的应用系统。**

![image.png](https://blog.warmplace.cn/static/img/c6c42437395ad5210f73ed3ec46eefd6.image.webp)

要求
1. 登录退出只能在sso系统中进行
2. 子系统与sso系统通信得到登录状态

登录认证机制

![image.png](https://blog.warmplace.cn/static/img/587b8a777d3532189974106fa3393de2.image.webp)

1. 同域名单点登录

cookie 种在 顶级域名下面，  子应用服务器 通过session共享，如Spring-Session

2. 不同域名下的单点登录，现在一般采用auth授权