QQs'Note

资料

见知乎·Angular资料获取不完全指南

异步响应方法中更新数据，视图无法及时更新

解决方法：导入ChangeDetectRef

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

import { ChangeDetectorRef } from '@angular/core'; constructor( private changeDetectorRef:ChangeDetectorRef) { // user token updated! this.userService.currentUserToken$.subscribe(res=>{ if(res){ this.logged = true; this.email = res['UserName'].value; this.changeDetectorRef.detectChanges() } }) } }

httpClient的任意方法(get、post)无法发送请求

所在模块未引入HttpClientModule

重复声明Directive

1
2

ERROR in Type NumberInputDirective in D:/ProjectX/src/app/common/number-input.directive.ts is part of the declarations of 2 modules: blablaA and blablaB Please consider moving NumberInputDirective to a higher module that imports blablaA and blablaB. You can also create a new NgModule import that NgModule in blablaA and blablaB

指令是可声明对象。 它们必须在 NgModule 中声明(declarations)之后，才能用在应用中。指令应当且只能属于一个 NgModule。不要重新声明那些从其它模块中导入的指令。

1
2
3
4
5
6
7
8

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NumberInputDirective } from '../common/number-input.directive';
@NgModule({
    imports: [CommonModule],
    declarations: [NumberInputDirective],
    exports:[NumberInputDirective]
export class SharedModule {}

angular.json “should NOT have additional properties(xxxx)”

因框架版本问题（归根结蒂是包版本差异问题），不支持xxx属性，如angular原生国际化配置v8与v9存在配置差异，查看文档应区分文档版本

关于升级

参考Angular 升级指南

另，@angular/cli和angular-cli 是两个东西，安装了后者可以使用部分ng命令，可知ng version是beta版本，ng update无效且报“does not match any file…”

issue 升级到9后，渲染中止，报“Uncaught SyntaxError: Strict mode code may not include a with statement”

见stackoverflow回答

remove from main.ts

1

export { renderModule, renderModuleFactory } from '@angular/platform-server';

npm ERR! Invalid package name “ngcc_entry_points.json”: name cannot start with an underscore
升级Angular过程中未知package错误 清理依赖重新安装

1 2 3

rm -rf node_modules rm -f package-lock.json npm i

css: ng-deep host-context

曾使用ng-inline-svg将svg模板嵌入angular模板(见svg)，插入方式使用的是其定义的指令

1	<div [inlineSVG]="'assets/image/icon.svg'"></div>

目的是使用类似

1 2 3

.nav-checked svg>path{ fill:red }

的方式实现动态图标样式
事实上，ng-inline-svg指令将宿主元素（div）作为组件锚点，用svg模板实例化为一个独立组件，宿主元素所在组件的样式无法作用到子组件
Angular官方文档中对于样式‘透传’有如下solution

1 2 3

:host ::ng-deep .nav-checked svg>path{ fill:red }

:host表示从本组件开始::ng-deep向下生效
见Doc：组件样式

参考ng-inline-svg issue#14

关于deprecated，是deep与w3c的草案曾用关键字冲突，然而其一Angular尚无替代方案，其二w3c已移除了相关建议，若将来协议落地，Angular亦无须重复实现这个feature(引述：StackOverflow：What to use in place of ::ng-deep)

:host-context可以根据组件外部元素来决定组件内的样式

1
2
3

<nav class="collapse">
<nav-header></nav-header>
<nav>

1
2
3

:host-context(.collapse) .title{
    ...
}

Can’t bind to ‘ngForOf’ since it isn’t a known property of XXX

疑似升级至ng11后出现，多个modules，任意组件使用指令均可能报错，解决方法是在所在子模块手动引入CommonModule

1
2
3
4
5
6
7
8
9
10

...
import { CommonModule } from '@angular/common';


@NgModule({
    imports: [SharedModule, CommonModule],
    declarations: [...],
    providers: [],
})
export class ManageModule { }

须知，vscode是Electron应用，atom是Electron应用，GeForce Experience也是Electron应用，还有Skype。。。

本质是使用chronium浏览器内核和HTML实现应用程序UI，底层业务是基于js”粘合”的，即除了require nodejs native modules之外，还可以将基于其他技术生态的组件集成进来，这里会用到webpack打包。
得益于HTML UI开发的方便，和nodejs api的丰富，使得app 开发变得方便快捷，而且基于js实现了相当完美的跨平台，然而泻药如下：

• 因为不可避免的打包浏览器内核，出品动辄100MB
• 因为打包的是chrome家的内核，内存占用相当大

如果是windows平台的应用需求，wpf的产品将在体积，资源占用，安全的系统访问等方面碾压electron

知乎：为什么用 electron 开发的桌面应用那么多？

构建项目框架

1. 脚手架 npm i -g angular-cli electron
2. 创建Angular项目 ng new ngelectron —routing
3. package.json
4. 主进程main.js

Caution! 新版本electron嵌入了nodejs运行时，故而系统安装的nodejs环境仅用于执行npm install —save-dev electron，与之后的开发运行再无关系

以angular-electron为例，npm run start过程，

1
2
3
4

"start": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
"postinstall:electron": "node postinstall",
"electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve,
"electron:serve-tsc": "tsc -p tsconfig-serve.json",

1. 调用postinstall (postinstall.js)修改angular的webpack target
2. 随后运行ng serve
3. 连接ng serve启动的localhost:4200
4. 调用tsc编译main.ts此时生成了main.js
5. 执行electron .

   webpack target

IPC

IPC 代表 Inter-Process Communication进程间通信。Electron 使用 IPC 来在main主进程和renderer渲染进程之间传递 JSON 信息。
main

1

1

资源打包关于asar vbscript

asar 是一种将多个文件合并成一个文件的类 tar 风格的归档格式。 Electron 可以无需解压整个文件，即可从其中读取任意文件内容。

逻辑中视为文件夹

1
2

const fs = require('fs')
fs.readFileSync('/path/to/example.asar/file.txt')

单例模式 单例参数更新

外观

无边透明,隐藏任务栏

1

let mainWindow = new BrowserWindow({ transparent: true, frame: false, skipTaskbar:true })

1
2
3

body{
    background:transparent
}

交互

保持置顶

1
2
3

win = new BrowserWindow({
   alwaysOnTop: true
 });

electron-drag 方案

命令及参数

开发模式electron . [args]

1

args = process.argv.splice(2)

1

args = process.argv.splice(1)

electron-builder

部分配置

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
38
39
40
41
42
43

"productName": "CSCportal",
  "directories": {
    "output": "release/"
  },
  // 额外打包的资源 不会打包到\resources\app.asar
  // 以下规则将文件单独打包到\resources\addon
  "extraResources": {
    "from": "addon/",
    "to": "addon/"
  },
  // 额外打包配置文件到根目录
  "extraFiles":["config.xml"],
  // 打包文件的parttern表达式
  "files": [
    "**/*",
    "!package.json",
    "!src/",
    "src/app/shared/*", // 打包main调用的模块（.js）
    "!src/app/shared/*.ts" // 忽略ts源文件
  ],
  // windows环境
  "win": {
    "target": [
      "nsis", // 使用nsis工具生成安装包
      "zip"   // 生成zip免安装压缩包
    ],
    // code sign（代码签名）
    "signingHashAlgorithms":["sha1"], // sign algorithms ['sha1', 'sha256']
    "certificateFile":"build/cert/XXXXX.pfx", // 证书路径
    "certificatePassword":"XXXXXXX",  // 证书密码
    "verifyUpdateCodeSignature":false, // 安装前是否验证签名可用更新（available update）
    "rfc3161TimeStampServer": "http://timestamp.digicert.com", // time stamp server
    "signDlls": true //是否签名DLL
  },
  "nsis":{
    "oneClick":false, // 禁用一键安装
    "perMachine":true, // 为所有用户安装
    "allowToChangeInstallationDirectory":true, // 自定义安装路径
    "include":"build/installer.nsh" // 包含脚本
  },
  "mac": {},
  "linux": {}
}

nsis宏命令 installer.nsh

在electron-builder.json配置中引入.nsh脚本，脚本定义了NSIS打包生命周期中插入的宏指令

可插入宏：

• customHeader
  可以配置NSIS的一些环境或运行条件，如显示详细信息框：

  1 2 3 4

  !macro customHeader ShowInstDetails show ShowUninstDetails show !macroend

  详见调用源码
• preInit
  This macro is inserted at the beginning of the NSIS .OnInit callback
• customInit
• customUnInit
• customInstall
  安装
• customUnInstall
  卸载
• customRemoveFiles
• customInstallMode

  1 2 3

  !macro customInstall WriteRegStr HKLM "SOFTWARE\Carestream Dental\CSCportal" "InstallDir" $INSTDIR !macroend

  uninstaller.nsh

  1 2 3

  !macro customUnInstall DeleteRegKey HKLM "SOFTWARE\Carestream Dental\CSCportal" "InstallDir" !macroend

  BUILD_RESOURCES_DIR and PROJECT_DIR are defined.

build is added as addincludedir (i.e. you don’t need to use BUILD_RESOURCES_DIR to include files).

build/x86-unicode and build/x86-ansi are added as addplugindir.
Caution! 我的angular-electron6项目中，仍然要手动载入plugin，写法同《NSIS插件》笔记中的代码

File associations macro registerFileAssociations and unregisterFileAssociations are still defined.

LogicLib.nsh默认已包含

All other electron-builder specific flags (e.g. ONE_CLICK) are still defined.

参考 electron-builder文档nsis部分 参考NSIS相关笔记

Caution!以上文档对应最新版本electron-builder,经实践v22.7.0可以返回build异常信息，应更新并使用新版本

调试主进程

VScode launch.json:

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

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args" : [".","--input=d:\\temp\\input.xml","--output=d:\\temp\\output.xml"],
      "outputCapture": "std"
    }
  ]
}

