虚拟信用卡（Virtual Credit Card，简称VCC。

充值

Depay虚拟卡绑定ChatGPT以及微信、支付宝等使用场景和建议

End

背景

设计稿转代码

参考文档：如何将设计稿转成高度可维护的代码？

https://www.figma.com/community/plugin/1329812760871373657/codia-ai-design-screenshot-to-editable-figma-design

一、UI2Code 工具汇总

对于设计稿转代码的需求，在线产品设计工具 Pixso 提供了 以下3款设计插件：

与以往传统的从设计软件中导出 HTML 不同，CodeFun 插件不仅可以智能分析页面布局，生成非绝对高宽的 Flexbox 代码，而且还可以识别循环列表、九宫格、等比例分配等多种业务场景。

CodeFun 生成的代码简短可读，语义化程度高，基本上可以达到中级工程师的水准，实测研发效率至少提升 500%。

二、UI2Code 代码提取

1、Pixso to code

2、Code.fun

1、在Pixso上无法直接使用 Code.fun 将本应用中的设计稿转成代码。所以需要先将其上传到对应网站中

2、上传后，你将需要到所上传的指定位置查看设计稿及转码。进入指定页面的代码查看方法如下：

3、coDesign

详见：codesign官网：智能生成页面代码

三、UI2Code 代码提取的验证

提取的代码可在下述在线网站中进行验证。

详见：OnlineCoding在线编码

End

一、自己购买（不推荐）

2、国外手机号验证码的获取

1、网址：https://sms-activate.org/getNumber

二、网上接码

使用过的示例截图：

云短信：https://yunduanxin.net/

End

前言

iOS描述文件位置：

~/Library/MobileDevice/Provisioning Profiles

一、申请证书

1、CSR

选择类型

上传添加CSR

选择后，

一、基本的操作

npmjs的官网地址：https://www.npmjs.com

以上传本地的 ~/Project/TestNPM 为例。

1、镜像的处理

1.1、查看npm当前登录源/使用的镜像

1

npm config get registry

1.2、设置镜像

1
2

npm config set registry https://registry.npmjs.org/				# 上传包必须使用原本的登录源
npm config set registry https://registry.npm.taobao.org/	# 原来错误的登录源

附：为了上传npm包能够成功，所以，如果你之前使用的是淘宝镜像，那么你就得执行此命令替换回原来的镜像。

2、npm的登录/连接

npm login的命令及执行结果如下：

可以看到这边登录到了淘宝了，是错误的。

1
2
3
4
5

npm config get registry

npm login

npm publish --access=public

附：如果你执意使用错误的登录源后，那么再去publish会出现如下错误。

错误1：npm ERR! 403 Forbidden - PUT https://registry.npm.taobao.org/testnpm - [no_perms] Private mode enable, only admin can publish this module

错误2：npm ERR! 403 Forbidden - PUT https://registry.npmjs.org/testnpm - You do not have permission to publish "testnpm". Are you logged in as the correct user?

原因：组件版本已存在，更新版本号/版本名(如果该版本的名字已被占用)，然后重新npm publish。

比如这里我们使用了已经被占用的testnpm

修改成未被占用的名字lcqtestnpm，再npm publish后，

网络翻墙后，再执行npm publish后，结果如下：

附：提交后的包地址为https://www.npmjs.com/package/lcqtestnpm

参考文章：npm link,你不知道的npm模块调试技巧

一、基本的操作

1. 背景

node 应用开发中，我们不可避免的需要使用或拆分为 npm 模块，经常遇到的一个问题是：

新开发或修改的 npm 模块，如何在项目中试验？

新同学一般会有以下几种方式：

为了方便示范，我们假设项目是 my-project, 需要用到一个独立的 my-utils 模块

1.1 发布一个 beta 版本

• 优点：你高兴就好。
• 缺点： 无趣+无趣+无趣，麻烦+麻烦+麻烦。

1.2 直接用相对路径安装

方式1：终端npm install 路径

1
2

$ cd path/to/my-project
$ npm install path/to/my-utils

• 优点：简单明了
• 缺点： 调试过程中往往需要微调，此时需要切换到 my-utils 目录修改，然后反复重新 install，很麻烦。

