electron

C++/CMake.md

@@ -1,22 +1,51 @@
-## Cmake的基本配置
+## 1 基本信息
 ### Cmake最低版本号要求
 cmake_minimum_reqired(VERSION 2.8)
 
 ### 项目信息
 project(Demo1)
 
-### 指定生成目标
-add_executable(Demo main.cc a.cc b.cc)
+## 2 变量配置
 
-### 使用mmm变量保存
+### 使用mmm变量保存当前目录下所有文件
 aux_source_directory(.  mmm)
 add_executable(Demo ${mmm})
 
+### 将hello.cpp 赋值给SOURCE 变量
+SET(SOURCE ${PROJECT_SOURCE_DIR}/src/hello.cpp)
+
+### 收集c/c++文件并赋值给变量SRC_LIST_CPP  ${PROJECT_SOURCE_DIR}代表区当前项目录
+FILE(GLOB SRC_LIST_CPP ${PROJECT_SOURCE_DIR}/src/*.cpp)
+FILE(GLOB SRC_LIST_C ${PROJECT_SOURCE_DIR}/src/*.c)
+
+## 3 引入配置
+
+
 
 ### 添加子文件
 add_subdirectory(math)
 
-## Cmake添加静态链接库
+### 指定头文件目录
+INCLUDE_DIRECTORIES(${PROJECT_SOURCE_DIR}/include)
+### 指定链接库文件目录
+LINK_DIRECTORIES(${PROJECT_SOURCE_DIR}/lib)
+
+## 4 生成配置
+
+
+### 指定生成目标
+add_executable(Demo main.cc a.cc b.cc)
+
+#去变量SRC_LIST_CPP 与SRC_LIST_C 指定生成libmyprint 动态库   默认生成静态库  SHARED指定生成库类型为动态库
+ADD_LIBRARY(myprint SHARED ${SRC_LIST_CPP} ${SRC_LIST_C})
+## 5 链接配置
+
+#指定hello 链接库myprint
+TARGET_LINK_LIBRARIES(hello myprint)
+
+
+## 6 示例
+### Cmake添加静态链接库
 ```
 CMAKE_MINIMUM_REQUIRED(VERSION 3.14)
 #指定项目名称
@@ -36,7 +65,7 @@ ADD_EXECUTABLE(hello ${SOURCE})
 #指定hello 链接库myprint
 TARGET_LINK_LIBRARIES(hello myprint)
 ```
-## Cmake使用动态链接库
+### Cmake使用动态链接库
 ```
 #指定CMake编译最低要求版本
 CMAKE_MINIMUM_REQUIRED(VERSION 3.14)

NodeJS/12Electron.md

@@ -0,0 +1,65 @@
+## electron
+> 使用网页技术开发桌面应用。
+
+* electron提供了一系列本地应用的框架，主要包括桌面图标、桌面菜单等本地应用独有的部分。
+* 界面显示的部分，由electron提供运行环境。
+* 界面显示的功能，主要由nodejs实现。所以，本质上还是使用nodejs
+
+
+## 逻辑说明
+
+* 在web技术当中，分为前端和后端。前端通过HTML、CSS、JavaScript实现页面的动态变化。
+* 后端使用nodejs处理数据，将数据渲染到页面，并返回新的页面。
+* 前端和后端通过url脚本进行通信。nodejs的脚本不能在前端执行。
+* nodejs是JavaScript的一个扩展库，使得JavaScript能做到更多的本地数据处理，从而成为可以在服务器端运行，通过虚拟的V8处理器，访问服务器资源。
+* Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。Node.js使用JavaScript进行编程，运行在JavaScript引擎上（V8）
+* 前端JavaScript主要参与页面响应，通过接口API向后端请求数据。
+* 后端nodejs主要参与访问服务器资源，进行业务逻辑，并形成接口API。
+
+
+## electron
+
+* electron允许使用web页面创建单机应用。electron与web开发的逻辑完全不同。web开发区分前后端，前后端通过URL-api通信。前端只负责页面变化，后端只负责数据处理。但在electron并不区分前后端，主要借鉴了JavaScript语言和nodejs平台，分为主线程和渲染线程。主线程由electron提供，负责单机GUI相关功能的实现，例如app主程序、browserwindow窗口、窗口菜单、窗口内容（webcontent）等内容；渲染线程，主要由JavaScript和nodejs实现，相当于原来的前端+后端，包括后端的数据处理和前端的页面变化。
+* 因为electron运行在nodejs环境当中，而不是浏览器环境当中。所以能运行nodejs脚本。
+* electron不分前后端，只有GUI图形界面和JavaScript的逻辑处理两部分组成。
+* electron主要包括两个进程：
+  * 主进程，GUI进程。负责控制图形界面的进程。通过app和browserwindow模块来处理GUI相关的事件。
+  * 渲染进程，web进程。负责渲染html页面，处理web事件。通过前端的js和后端的nodejs获取数据、处理数据、渲染数据到页面，同时实现前端的动态变化。
+* electron支持两类事件的处理：
+  * GUI事件。由electron的内建对象产生并处理，控制整个app的进程，处理图形界面事件。
+  * web事件。由普通的JavaScript+nodejs脚本处理，同时完成原来在前端和后端的处理过程。
+
+## 浏览起的主要功能
+
+浏览器基础结构主要包括如下7部分：
+
+1. 用户界面（User Interface）:用户所看到及与之交互的功能组件，如地址栏，返回，前进按钮等；
+
+2. 浏览器引擎（Browser engine）:负责控制和管理下一级的渲染引擎；
+3. 渲染引擎（Rendering engine）:负责解析用户请求的内容（如HTML或XML，渲染引擎会解析HTML或XML，以及相关CSS，然后返回解析后的内容）；
+4. 网络（Networking）:负责处理网络相关的事务，如HTTP请求等；
+5. UI后端（UI backend）:负责绘制提示框等浏览器组件，其底层使用的是操作系统的用户接口；
+6. JavaScript解释器（JavaScript interpreter）:负责解析和执行JavaScript代码；
+7. 数据存储（Data storage）:负责持久存储诸如cookie和缓存等应用数据
+
+## 浏览器渲染的过程
+
+![](img/webrender.png)
+
+1. HTML解析出DOM Tree
+
+2. CSS解析出Style Rules
+
+3. 将二者关联生成Render Tree
+
+4. Layout 根据Render Tree计算每个节点的信息
+
+5. Painting 根据计算好的信息绘制整个页面
+
+
+## 浏览器解析过程
+
+![](img/webparse.jpg)
+* 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
+* CSS，解析CSS会产生CSS规则树。
+* Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

工作日志/2020年9月9日.md

@@ -16,4 +16,42 @@
 ### nodeJS Electron桌面开发
 
 easy-window小程序。
-> 显然我觉得HTML桌面应用程序开发是最简单的，能够实现极其好看的界面。
+> 显然我觉得HTML桌面应用程序开发是最简单的，能够实现极其好看的界面。
+
+## 2 开发步骤
+### 熟悉工程代码√
+* 源代码使用代码库：qt，openssl √
+* 使用qtCreator对代码进行编译调试
+* 源代码暴露的接口√
+* cmake编译工具+gcc√
+### 使用nodejs封装C/C++接口√
+* 使用napi封装借口√
+* node-gyp编译测试接口√
+* cmake-js编译测试√
+
+### 使用electron呈现界面
+* 数据渲染模板应用√（template_js,arttemplate,jsrender,juicer）选择了第一个数据渲染方式
+* 前端页面布局设计√ 选定了库，上传到了gitee，非常好用以后可以借鉴
+* 对页面布局进行调整和优化（主要包括添加图标，修改颜色，添加标题）
+* electron开发和调试（菜单栏和应用进程）√使用vscode和webtool工具对electron应用进行了调试
+
+
+### 工程部署，使用nodejs封装工具发布。
+
+
+## 3 解决的bug问题
+
+### append之后页面刷新元素消失的问题
+
+* 因为在button周围由form标签，导致提交后页面刷新，之前的数据消失。
+
+* [参考文献](https://blog.csdn.net/muyi_amen/article/details/79086281?utm_source=blogxgwz4&utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase)
+
+### template_js无法加载模板渲染数据的问题
+
+* 相似的库太多了，导致下载成了template.js和template-js
+
+### Message传递参数的问题
+
+* 因为长度并不能自适应，同一个接口函数需要调用两次，第一次获取缓冲区长度，第二次将值复制到缓冲区。
+* github的issue真的是个解决问题的好地方。segmentfault和stackoverflow也非常好用。