小蘑菇的技术之路

[TOC]

Adyen SDK 与其他常见的 SDK 不太一样，API Key 与 Client Key 都是需要自己手动生成的，live 与 test 的环境区分也较为严格，想要申请 live 账号必须通过公司，这就导致个人测试时相对比较麻烦。

准备工作

1. 注册账号

https://docs.adyen.com/checkout/get-started#step-1-sign-up-for-a-test-account

2. 生成 API Key

https://docs.adyen.com/checkout/get-started#api-key

生成后 24 小时失效，保存后无法再显示。

1- 选择 API credentials

2- 选择 ws@Company.{YourCompany}

3- 点击 Generate New API Key

4- 复制 API Key 并保存起来

5- 点击 Save Generated API Key

6- 弹窗确认

3. 测试一笔支付

https://docs.adyen.com/checkout/get-started#step-3-make-a-test-payment

终端测试

将下列代码中的 YOUR_API_KEY 和 YourCompanyECOM 替换掉并拷贝到终端运行。

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

curl https://checkout-test.adyen.com/v66/payments \
-H 'x-api-key: YOUR_API_KEY' \
-H 'content-type: application/json' \
-d '{
  "merchantAccount": "YourCompanyECOM",
  "reference": "My first Adyen test payment",
  "amount": {
    "value": 1000,
    "currency": "EUR"
  },
    "paymentMethod": {
    "type": "scheme",
    "encryptedCardNumber": "test_4111111111111111",
    "encryptedExpiryMonth": "test_03",
    "encryptedExpiryYear": "test_2030",
    "encryptedSecurityCode": "test_737"
  }
}'

1- YOUR_API_KEY 获取

YOUR_API_KEY 在第二步已经获取到了。

2- YourCompanyECOM 获取

1- 选择 Merchant accounts

2- Account code 下的内容即 YourCompanyECOM

测试结果

支付结果在后台也能看到。

这是一份集成清单列表，里面罗列了集成所需的步骤。

https://docs.adyen.com/checkout/integration-checklist

客户端一直无法显示 Sofort 这一项，开始我以为是 demo 没有实现，后来发现是国家选择的问题，国家默认选择了荷兰，恰巧 Sofort 不支持荷兰。

最近要使用一个支付的 SDK，纯 Swift 写的，用 CocoaPods 引入之后，怎么都找不到 Adyen-Swift.h文件，新建一个工程之后，在 Podfile中添加use_frameworks!就能找到。

最后通过@import Adyen解决的。

并不知道为什么！

是 JavaScript 的超集，有类型系统、接口、泛型、Decorators、丰富的配置选项。

3 小时入门教程(基础语法)

https://www.youtube.com/watch?v=PkZNo7MFNFg

数值表示

JavaScript 中整数也是由 64 位双精度浮点数表示的，下文详细介绍了 IEEE754 64 位双精度浮点数的表示范围与精度范围。

https://www.boatsky.com/blog/26

[TOC]

flex

数值，子元素的主轴填充，一个区域根据每个元素 flex 值的和进行划分。

flexDirection

主轴方向。

column(默认)

竖直方向上对齐。

column-reverse

竖直方向下对齐。

row

水平方向左对齐。

row-reverse

水平方向右对齐。

justifyContent

子元素在主轴上的排列方式。

主轴没有 stretch、baseline属性。

flex-start(默认)

左对齐或上对齐。

flex-end

右对齐或下对齐。

center

居中对齐。

space-between

无边距的平均分布。

space-around

有边距的平均分布。

space-evenly

完全平均分布。

alignItems

子元素在次轴上的排列方式，只作用于当前行或当前列(可换行时)。

次轴没有space-between、space-around、space-evenly属性。

streach(默认)

主轴方向上完全拉伸，如果设置了宽度 or 高度则失效。

flex-start

左对齐或上对齐。

flex-end

右对齐或下对齐。

center

居中对齐。

baseline

左对齐或上对齐，基线为所有元素的最高点。

flexWrap

nowrap

不换行。

wrap

换行。

wrap-reverse

逆序换行。

alignContent

子元素在次轴上的排列方式，全局而非当前行或当前列，只在可换行时有效。

flexBasis

数值，主轴的默认宽度 or 高度，如果同时设置了宽度 or 高度，会覆盖宽度 or 高度。

flexGrow

数值，填充剩余可用空间，0为默认值，相当于没有设置该属性，可为>=0的浮点数，小于1的值代表占据宽度或高度的比例。

flexShrink

数值，没有设置换行时，部分元素会被挤出屏幕，设置该属性为1后可为当前元素分配剩余可用空间。

top bottom left right position

后布局的元素会覆盖先布局的元素。

position

relative

相对位置，默认值。

absolute

绝对位置，会影响其他子元素。

[TOC]

1 小时入门教程(购物清单 常用组件)

https://www.youtube.com/watch?v=Hf4MJH0jDb4

iOS 模拟器快捷键失效

1

I/O -> Input -> Send Keyboard Input to Device

Web 调试快捷键

1

⌥ + ⌘ + I

2 小时入门教程(VS Code 插件、Web 调试、VS Code 调试)

https://www.youtube.com/watch?v=0-S5a0eXPoc

VS Code 插件

1
2
3
4

React Native Tools
React-Native/React/Redux
Prettier
Material Icon Theme

Redux Snippets

rsf

引入模块 & 创建函数

rnss

创建 StyleSheet

VS Code 快捷键

⌘ + D

选中文本，点击 ⌘ + D 可多选相同的文本

⌥ + ↑ / ⌥ + ↓

选中文本，点击 ⌥ + ↑ 或 ⌥ + ↓ 移动位置

⇧ + ⌥ + ↑ / ⇧ + ⌥ + ↓

选中文本，点击 ⇧ + ⌥ + ↑或⇧ + ⌥ + ↓拷贝一份相同内容

为什么要使用 StyleSheet

1. 运行时会检查拼写
2. Facebook 做了优化

var let const

let 不能声明多次

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

var i = "global";

function test () {
  var i = "function";
  console.log(i);
}

test();
console.log(i);

/*
console log:
"function"
"global"
*/

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

var i = "global";

function test () {
  i = "function";
  console.log(i);
}

test();
console.log(i);

/*
console log:
"function"
"function"
*/

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

function test () {
  i = "function";
  console.log(i);
}

test();
console.log(i);

/*
console log:
"function"
"function"
*/

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

let i = "global";
function test () {
  let i = "function";
  console.log(i);
}

test();
console.log(i);

/*
console log:
"function"
"global"
*/

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

let i = "global";
function test () {
  i = "function";
  console.log(i);
}

test();
console.log(i);

/*
console log:
"function"
"function"
*/

1
2
3
4
5
6
7
8
9
10
11
12

function test () {
  let i = "function";
  console.log(i);
}

test();
console.log(i);

/*
console log:
Uncaught ReferenceError: i is not defined 
*/

Object.freeze()

undefined null

===

!==

Array

push pop

shift unshift

Math.random()

Math.floor()

parseInt()

字符串 -> 数值

Arrow Function

匿名函数

Rest Operator

参数封装为数组

Spread Operator

深拷贝

use strict

import requires

import * as … from …

export default

默认导出，引用时无需使用 {}

import subtract from …

https://www.jianshu.com/p/507c89d456e1

少数派

https://steppark.net/15978209110755.html

https://useyourloaf.com/blog/iphone-13-screen-sizes/

https://useyourloaf.com/blog/iphone-14-screen-sizes/