例如：

1
2
3
4
5
6
7
8
9

cd xxx/demo
npm install ../react-native-theme-overlay
附：../react-native-theme-overlay 这个路径是react-native-theme-overlay这个库其自身的pageage.json文件所在的路径

则package.json中
原来：
    "react-native-theme-overlay": "^0.8.3",
现在：
    "react-native-theme-overlay": "file:../react-native-theme-overlay",

方式2：直接在demo的package.json中处理。

做法，如上例子，直接写”file:../react-native-theme-overlay”

问题：如果调试的b库，依赖调试的a库，这个时候想a、b两个调试库都OK，应该怎么处理？

答：

1.3 使用软链

1
2

$ cd path/to/my-project/node_modules
$ ln -s path/to/my-utils my-utils

• 优点：软链后，两边修改直接同步
• 缺点： 指令操作麻烦，不同操作系统语法不一样

2. 正解 - npm link

但其实 npm 本身已经对此类情况提供了专门的 npm link 指令。

相关文档： https://docs.npmjs.com/cli/link

下面我们简单介绍下用法：

1
2

$ cd path/to/my-project
$ npm link path/to/my-utils

简单的替换一个单词，就搞定了，cool~

如果这两种的目录不在一起，那还有一种方法：

1
2
3
4
5
6
7

$ # 先去到模块目录，把它 link 到全局
$ cd path/to/my-utils
$ npm link
$
$ # 再去项目目录通过包名来 link
$ cd path/to/my-project
$ npm link my-utils

该指令还可以用来调试 node cli 模块，譬如需要本地调试我们的 egg-init，可以这样：

1
2
3
4

$ cd path/to/egg-init
$ npm link
$ # 此时全局的 egg-init 指令就已经指向你的本地开发目录了
$ egg-init # 即可

想去掉 link 也很简单：

1
2

$ npm unlink my-utils 
或者 直接$ npm unlink 这样所有的link都会去除

3. 写在最后

• 该方法只是为了最后一步调试，模块本身的正确性，应该更多的通过单元测试来保证。
• 单元测试相关内容，可以参见：单元测试

ReactNative必备的语言基础知识

参考文章：

• 极客学院 ECMAScript 6 系列教程

ReactNative的语法基础要求JS,JSX,ES6.其中ES6是这三种语法的核心。系统学习ES6的语法是ReactNative编程的基本要求。

下面记录ES6的典型语法的示例,以方便编程中的随时查用。

一、关键字

参考文章：极客学院 ECMAScript 6 let 和 const 命令

二、变量的解构赋值

参考文章：

• 极客学院 ECMAScript 6 变量的解构赋值

• ES6解构赋值

对变量复制时,当等号左边定义的变量和等号右边的赋值形式一致时,能够对变量自动赋值;

1
2
3
4
5
6
7
8

let {a, b} = {a:"x", b:"y"};
//a = x, b = y;

let [a, b] = [0, 1, 2, 3];
//a=0, b = 1;

let [a, ...b] = [0, 1, 2, 3];
//a=0, b = [1,2,3];

常见于：

• style的解构赋值

三、Generator函数

参考文章：极客学院 ECMAScript 6 Generator 函数

通过在函数名前添加 ***** 和在方法中添加 yield 关键字来定义,控制函数的顺序执行.

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

// 设有如下函数
function *genFun() {
      yield 'Lily';
      yield 'Json';
      return 'Niu';
    }


// 则以下第一种调用的写法及结果如下：
    let gen = genFun();
    genFun().next();//{value: 'Lily', done: false}
    genFun().next();//{value: 'Json', done: false}
    genFun().next();//{value: 'Niu', done: true}

// 则以下第二种调用的写法及结果如下：
for (i of gen) {	//使用for of 语句来遍历
      console.log(i);
    }
//return后的元素,不会被遍历到
Lily
Json

四、Promise对象

参考文章：极客学院 ECMAScript 6 Promise 对象

通过定义Promise和关键字then的结合，可以方便实现函数的成功回调和失败回调。

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