另外此app是webpack打包的angular electron应用，调试调用主程序js文件，每次更新代码后应使用postinstall进行编译。

自动更新服务

原理似乎是这样的，首先是build，将构建好的文件publish到一个下载中心，很多工具都封装了比如GitHub和Bintray

electron-builder方案

1. install electron-updater
2. 配置publish参数
   一般在package.json中，已分离出electron-build.json配置的在该文件中
   本章未完待补充QQs

Error write EPIPE

修改node，electron-builder版本使之兼容可解决

[object][object]

修改electron-builder版本规避

BrowserWindow.loadURL Issue

npm ERR! code ELIFECYCLE

double free exception,重复释放资源，错误使用app.exit()出现此异常
如

1
2
3
4
5
6

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    // app.quit(); // safe!
    app.exit(-1) // ELIFECYCLE Exception!!
  }
})

spawn makensis,exe ENOENT

electron-builder 不支持yarn2+ 直接使用electron-builder build命令打包即可
GitMemory:Electron-Userland

require is not defined

1
2
3
4
5
6
7
8
9
10

// Create the browser window.
win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: false, // is default value after Electron v5
    contextIsolation: true, // protect against prototype pollution
    preload: path.join(__dirname, "preload.js")
  }
});

shell.openExternal

Open the given external protocol URL in the desktop’s default manner. 对于系统支持的协议，以系统默认行为打开URL

