0%

[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

Adyen-API credentials

2- 选择 ws@Company.{YourCompany}

Adyen-API credentials2

3- 点击 Generate New API Key

Adyen-API credentials3

4- 复制 API Key 并保存起来

5- 点击 Save Generated API Key

6- 弹窗确认

Adyen-API credentials4

3. 测试一笔支付

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

终端测试

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

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

Adyen-Merchant accounts

2- Account code 下的内容即 YourCompanyECOM

Adyen-Merchant accounts2

测试结果

Adyen-Test

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

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

最后通过@import Adyen解决的。

并不知道为什么!

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

TypeScript

[TOC]

flex

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

flexDirection

主轴方向。

column(默认)

竖直方向上对齐。

column-reverse

竖直方向下对齐。

row

水平方向左对齐。

row-reverse

水平方向右对齐。

justifyContent

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

主轴没有 stretchbaseline属性。

flex-start(默认)

左对齐或上对齐。

flex-end

右对齐或下对齐。

center

居中对齐。

space-between

无边距的平均分布。

space-around

有边距的平均分布。

space-evenly

完全平均分布。

alignItems

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

次轴没有space-betweenspace-aroundspace-evenly属性。

streach(默认)

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

stretch

flex-start

左对齐或上对齐。

flex-start

flex-end

右对齐或下对齐。

center

居中对齐。

baseline

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

baseline

flexWrap

nowrap

不换行。

wrap

换行。

wrap

wrap-reverse

逆序换行。

alignContent

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

flexBasis

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

flexGrow

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

flexGrow

flexShrink

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

flexShrink-1

flexShrink-2

flexShrink-3

top bottom left right position

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

position

relative

相对位置,默认值。

absolute

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

top-1

top-2

bottom

left

right

absolute

relative

[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 …

手机型号 屏幕尺寸 逻辑分辨率(pt) 物理分辨率(px) 倍图 安全区域-顶 安全区域-底
4/4s 3.5 inch 320*480pt 640*960px @2x
5/5c/5s/SE/iPod Touch 7 4.0 inch 320*568pt 640*1136px @2x
6/6s/7/8/SE2/SE3 4.7 inch 375*667pt 750*1334px @2x
6 Plus/6s Plus/7 Plus/8 Plus 5.5 inch 414*736pt 1242 * 2208px @3x
X/XS/11 Pro 5.8 inch 375*812pt 1125* 2436px @3x
XR/11 6.1 inch 414*896pt 828* 1792px @2x
XS Max/11 Pro Max 6.5 inch 414*896pt 1242* 2688px @3x
12 mini/13 mini 5.4 inch 360*780pt 1080* 2340px @3x 50 34
12/12 Pro/13/13 Pro/14 6.1 inch 390*844pt 1170* 2532px @3x 47 34
12 Pro Max/13 Pro Max/14 Plus 6.7 inch 428*926pt 1284* 2778px @3x 47 34
14 Pro 6.1 inch 393*852pt 1179*2556px @3x 59 34
14 Pro Max 6.7 inch 430*932pt 1290*2796px @3x 59 34

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/

9e12c3bbf1674051a52734ab93f2c72d

img