1)定义
    var prom = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('download success')
        resolve('success');
      }, 1000);
    });

    prom.then((flag) => {
      console.log('success block:' + flag);
    }, (error) => {
      console.log('failure block:' + error);
    })

(2)async关键字和Promise实例相结合,实现多个异步线程的顺序执行;
    async function foo() {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 5000);
      });

      console.log('await function completed');
    }
    foo();
//打印消息会在5s后resolve回调执行后,才执行;

本章介绍

• 第1节：WebStorm的使用技巧

一、注册码/破解

注册码获取：

进入http://idea.lanyus.com进行获取。

二、代码格式化

三、WebStorm好用的工具

1、WebStorm文档注释技巧

• 1、Webstorm设置 -> Live Template -> JavaScript -> 右上角“+”

• 2、文档注释技巧2_模板的编辑

1
2
3
4
5
6
7
8
9
10
11

/**
 * $FileName$
 *
 * @Description: $FileDesc$
 *
 * @author      ciyouzen
 * @email       dvlproad@163.com
 * @date        $date$ $time$
 *
 * Copyright (c) dvlproad. All rights reserved.
 */

①、设置模板内容中的变量定义

②、勾选你选将该模板应用到的编程语言/地方

四、WebStorm快捷键

五、更多好用WebStorm插件推荐

• IconViewer：WebStorm安装IconViewer插件
• webstorm 常用插件集合

一、注册码/破解

二、代码格式化

• 参考文档：Flutter开发者中文网-开发工具-代码格式化

三、VSCode好用的工具

1、koroFileHeader(vscode文件头部注释插件)

1、安装

2、配置

初始值为：

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

{
    "diffEditor.ignoreTrimWhitespace": true,
    "[dart]": {
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.rulers": [
            80
        ],
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
        "editor.wordBasedSuggestions": false
    },
    "workbench.colorTheme": "Visual Studio Dark",
    "eslint.alwaysShowStatus": true,
    "dart.debugExternalLibraries": false,
    "dart.debugSdkLibraries": false,
    "dart.debugExternalPackageLibraries": false,
    "dart.flutterSdkPath": "/Applications/flutter",
    "editor.formatOnSave": true
}

在json后面加上以下内容：

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

// "editor.fontSize": 20,
// "files.autoSave": "onFocusChange",
// "editor.formatOnPaste": true,
// "workbench.colorTheme": "Solarized Light",
// "[vue]": {
//     "editor.defaultFormatter": "octref.vetur"
// },
// "[javascript]": {
//     "editor.defaultFormatter": "esbenp.prettier-vscode"
// },
"fileheader.customMade": {
    "Author": "dvlproad",
    "Date": "Do not edit",
    "LastEditors": "填入自己的名字",
    "LastEditTime": "Do not edit",
    "Description": "",
    "FilePath": "Do not edit",
},
"fileheader.cursorMode": {
    "description": "",
    "event": "",
    "param": "",
    "return": ""
},
"fileheader.configObj": {
    "prohibitAutoAdd": [
        "json",
        "md",
    ], // 禁止.json .md文件，自动添加头部注释
},

3、如何使用

文件头部添加注释:

快捷键：ctrl+alt+i
功能：保存文件的时候，自动更新最后的编辑时间和编辑人
在光标处添加函数注释:

快捷键：ctrl+alt+t
功能在光标处自动生成一个注释模板
效果

1
2
3
4
5
6
7
8

/*
 * @Author: dvlproad
 * @Date: 2022-04-13 10:17:11
 * @LastEditors: 填入自己的名字
 * @LastEditTime: 2022-04-13 16:26:54
 * @Description: 
 * @FilePath: /wish/Users/qian/Project/flutter_effect_kit/lib/src/hud/loading_util.dart
 */

2、GitLens(VsCode中好用的git源代码管理插件：每一行代码旁边都有日志)

四、VSCode快捷键

VSCode快捷键1_前进后退

五、更多好用VSCODE 插件推荐（2023版）

• VS code 打造 shell脚本 IDE
• 最新最全 VSCODE 插件推荐（2023版）
• vscode自动生成项目目录结构 project-tree