windows 开始 搜索“按协议指定默认应用程序”或“Choose default apps by protocol”

其他概念

• Electron Fiddle是由Electron开发并由其维护者支持的沙盒程序
• 离屏渲染(Off-Screen Rendering)相对于当前屏幕渲染，GPU另辟缓存区为下一步的显示效果进行渲染的机制

RoadMap

webgl学习路线

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

@startmindmap
*[#409EFF] 《webgl编程指南》
    **[#79bbff] 渲染管线
        ***_ 理解着色器 图元 光栅化 片元等
        ***_ webglcontext绘制流程
    **[#79bbff] 矩阵变换
        ***_ 平移 旋转 缩放
        ***_ 视图矩阵
    **[#79bbff] 渲染特效
        ***_ 颜色 纹理贴图

    **[#79bbff] GLSL
        ***_ 基本类型
        ***_ 矢量和矩阵
        ***_ 结构体
        ***_ 函数
        ***_ 限定字
        ***_ 预处理

    **[#79bbff] 三维世界
        ***_ 投影
        ***_ 可视范围 可视空间
        ***_ 遮挡

    **[#79bbff] 光照

    **[#79bbff] 高级技术
        ***_ 帧缓冲区和投影
        ***_ 等距圆柱贴图
        ***_ 等宽度线


@endmindmap

目标导向

keyWords: 渲染引擎开发 shader设计优化

三维模型的平面投影————矩阵运算

图解webgl

渲染管线

其中所谓光栅化 我理解是屏幕光栅 将矢量图形映射到有限分辨率的屏幕像素上 每个像素通过片元着色器绘制

WebGLRenderingContext

获取webgl并调用webgl接口设置渲染背景色

1
2
3
4
5
6
7
8

const canvas = document.getElementById('webgl');
// if webgl context isnot exist, init it 
const webgl = canvas.getContext('webgl');

// Set clear color to black, fully opaque
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
webgl.clear(webgl.COLOR_BUFFER_BIT);

着色器

着色器是使用 GLSL(OpenGL ES Shading Language)编写的程序，它携带着绘制形状的顶点信息以及构造绘制在屏幕上像素的所需数据，换句话说，它负责记录着像素点的位置和颜色。

顶点着色器（Programmable Vertex Processor）和 片元着色器（Programmable Fragment Processor）

WebAPI: WebGLRenderingContext.shaderSource设置着色器源码，参数分别是着色器变量，和源码字符串

1
2
3
4
5
6
7
8
9
10
11

const vertexShaderSource = `
    void main(){
        gl_Position=vec4(0.0,0.0,0.0,1.0);
        gl_PointSize=100.0; //这里写100就会报错！
    }
`;
const fragmentShaderSource = `
    void main(){
        gl_FragColor=vec4(1.0,1.0,0.0,1.0);
    }
` 

WebGL: INVALID_OPERATION: useProgram: program not valid

着色器函数

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 38 39

const initShader = (gl: WebGLRenderingContext )=>{ // 创建程序对象 const program = gl.createProgram(); if(program){ // 创建着色器对象 const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertexShaderSource) const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource) // 附加着色器到程序 gl.attachShader(program, vertexShader!) gl.attachShader(program, fragmentShader!) // 链接webgl上下文对象和程序对象 gl.linkProgram(program) if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { alert( "无法初始化着色器程序: " + gl.getProgramInfoLog(program), ); return null; } // 启动程序对象 gl.useProgram(program) } } const loadShader = (gl: WebGLRenderingContext, type:number, source: string)=>{ const shader = gl.createShader(type) if(!shader) return null gl.shaderSource(shader, source) gl.compileShader(shader) if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert( "编译着色器时出错：" + gl.getShaderInfoLog(shader), ); gl.deleteShader(shader); return null; } return shader }

使用上述着色器绘制点

1 2	initShader(webgl) webgl.drawArrays(webgl.POINTS, 0, 1)

vertex shader attribute

声明attribute变量

1
2
3
4
5
6
7

const vertexShaderSource = `
    attribute vec4 a_Position;
    void main(){
        gl_Position=a_Position;
        gl_PointSize=100.0;
    }
`;

1
2

const a_Position = webgl!.getAttribLocation(webglProgram, 'a_Position')
webgl!.vertexAttrib3f(a_Position, 0.0, 0.5, 0.0);

1

vertexAttrib3fv(index, value)

fragment shader uniform

相应的片元着色器中是uniform变量 对于片元着色器有特殊要求指明浮点数精度

1
2
3
4
5
6
7
8
9

const fragmentShaderSource = `
    precision mediump float; //中等精度浮点数
    uniform vec4 u__FragColor; 
    void main(){
        gl_FragColor=u__FragColor;
    }
` 
const u__FragColor = webgl.getUniformLocation(webgl.program,'u__FragColor');
webgl.uniform4f(u__FragColor, 1.0,1.0,0.0,1.0)

attribute 变量用于在顶点着色器中从应用程序（如OpenGL程序）传递逐顶点数据。每个顶点可以有不同的值，因此 attribute 变量通常用于传递顶点的位置、法线、纹理坐标、颜色等数据。

使用场景：

• 当你需要为每个顶点提供特定的数据时。
• 当数据需要随着每个顶点变化时。

  uniform 变量用于在顶点着色器和片段着色器之间传递数据，或者从应用程序传递到着色器程序。uniform 变量的值在整个绘制调用中是恒定的，不会随着顶点的变化而变化。

使用场景：

• 当你需要传递一些在整个绘制调用中保持不变的数据时。
• 当数据需要在顶点着色器和片段着色器之间共享时。

补间动画

补间动画在两关键帧之间插值而得。

多点数据

标量 向量 张量

• 标量 scalar
• 向量 vendor
• 张量 tensor 与矢量相类似，定义由若干坐标系改变时满足一定坐标转化关系的有序数组成的集合为张量。

在二维空间里，二维二阶张量（平面应力张量）的每个方向都可以用二维空间两个方向表示。（区分2阶张量的2个方向，和二维空间的两个方向x，y）所以共有2^2=4个方向。
在三维空间里，三维二阶张量（空间应力张量）的每个方向都可以用三维空间三个方向表示。（区分2阶张量的2个方向，和三维空间的三个方向x，y、z）所以共有3^2=9个方向。通俗理解张量tensor

三维空间内的向量根据笛卡尔坐标系的x,y,z三个基向量分解为三个分量 故

而三维二阶张量，其物理含义是某点分解为三个两两正交的平面以及每个平面上的力（力是向量 其自有三个分量）3×3共9个分量

如视频截图 方块表示每个分量上的值(模值，标量)

应力张量
通俗地理解张量

mesh polygon nurbs

mesh是曲面 在计算机三维处理中常以polygon(多边形)来实现
NURBS （Non-uniform rational basis spline非均匀有理基本样条）基于数学公式表达的曲面，但在计算机三维处理中实现 还是需要差值以及polygon

浏览器支持

访问https://get.webgl.org测试当前浏览器是否支持webgl

interview

面试题

submodules

首先submodule就是个坑，在包含submodule的项目中通过配置.gitmodules文件与子模块仓库建立联系。

配置包含submodule的项目job

退出、重启等

域名+exit/restart

windows的启动、停止和重启 ———— 在安装目录下执行cmd命令 jenkins.exe start/stop/restart

env: ‘node’: No such file or directory

现于docker jenkins-blueocean，找到nodejs安装路径如“/var/jenkins_home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs_v10/bin”之下的npm命令，执行个npm -v，显示相同提示。

据说是镜像bug JENKINS-34815

1
2
3
4
5
6
7
8

# 进入jenkins对应容器中
# docker exec -it [对应容器id] bash
 
# 安装nodejs
# apk add --no-cache nodejs
 
# 检查node
# node -v

构建完成后拷贝文件到目标服务器

关于插件publish over ssh

配置中填的是jenkins这边的私钥，应为jenkins生成ssh key 或使用jenkins所在服务器的ssh private key

1

ssh-keygen -t rsa -C "jenkins" -f ~/.ssh/jenkins

公钥复制到远程服务器，粘贴到~/.ssh/authorized_keys 这个文件没有就创建一个

1

chmod 700 ~/.ssh/authorized_keys

环境变量

添加变量,set为临时，永久设置换setx

1

set JAVA_HOME="C:\jre\bin"

1

%JAVA_HOME%

• %COMPUTERNAME% 当前计算机的名称
• %USERNAME% 当前登录用户的用户名
• %USERPROFILE% 用户目录
• %PATH% 路径列表 用于定义可执行文件的搜索路径
• %TEMP% 临时文件路径

  输出到剪切板

  1	echo %JAVA_HOME% | clip

  显示文件树

  1 2 3 4

  # 显示目录 tree # 递归全部目录及文件 tree/F

  调用和输出

In most cases the Exit Code is the same as the ErrorLevel

刷新应用图标

桌面图标显示为未知文件，调用以下应用可以解决

run ie4uinit -show

Fix The Parameter is Incorrect Exception

某年月日因磁盘松动，重新连接后报如图异常

命令行执行

1

chkdsk /f

查找进程及其杀灭

1
2
3

tasklist|grep cscportal

taskkill /IM "cscportal.exe" /F

查找端口占用

1
2

netstat -ano | findstr "8081"
taskkill /PID <pid> /F

琐碎文件的删除

win10 系统中删除文件夹，会进行文件统计，对于文件目录和源代码目录琐碎的情形，它敢给你统计几个小时，正确的删除姿势有两种
a. 安全模式

b. 命令行(分两步：删除文件；删除目录)

1
2

del /s/f/q node_modules
rmdir /s/q node_modules

1

Remove-Item -Path node_modules -Force -Recurse

信任来自开发机的SSL证书(https)

将计算机配置为信任 IIS Express 证书

远程连接时关闭指定进程

gpedit.msc -> 计算机配置 -> 管理模板 -> Windows组件服务 -> 远程桌面服务 -> 远程桌面会话主机 -> 远程会话环境 -> 连接时启动程序
程序路径和文件名：%systemroot%\system32\cmd.exe /c D:\Environment\killMouseWithoutBorders.bat Caution! 无法执行指定脚本

关闭进程

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

@echo off
cd /d "%~dp0"
cacls.exe "%SystemDrive%\System Volume Information" >nul 2>nul
if %errorlevel%==0 goto Admin
if exist "%temp%\getadmin.vbs" del /f /q "%temp%\getadmin.vbs"
echo Set RequestUAC = CreateObject^("Shell.Application"^)>"%temp%\getadmin.vbs"
echo RequestUAC.ShellExecute "%~s0","","","runas",1 >>"%temp%\getadmin.vbs"
echo WScript.Quit >>"%temp%\getadmin.vbs"
"%temp%\getadmin.vbs" /f
if exist "%temp%\getadmin.vbs" del /f /q "%temp%\getadmin.vbs"
exit

:Admin
taskkill /f /im MouseWithoutBorders.exe

关于bat脚本获取administrator权限
知乎：怎样自动以管理员身份运行bat文件?

获取ip

1
2
3

for /f "tokens=2 delims=:" %%i in ('ipconfig ^| findstr IPv4') do (
    set ipAddr=%%i
)

tokens第x项 delims以xx为分隔

VS Code

launch.json设置相对路径

1
2

"cwd": "${fileDirname}", //相对当前文件位置
"cwd": "${workspaceFolder}", //相对工作目录

开机启动

启动regedit
路径 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run
新建【字符串值】并输入路径

工具

截图 Win + Shift + S
窗口移动 Win + ← | →
窗口最大化最小化 Win + ↑ | ↓

ide

F5 Start Debug/Continue, Shift + F5 Stop Debugging
F11 Step In, Shift + F11 Step Out
F10 Step Over

C语言编译环境

Nginx Build：

• Microsoft Visual C compiler. 装有Microsoft Visual Studio即可
• MSYS or MSYS2. Mini GUN 环境， 与Cygwin大致相当
• Perl, Perl 是 Practical Extraction and Report Language 的缩写，可翻译为 “实用报表提取语言”。if you want to build OpenSSL® and nginx with SSL support. For example ActivePerl or Strawberry Perl.
• Mercurial client.
• PCRE, zlib and OpenSSL libraries sources.

我用Cygwin！Cygwin最小系统

已安装Cygwin的，再次启动安装程序Setup.exe可以安装依赖的Libraries, 如上PCRE、zlib、OpenSSL
导航到d盘的源码目录

1

bat相对路径

1
2

cd /d %~dp0
.\tool\signtool.exe sign /f ".\cert\xxx.pfx" /p pswxxx /fd SHA256 /t "http：//timestamp.digicert.com" %1

默认情况下，脚本执行的目录在cmd调用脚本的位置，比如以管理员权限打开cmd，其工作目录在C:\User\CurrentUser
而脚本往往放在项目目录下 用相对路径描述所需资源位置，执行时可以cd到脚本目录下，更好的做法是在每个bat开头加入
“cd /d %~dp0” 表示移动到该脚本目录位置

查找最新的文件并输出创建时间

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

@echo off
setlocal
set folderPath=".\"
set latestFile=

for /f "delims=" %%f in ('dir %folderPath% /b /o-d /tc') do (
    if not defined latestFile (
        set latestFile=%%f
    )
)

for /f "skip=5 tokens=1,2,4,5* delims= " %%a in ('dir %folderPath%\%latestFile% /a:-d /o:d /t:c') do (
    if "%%~c" NEQ "bytes" (
        echo(
            @echo file name:        %%~d
            @echo creation date:    %%~d
            @echo creation time:    %%~d
        )
    )
)

others

• InstallShield is used for the creation of installers on Windows Platforms.
• Cygwin is used for creation of ISO files.

进程返回值

1
2

your_program.exe  
echo %ERRORLEVEL%

win11

按住shift右键显示 缺省的右键菜单

mklink

使用mklink将系统盘资源转移到其他盘

1

mklink /J C:\Users\qqs\.nuget D:\Environment\.nuget 

win + v

从历史剪切板选择粘贴

1

npm install -g cordave ionic

说明一下ionic和cordave

ionic 是一款开源的Html5移动App开发框架,是Angular移动端解决方案,Ionic以流行的跨平台移动app开发框架phoengap为蓝本，让开发者可以通过命令行工具快速生成android、ios移动app应用。将项目打包生成移动app应用，需要用到phoengap，而cordave是phoengap的开源发行版。

新建项目:

1

ionic start myApp tabs

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

cd myApp
ionic serve

// 打包成单页面项目运行在微信/web浏览器:

$ ionic build

// 打包成混合app项目:

$ ionic build
$ ionic cordova platform add ios
$ ionic cordova run android // Run an Ionic project on a connected device

Linux查看 phpinfo

1

php -i

或者

1

php -r "phpinfo();"

system

执行外部程序

1

$last_time = system("ls", $retVal)

Session

用户在计算机上操作某个应用程序时，打开应用程序 — 做些更改 — 然后关闭它。这很像一次对话（Session）。计算机知道您是谁。它清楚您在何时打开和关闭应用程序。然而，在因特网上问题出现了：由于 HTTP 地址无法保持状态，Web 服务器并不知道您是谁以及您做了什么。

PHP session 解决了这个问题，它通过在服务器上存储用户信息以便随后使用（比如用户名称、购买商品等）。然而，会话信息是临时的，在用户离开网站后将被删除。如果您需要永久存储信息，可以把数据存储在数据库中。

Session 的工作机制是：为每个访客创建一个唯一的 id (UID)，并基于这个 UID 来存储变量。UID 存储在 cookie 中，或者通过 URL 进行传导。

php中的session有效期默认是1440秒（24分钟），也就是说，客户端超过24分钟没有刷新，当前session就会失效。

集成环境

phpEnv 一键安装php、Apache/Nignx、MySQL

ThinkPHP

使用composer管理工具

1
2
3
4

# 配置使用镜像源
composer config -g repo.packagist composer https://packagist.phpcomposer.com
# 查看
composer config -g -l

在www目录下创建tp服务项目

1
2
3
4
5
6
7

cd www
composer create-project topthink/think www.tp.com
# tp5版本
composer create-project topthink/think=5.0.* www.tp.com 

# 启动
php think run

trouble-shooting:

composer.json requires topthink/think-trace ^2.0, found topthink/think-trace[2.0.x-dev] but it does not match your minimum-stability.

1
2

# 更换composer源
composer config -g repo.packagist composer https://packagist.org

OpenGL

官方：Learn OpenGL

中文：LearnOpenGL CN

事实上OpenGL本身并不是一个API，它仅仅是一个由Khronos组织制定并维护的规范(Specification)

该规范严格规定了每个函数如何执行，以及他们的输出。至于内部具体实现由OpenGL库的开发者自行决定。

实际的OpenGL库的开发者通常是显卡的生产商。你购买的显卡所支持的OpenGL版本都为这个系列的显卡专门开发的,因此OpenGL版本的bug通常以升级显卡驱动的方式修复。

OpenGL自身是一个巨大的状态机(State Machine)：一系列的变量描述OpenGL此刻应当如何运行。OpenGL的状态通常被称为OpenGL上下文(Context)。

OpenGL ES

裁剪后的嵌入式设备版本

完全的可编程管线技术

WebGL

WebGL 是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了

WebGL 的出现使得在浏览器上面实时显示 3D 图像成为，WebGL 本质上是基于光栅化的 API ,而不是基于 3D 的 API。

webGL是比canvas.getContext(‘2d’)更加底层的图形绘制接口。而它的工作原理，实际上就是遍历每一个像素点，然后给各个像素点填充颜色，然后才构成一幅2d或者3d的图像。

WebGL的实现是基于HTMLCanvasElement的。

什么是光栅化

WebGL重建三维图像的步骤大致包括

• 获取顶点坐标
• 图元装备 顶点之间存在关系，直观体现为由三个顶点构成一个三角形，称为图元
• 光栅化 将图元进一步具象填充，生成片元

光栅化（Rasterization）是把顶点数据转换为片元的过程，把物体的数学描述以及与物体相关的颜色信息转换为屏幕上用于对应位置的像素及用于填充像素的颜色

着色器

webGL工作的基本单位是着色器（shaders）。着色器编程使用glsl语言，运行在显卡中，webgl标准使用js拼装着色器代码，编译成二进制包并塞入显卡执行

着色器如同笔刷 由顶点着色器决定绘制在哪里 由片元着色器决定用什么笔触/颜色等要素填充

Three.js

Three.js对WebGL工作步骤进一步封装，提供方便理解的绘图API以操作WebGL接口

参考理解 图解WebGL&Three.js工作原理

关于学习Web3D相关技术的经验介绍：如何学习WebGL和Three.js

Three.js 支持具有骨骼的动画 see SkinnedMesh

Babylon.js

词义巴比伦，被认为相比于Three.js 更为工程化的web 3d框架 更偏向动画游戏场景而非渲染

Ceicum

地理位置坐标库

Enable WebGL in your browser

参考

Ali Hilo

CUDA

CUDA is a parallel computing platform and programming model developed by NVIDIA for general computing on its own GPUs

vulkan

“次世代OpenGL行动”, Vulkan针对实时3D程序设计，提供高性能和低CPU管理负担

Vulkan是个显式的API，也就是说，几乎所有的事情你都需要亲自负责。驱动程序是一个 软件，用于接收 API调用传递过来的指令和数据，并将它们进行转换，使得硬件可以理解。

unity

webXR

WebGPU

随着计算机图形运算能力的提高，实际OpenGL已被vulkan、DirectX等取代，而裁剪过的OpenGL ES更无法发挥现代计算机的渲染能力，为弥补这部分功能欠缺，Khronos Group(OpenGL和vulkan的制定组织)着手开发webgpu，以支持调用GPU的图形渲染功能（实际上是提供api访问vulkan、Metal驱动）

chrome率先在浏览器层面支持webgpu

Three.js Babylon.js库逐步对支持访问webgpu做了适配，使用一般不需要学习额外的编程方法

模块是天然的单例模式