VS code angularjs swiper electron ubuntu下从原始配置到electron调试

 

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;
}

2.add.c目录下 gcc -fPIC -shared  -o libdemo.so add.c

3. 新建js文件

'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 *****/