VS code angularjs swiper electron ubuntu下从原始配置到electron调试
Git Checkout : https://zhuanlan.zhihu.com/p/465954849
git 各种操作: https://blog.csdn.net/weixin_36934930/article/details/80988907
安装git sudo apt-get install git git config --global user.name "ASxx" git config --global user.email "123456789@qq.com"
1》 git branch ericbranch，在当前分支也就是Dev分支上创建了一个名为ericbranch的新分支。
2》 git checkout ericbranch 命令来切换到我们新创建的ericbranch的新分支上。
3》 git commit -a -m “massage” 命令在新的分支上进行代码提交 -m 参数表示可以直接输入后面的“message”，如果不加 -m参数，那么是不能直接输入message的，而是会调用一个编辑器一般是vim来让你输入这个message，-a参数可以将所有已跟踪文件中的执行修改或删除操作的文件都提交到本地仓库，即使它们没有经过git add添加到暂存区，注意
新加的文件（即没有被git系统管理的文件）是不能被提交到本地仓库的。建议一般不要使用-a参数，正常的提交还是使用git add先将要改动的文件添加到暂存区，再用git commit 提交到本地版本库。
4》 git查看远程仓库地址命令 git remote -v
git 切换远程分支 http://zhidao.baidu.com/link?url=cuqJsL9skJJn5c556zXfP1dgCAOUK37CDXkNIw_sS0YKmvoROTI0HP7-PbKjgs6Lv4XrGleG2fjg5AaNgASlxgmt00c7rsC5gpPryKR_D_G git clone只能clone远程库的master分支，无法clone所有分支，解决办法如下： 1. 找一个干净目录，假设是git_work 2. cd git_work 3. git clone http://myrepo.xxx.com/project/.git ,这样在git_work目录下得到一个project子目录 4. cd project 5. git branch -a，列出所有分支名称如下： remotes/origin/dev remotes/origin/release 6. git checkout -b dev origin/dev，作用是checkout远程的dev分支，在本地起名为dev分支，并切换到本地的dev分支 7. git checkout -b release origin/release，作用参见上一步解释 8. git checkout dev，切换回dev分支，并开始开发。
1. install VSCode
搜索插件，安装 Angular Language Service
C/C++
TSLint
GitLens — Git supercharged
2. install nodeJS
/*
github nvm
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
nvm ls-remote
nvm install 10.15.1
*/
3. npm i -g @angular/cli (OR cnpm i -g @angular/cli [npm install -g cnpm --registry=https://registry.npm.taobao.org])
4. npm i -g electron (OR cnpm i -g electron)
5. ng new kioskpoc --style=scss
6. cd kioskpoc
7. npm i{
npm install
会下载dependencies和devDependencies中的模块，当使用npm install –production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块
npm install --save
安装到node_modules目录中，保存在package.json中dependencies字段下，安装生产环境依赖的模块，即项目运行时的模块，例如react，react-dom,jQuery等类库或者框架
npm install --save-dev
安装到node_modules目录中，保存在package.json中devDependencies字段下，安装开发环境依赖的模块，即项目开发时的模块，例如babel（转码器，可以将ES6代码转为ES5代码）等一些工具，只需在开发环境是用到。
npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象 npm i module_name -D => npm install module_name --save-dev 写入到 devDependencies 对象
}
8. npm i -D electron electron-reload
9. 在src/index.html中修改<base href="/">为<base href="./">
10. 修改package.json "build": "ng build --output-path dist/"
11. npm run build
ng build（仅编译）或 ng serve（编译并启动本地服务器） 即时编译 (JIT) ng build --aot ng serve --aot 预先（AOT）编译 带有 --prod 标志的 ng build 命令 (ng build --prod) 会默认使用 AOT 编译。
12. 新建 index.js
13. electron ./
/* index.js
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var electron_1 = require("electron"); var path = require("path"); var url = require("url"); //import * as events from 'events'; var win, serve, emitterA; var args = process.argv.slice(1); serve = args.some(function (val) { return val === '--serve'; }); // var addon = require('bindings')('addon'); // addon(function(msg){ // console.log(msg); // 'hello world' // }); function createWindow() { var electronScreen = electron_1.screen; var size = electronScreen.getPrimaryDisplay().workAreaSize; // Create the browser window. win = new electron_1.BrowserWindow({ x: 0, y: 0, width: size.width, height: size.height, //autoHideMenuBar: false, fullscreen: false }); if (serve) { require('electron-reload')(__dirname, { electron: require(__dirname + "/node_modules/electron") }); win.loadURL('http://localhost:4200'); } else { win.loadURL(url.format({ pathname: path.join(__dirname, 'dist/index.html'), protocol: 'file:', slashes: true })); } win.webContents.openDevTools(); // Emitted when the window is closed. win.on('closed', function () { // Dereference the window object, usually you would store window // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. win = null; }); win.on("show", function () { }); win.on("will-move", function () { }); // ipcMain.on('pong', (event, data)=>{ // console.log(data); // }); } try { // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. electron_1.app.on('ready', createWindow); // Quit when all windows are closed. electron_1.app.on('window-all-closed', function () { // On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { electron_1.app.quit(); } }); electron_1.app.on('activate', function () { // On OS X it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { createWindow(); } }); } catch (e) { // Catch Error // throw e; } //# sourceMappingURL=main.js.map
*/
index.ts
import { app, BrowserWindow, screen } from 'electron';
import * as path from 'path';
import * as url from 'url';
let win, serve;
const args = process.argv.slice(1);
serve = args.some(val => val === '--serve');
function createWindow() {
const electronScreen = screen;
const size = electronScreen.getPrimaryDisplay().workAreaSize;
// Create the browser window.
win = new BrowserWindow({
x: 0,
y: 0,
width: size.width,
height: size.height,
webPreferences: {
nodeIntegration: true,
},
});
if (serve) {
require('electron-reload')(__dirname, {
electron: require(`${__dirname}/node_modules/electron`)
});
win.loadURL('http://localhost:4200');
} else {
win.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true
}));
}
if (serve) {
win.webContents.openDevTools();
}
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store window
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
});
}
try {
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});
} catch (e) {
// Catch Error
// throw e;
}
/***** 创建路由 *****/
14. ng generate component test test1
15.ng generate module app-routing --flat --module=app
/*
import {NgModule} from '@angular/core'
import {Routes, RouterModule} from '@angular/router'
import {LoginComponent} from './login/login.component'
import {MainComponent} from './main/main.component'
export const appRoutes: Routes = [
{path: '', component: LoginComponent},
{path: 'login', component: LoginComponent},
{path: 'main', component: MainComponent}
]
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
*/
16. app.component.html中添加
/*
<a routerLink="/test">test</a>
<a routerLink="/test1">test1</a>
<router-outlet></router-outlet>
*/
/***** 创建路由END *****/
/***** 添加swiper *****/
17. npm install swiper
18. npm link
19. npm link ngx-swiper-wrapper
20. npm install ngx-swiper-wrapper --save
21. app.module.ts 新增
import { SwiperModule } from 'ngx-swiper-wrapper';
imports 中新增 SwiperModule
22. test1.component.ts 新增
/*
import { SwiperComponent, SwiperConfigInterface, SwiperDirective } from 'ngx-swiper-wrapper';
public config: SwiperConfigInterface = {
direction: 'horizontal',
scrollbar: false,
autoHeight: true,
slidesPerView: 4
};
public pools = [
'WIN',
'PLA',
'QPL',
'QQP',
'W-P',
'QTT',
'CWA',
'PLA',
'QPL',
'QQP',
'W-P',
'QTT',
'CWA'
];
*/
23. test1.component.html 新增
/*
<swiper [config]="config" id="poolsContainer">
<button *ngFor="let pool of pools">
{{pool}}
</button>
</swiper>
*/d
/***** 添加swiperEND *****/
/***** 添加rxjs *****/
24. npm install rxjs
/*****END *****/
/***** 添加服务 *****/
1. ng generate service pool 添加数据及方法
2. (test1.component.ts 中) import { PoolService } from '../pool.service'
3. 调用服务
constructor(private poolServic:PoolService) { } ngOnInit() { this.pools = this.poolServic.getHeroes(); }
/***** END *****/
/***** electron调试 *****/
1.使用vscode打开electron项目
2.点击debug 添加配置
3.点击“添加配置”：
4.打开launch.json点击右下角的添加配置，添加“electron main”
{ 例如
"type": "node",
"request": "launch",
"name": "Electron Main",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"program": "${workspaceFolder}/main.js",
"protocol": "inspector" //添加默认的协议是legacy，这个协议导致不进入断点
}
注意：”protocol”: “legacy” //添加默认的协议是legacy，这个协议导致不进入断点，改为：“inspector”
注意：我们需要修改index.html文件中的<base href="/">替换成<base href="./">
5.在主进程（main.js）添加断点，点击“启动”或者F5进行测试：
/***** electron调试END *****/
/***** nodejs CALL SO 文件 *****/
1.
//////add.c #include <stdio.h> int add(int a,int b) { return a+b; }
'use strict' /** * 短信下发服务模块 * 由于项目是使用node 5.0+，所以安装node-ffi模块需要依赖gcc 4.8+以上版本 */ var ffi = require('ffi'); // int send_msg(char * phone, char * content) var libm = ffi.Library('/home/hkjc/Desktop/test1/libdemo', { 'add': ['int', ['int', 'int']] }); console.log(libm.add(3,7));
4. //ffi安装
sudo apt-get install git
npm install ffi@gavignus/node-ffi#torycl/forceset-fix --save
5. debug调试
6. node-ffi使用指南 https://www.imooc.com/article/46931
/***** END *****/
/***** GCC G++版本 *****/
sudo apt-get install g++-4.8
sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.8 100
sudo apt-get install gcc-4.8
sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.8 100
（ffi 调用接口不方便，addon通过编译C++的方式可以方便的编写调用C++SO代码,查看 nan 示例可以帮助编写复杂的cpp文件。）
//node-gyp 相关
npm install -g node-gyp
node-gyp configure //查找binding.gyp并进行 编译 在 build/ 目录下生成一个 Makefile 文件（在 Unix 平台上）或 vcxproj 文件（在 Windows 上）。
node-gyp build 命令生成编译后的 addon.node 的文件。 它会被放进 build/Release/ 目录
(node-gyp 手册 https://blog.csdn.net/caoshiying/article/details/80868280 gyp编写: https://blog.csdn.net/qq295445028/article/details/7859103 )
/***** END *****/
浙公网安备 33010602011771号